# 페이지 레이아웃 템플릿 가이드

이 디렉토리에는 프로젝트의 표준 페이지 레이아웃 템플릿이 포함되어 있습니다.

## 📋 사용 가능한 템플릿

### 1. `dashboard-layout.html`
**용도**: 메인 대시보드 페이지
**특징**:
- 빠른 작업 섹션 포함
- 여러 콘텐츠 섹션 지원
- 푸터 포함
- 토스트 알림 지원

**적합한 페이지**:
- `dashboard.html` (메인 대시보드)
- 통계/분석 대시보드

---

### 2. `work-layout.html`
**용도**: 작업 관련 페이지
**특징**:
- 페이지 제목 및 설명 섹션
- 검색/필터 영역
- 작업 콘텐츠 카드
- 로딩 스피너
- 모달 지원

**적합한 페이지**:
- `work/report-create.html` (작업 보고서 작성)
- `work/report-view.html` (작업 현황 확인)
- `work/analysis.html` (작업 분석)

---

### 3. `admin-layout.html`
**용도**: 관리자 기능 페이지
**특징**:
- 뒤로가기 버튼이 있는 헤더
- 탭 네비게이션 지원
- 데이터 테이블 레이아웃
- 페이지네이션
- 일괄 선택 기능
- 확인 모달

**적합한 페이지**:
- `admin/projects.html` (프로젝트 관리)
- `admin/workers.html` (작업자 관리)
- `admin/codes.html` (코드 관리)
- `admin/accounts.html` (계정 관리)

---

### 4. `simple-layout.html`
**용도**: 단순한 폼/프로필 페이지
**특징**:
- 좁은 중앙 컨테이너 (최대 800px)
- 폼 요소 스타일링
- 뒤로가기 버튼
- 정보 표시 리스트
- 반응형 폼 레이아웃

**적합한 페이지**:
- `profile/info.html` (내 프로필)
- `profile/password.html` (비밀번호 변경)
- 설정 페이지

---

## 🎨 공통 요소

모든 템플릿에는 다음이 포함됩니다:

### CSS
```html
<link rel="stylesheet" href="/css/design-system.css">
```
- 색상, 타이포그래피, 간격 등 CSS 변수
- 공통 컴포넌트 스타일 (버튼, 카드, 배지 등)

### 상단 네비게이션 (Navbar)
```html
<div id="navbar-container"></div>
<script type="module" src="/js/load-navbar.js"></script>
```
- 자동으로 로드되는 표준 네비게이션 헤더
- 사용자 프로필 메뉴, 로그아웃 기능 포함
- 현재 시각 표시

### 사이드바 네비게이션 (Sidebar)
```html
<div id="sidebar-container"></div>
<script type="module" src="/js/load-sidebar.js"></script>
```
- 카테고리별 접이식 메뉴 (작업관리, 안전관리, 근태관리, 시스템관리)
- 사용자 권한에 따른 메뉴 자동 필터링
- 접기/펼치기 상태 자동 저장 (localStorage)
- 현재 페이지 자동 하이라이트

### 인증
```html
<script type="module" src="/js/auth-check.js"></script>
```
- 페이지 접근 시 자동 로그인 확인
- 미인증 시 로그인 페이지로 리다이렉트

---

## 🚀 템플릿 사용 방법

### 1단계: 템플릿 복사
```bash
cp web-ui/templates/work-layout.html web-ui/pages/work/new-page.html
```

### 2단계: 메타데이터 수정
```html
<title>새 페이지 | 테크니컬코리아</title>
```

### 3단계: CSS/JS 추가
```html
<!-- 페이지별 CSS -->
<link rel="stylesheet" href="/css/new-page.css">

<!-- 페이지별 JS -->
<script type="module" src="/js/new-page.js" defer></script>
```

### 4단계: 콘텐츠 작성
템플릿의 주석 처리된 예시 코드를 참고하여 실제 콘텐츠로 교체합니다.

---

## 📐 CSS 변수 활용

모든 템플릿은 `design-system.css`의 CSS 변수를 사용합니다:

### 색상
```css
var(--primary-500)    /* 하늘색 (기본) */
var(--success-500)    /* 성공 (녹색) */
var(--error-500)      /* 오류 (빨간색) */
var(--text-primary)   /* 주요 텍스트 */
```

### 간격
```css
var(--space-2)  /* 8px */
var(--space-4)  /* 16px */
var(--space-6)  /* 24px */
```

### 타이포그래피
```css
var(--text-sm)       /* 14px */
var(--text-base)     /* 16px */
var(--font-medium)   /* 500 */
var(--font-bold)     /* 700 */
```

### 기타
```css
var(--radius-md)         /* 8px 둥근 모서리 */
var(--shadow-md)         /* 중간 그림자 */
var(--transition-fast)   /* 150ms 전환 */
```

---

## ✅ 모범 사례

### DO ✅
- 템플릿을 복사하여 시작
- CSS 변수 사용
- 의미있는 클래스명 사용
- 주석으로 섹션 구분
- 반응형 디자인 고려

### DON'T ❌
- 하드코딩된 색상 사용 (`#0ea5e9` 대신 `var(--primary-500)`)
- 인라인 스타일 남발
- 중복 코드 작성
- 템플릿 구조 크게 변경

---

## 🔄 템플릿 업데이트

템플릿이 업데이트되면:
1. 기존 페이지를 즉시 수정할 필요는 없음
2. 새 기능이 필요한 페이지만 선택적으로 적용
3. 주요 변경사항은 `개발 log/` 디렉토리에 문서화

---

## 📞 문의

템플릿 사용에 대한 질문이나 개선 제안이 있으면:
- `CODING_GUIDE.md` 참조
- 개발팀에 문의

---

**마지막 업데이트**: 2026-01-20
**버전**: 1.0.0