Codeit / 풀스택_1기_PART4_TEAM1

📋 무빙 - 프로젝트 문서

💻 GitHub Repository

🌐 무빙 - 배포사이트

목차

1. 서비스 소개
2. 프론트엔드 팀 소개
3. 기술 및 개발 환경
4. 구현 기능
5. 컨벤션
6. 프로젝트 구조
7. 협업 문화

📝 1. 서비스 소개

소개: 이사 소비자와 이사 전문가 매칭 서비스

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

프로젝트 기간: 2024.11.17 ~ 2025.01.13

🧑🏻‍💻👩🏻‍💻 2. 프론트엔드 팀 소개

팀원

김현우	이진우	임송이	주영은
Accreditus	ajantang	Im-amberIm	juyeongeun

📝 3. 기술 및 개발 환경

FRONT-END

BACK-END

COLLABORATION TOOL

📝 4. 구현 기능

김현우

• 초기 프로젝트 세팅
• 공통 컴포넌트
  • Server-side loading 페이지(loading.tsx) 및 Client-Side Navigation Progress Indicator
  • 서버 컴포넌트용 loading.tsx 구현
  • 클라이언트 사이드 네비게이션 인디케이터 추가
  • 모든 페이지에서 일관된 로딩 경험 제공
  • GNB & Quote GNB & Date Picker, Time Picker & Button
  • 프로젝트 특화 요구사항에 맞는 커스터마이징 용이성
  • 상태 업데이트 최적화를 통한 성능 향상
  • 재사용성과 유지보수성을 고려한 컴포넌트 설계
• 페이지
  • Landing P
  • 404 P
  • [유저] 견적 요청 P
    • Framer Motion 활용 부드러운 채팅 애니메이션 구현
    • fake loading 및 loading dots로 UX 개선 중점
    • Toast 알림을 통한 상태 알림
  • [유저] 내 견적 관리 P
    • 대기 중인 견적
    • 받았던 견적
    • 상위 데이터(이사 요청)와 하위 데이터(견적서) 분리
    • "견적서 보기" 버튼 클릭 시에만 해당 데이터 로드
    • 이미 로드된 데이터 재사용으로 불필요한 API 호출 최소화

이진우

기획

• API 명세서(초안) 작성

• 공통 컴포넌트

  • 체크박스
    • 체크박스-베이스 : 사각형 체크 박스. 받은 요청P 등 사용
      • 체크박스-서클 : 원형 체크 박스. 체크박스-필드 등 사용
        • 체크박스-필드 : 이사 요청 생성 시 사용되는 체크박스가 포함된 선택지. 견적 요청P 사용
    • 프로그레스바
      • 프로그레스바-이사 요청 : 이사 요청 생성 시 진행 상황 표시
        • 프로그레스바-리뷰 : 리뷰 정보 평점 별 선택 수 표시
    • 드롭다운
      • 드롭다운-베이스 : 드롭다운 컴포넌트 구성용
        • 드롭다운-지역 : 기사 목록 조회 필터. 기사님 찾기P 사용
        • 드롭다운-서비스 : 기사 목록 조회 필터. 기사님 찾기P 사용
        • 드롭다운-프로필 : 사용자 별 사용 가능한 기능/페이지 선택지 제공. GNB 사용
        • 드롭다운-알림 : 사용자 알림 목록 제공. GNB 사용
          • 컴포넌트 전용 API
            • 알림 목록 조회(GET)
              • 알림 읽기(POST)
        • 드롭다운-정렬(이사 요청) : 이사 요청 목록 조회 정렬. 받은 요청P 사용
        • 드롭다운-정렬(기사) : 기사 목록 조회 정렬. 기사님 찾기P 사용
        • 드롭다운-견적서 : 견적서 필터. 받았던 견적P 사용
    • 리뷰 정보 & 별점
      • 리뷰 정보 : 기사 리뷰 정보. 기사 상세P, 마이 페이지P(기사) 사용
    • 엠티 리스트
      • 엠티 리스트 : 빈 페이지/조회 되지 않는 목록 정보. 일부 페이지 사용

• 페이지

  • 기사님 찾기
    • 페이지 종속 API
      • 기사 목록 조회(GET)
    • 견적서 상세
      • 페이지 종속 API
        • 견적서 상세 조회(GET)
    • 받은 요청
      • 페이지 종속 API
        • 받은 요 목록 조회(GET)
          • 견적서 작성(POST)
            • 이사 요청 반려(POST)

• 기타

  • CSS 수정
    • 공용 컴포넌트
      • 기사 카드
        • 견적 정보
        • 페이지
          • 스타일 통일 : 기사 상세P, 견적 상세P 등
            • API 연동 : 기사 찜하기, 기사 찜 취소하기, 기사 상세 조회 등
    • 로직 수정 & 코드 리팩토링
      • 컴포넌트
        • GNB
          • 기사 카드
            • 견적서 보내기 모달 : 기사님 찾기P 사용
              • 컴포넌트 전용 API
                • 견적서 작성(POST)
            • 이사 요청 반려 모달 : 기사님 찾기P 사용
              • 컴포넌트 전용 API
                • 이사 요청 반려(POST)
        • 페이지
          • CSR 페이지 → SSR 페이지로 수정(로그인, 정보 수정 등)
            • 클라이언트 컴포넌트 별도 분리

임송이

• 페이지
  • 기사님 상세 P
    • 찜하기/취소 (POST, DELETE).
    • 지정 견적 요청/취소 (POST, DELETE).
      • 422 에러 시 일반 요청 미리 진행했는지 모달 알림.
    • 기사님 상세 정보 조회 (GET).
    • 리뷰 목록 가져오기 (GET) (offset pagination).
  • 찜한 기사님 P
    • 무한 스크롤 구현 (GET).
  • 이사 리뷰 P
    • 작성 가능한 리뷰 조회 (GET).
    • 리뷰 작성하기 모달 (POST).
    • 내가 작성한 리뷰 조회 (GET).
  • 기사님 견적 관리 P
    • 보낸 견적 조회 (GET, 무한 스크롤).
    • 반려 요청 관리 (GET, 무한 스크롤).
  • 기사님 견적 상세 P
    • 견적 상세 정보 조회 (GET).
  • 기사님 마이 P
    • 기사 상세 정보 (GET).
    • 리뷰 목록 가져오기 (GET) (offset pagination).
• 리뷰 이미지 슬라이드 (Swipe/Slideshow)
  • 모바일에서는 swipeable 라이브러리를 사용해 스와이프로 이미지 전환.
  • 태블릿 사이즈 이상에서는 슬라이드쇼 형식으로 전환.
  • 최대 3개까지 이미지 업로드 가능하도록 제한.
• SNS 공유 기능
  • 클립보드 복사, 카카오톡, Facebook 공유 기능 구현.
  • Kakao Dev를 이용해 견적서와 기사님 상세 정보를 공유할 수 있는 템플릿 추가.
• 에러 글로벌 모달 처리
  • tanstack-query의 mutation 에러를 캐치해 글로벌 모달로 사용자에게 명확히 알림.
  • axios interceptor에서 response.error객체를 글로벌로 잡고 객체 구조를 원하는 것으로 커스텀함.

주영은

• 공통 Component

  • Input
    • 페이지에서 공통으로 사용되는 Input을 공통 컴포넌트로 제작
      • 타입에 따라 검색 Input, PW Input 등 디자인 고려
    • Modal
      • 유사한 Modal끼리 그룹화해 컴포넌트 제작
        • 비밀번호 확인 모달 추가 제작

• 일반 로그인 및 회원가입

  • PAGE
    • 기사님과 일반 유저를 분리하여 로그인 및 회원가입 페이지 제작
      • 회원가입 시 기본 정보 작성 후 프로필 생성 페이지로 자동 이동
    • API
      • 각 유저 타입에 대한 end-point 호출
        • 기사님 : POST auth/signup/mover
          • 고객 : POST auth/signup/customer
    • Cookie
      • next.config.js에서 rewrite()를 활용하여 Next.js 서버를 프록시처럼 사용해 CORS 문제 해결, 보안 강화, 쿠키 자동 전달을 구현

• 소셜 로그인 기능

  • API

    • 각 유저와 sns 타입에 대한 end-point 호출 ${backUrl}/oauth/${sns}/${isUser ? "customer" : "mover"}

    • Cookie

      • middleware.ts에서 oauth로 오는 쿠키 도메인을 로컬로 변경하는 작업을 통해 Cookie 유지

• 소셜 회원가입 후 회원 프로필 정보 입력 기능

  • user 타입(기사님, 고객)에 대한 프로필 입력을 위해 백엔드에서 받은 redirectUrl로 페이지 이동
    • API
      • 기사님 : POST movers/
        • 고객 : POST customers/

• 기본 정보

  • PAGE
    • user 타입에 따라 기본 정보 수정하는 페이지 제작
      • 페이지 접근 전 비밀번호 확인을 위한 모달 추가 생성
        • 소셜 로그인 사용자는 기본 정보 수정 불가 모달 추가 생성
    • API
      • 기사님과 고객 동일한 end-point 사용으로 PATCH users/ 호출

• 프로필 정보

  • PAGE
    • user 타입에 따라 프로필 정보 등록 페이지 제작
      • user 타입에 따라 프로필 정보 수정하는 페이지 제작
    • API
      • user 타입에 대한 end-point 사용
        • 기사님 : PATCH movers/
          • 고객 : PATCH customers/

• [고객] 기사님 상세 페이지 제작

  • 해당 기사님에 대한 상세 페이지 제작
    • 기본 정보 카드 컴포넌트 사용
    • 리뷰 카드 컴포넌트 사용

• [기사] 마이페이지

  • 기본 정보 카드 컴포넌트 사용
    • 기본 정보 수정 및 프로필 수정 버튼을 통해 각각의 페이지로 연결

• [기사] 내 견적 관리 및 견적 상세 페이지

  • PAGE
    • 보낸 견적 페이지 제작
    • 견적 상세 페이지 제작
    • 반려 견적 페이지 제작
    • 해당 견적에 대한 타입(보낸 견적 조회, 반려 요청)에 따라 카드 컴포넌트를 사용

🖌️ 5. 컨벤션

Git 컨벤션

Emoji	Code	기능	Description
✨	:sparkles:	Feat	새 기능
♻️	:recycle:	Refactor	코드 리팩토링
📦	:wrench:	Chore	리소스 수정/삭제
🐛	:bug:	Fix	버그 수정
📝	:memo:	Docs	문서 추가/수정
🎨	:art:	Style	UI/스타일 파일 추가/수정
🎉	:tada:	Init	프로젝트 시작 / Init
✅	:white_check_mark:	Test	테스트 추가/수정
⏪	:rewind:	Rewind	변경 사항 되돌리기
🔀	:twisted_rightwards_arrows:	Merge	브랜치 합병
🗃	:card_file_box:	DB	데이터베이스 관련 수정
💡	:bulb:	Comment	주석 추가/수정
🚀	:rocket:	Deploy	배포

Code 컨벤션

• 변수/함수
  • Camel 표기법 사용 (상수는 대문자)
• 컴포넌트/파일명
  • Pascal 표기법 사용
• 이미지 파일
  • Snake 표기법 사용 - (형태)(의미)(순서)_(상태) / 예: btn_login_001_off.png
• ClassName - Kebab 표기법 사용

🗂️ 6. SRC 파일 구조

📦src
┣ 📂api
┃ ┣ 📂mutation-hooks
┃ ┃ ┣ 📜mover.ts
┃ ┃ ┣ 📜movingRequest.ts
┃ ┃ ┗ 📜review.ts
┃ ┣ 📂query-hooks
┃ ┃ ┣ 📜mover.ts
┃ ┃ ┣ 📜quote.ts
┃ ┃ ┗ 📜review.ts
┃ ┣ 📜auth.ts
┃ ┣ 📜axios.ts
┃ ┣ 📜customer.ts
┃ ┣ 📜mover.ts
┃ ┣ 📜movingRequest.ts
┃ ┣ 📜notification.ts
┃ ┣ 📜pendingQuote.ts
┃ ┣ 📜queryKeys.ts
┃ ┣ 📜quote.ts
┃ ┣ 📜review.ts
┃ ┗ 📜user.ts
┣ 📂app
┃ ┣ 📂(mover)
┃ ┃ ┣ 📂mover
┃ ┃ ┃ ┣ 📂auth
┃ ┃ ┃ ┃ ┣ 📂login
┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┃ ┗ 📂register
┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┣ 📂info-edit
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┣ 📂my-page
┃ ┃ ┃ ┃ ┣ 📜ProfileActions.tsx
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┣ 📂my-quote
┃ ┃ ┃ ┃ ┣ 📂[quoteId]
┃ ┃ ┃ ┃ ┃ ┣ 📜SentQuoteDetail.tsx
┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┣ 📂profile
┃ ┃ ┃ ┃ ┣ 📜ProfileContent.tsx
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┣ 📂profile-edit
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┗ 📂request
┃ ┃ ┃ ┃ ┣ 📜CreateQuoteNiceModal.tsx
┃ ┃ ┃ ┃ ┣ 📜FilterNiceModal.tsx
┃ ┃ ┃ ┃ ┣ 📜RejectRequetNiceModal.tsx
┃ ┃ ┃ ┃ ┣ 📜RequestForm.tsx
┃ ┃ ┃ ┃ ┣ 📜filters.tsx
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┗ 📜layout.tsx
┃ ┣ 📂(request)
┃ ┃ ┣ 📂request
┃ ┃ ┃ ┣ 📜AddressSelectionField.tsx
┃ ┃ ┃ ┣ 📜Chatter.tsx
┃ ┃ ┃ ┣ 📜ProgressBarMovingRequest.tsx
┃ ┃ ┃ ┣ 📜StepSelectionFiled.tsx
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┗ 📜layout.tsx
┃ ┣ 📂(user)
┃ ┃ ┣ 📂auth
┃ ┃ ┃ ┣ 📂login
┃ ┃ ┃ ┃ ┣ 📜SearchParamsContent.tsx
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┗ 📂register
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂find-mover
┃ ┃ ┃ ┣ 📂[moverId]
┃ ┃ ┃ ┃ ┣ 📜ClientPage.tsx
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┣ 📂components
┃ ┃ ┃ ┃ ┗ 📜DropdownList.tsx
┃ ┃ ┃ ┣ 📜moverList.tsx
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂me
┃ ┃ ┃ ┣ 📂info-edit
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┣ 📂mover
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┣ 📂profile
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┣ 📂profile-edit
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┗ 📂review
┃ ┃ ┃ ┃ ┣ 📜EmptyReview.tsx
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂my-quote
┃ ┃ ┃ ┣ 📂[quoteId]
┃ ┃ ┃ ┃ ┣ 📜QuoteDetail.tsx
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┣ 📜expiredRequests.tsx
┃ ┃ ┃ ┣ 📜mock.ts
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┗ 📜layout.tsx
┃ ┣ 📂fonts
┃ ┃ ┣ 📜GeistMonoVF.woff
┃ ┃ ┣ 📜GeistVF.woff
┃ ┃ ┣ 📜PretendardVariable.woff2
┃ ┃ ┗ 📜pretendard.css
┃ ┣ 📜error.tsx
┃ ┣ 📜global-error.tsx
┃ ┣ 📜globals.css
┃ ┣ 📜layout.tsx
┃ ┣ 📜loading.tsx
┃ ┣ 📜not-found.tsx
┃ ┗ 📜page.tsx
┣ 📂components
┃ ┣ 📂auth
┃ ┃ ┣ 📜FormHeader.tsx
┃ ┃ ┣ 📜LoginComponent.stories.tsx
┃ ┃ ┣ 📜LoginComponent.tsx
┃ ┃ ┣ 📜RoleGuard.tsx
┃ ┃ ┣ 📜SignUpComponent.stories.tsx
┃ ┃ ┣ 📜SignUpComponent.tsx
┃ ┃ ┗ 📜SnsComponent.tsx
┃ ┣ 📂cards
┃ ┃ ┣ 📜ConfirmedQuoteCard.stories.tsx
┃ ┃ ┣ 📜ConfirmedQuoteCard.tsx
┃ ┃ ┣ 📜CreateReviewCard.stories.tsx
┃ ┃ ┣ 📜CreateReviewCard.tsx
┃ ┃ ┣ 📜FavoriteMoverCard.stories.tsx
┃ ┃ ┣ 📜FavoriteMoverCard.tsx
┃ ┃ ┣ 📜IncomingRequestCard.stories.tsx
┃ ┃ ┣ 📜IncomingRequestCard.tsx
┃ ┃ ┣ 📜MoverInfoCard.stories.tsx
┃ ┃ ┣ 📜MoverInfoCard.tsx
┃ ┃ ┣ 📜MoverProfileCard.stories.tsx
┃ ┃ ┣ 📜MoverProfileCard.tsx
┃ ┃ ┣ 📜MyReviewCard.stories.tsx
┃ ┃ ┣ 📜MyReviewCard.tsx
┃ ┃ ┣ 📜PendingRequestCard.stories.tsx
┃ ┃ ┣ 📜PendingRequestCard.tsx
┃ ┃ ┣ 📜ReceivedQuoteCard.stories.tsx
┃ ┃ ┣ 📜ReceivedQuoteCard.tsx
┃ ┃ ┣ 📜RejectedRequestCard.stories.tsx
┃ ┃ ┣ 📜RejectedRequestCard.tsx
┃ ┃ ┣ 📜SentQuoteCard.stories.tsx
┃ ┃ ┗ 📜SentQuoteCard.tsx
┃ ┣ 📂common
┃ ┃ ┣ 📂card
┃ ┃ ┃ ┣ 📜CardContainer.tsx
┃ ┃ ┃ ┣ 📜FavoriteUi.stories.tsx
┃ ┃ ┃ ┣ 📜FavoriteUi.tsx
┃ ┃ ┃ ┣ 📜GrayLabel.stories.tsx
┃ ┃ ┃ ┣ 📜GrayLabel.tsx
┃ ┃ ┃ ┣ 📜MoverExperience.tsx
┃ ┃ ┃ ┣ 📜MoverInfo.stories.tsx
┃ ┃ ┃ ┣ 📜MoverInfo.tsx
┃ ┃ ┃ ┣ 📜NameText.stories.tsx
┃ ┃ ┃ ┣ 📜NameText.tsx
┃ ┃ ┃ ┣ 📜ProfileImage.stories.tsx
┃ ┃ ┃ ┣ 📜ProfileImage.tsx
┃ ┃ ┃ ┣ 📜QuoteDetails.stories.tsx
┃ ┃ ┃ ┣ 📜QuoteDetails.tsx
┃ ┃ ┃ ┣ 📜QuoteModalUser.tsx
┃ ┃ ┃ ┣ 📜ReviewMover.tsx
┃ ┃ ┃ ┣ 📜ServiceChip.stories.tsx
┃ ┃ ┃ ┣ 📜ServiceChip.tsx
┃ ┃ ┃ ┣ 📜TextWithGrayLabel.stories.tsx
┃ ┃ ┃ ┗ 📜TextWithGrayLabel.tsx
┃ ┃ ┣ 📂checkboxs
┃ ┃ ┃ ┣ 📜Checkbox.stories.tsx
┃ ┃ ┃ ┣ 📜Checkbox.tsx
┃ ┃ ┃ ┣ 📜CheckboxChip.stories.tsx
┃ ┃ ┃ ┣ 📜CheckboxChip.tsx
┃ ┃ ┃ ┣ 📜CheckboxCircle.stories.tsx
┃ ┃ ┃ ┗ 📜CheckboxCircle.tsx
┃ ┃ ┣ 📂progress-bar
┃ ┃ ┃ ┣ 📜ProgressBar.tsx
┃ ┃ ┃ ┣ 📜ProgressBarMovingRequest.stories.tsx
┃ ┃ ┃ ┣ 📜ProgressBarMovingRequest.tsx
┃ ┃ ┃ ┣ 📜ProgressBarRating.stories.tsx
┃ ┃ ┃ ┗ 📜ProgressBarRating.tsx
┃ ┃ ┣ 📜AddressChip.tsx
┃ ┃ ┣ 📜AddressField.tsx
┃ ┃ ┣ 📜Button.stories.tsx
┃ ┃ ┣ 📜Button.tsx
┃ ┃ ┣ 📜ChatField.stories.tsx
┃ ┃ ┣ 📜ChatField.tsx
┃ ┃ ┣ 📜Dropdown.tsx
┃ ┃ ┣ 📜Input.stories.tsx
┃ ┃ ┣ 📜Input.tsx
┃ ┃ ┣ 📜LineSeparator.tsx
┃ ┃ ┣ 📜Loader.stories.tsx
┃ ┃ ┣ 📜Loader.tsx
┃ ┃ ┣ 📜Message.tsx
┃ ┃ ┣ 📜Pagination.stories.tsx
┃ ┃ ┣ 📜Pagination.tsx
┃ ┃ ┣ 📜QuoteButtonGroup.tsx
┃ ┃ ┣ 📜ReviewModal.tsx
┃ ┃ ┣ 📜SearchInput.stories.tsx
┃ ┃ ┣ 📜SearchInput.tsx
┃ ┃ ┣ 📜ShareButtons.stories.tsx
┃ ┃ ┣ 📜ShareButtons.tsx
┃ ┃ ┣ 📜StarRating.tsx
┃ ┃ ┣ 📜StarRatingDisplay.stories.tsx
┃ ┃ ┣ 📜StarRatingDisplay.tsx
┃ ┃ ┣ 📜Textarea.stories.tsx
┃ ┃ ┗ 📜Textarea.tsx
┃ ┣ 📂dropdowns
┃ ┃ ┣ 📜DropdownNotification.stories.tsx
┃ ┃ ┣ 📜DropdownNotification.tsx
┃ ┃ ┣ 📜DropdownProfile.stories.tsx
┃ ┃ ┣ 📜DropdownProfile.tsx
┃ ┃ ┣ 📜DropdownQuote.stories.tsx
┃ ┃ ┣ 📜DropdownQuote.tsx
┃ ┃ ┣ 📜DropdownRegion.stories.tsx
┃ ┃ ┣ 📜DropdownRegion.tsx
┃ ┃ ┣ 📜DropdownService.stories.tsx
┃ ┃ ┣ 📜DropdownService.tsx
┃ ┃ ┣ 📜DropdownSortMover.stories.tsx
┃ ┃ ┣ 📜DropdownSortMover.tsx
┃ ┃ ┣ 📜DropdownSortMovingRequest.stories.tsx
┃ ┃ ┗ 📜DropdownSortMovingRequest.tsx
┃ ┣ 📂forms
┃ ┃ ┣ 📜InfoEdit.tsx
┃ ┃ ┗ 📜Profile.tsx
┃ ┣ 📂home
┃ ┃ ┣ 📜AuthButtons.tsx
┃ ┃ ┗ 📜AuthSection.tsx
┃ ┣ 📂hooks
┃ ┃ ┗ 📜useResize.tsx
┃ ┣ 📂layout
┃ ┃ ┣ 📜GNB.stories.tsx
┃ ┃ ┣ 📜GNB.tsx
┃ ┃ ┣ 📜Main.tsx
┃ ┃ ┣ 📜MswComponent.tsx
┃ ┃ ┣ 📜NiceModalRegistry.tsx
┃ ┃ ┣ 📜QuoteGNB.stories.tsx
┃ ┃ ┣ 📜QuoteGNB.tsx
┃ ┃ ┗ 📜QuoteGNBWrapper.tsx
┃ ┣ 📂modals
┃ ┃ ┣ 📜AlertModal.tsx
┃ ┃ ┣ 📜BackDrop.tsx
┃ ┃ ┣ 📜ConfirmModal.tsx
┃ ┃ ┣ 📜CreateQuoteModal.stories.tsx
┃ ┃ ┣ 📜CreateQuoteModal.tsx
┃ ┃ ┣ 📜FilterModal.stories.tsx
┃ ┃ ┣ 📜FilterModal.tsx
┃ ┃ ┣ 📜QuoteRequestModal.stories.tsx
┃ ┃ ┣ 📜QuoteRequestModal.tsx
┃ ┃ ┣ 📜RejectRequetModal.stories.tsx
┃ ┃ ┣ 📜RejectRequetModal.tsx
┃ ┃ ┣ 📜ReviewModal.stories.tsx
┃ ┃ ┗ 📜ReviewModal.tsx
┃ ┣ 📂request
┃ ┃ ┣ 📜DatePicker.stories.tsx
┃ ┃ ┣ 📜DatePicker.tsx
┃ ┃ ┗ 📜QuoteDetailInfo.tsx
┃ ┣ 📂request-checkbox-field
┃ ┃ ┣ 📜CheckboxButton.tsx
┃ ┃ ┣ 📜CheckboxCircle.tsx
┃ ┃ ┣ 📜CheckboxField.stories.tsx
┃ ┃ ┗ 📜CheckboxField.tsx
┃ ┣ 📂review
┃ ┃ ┣ 📜CustomerReview.tsx
┃ ┃ ┣ 📜MoversReviewList.tsx
┃ ┃ ┗ 📜ReviewImageSlider.tsx
┃ ┣ 📜ButtonFavorite.tsx
┃ ┣ 📜CheckboxField.stories.tsx
┃ ┣ 📜CheckboxField.tsx
┃ ┣ 📜EmptyList.tsx
┃ ┣ 📜LandingSection.tsx
┃ ┣ 📜LandingSwipe.tsx
┃ ┣ 📜LoadingDots.tsx
┃ ┣ 📜MovingRequestProgressInfo.stories.tsx
┃ ┣ 📜MovingRequestProgressInfo.tsx
┃ ┣ 📜NavItem.tsx
┃ ┣ 📜NavigationEvents.tsx
┃ ┣ 📜NavigationProgress.tsx
┃ ┣ 📜NiceModalProvider.tsx
┃ ┣ 📜RatingInfo.stories.tsx
┃ ┣ 📜RatingInfo.tsx
┃ ┣ 📜ReactQueryDevtoolsClient.tsx
┃ ┣ 📜ScrollIndicator.tsx
┃ ┗ 📜Toast.tsx
┣ 📂config
┃ ┣ 📜cn.ts
┃ ┗ 📜queryClient.ts
┣ 📂contexts
┃ ┣ 📜QuoteProgressContext.tsx
┃ ┗ 📜queryClientProvider.tsx
┣ 📂hooks
┃ ┣ 📜useAuth.ts
┃ ┣ 📜useInfiniteScroll.ts
┃ ┗ 📜useResize.ts
┣ 📂mocks
┃ ┣ 📂data
┃ ┃ ┣ 📜mover.ts
┃ ┃ ┣ 📜movingQuotes.ts
┃ ┃ ┣ 📜movingRequest.ts
┃ ┃ ┣ 📜pendingQuotes.ts
┃ ┃ ┣ 📜quote.ts
┃ ┃ ┗ 📜review.ts
┃ ┣ 📂handlers
┃ ┃ ┣ 📜index.ts
┃ ┃ ┣ 📜mover.ts
┃ ┃ ┣ 📜movingRequest.ts
┃ ┃ ┣ 📜quote.ts
┃ ┃ ┗ 📜review.ts
┃ ┣ 📂types
┃ ┃ ┗ 📜quotes.ts
┃ ┣ 📜browser.ts
┃ ┗ 📜server.ts
┣ 📂store
┃ ┣ 📜signupStore.ts
┃ ┣ 📜useNavigationStore.ts
┃ ┣ 📜useToastStore.ts
┃ ┗ 📜userStore.ts
┣ 📂stories
┃ ┣ 📂assets
┃ ┃ ┣ 📜accessibility.png
┃ ┃ ┣ 📜accessibility.svg
┃ ┃ ┣ 📜addon-library.png
┃ ┃ ┣ 📜assets.png
┃ ┃ ┣ 📜avif-test-image.avif
┃ ┃ ┣ 📜context.png
┃ ┃ ┣ 📜discord.svg
┃ ┃ ┣ 📜docs.png
┃ ┃ ┣ 📜figma-plugin.png
┃ ┃ ┣ 📜github.svg
┃ ┃ ┣ 📜share.png
┃ ┃ ┣ 📜styling.png
┃ ┃ ┣ 📜testing.png
┃ ┃ ┣ 📜theming.png
┃ ┃ ┣ 📜tutorials.svg
┃ ┃ ┗ 📜youtube.svg
┃ ┣ 📜Button.stories.ts
┃ ┣ 📜Button.tsx
┃ ┣ 📜Configure.mdx
┃ ┣ 📜Header.stories.ts
┃ ┣ 📜Header.tsx
┃ ┣ 📜Page.stories.ts
┃ ┣ 📜Page.tsx
┃ ┣ 📜button.css
┃ ┣ 📜header.css
┃ ┗ 📜page.css
┣ 📂types
┃ ┣ 📜api.ts
┃ ┣ 📜auth.ts
┃ ┣ 📜mover.ts
┃ ┣ 📜movingRequest.ts
┃ ┣ 📜quote.ts
┃ ┗ 📜review.ts
┣ 📂utils
┃ ┣ 📜auth.ts
┃ ┣ 📜authValidation.ts
┃ ┣ 📜canUseDom.ts
┃ ┣ 📜env.ts
┃ ┣ 📜formatCost.ts
┃ ┣ 📜generateImgSrc.js
┃ ┣ 📜getQueryClient.ts
┃ ┗ 📜utilFunctions.ts
┣ 📂variables
┃ ┣ 📜dropdown.ts
┃ ┣ 📜images.js
┃ ┣ 📜mover.ts
┃ ┣ 📜movingRequest.ts
┃ ┣ 📜notification.ts
┃ ┣ 📜quote.ts
┃ ┣ 📜regions.ts
┃ ┣ 📜screen.ts
┃ ┣ 📜service.ts
┃ ┗ 📜services.ts
┣ 📜.DS_Store
┣ 📜instrumentation.ts
┗ 📜middleware.ts

🤝7. 협업 문화

• 매일 아침 9시 프론트, 백 모여 전체 미팅
• PR 2명 이상 리뷰 후 머지
• 문제 3시간 이상 안풀리면 공론화 및 도움 요청