onsitesurvey/diagram/mermaid.md

Project Structure Documentation

Component Relationship Diagram

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를 기반으로 하며, 컴포넌트 기반 아키텍처를 따르고 있습니다. 각 기능별로 모듈화가 잘 되어있고, 공통 컴포넌트와 유틸리티를 효율적으로 재사용할 수 있도록 구성되어 있습니다.