개인 개발 보고서

1. 프로젝트 개요

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

2. 담당한 작업

프론트엔드 구현:

• 카드 컴포넌트 구현:
  • 고객 사용자와 기사 사용자를 상황에 따라 다르게 표시되는 카드 컴포넌트 생성.
  • 반응형 UI로 모바일, 태블릿, PC 환경에서도 최적화된 경험 제공.
• 요청 목록 조회:
  • 사용자가 받은 견적 요청 목록을 조회하고, 상태 별로 필터링 및 정렬 가능하도록 구현.
  • 반응형 UI로 모바일, 태블릿, PC 환경에서도 최적화된 경험 제공.
• 요청 견적 작성:
  • 사용자가 받은 견적 요청 목록을 통해 견적을 작성하거나 반려함
  • 반응형 UI로 모바일, 태블릿, PC 환경에서도 최적화된 경험 제공.
• 견적 목록 조회:
  • 사용자가 보낸 견적 목록을 조회
  • 탭을 통해 조건 별로 견적 목록을 조회 (일반 견적, 확정된 견적, 취소/반려된 견적)
  • 반응형 UI로 모바일, 태블릿, PC 환경에서도 최적화된 경험 제공.
• 견적 상세 조회:
  • 사용자가 보낸 견적의 상세 페이지를 조회
  • 반응형 UI로 모바일, 태블릿, PC 환경에서도 최적화된 경험 제공.

코드 최적화:

• 시간 / 금액 변환 기능:
  • 시간과 금액을 한국 기준에 맞춰 변환해서 반환
• 칩 배열 반환 기능:
  • 한 줄에 들어갈 칩 개수를 사용자가 정의할 수 있게 기능 구현
• 주소 간소화 기능:
  • 다양한 형태의 주소 데이터를 간소화하는 simplifyAddress 유틸리티 함수 구현.
  • 예: "서울특별시 강동구 고덕로 82" → "서울 강동구" 형식으로 간소화.
• 프로필 이미지 관리:
  • localStorage를 활용해 사용자별 랜덤 프로필 이미지 고정 기능 구현.
  • 예: 사용자 프로필 사진이 없을 경우, 고유 ID를 기준으로 동일한 랜덤 이미지를 반환하도록 설정.
• 데이터 처리 및 에러 핸들링:
  • API 통신에서 발생하는 에러를 통합적으로 처리하고, 상태 관리와 UI에 반영.
  • 예: 견적 생성 및 반려 시 서버에서 반환된 에러 메시지를 모달로 표시.

3. 기술적 성과

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

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