참고-기능 분할 설계(FSD) 의 이해

1. FSD 의 이해

2. FSD 아키텍처의 폴더 구조 예시

src/
│
├── app/                      # 애플리케이션 초기화 및 글로벌 설정
│   ├── routes/             # 라우팅 설정
│   ├── providers/            # 애플리케이션 레벨에서 제공되는 프로바이더
│   │   ├── ThemeProvider.tsx # 테마 관련 프로바이더
│   │   ├── AuthProvider.tsx  # 인증 관련 프로바이더
│   │   ├── index.ts          # Provider Export
│   │   └── ...               # 기타 전역 프로바이더들
│   └── ...                   # 다른 글로벌 설정들
│
├── pages/                    # 페이지 컴포넌트
│   ├── HomePage/             # 홈 페이지
│   │   ├── ui/               # 홈 페이지 전용 하위 컴포넌트들
│   │   ├── hooks/            # 홈 페이지 전용 커스텀 훅
│   │   └── ...               # 기타 필요한 리소스
│   ├── AboutPage/            # About 페이지
│   └── ...                   
│
├── widgets/                  # 위젯 컴포넌트 (페이지에서 사용하는 재사용 가능한 구성 요소)
│   ├── layout/               # 레이아웃 관련 위젯들
│   │   ├── Header/           # 헤더 위젯
│   │   │   ├── index.ts      # 헤더 Export
│   │   │   ├── styles.css    # 헤더 스타일
│   │   │   ├── Header.tsx    # 헤더 컴포넌트
│   │   │   └── ...           
│   │   ├── Footer/           # 푸터 위젯
│   │   └── ...
│   └── ...                   # 다른 위젯들
│
├── features/                 # 기능별로 구성된 폴더 (독립적인 비즈니스 로직과 UI 포함)
│   ├── UserAuth/             # 사용자 인증 기능
│   │   ├── api/              # 인증 관련 API 통신 모듈
│   │   ├── ui/               # 인증 관련 UI 컴포넌트
│   │   ├── model/            # 인증 관련 상태 관리
│   │   ├── types/            # 인증 관련 타입 정의 (TypeScript)
│   │   ├── utils/            # 인증 관련 유틸리티 함수
│   │   ├── index.ts          # 모듈별로 export 정리
│   │   └── ...               # 기타 필요한 리소스
│   ├── Cart/                 # 장바구니 기능
│   │   ├── api/              # 장바구니 관련 API 통신 모듈
│   │   ├── ui/               # 장바구니 관련 UI 컴포넌트
│   │   ├── model/            # 장바구니 관련 상태 관리
│   │   ├── types/            # 장바구니 관련 타입 정의 (TypeScript)
│   │   ├── utils/            # 장바구니 관련 유틸리티 함수
│   │   ├── index.ts          # 모듈별로 export 정리
│   │   └── ...               # 기타 필요한 리소스
│   └── ...
│
├── entities/                 # 엔터티 폴더 (도메인 모델, 상태 관리, API 통신 등)
│   ├── User/                 # 사용자 엔터티
│   │   ├── model/            # 사용자 상태 관리
│   │   ├── api/              # 사용자 관련 API 모듈
│   │   ├── types/            # 사용자 관련 타입 정의 (TypeScript)
│   │   ├── index.ts          # 모듈별로 export 정리
│   │   └── ...
│   ├── Product/              # 제품 엔터티
│   │   ├── model/            # 제품 상태 관리
│   │   ├── api/              # 제품 관련 API 모듈
│   │   ├── types/            # 제품 관련 타입 정의 (TypeScript)
│   │   ├── index.ts          # 모듈별로 export 정리
│   │   └── ...
│   └── ...
│
├── shared/                   # 공통 유틸리티, 컴포넌트, 훅 등
│   ├── utils/                # 유틸리티 함수
│   ├── hooks/                # 공통 커스텀 훅
│   ├── ui/                   # 공통 컴포넌트 (Button, Input 등)
│   ├── styles/               # 공통 스타일 파일
│   ├── types/                # 공통 타입 정의 (TypeScript)
│   ├── index.ts              # 모듈별로 export 정리
│   └── ...
└── ...

참고 자료
https://velog.io/@jay/fsd
https://wonderfulwonder.tistory.com/110