개인 개발 보고서

1. 프로젝트 개요

• 이사 소비자와 이사 전문가 매칭 서비스
• 이사 시장에서는 무분별한 가격 책정과 무책임한 서비스 등으로 인해 정보의 투명성 및 신뢰도가 낮은 문제가 존재합니다. 이러한 문제를 해결하기 위해, 소비자가 원하는 서비스와 주거 정보를 입력하면 이사 전문가들이 견적을 제공하고 사용자가 이를 바탕으로 이사 전문가를 선정할 수 있는 매칭 서비스를 제작합니다. 이를 통해 소비자는 견적과 이사 전문가의 이전 고객들로부터의 후기를 확인하며 신뢰할 수 있는 전문가를 선택할 수 있고, 소비자와 이사 전문가 간의 간편한 매칭이 가능합니다.

2. 담당한 작업

프론트엔드 구현:

• 찜하기 및 SNS 공유
  • 소비자는 기사님을 찜하기 기능으로 저장하고 찜한 기사님 페이지에서 이를 확인할 수 있습니다.
  • PC 화면에서는 기사님 찾기 페이지 좌측에 찜한 기사님 3명까지 표시됩니다.
  • 기사님 정보를 SNS에 공유 가능
    • 예시: "이사를 준비하시나요? ⭐️ OOO 기사님을 추천합니다! 무빙에서 확인해 보세요! <기사님 상세 페이지 URL>"
• 견적 요청
  • 소비자는 채팅 형태의 인터페이스를 통해 간편하게 이사 정보를 입력하고 견적을 요청할 수 있습니다.
  • 입력 항목: 이사 종류, 이사 날짜, 출발지 및 도착지 주소
  • 카카오 우편번호 서비스를 활용해 정확한 주소 입력 가능
  • 프로그래스 바로 입력 진행 상황을 시각적으로 확인 가능
  • 각 입력 항목에 있는 수정하기 버튼을 통해 입력 내용 수정 가능
  • 요청한 견적은 대기 중인 견적 페이지에서 확인 및 취소 가능
• 실시간 알림 제공
  • 새로운 견적 도착, 견적 확정, 이사 일정에 대한 알림 제공

코드 최적화:

• 칩 기능:
  • 한 줄에 들어갈 칩 개수를 보여지게 하는 기능 구현
• 데이터 처리 및 에러 핸들링:
  • API 통신에서 발생하는 에러를 통합적으로 처리하고, 상태 관리와 UI에 반영.
  • 예: 견적 생성 및 반려 시 서버에서 반환된 에러 메시지를 모달로 표시.

3. 기술적 성과

프로젝트의 전반적 기술 스택:

• 프론트엔드:
  • React와 TypeScript를 활용하여 안정적이고 확장 가능한 코드베이스 구축.
  • React Query를 통한 서버 상태 관리로 데이터의 최신성을 유지하고, 캐싱을 활용하여 네트워크 요청을 최적화.
  • CSS 모듈을 사용하여 디자인 시스템을 구현하고, 컴포넌트 재사용성을 강화.
  • classnames 라이브러리로 동적 클래스 관리 및 조건부 스타일링 적용.
• 백엔드 연동:
  • RESTful API를 통해 데이터 송수신.
  • Axios를 활용한 HTTP 요청 및 커스텀 에러 핸들링.

4. 문제점 및 해결 과정

문제 1. 대기중인 견적 기사님 찾기 페이지에서 보이지 않는 문제

• 상황:
  • 대기중인 견적 칩이 기사님 찾기 페이지에 보이지 않아 유저는 기사님 상세페이지를 누르고 지정 견적을 요청해야만 요청이 가능한 기사인지 아닌지 파악할 수 있게 됨.
• 과제:
  • 유저가 기사님 상세페이지를 누르지 않아도 이미 기사님이 견적이 보냈다는 걸 알게 해야 함.