개인 개발 보고서

1. 프로젝트 개요

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

2. 담당한 작업

프론트엔드 구현:

페이지와 컴포넌트 모두 반응형 UI로 모바일, 태블릿, PC 환경에서도 최적화된 경험 제공

• 컴포넌트
  • 탭바 컴포넌트 구현:
    • 상태 변경 및 라우팅 기능을 지원하며, 최대 3개의 탭을 선택할 수 있는 인터페이스 컴포넌트 생성
  • 버튼 컴포넌트 구현:
    • 다양한 스타일(솔리드, 아웃라인, 에러 부분)과 크기로 사용할 수 있는 컴포넌트 생성
    • 이미지 추가 및 텍스트 수정이 가능한 커스터마이징 기능 구현
  • 모달 컴포넌트 구현:
    • 다양한 상황에서 활용 가능한 재사용형 모달 컴포넌트 생성
    • 사용자가 모바일에서 작성을 하는 경우, 모바일에서 보기 좋은 인터페이스 구현
  • 로딩 스피너 컴포넌트 구현:
    • 데이터 로딩 상태를 시각적으로 표현하는 컴포넌트 생성
    • 애니메이션 활용
  • 견적 정보 컴포넌트 구현:
    • 견적 요청의 상세 정보를 제공하는 컴포넌트 생성
  • 에러 핸들 컴포넌트 구현:
    • 데이터가 없거나 에러 발생 시 보여주는 컴포넌트 생성
    • 이미지 선택, 텍스트 작성이나 error.message 및 버튼으로 리다이렉트 기능 추가
• 페이지
  • 대기 중인 견적 페이지:
    • 사용자가 요청한 현재 진행 중인 견적 정보를 확인하고, 견적 확정 및 상세 보기가 가능
  • 이사 리뷰 페이지:
    • 2개의 탭으로, 작성 가능한 리뷰와 내가 작성한 리뷰 목록을 조회
    • 이사가 완료된 기사님에게 리뷰 작성이 가능
  • 찜한 기사님 페이지:
    • 사용자가 찜한 기사님 목록 조회
  • 기사님 마이 페이지:
    • 기사님이 자신의 프로필 카드와 받은 리뷰 확인 가능
    • 기본 정보 수정 및 프로필 수정 페이지로 이동 가능
  • 404 페이지:
    • 사용자가 존재하지 않는 url로 페이지에 접근했을 때 표시되는 에러 페이지
    • 잘못된 경로나 없는 페이지 접근 시, 404와 안내 메시지와 함께 메인 페이지로 이동할 수 있는 버튼 제공

3. 기술적 성과

• 기술 스택:
  • 프론트엔드: React, TypeScript, CSS Modules
  • 상태 관리: React Query
  • API 통신: Axios
• 구현한 주요 기능:
  • 반응형 페이지네이션: 디바이스 크기에 따라 페이지네이션 데이터를 동적으로 관리.
  • 다양한 공통 컴포넌트 제작: 많은 빈도로 사용되는 컴포넌트를 여러 상황을 고려하여 사용가능하도록 구현.
  • 영어로 된 배열 데이터를 한글로 변환: 영어로 이루어진 배열 데이터를 받으면, 한글 배열로 바꿔 사용 가능하도록 유틸리티 구현 (translateServiceRegion, translateServiceType)

4. 문제점 및 해결 과정

• 너무 다양한 조건의 공통 컴포넌트
  • 공통 컴포넌트의 재사용성을 높이기 위해 활용되는 상황을 살펴보다 보니, 생각보다 너무 다양한 조건으로 인해 구현 당시 복잡함을 느낌
  • 해결: classname 라이브러리를 통해 CSS 클래스 이름을 동적으로 관리하고 생성하여 다양한 조건을 간결하게 표현함
• 받아오는 데이터 필드의 불일치
  • api 연동 후 받아오는 데이터들의 필드명이 일치하지 않아 오류 발생
  • 해결: 백엔드 파트와 커뮤니케이션을 통해 필드명 통일하는 작업 진행

5. 협업 및 피드백

• 협업:
  • GitHub PR 리뷰 규칙과 commit 규칙을 미리 정하고, 무조건 지키도록 노력함
  • PR에서는 과반의 승인이 있어야 merge가 가능하게 설정
  • 문제 발생 시, 디스코드나 zoom을 통해 소통
• 피드백:
  • PR에서 과반의 승인이 있어야 merge가 가능해 최대한 다른 팀원의 코드를 보게 돼서 효과적.
  • 서로의 코드 리뷰를 통해 배울 점이 많음을 체감

6. 코드 품질 및 최적화

• 컴포넌트 재사용성 높임:
  • 최대한 하나의 컴포넌트로 팀원들이 편하게 사용할 수 있게 필요한 상태나 스타일 등의 여러 경우의 사용되는 상황을 미리 확인하여 어디에든 사용할 수 있게끔 구현
  • classname 라이브러리를 활용하여 여러 경우의 스타일을 다룰 수 있게 구현
  • 예: Button.tsx, Modal.tsx , Tab.tsx 등