Project

2023.10 ~ 2023.11

농구 경기 인원 모집 서비스

Team Project (FE4, BE4) - Frontend 팀장

**시연 영상 | 배포 링크** | **GitHub** | 팀 노션

[역할]

글 작성 기능 및 페이지 구현
- React-hook-form을 사용한 비제어 컴포넌트 방식으로 사용자 입력에 대한 리렌더링 최소화
- 스크롤로 간편하게 값을 선택할 수 있는 컴포넌트를 제작하여 사용자의 입력, 유효성 검사 간편화
- toast 메시지를 사용하여 알림 메시지 구현을 통해 예외처리 (중복된 이름 등), 사용자 경험 향상
- 카카오 우편번호 서비스를 연동하여 주소 검색기능 구현
알림 기능, 알림창 페이지 구현
- SSE를 사용해 단방향 통신을 통한 실시간 알림 기능 구현
- Tanstack Query를 사용하여 알림과 관련된 캐시 갱신, 상태 업데이트
- toast 알림 메시지, 스켈레톤 UI를 활용하여 사용자 경험 향상
Tanstack Query와 Suspense를 활용하여 데이터 로딩 및 에러 처리를 선언적, 효율적으로 처리
서버 단의 구현과 병렬적으로 기능을 개발할 수 있게 MSW를 사용하여 API mocking
랭킹 시스템, 페이지 구현
- React 18v의 flushSync를 사용하여 모달 상태를 동기화 처리하여 모달이 닫히지 않는 문제 해결
협업, 일정관리
- GitHub Project를 사용해서 칸반보드를 제작, 태스크 세분화로 구성원간의 업무추적 용이
- GitHub Issue, PR Template 제작
- Figma를 사용한 페이지 디자인 및 협업
- 일관된 코드 작성을 위해 ESLint, Prettier, Husky 등 적용

기술 스택

React, TypeScript, Emotion, React-Hook-Form, Tanstack-Query, MSW, Vercel, Axios, Zustand