9998d9df96
- 헤더를 fixed로 변경하고 z-index를 200으로 높여 사이드바와 겹침 방지 - 대시보드에서 빠른 작업 섹션 제거 (사이드바로 대체) - 모든 템플릿(4개)에 사이드바 네비게이션 추가 - 템플릿 README에 사이드바 설명 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
208 lines
4.8 KiB
Markdown
208 lines
4.8 KiB
Markdown
# 페이지 레이아웃 템플릿 가이드
|
|
|
|
이 디렉토리에는 프로젝트의 표준 페이지 레이아웃 템플릿이 포함되어 있습니다.
|
|
|
|
## 📋 사용 가능한 템플릿
|
|
|
|
### 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
|