폴더 구조 및 스타일링

폴더구조

• 전역으로 관리할 파일과 지역으로 관리할 파일을 구분합니다.

  • 예를 들어 mainpage 내부 컴포넌트들 간에 공유하는 전역상태일 경우 mainpage 폴더 내에 store 폴더를 만들고, 그 안에 전역상태 파일을 만들어 사용합니다.

  • 그러나 만일 폴더 간 (ex. mainpage와 loginpage 사이에 공유) 공유되는 전역상태 파일의 경우 src 아래에 있는 store 폴더에 작성합니다

    ex) authStore.ts가 대표적인 예시입니다. 로그인 유무는 모든 페이지에서 공유 될 수 있는 상태이기 때문에 src/store 폴더에 작성하였습니다.

  비단 store에 국한되는 개념이 아닌 components 폴더, apis 및 style 관련 폴더 또한 마찬가지입니다.

• 대략적인 폴더 구조는 다음과 같습니다.

  • 폴더구조

    src
    ├── App.tsx
    ├── apis
    │   └── index.ts
    ├── assets
    │   ├── fonts
    │   ├── react.svg
    │   └── svg
    │       ├── Vite.tsx
    │       └── index.ts
    ├── components
    ├── constants
    │   └── ROUTE.ts
    ├── hooks
    ├── layout
    ├── main.tsx
    ├── pages
    │   ├── Router.tsx
    │   ├── detailpage
    │   │   └── index.tsx
    │   ├── loginpage
    │   │   └── index.tsx
    │   ├── mainpage
    │   │   ├── apis
    │   │   ├── components
    │   │   ├── hooks
    │   │   └── index.tsx
    │   ├── mypage
    │   │   └── index.tsx
    │   └── shoppingcartpage
    │       └── index.tsx
    ├── store
    │   └── authStore.ts
    ├── types
    └── vite-env.d.ts

• pages 폴더의 경우

  pages > mainpage > components, index.tsx

  index.tsx 에서는 components 폴더에 있는 컴포넌트들의 조합으로 이루어져있습니다.

스타일링

• mainpage > index.tsx
  • index.tsx에 적용할 스타일 파일은 styles 폴더 내의 index.style.ts내에 정의합니다.
• mainpage > components > Header.tsx, Footer,tsx
  • 컴포넌트에 적용할 스타일 파일은 styles 폴더 내의 컴포넌트이름.style.ts내에 정의합니다.