1. 프로젝트 개요
- 제목
- 소개
- 이사 시장에서는 무분별한 가격 책정과 무책임한 서비스 등으로 인해 정보의 투명성 및 신뢰도가 낮은 문제가 존재합니다. 이러한 문제를 해결하기 위해, 소비자가 원하는 서비스와 주거 정보를 입력하면 이사 전문가들이 견적을 제공하고 사용자가 이를 바탕으로 이사 전문가를 선정할 수 있는 매칭 서비스를 제작합니다. 이를 통해 소비자는 견적과 이사 전문가의 이전 고객들로부터의 후기를 확인하며 신뢰할 수 있는 전문가를 선택할 수 있고, 소비자와 이사 전문가 간의 간편한 매칭이 가능합니다.
2. 담당한 작업
- 프론트엔드
- 공통컴포넌트 제작
- 리뷰쓰기, 견적 보내기, 견적 반려하기 모달 컴포넌트
- 페이지네이션
- 캘린더
- 페이지 구현
- 일반유저측 견적 요청 페이지
- 기사님측 받은 요청 페이지
- 백엔드
- QA
- 발표자료 제작 및 발표
3. 기술적 성과
- 프로젝트에서 사용한 기술 스택
- Next.js(App router), TypeScript, MUI, Zustand 등
- 구현한 주요 기능
- 공통컴포넌트
- MUI의 Breakpoint 시스템 활용해 모바일,태블릿에도 대응하는 반응형 디자인을 구현
- 공통컴포넌트를 사용하는 페이지 담당자와의 소통으로, 실사용 시 필요한 props를 넘겨받고 사용에 불편함이 없도록 수정
- 일반 유저(고객) 측 견적 요청 페이지
- zustand를 이용해 requestStore를 생성하여 새로고침하거나 다른 페이지로 넘어갔다 돌아와도 견적 요청 입력값 유지
- Daum 우편 서비스 연동
- 기사님 측 받은 요청 페이지
- 커서기반 페이지네이션 무한스크롤 기능 구현
- 필터링 기능
- 버튼 비활성화 후, MUI Tooltip을 이용하여 비활성화 버튼에 마우스를 호버할 경우 안내 메세지 띄움
- 견적 보내기 모달 컴포넌트를 이용한 견적 요청 POST
- 반려 모달 컴포넌트를 이용한 반려 POST
- 여러가지 동작에 대한 적합한 스낵바 메세지 적용
4. 문제점 및 해결 과정
- 미션때부터 구현이 잘 안되었던 무한스크롤 기능을 중급 프로젝트 때는 어찌저찌 동작 시켰으나, 이번 프로젝트를 통해 로직을 확실히 이해하고 구현함
-
- 커서 기반 무한스크롤 Dto 작성
-
- API 요청 함수 작성
-
- useInfiniteQuery 사용한 무한스크롤 훅 작성
-
- 페이지에서 데이터 활용
- 중복 렌더링 문제 해결
- 필터링 후 스크롤을 내려 다음 페이지를 받아오면 중복된 데이터가 렌더링되는 문제가 있었다.
- useMemo를 통해 estimateItems를 구성할 때, requestId를 기준으로 중복 데이터를 제거함으로써 filteredItems에서 더 이상 중복된 key가 생성되지 않음
5. 협업 및 피드백
- 데일리 스크럼의 중요성
- 지난 프로젝트와 마찬가지로 팀장님 주도 하에 매일 오전 데일리스크럼을 진행했다. 처음에는 형식적으로 느껴졌던 짧은 미팅이었지만, 점차 서로의 업무 상황을 빠르게 파악하고 의사소통이 필요한 부분을 초기에 인지할 수 있게 되어 좋았다. 데일리스크럼 시간에는 주로 간단하게 팀원별 업무진행도와 오늘의 예상업무를 주고받고, 전날 올라온 PR에 대해 코드리뷰, 회의가 필요한 경우 진행했는데, 이러한 시간은 앞으로의 프로젝트에서도 꼭 유지해야 한다고 느꼈다.
- 코드리뷰
- 팀원이 코드를 보고 ‘어느 방향으로 수정하면 더 좋을 것 같다.’ ‘이 부분은 잘못된 것 같다.‘ 짚어주니 내가 작성한 코드를 다시 한번 되돌아볼 수 있었고, 코드 품질을 향상시킬 수 있어 좋았다. 하지만
나는 다른 사람의 코드를 구조적으로 이해하는 데 어려움이 있어 충분한 리뷰를 남기지 못해 아쉬움이 있었다. 이를 통해 나 역시 내 코드를 읽는 사람이 어렵게 느꼈을 수 있겠구나 하고 생각하게 되었고, 가능한 한 주석과 명확한 흐름으로 작성해야겠다고 다짐하게 되었다.
6. 코드 품질 및 최적화
- 주석 작성
- 코드의 흐름을 따라 의도를 명확히 파악할 수 있도록 주석을 작성하려 노력했다.
- 특히 로직이 복잡하거나 조건이 다양한 부분에는 설명을 추가하여, 나중에 다시 봤을 때도 이해하기 쉬운 코드로 만들고자 했다.
- 공통 컴포넌트 사용
- 버튼, 모달, 에러 메시지 출력 UI 등을 공통 컴포넌트로 통일하여 일관된 사용자 경험을 제공했다.