디렉터리 구조

📁 public

• assets

📁 src

📁 components

• index.ts (인덱싱)
• Function.tsx (실제 컴포넌트)
• Function.style.ts (스타일 컴포넌트)

📁 pages

• [페이지]
  • index.tsx (실제 페이지)
  • styles.ts (스타일)
  • components/ (지역 컴포넌트)
    • ( 📁 components 구조와 동일 )
  • types/
  • hooks/
  • utils/
  • contants/

📁 apis

📁 styles

📁 states

📁 types

📁 utils

📁 constants

구조 설명

---

컴포넌트 폴더 구조

• 해당 컴포넌트에서 쓰일 공통된 로직 (constants, hooks, types, utils)은 폴더로 생성한다.
• 컴포넌트 아래에 다른 depth 를 가진 하위 컴포넌트가 생기더라도 같은 레벨에 폴더를 생성한다.
• @emotion/Styled 컴포넌트는 분리한다. (파일명:컴포넌트명.style.ts)

index.ts 파일

• index.tsx 가 아닌 index.ts 를 사용한다.

• index.ts는 해당 폴더의 컴포넌트를 모아서 export 해주는 용도로만 사용한다.

  import DotBadge from './DotBadge';
  import StackBadge from './StackBadge';
  
  export { DotBadge, StackBadge };