🔗 LINK: **GitHub | 42Cabi 사이트 | Figma**

프로젝트 개요

• 42서울 공식 사물함 대여 서비스
• 사물함 대여
  • 사용자가 쉽게 캐비닛을 찾을 수 있도록 층별 사물함 지도 제공
  • 클러스터에 방문할 필요 없이 캐비닛 대여 / 반납 지원
  • 반납이 지연된 경우, 이용 제한을 하여 클린한 대여 서비스 유지
• 관리자 페이지
  • 대시보드
    • 사물함 이용 현황, 월간 사용자 추이, 연체 유저 관리
  • 검색 및 검색 미리보기 기능 제공
  • 사물함 상태 변경 및 관리
  • GA(Google Analytics)를 활용한 서비스 관련 통계 확인

참여 인원

• 팀원: 10명 (FE 4, BE 6) + a(후속 기수)

주요 역할

• 기획, 디자인, 프론트엔드 개발

사용 기술

• React, TypeScript, Recoil, Figma

세부 내용

• 팀에 합류한 후, 프론트엔드 코드 컨벤션을 제안해 체계를 구축했으며, 새로운 디자인을 제안해 모두의 동의를 얻어 서비스 리뉴얼을 성공적으로 진행했습니다.
• 학생들과 직원들을 위한 클라이언트 페이지와 백오피스를 구분지어 UI를 설계하고, 학생은 주로 모바일, 직원들은 주로 PC를 통해 사이트를 이용한다는 점을 고려하여, 모든 기기에서 원활하게 작동할 수 있는 반응형 웹을 구축했습니다.
• 백오피스를 사용하는 직원분들의 자주 사용하는 기능을 조사한 후, 그 기능들을 홈 화면에 추가하여 관리의 효율성을 높였습니다. 홈 화면에 반납 지연 사물함과 연체 유저 상황을 한눈에 볼 수 있는 대시보드를 설계했으며, 사물함 번호와 유저를 구분할 필요 없이 간편하게 검색할 수 있는 통합 검색창을 개발해 사용성을 크게 개선했습니다.
• 개발 외적으로는 다음 기수 선발을 위해서 면접관 역할을 맡아, 여러 지원자의 면접에 참여하며 지원자의 강점과 잠재력을 파악하는 경험을 쌓았습니다.
• 다음 기수분들의 학습을 돕기 위해 4개의 시리즈로 구성된 온보딩 자료(링크)를 제작했습니다.

홈: 사물함 유형, 사이트 이용 방법 설명

메인: 사물함 층-섹션 별 현황 확인, 대여 / 반납 기능 제공

관리자 홈: 연체자 관리, 사물함 사용 추이 등을 나타내는 대시보드

• 추가 사진 보기