# Project Structure Documentation

## Component Relationship Diagram

```mermaid
graph TD
    subgraph Root
        A[RootLayout] --> B[ReactQueryProviders]
        B --> C[EdgeProvider]
        C --> D[HTML Structure]
    end

    subgraph Layout Components
        D --> E[Header]
        D --> F[Main Content]
        D --> G[Footer]
        D --> H[Float Button]
        D --> I[PopupController]
    end

    subgraph Pages
        F --> J[Login]
        F --> K[Survey Sale]
        F --> L[Suitable]
        F --> M[Inquiry]
        F --> N[Password Reset]
        F --> O[PDF]
    end

    subgraph Providers
        P1[ReactQueryProvider]
        P2[EdgeProvider]
    end

    subgraph Components
        C1[UI Components]
        C2[Popup Components]
        C3[PDF Components]
        C4[Survey Components]
        C5[Inquiry Components]
    end

    subgraph Utils
        U1[Session Management]
        U2[Mailer]
        U3[API Routes]
    end

    %% Relationships
    A --> P1
    A --> P2
    J --> U1
    K --> C4
    L --> C4
    M --> C5
    N --> U2
    O --> C3
```

## Structure Explanation

### 1. Root Layout

- `RootLayout`이 전체 애플리케이션의 기본 구조를 정의
- `ReactQueryProviders`와 `EdgeProvider`로 감싸져 있음

### 2. Layout Components

- Header, Footer, Float Button 등 공통 레이아웃 컴포넌트
- `PopupController`로 팝업 관리

### 3. Pages

- Next.js App Router 기반의 페이지 구조
- Login, Survey Sale, Suitable, Inquiry 등 주요 페이지들

### 4. Providers

- `ReactQueryProvider`: 데이터 페칭 관리
- `EdgeProvider`: 세션 및 상태 관리

### 5. Components

- UI Components: 공통 UI 요소
- Popup Components: 팝업 관련 컴포넌트
- PDF Components: PDF 생성/관리 컴포넌트
- Survey Components: 설문 관련 컴포넌트
- Inquiry Components: 문의 관련 컴포넌트

### 6. Utils

- Session Management: 세션 관리
- Mailer: 이메일 발송 기능
- API Routes: 백엔드 API 엔드포인트

## Architecture Overview

이 구조는 Next.js의 App Router를 기반으로 하며, 컴포넌트 기반 아키텍처를 따르고 있습니다. 각 기능별로 모듈화가 잘 되어있고, 공통 컴포넌트와 유틸리티를 효율적으로 재사용할 수 있도록 구성되어 있습니다.