레이아웃 가이드

레이아웃 구조

templates/
├── base.html               # 공통 레이아웃 (헤더, 사이드바, 콘텐츠 영역)
├── fragments/              # 공통 fragment 조각
│   ├── header.html
│   ├── sidebar.html
│   └── footer.html
└── {domain}/               # 도메인별 페이지
    └── page.html

base.html은 헤더, 사이드바, 콘텐츠 영역을 포함하는 공통 레이아웃이다.

2-column 레이아웃 구조

┌─────────────────────────────────────────────────────┐
│ (모바일) 햄버거 헤더                                  │
├───────────────────┬─────────────────────────────────┤
│                   │  breadcrumb (현재 위치 표시)      │
│  사이드바 (260px) │  섹션 > 페이지명                  │
│  - 섹션별 메뉴    │  ┌───────────────────────────┐   │
│  - accordion      │  │  문서 본문 (article)      │   │
│  - active 강조    │  └───────────────────────────┘   │
└───────────────────┴─────────────────────────────────┘

사이드바 구성

사이드바는 섹션별 accordion 메뉴로 구성하며, 현재 active 항목을 강조 표시한다.

<aside class="sidebar" id="sidebar">
    <div class="sidebar-header">
        <a href="/guide" class="site-title">개발 가이드</a>
    </div>
    <nav class="sidebar-nav">
        <!-- 섹션별 accordion -->
        <div th:each="menu : ${menus}" class="sidebar-section">
            <button class="section-toggle" th:text="${menu.sectionLabel}">섹션명</button>
            <ul class="section-items">
                <li th:each="item : ${menu.items}">
                    <a th:href="@{/guide/{s}/{p}(s=${item.sectionKey}, p=${item.pageKey})}"
                       th:text="${item.title}"
                       th:class="${item.slug == currentSlug} ? 'nav-link active' : 'nav-link'">
                        메뉴항목
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</aside>

섹션 순서 및 레이블

Breadcrumb (현재 위치)

breadcrumb으로 현재 위치를 표시한다. 형식: 섹션 > 페이지명

<nav class="breadcrumb">
    <span th:text="${currentSection}">섹션</span>
    <span class="breadcrumb-sep"> > </span>
    <span th:text="${pageTitle}">페이지명</span>
</nav>

Fragment 위치 및 사용

fragment 파일은 templates/fragments/ 디렉토리에 위치한다.

<!-- fragment 정의 (fragments/header.html) -->
<header th:fragment="header" class="site-header">
    <!-- 헤더 내용 -->
</header>

<!-- fragment 사용 -->
<th:block th:replace="~{fragments/header :: header}"></th:block>

모바일 대응

모바일 (768px 이하)
- 상단 고정 헤더에 햄버거 버튼 표시
- 사이드바: 기본 숨김 → 햄버거 클릭 시 슬라이드 인
- 오버레이 클릭 시 사이드바 닫힘
- 콘텐츠 full-width

<!-- 모바일 햄버거 버튼 -->
<header class="mobile-header">
    <button class="hamburger-btn" id="sidebarToggle">
        <span></span><span></span><span></span>
    </button>
    <span class="mobile-title">개발 가이드</span>
</header>

CSS 변수 (커스터마이징)

:root {
  --sidebar-width: 260px;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --text: #111827;
  --text-secondary: #6b7280;
  --bg: #ffffff;
  --sidebar-bg: #f8fafc;
  --border: #e2e8f0;
  --active-bg: #eff6ff;
  --active-color: #2563eb;
}

레이아웃 선택 기준