Skip to content

폴더 구조

Jump to bottom
subsub-e edited this page Aug 25, 2024 · 1 revision

폴더 구조

  • components ⇒ 공통 컴포넌트 관리

    • header ⇒ 클릭 이벤트로 아래 3개 페이지 이동해야함, 전화번호 입력 페이지로 이동
    • modal ⇒ 여러 가지 모달창 관리, 공통 컴포넌트를 가지고 있다.
    • button ⇒ 공통 버튼 관리
    • footer ⇒ 외부 페이지 이동 기능

  • pages => router 페이지 관리, 해당 페이지에서만 사용하는 컴포넌트는 여기에 위치

    • 이벤트 소개 ⇒ 랜딩 페이지를 담당함, 이벤트, 경품등의 정보가 들어있다.

    • 이벤트 참여

      • 캐스퍼EV와 떠나기 ⇒ 로그인 유무나 이벤트 참여 유무에 따라 상태가 달라진다.
        • 차얻기
        • 열쇠얻기
        • 오른쪽 멘트들
        • 아래 말풍선과 전화번호 미입력시 나오는 멘트
      • 상황 월드컵 ⇒ 참여하기 버튼
      • 일일선착순 퀴즈 ⇒ 참여하기 버튼
      • 댓글 ⇒ 댓글 헤더에 있는 버튼들에 따른 리랜더링
        • 댓글 헤더 ⇒ 날짜, 새로고침 버튼, 인기순, 최신순
        • 댓글들
        • 댓글 푸터 ⇒ 페이지 네이션

    • 신차 소개 ⇒ 외부 페이지 이동 기능, 신차 소개해주는 캐러셀

    • 월드컵 ⇒ 메인 이벤트 중 하나인 상황 월드컵 게임, 자동차 아이템 획득 가능

    • 미니 퀴즈 ⇒ 메인 이벤트 중 하나인 미니 퀴즈 게임, 선착순으로 진행되며 선착순 경품 및 툴박스 아이템 획득 가능

  • api ⇒ api 를 관리하며 api 와 관련된 공통 로직과 세부 로직이 있다.

  • assets ⇒ 폰트, 이미지, 아이콘 등이 담긴다.

  • hooks ⇒ 프로젝트 전역적으로 쓰이는 커스텀 hook ( ex. focus 이동?, ui 다룰때 사용하는 action handle링 하는거 여기에 둔다고 한다. )

  • context ⇒ 상태관리

  • constants ⇒ 정적 데이터 관리

  • styles ⇒ 전역적으로 사용하는 폰트, 색깔, spacing

  • utils ⇒ 잡다한 함수들, 단순해야함 ( 간단하지만 전역적으로 쓰이는 함수 => ex. 포맷팅 함수나 전화번호 체크 )

📦 service
├── src
│   ├── api             # api 관리
│   │
│   ├── assets          # 이미지 등의 정적 파일들
│   │   ├── images
│   │   │ 
│   │   └── icons
│   │   
│   │
│   ├── components      # 공통 컴포넌트 관리
│   │   ├── header
│   │   │   
│   │   ├── footer
│   │   │   
│   │   ├── modal
│   │   │   
│   │   ├── sliderMotion
│   │   │   
│   │   ├── toastMessage
│   │   │
│   │   └── button
│   │
│   │       
│   ├── constants       # 정적 데이터 관리
│   │       
│   │
│   ├── pages           # 라우터 페이지 관리 (Head 정보 및 SSR 관리)
│   │   ├── eventIntro
│   │   │   
│   │   ├── joinEvent
│   │   │   │ 
│   │   │   └── commentList
│   │   │
│   │   ├── worldCup
│   │   │ 
│   │   ├── miniQuiz
│   │   │
│   │   └── newCarIntro
│   │
│   ├── hooks           # 프로젝트 전역적으로 쓰이는 커스텀 hook
│   │
│   ├── context         # 상태 관리 (Context API)
│   │
│   ├── styles          # 전역적으로 사용하는 폰트, 색깔, spacing 등
│   │   └── global.css
│   │
│   ├── utils           # 전역적으로 쓰이는 간단한 유틸리티 함수들
│   │
│   ├── App.jsx        # 앱의 진입점
│   │
│   ├── main.jsx
│   │   
│   └── router.jsx
│
├── .eslintrc.cjs
├── .prettierrc
├── index.html
├── tailwind.config.js
└── vite.config.js

참고자료

Clone this wiki locally