Skip to content

codeit-moving/moving-fe

BranchesTags

Repository files navigation

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

nextjs logo tailwindcss logo storybook logo typescript logo sentry logo tanstack logo zustand logo mock service worker logo

BACK-END

typescript logo nodejs logo express logo prisma logo nginx logo pm2 logo amazonwebservices logo amazon s3 logo amazon RDS logo amazon ec2 logo

COLLABORATION TOOL

git logo github logo discord logo notion logo



📝 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시간 이상 안풀리면 공론화 및 도움 요청

About

이사 소비자와 이사 전문가 매칭 서비스 "Moving" 의 FE 레포지토리 입니다.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

4 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages