3팀-Moving-FE

📅 2025.01.06 ~ 2025.02.25

📣 Overview

📖 소개 (Introduction)

Moving은 사용자들이 다양한 이사 서비스를 편리하게 요청하고, 이사 업체로부터 견적을 받을 수 있도록 돕는 온라인 플랫폼입니다.

• 사용자는 자신의 이사 유형(소형 이사, 가정 이사, 기업·사무실 이사 등)에 맞는 서비스를 선택한 후, 간편하게 견적 요청을할 수 있습니다.
• 원하는 이사 업체를 검색하고 원하는 업체에 직접 견적 요청을 할 수 있는 기능을 제공합니다.
• 개인정보를 노출시키지 않고 원하는 업체와 실시간 채팅으로 이사 정보에 대해서 소통할 수 있습니다.
• 각 업체의 리뷰를 모두 볼 수 있으며, 요약된 리뷰, 리뷰 키워드 분석 등 많은 정보를 토대로 업체를 선정할 수 있습니다.
• 업체도 고객님들의 이사 정보에 대해서 카카오 맵을 통해 웹사이트 내에서 바로 위치를 파악할 수 있습니다.

---

🚚 배경 (Background)

이사 서비스 시장은 기존에 오프라인 중심으로 운영되었으며, 고객들은 여러 업체에 일일이 연락하여 견적을 비교하는 불편함을 겪었습니다. Moving은 이러한 문제를 해결하기 위해 온라인에서 손쉽게 이사 견적을 비교하고, 신뢰할 수 있는 이사 업체를 찾을 수 있도록 지원하는 플랫폼으로 등장하였습니다.

디지털화된 이사 견적 시스템을 통해 고객들은 보다 효율적인 비용 비교와 업체 선택이 가능하며, 이사 업체들도 온라인을 통해 더 많은 고객을 만날 수 있는 기회를 얻게 됩니다.

이제 사용자는 Moving을 통해 보다 간편하고 투명한 이사 경험을 할 수 있습니다.

---

🔗 관련 링크

🌐 Moving 홈페이지 바로가기
📄 API 명세서 바로가기
📂 Back-End Repository
📘 Moving team 협업 문서

---

🔎 목차

1. 팀원 구성
2. 기술 스택
3. R&R
4. 팀원별 구현 기능 상세
5. 프로젝트 환경 변수 설정

---

👨‍👨‍👧 팀원 구성

박효빈 Frontend

김재원 Frontend

이도엽 Frontend

---

📚 기술 스택

FrontEnd

Infrastructure

Tools

Etc

---

🙋‍♂️ R&R

김재원

• 프론트엔드 회의 정리
• 총괄

이도엽

• 노션 프론트엔드 페이지 정리
• 프론트엔드 일정 관리
• 프론트엔드 깃허브 README.md

박효빈

• PPT 제작
• 발표
• 피그마 제작 및 수정
• 초기 세팅 & 배포 자동화

---

🖥 팀원별 구현 기능 상세

김재원

랜딩 페이지

• 비회원
• 일반 유저
• 기사님

기사님 상세 페이지

• 비회원
• 일반 유저
• 기사님

내 견적 관리 페이지

• 대기 중인 견적 상세 페이지 (일반유저)
• 받았던 견적 상세 페이지 (일반 유저)
• 확정 견적 상세 페이지 (드라이버)

마이 페이지

• 기사님

페이지 외 고도화

• ReactQuery hook
• Storybook 작성
• Jest 유닛 테스트 코드 작성
• web share api 공유하기 기능 추가
• 랜딩 페이지 권한 설정(비회원, 일반유저, 기사님) 및 이사 정보 생성 UX
• 라이트/다크 모드 기능
• Framer-Motion + React-Spring 기능
• Skeleton UI 기능

---

이도엽

프로필 등록 & 수정 페이지

• 일반 유저
• 기사님

기본 정보 수정 페이지

• 기사님

견적 요청 & 수정 페이지

• 일반 유저

리뷰 페이지

• 작성 가능한 리뷰 페이지 (일반유저)
• 내가 작성한 리뷰 페이지 (일반유저)

실시간 채팅 페이지

• 일반 유저
• 기사님

페이지 외 고도화

• Storybook 작성
• Jest 유닛 테스트 코드 작성
• 프로필 수정 페이지 비밀번호 확인 ui & 기능 구현 (일반유저 || 소셜로그인 유저)
• 프로필 등록 페이지 경력 시작 calendar ui & 기능 구현
• 견적 요청 페이지 시간 선택 ui & 기능 구현
• 유저 & 소셜로그인 유저에 대한 계정 검증 ui 및 기능 구현
• 견적 요청 페이지 랜딩 페이지 이사 유형 연결
• 채팅 페이지 실시간 웹소켓 통신 & 온라인 유무 & 작성중 유무 & 사진 삽입 ui & 무한스크롤 기능 구현
• social login verify page

---

박효빈

로그인 & 회원가입 페이지

• 일반 유저
• 기사님

기사님 찾기 페이지

• 비회원
• 일반 유저

받은 요청 페이지

• 기사님

내 견적 관리 페이지

• 대기중인 견적 페이지 (일반 유저)
• 견적 요청 수정 및 취소 페이지 (일반 유저)
• 받았던 견적 페이지 (일반 유저)
• 확정 견적 페이지 (드라이버)
• 내 견적 관리 - 반려 견적 요청 페이지 (드라이버)

찜한 기사님 페이지

• 일반 유저

소셜로그인 콜백 페이지

• naver
• google
• kakao

NotFound 페이지

공통

• Headless 컴포넌트 제작
• Nav ui
• Empty ui

페이지 외 고도화

• Storybook 작성
• Jest 유닛 테스트 코드 작성
• 카카오맵 API & ui
• PWA 기능 제작
• 음성인식 기능 제작
• Skeleton UI 기능
• 리뷰 요약 API 연결 및 ui 추가
• 키워드 분석 API 연결 및 ui 추가
• access token middleware 작성
• 알림 & 프로필 모달 ui
• useGeolocation hook
• 실시간 알림 웹소켓 통신

---

🔑 프로젝트 환경 변수 설정

프로젝트의 루트 디렉토리에 .env 파일을 생성합니다.
이 파일에 아래와 같은 환경 변수 항목을 추가해주세요.
(실제 값은 여러분의 환경에 맞게 입력해야 합니다.)

NEXT_PUBLIC_BASE_URL=<your-backend-api-url>
NEXT_PUBLIC_KAKAO_API_KEY=<your-kakao-api-key>
NEXT_PUBLIC_KAKAO_MAP_KEY=<your-kakao-map-api-key>
NEXT_PUBLIC_KAKAO_REST_KEY=<your-kakao-rest-api-key>

---