1️⃣ 프로젝트 구조

 ├── public/           # 이미지, 폰트 등의 정적 리소스     
 │   ├── icons/    
 │   ├── images/  
src/  
 │ 
 ├── components/       # 글로벌 UI 컴포넌트 (Atomic Design 적용)
 │   ├── atoms/        # 최소 단위 UI 컴포넌트 (Button, Input 등)
 │   ├── molecules/    # Atoms의 조합 (SearchBar, Card 등)
 │   ├── organisms/    # Molecules의 조합 (Header, Footer 등)
 │  
 ├── features/         # 특정 기능 단위로 그룹화
 │   ├── home/         # Home 관련 기능
 │   │   ├── components/ # 이 기능에서만 사용하는 컴포넌트
 │   │   ├── services/   # API 호출, 데이터 처리 로직
 │   │   ├── hooks/      # Custom Hooks
 │   │   ├── stores/     # Zustand, Recoil 상태 관리
 │   │   ├── types/      # 해당 도메인에서 사용하는 TypeScript 타입
 │  
 ├── hooks/            # 글로벌 Custom Hooks
 ├── middleware/       # API 요청, 인증 미들웨어
 ├── services/         # 글로벌 API 서비스 함수
 ├── stores/           # 글로벌 상태 관리 (Recoil, Zustand 등)
 ├── styles/           # 글로벌 스타일
 ├── types/            # 글로벌 타입 정의
 │  
 ├── app/              # Next.js App Router 기반 페이지
 │   ├── layout.tsx    # 글로벌 레이아웃
 │   ├── page.tsx      # 홈 페이지
 │   ├── loading.tsx   # 글로벌 로딩 UI
 │   ├── error.tsx     # 글로벌 에러 페이지
 │   │
 │   ├── home/         # /home 페이지
 │   │   ├── page.tsx  # Home 페이지
 │   │   ├── loading.tsx  # 페이지별 로딩 상태
 │   │   ├── error.tsx    # 페이지별 에러 핸들링
 │
 ├── lib/              # 유틸리티 함수 및 API 클라이언트
 │   ├── utils.ts      # 기타 공통 유틸 함수
 │  
 ├── .env              # 환경 변수
 ├── tsconfig.json     # TypeScript 설정
 ├── next.config.js    # Next.js 설정
 └── package.json      # 프로젝트 의존성

2️⃣ Atomic Design 원칙 적용

✅ Atoms (원자)

• 가장 작은 단위의 UI 요소

• 예: Button, Input, Typography, Icon 등

✅ Molecules (분자)

• 여러 개의 Atom을 조합하여 만든 작은 단위의 컴포넌트

• 예: SearchBar, Card, LoginForm 등

✅ Organisms (유기체)

• 여러 개의 Molecule을 조합하여 만든 큰 UI 블록

• 예: Header, Footer, Sidebar 등

💡 Atoms, Molecules, Organisms는 components/ 내에서만 관리하며, 비즈니스 로직이 포함되지 않도록 유지

3️⃣ Feature-Sliced Design (FSD) 원칙 적용

✅ features/{feature}/

• 각 기능(도메인)별로 독립적인 디렉토리 구조

• 비즈니스 로직이 포함된 컴포넌트는 features/{feature}/components 내에서 관리

✅ features/{feature}/services/