📁 디렉토리 구조

• app/: router, compositeProvider 등 프로젝트의 환경 설정 같은 파일을 저장
• public/: 이미지, 파비콘, 폰트 등의 정적 파일을 저장
• components/: 재사용 가능한 컴포넌트를 저장합니다. 폴더 하위에 파일을 생성함
  • common/: 프로젝트 전반적으로 사용되는 컴포넌트
  • layout/: header, footer등 layout에서 사용되는 컴포넌트
  • features/: 특정 기능/도메인/페이지에 종속된 컴포넌트
• lib/: 유틸리티 함수, API 호출 관련 함수, 헬퍼 등을 저장
  • api/: supabase 사용하기 쉽도록 캡슐화한 함수들
  • hooks/: 커스텀 훅
  • utils/: 다양한 유틸리티 함수
• contexts/: contextAPI를 사용하기 위한 파일들
• data/: 프로젝트 전반에 사용되는 상수를 저장합니다.

📦 
├─ index.html
├─ public (이미지, 폰트 등 정적 파일 저장)
├─ src
│  ├─ main.jsx
│  ├─ App.jsx
│  ├─ app 
│  │  ├─ CompositeProvider.jsx
│  │  └─ Router.jsx
│  ├─ components
│  │  ├─ layouts (header, footer등 layout에서 사용되는 컴포넌트)
│  │  ├─ commons (프로젝트 전반적으로 사용되는 컴포넌트)
│  │  └─ features (특정 기능/도메인/페이지에 종속된 컴포넌트)
│  │     └─ pokemon - (card, list, dashboard);
│  ├─ **pages**
│  ├─ styles (css 아님, 스타일드 컴포넌트의 theme)
│  ├─ lib
│  │  ├─ apis
│  │  │  ├─ auth.api.js (로그인, 회원가입 등 auth 관련 API 함수)
│  │  │  └─ ~~~~.api.js 
│  │  ├─ hooks
│  │  └─ utils
│  │     ├─ format.util.js (format와 관련된 util 함수)
│  │     ├─ date.util.js (date와 관련된 util 함수)
│  │     └─ ~~~~.util.js
│  ├─ contexts
│  │  └─ auth
│  │     ├─ auth.context.js
│  │     ├─ auth.reducer.js
│  │     └─ AuthProvider.js
│  ├─ data
│  └─ mocks
├─ .env.develop
└─ .env.product

styled-component prefix / suffix

• Prefix
  • St[컴포넌트명] - Styled 컴포넌트에는 St 로 시작 예시 - StContainer, StButton 등
• Suffix

  • [컴포넌트명]Page - 특정 페이지를 그리는 컴포넌트는 Page로 끝남

  • [컴포넌트명]Layout - 최상위 레이아웃 설정 컴포넌트는 Layout 으로 끝남

    export default function RootLayout () {
    	return (
    		<StLayout>
    			<Header />
    			<main>
    				<Outlet />
    			</main>
    			<Footer />
    		</StLayout>
    	)
    }
    

  • [컴포넌트명]Container - 여러개 요소를 감싸는 컴포넌트는 Container로 끝남

    • 외부로 export 되지 않는 경우에는 Container 만 사용 Ok
    • 예시 - StContainer, StPokemonListContainer

  • [컴포넌트명]Wrapper - 1개의 요소를 감싸는 컴포넌트는 Wrapper 로 끝남

    • 외부로 export 되지 않는 경우에는 Wrapper 만 사용 Ok
    • 예시 - StWrapper, StPokemonWrapper

<aside> 💡

네이밍의 종류

• PascalCase (파스칼 케이스)
• camelCase (카멜 케이스)
• kebab-case (케밥 케이스)
• snake_case (스네이크 케이스) </aside>

디렉토리 네이밍

디렉토리 이름은 어느곳이든 상관 없이 kebab-case