0ec099b493
## 주요 변경사항 ### 1. Design System 색상 업데이트 - 하늘색 계열 primary 색상으로 변경 (#0ea5e9, #38bdf8, #7dd3fc) - CSS 변수 추가: --header-gradient ### 2. Navbar 컴포넌트 표준화 - 50개 이상의 하드코딩 값을 CSS 변수로 변경 - 모든 페이지에서 동일한 헤더 스타일 적용 ### 3. 중복 코드 제거 (102줄) - dashboard.html: 50줄 → 2줄 (navbar 컴포넌트로 교체) - work/report-view.html: 54줄 → 2줄 (navbar 컴포넌트로 교체) - modern-dashboard.css: 중복 헤더 스타일 제거 - project-management.css: 중복 헤더 스타일 제거 ### 4. 표준 레이아웃 템플릿 생성 - dashboard-layout.html (대시보드용) - work-layout.html (작업 페이지용) - admin-layout.html (관리자 페이지용) - simple-layout.html (프로필/설정용) - templates/README.md (사용 가이드) ### 5. 누락된 design-system.css 추가 - work/report-view.html - work/analysis.html - admin/accounts.html ### 6. ES6 Module 문법 수정 - load-navbar.js: type="module" 추가 - modern-dashboard.js: navbar 엘리먼트 안전 처리 ## 문서 업데이트 - CODING_GUIDE.md: 표준 컴포넌트 사용법 추가 - 개발 log/2026-01-20-ui-standardization-phase1.md: 상세 작업 로그 ## 영향 - 수정: 10개 파일 - 신규: 6개 파일 (템플릿 5개 + 로그 1개) - 코드 감소: -102줄 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
197 lines
4.4 KiB
Markdown
197 lines
4.4 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 변수
|
|
- 공통 컴포넌트 스타일 (버튼, 카드, 배지 등)
|
|
|
|
### 네비게이션
|
|
```html
|
|
<div id="navbar-container"></div>
|
|
<script src="/js/load-navbar.js"></script>
|
|
```
|
|
- 자동으로 로드되는 표준 네비게이션 헤더
|
|
- 사용자 프로필 메뉴, 로그아웃 기능 포함
|
|
|
|
### 인증
|
|
```html
|
|
<script 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
|