docs: add documentation for root layout structure and component hierarchy

- Introduced a new markdown file detailing the root layout structure used across the application.
- Included a mermaid diagram to illustrate the component hierarchy and data flow.
- Documented key components such as providers, layout components, and session management details.
- Emphasized server-side session management and performance optimization strategies.

diagram/layout.md

@@ -0,0 +1,71 @@
+# 루트 레이아웃 구조
+
+이 문서는 애플리케이션의 모든 페이지에서 공통으로 사용되는 루트 레이아웃(`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 구조 사용
+- 서버 사이드 렌더링 지원
+- 하이드레이션 억제를 통한 성능 최적화