yoosangwook
37435d2cca
- Introduced diagrams for the Login component structure, project architecture, and login sequence. - Detailed state management, external hooks, event handling, and UI components in the Login documentation. - Provided an overview of the component relationships and roles within the application architecture.
99 lines
2.3 KiB
Markdown
99 lines
2.3 KiB
Markdown
# 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를 기반으로 하며, 컴포넌트 기반 아키텍처를 따르고 있습니다. 각 기능별로 모듈화가 잘 되어있고, 공통 컴포넌트와 유틸리티를 효율적으로 재사용할 수 있도록 구성되어 있습니다.
|