📁 DearFam 프로젝트 폴더 구조

🚀 시작하기

환경 변수 설정

프로젝트를 실행하기 전에 .env 파일을 생성하고 다음 환경 변수들을 설정해주세요:

# API 설정
VITE_API_URL=http://localhost:8080/api/v1

# 카카오 로그인 설정
VITE_KAKAO_REST_KEY=your_kakao_rest_api_key

중요: 환경 변수가 설정되지 않으면 인증 과정에서 무한 로딩이 발생할 수 있습니다.

설치 및 실행

npm install
npm run dev

src/
├── assets/                 # 🖼️ 정적 리소스
│   ├── font/              # 폰트 파일
│   └── image/             # 이미지 파일
│       ├── section1/      # 섹션별 이미지
│       ├── section2/
│       └── section7/
│
├── components/            # 🧩 전역 재사용 컴포넌트
│   ├── form/             # 폼 관련 컴포넌트
│   └── ui/               # UI 컴포넌트 (버튼, 카드 등)
│       └── section1/     # 섹션별 UI 컴포넌트
│
├── context/              # 🌐 React Context (전역 상태)
│
├── data/                 # 📊 정적 데이터 및 상수
│
├── hooks/                # 🎣 전역 커스텀 훅
│
├── pages/                # 📄 페이지별 구조화
│   ├── Home/             # 홈 페이지
│   │   ├── components/   # 홈에서만 사용되는 컴포넌트
│   │   ├── mainDetailPage/ # 상세 페이지 컴포넌트들
│   │   └── index.tsx     # 메인 컴포넌트
│   │
│   ├── Start/            # 시작 페이지
│   │   ├── index.tsx     # StartPage 컴포넌트
│   │   ├── FirstMakePage.tsx
│   │   ├── MakeConfirmPage.tsx
│   │   └── ...
│   │
│   ├── Bookshelf/        # 책장 페이지
│   │   ├── index.tsx
│   │   ├── BookshelfView.tsx
│   │   └── BookshelfViewModel.tsx
│   │
│   └── ... (기타 페이지들)
│
├── routes/               # 🛣️ 라우팅 설정
│
├── store/               # 🗄️ 전역 상태 관리 (Zustand)
│   ├── headerStore.ts
│   ├── carouselStore.ts
│   └── ...
│
├── utils/               # 🛠️ 유틸리티 함수들
│
├── App.tsx             # 메인 앱 컴포넌트
├── main.tsx            # 진입점
└── index.css           # 글로벌 스타일

📂 폴더별 설명

🏠 pages/

• 핵심 개념: 각 페이지는 독립적인 폴더를 가지며, 해당 페이지에서만 사용되는 모든 파일들이 여기에 위치합니다.
• 구조: index.tsx (메인 컴포넌트) + 페이지별 전용 컴포넌트/훅
• 장점: 페이지별 코드 격리, 높은 응집도

🧩 components/

• 용도: 여러 페이지에서 재사용되는 전역 컴포넌트
• 하위 구조:
  • ui/: 기본 UI 컴포넌트 (Button, Card, Input 등)
  • form/: 폼 관련 컴포넌트
• 원칙: 페이지 특화 컴포넌트는 해당 페이지 폴더에 위치

🗄️ store/

• 용도: Zustand를 사용한 전역 상태 관리
• 파일명: [기능명]Store.ts 형식
• 범위: 여러 페이지에서 공유되는 상태만 포함

🎣 hooks/

• 용도: 여러 페이지에서 재사용되는 커스텀 훅
• 범위: 페이지별 전용 훅은 해당 페이지 폴더에 위치

🛠️ utils/

• 용도: 순수 함수 기반의 유틸리티 함수들
• 원칙: 사이드 이펙트가 없는 함수만 포함

🌐 context/

• 용도: React Context API를 사용한 전역 상태
• 현재: 빈 폴더 (필요시 추가)

📊 data/

• 용도: 정적 데이터, 상수, 설정 파일
• 예시: API 엔드포인트, 테마 설정, 상수 값들

🎯 설계 원칙

1. 📍 지역성 우선: 특정 페이지에서만 사용되는 코드는 해당 페이지 폴더에 위치
2. 🔄 재사용성: 여러 곳에서 사용되는 코드만 전역 폴더에 위치
3. 🏗️ 명확한 책임: 각 폴더는 명확한 역할과 책임을 가짐
4. 📈 확장성: 새로운 페이지나 기능 추가 시 일관된 구조 유지

🚀 장점

• ✅ 높은 응집도: 관련 코드들이 한 곳에 모여있음
• ✅ 낮은 결합도: 페이지별 코드가 독립적으로 관리됨
• ✅ 쉬운 유지보수: 기능 수정 시 해당 페이지 폴더만 확인
• ✅ 명확한 구조: 코드 위치를 직관적으로 파악 가능
• ✅ 팀 협업 개선: 일관된 구조로 팀원 간 이해도 향상 ]