# 루트 레이아웃 구조

이 문서는 애플리케이션의 모든 페이지에서 공통으로 사용되는 루트 레이아웃(`src/app/layout.tsx`)의 구조를 설명합니다.

## 컴포넌트 계층 구조

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

    D --> E[Header]
    D --> F[Children/Main Content]
    D --> G[Footer]
    D --> H[Float Button]
    D --> I[PopupController]

    J[Session Management] --> |Session Data| C

    subgraph Providers
        B
        C
    end

    subgraph Layout Components
        E
        F
        G
        H
        I
    end

    subgraph Session
        J
    end
```

## 주요 컴포넌트

### 프로바이더

- **ReactQueryProviders**: React Query 상태 관리를 위한 최상위 프로바이더
- **EdgeProvider**: 세션 데이터를 관리하고 애플리케이션에 제공

### 레이아웃 컴포넌트

- **Header**: 공통 헤더 컴포넌트
- **Children**: 메인 콘텐츠 영역 (페이지별 콘텐츠)
- **Footer**: 공통 푸터 컴포넌트
- **Float Button**: 플로팅 액션 버튼
- **PopupController**: 팝업/모달 상태 관리

### 세션 관리

- `iron-session`을 사용한 서버 사이드 세션 관리
- 세션 데이터는 EdgeProvider를 통해 전역적으로 접근 가능

## 데이터 흐름

1. 세션 데이터는 서버 사이드에서 관리됨
2. 세션 데이터는 EdgeProvider로 전달됨
3. 모든 레이아웃 컴포넌트는 세션 컨텍스트에 접근 가능
4. React Query는 데이터 페칭과 캐싱 기능을 제공

## 구현 세부사항

- 서버 컴포넌트로 구현
- Next.js App Router 구조 사용
- 서버 사이드 렌더링 지원
- 하이드레이션 억제를 통한 성능 최적화