hyungi/TK-FB-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: UI 표준화 Phase 1 - 네비게이션/헤더 통일

Browse Source 
## 주요 변경사항

### 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>
This commit is contained in:
Hyungi Ahn
2026-01-20 14:08:54 +09:00
parent 6b7f9d4627
commit 0ec099b493
16 changed files with 1400 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
web-ui/templates/README.md Normal file
View File

@@ -0,0 +1,196 @@
# 페이지 레이아웃 템플릿 가이드
이 디렉토리에는 프로젝트의 표준 페이지 레이아웃 템플릿이 포함되어 있습니다.
## 📋 사용 가능한 템플릿
### 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

153
web-ui/templates/admin-layout.html Normal file
View File

@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>관리자 | 테크니컬코리아</title>
<!-- 모던 디자인 시스템 -->
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/modern-dashboard.css">
<!-- 페이지별 CSS 추가 -->
<!-- <link rel="stylesheet" href="/css/your-admin-page.css"> -->
<!-- 필수 스크립트 (순서 중요) -->
<script type="module" src="/js/api-config.js"></script>
<script type="module" src="/js/auth-check.js"></script>
<script type="module" src="/js/load-navbar.js"></script>
<!-- 페이지별 스크립트 추가 -->
<!-- <script type="module" src="/js/your-admin-page.js" defer></script> -->
</head>
<body>
<!-- 네비게이션 헤더 (자동 로드됨) -->
<div id="navbar-container"></div>
<!-- 메인 콘텐츠 -->
<main class="dashboard-main">
<div class="admin-page-container">
<!-- 페이지 헤더 -->
<div class="page-header">
<div class="page-header-left">
<button class="btn btn-secondary" onclick="history.back()">
<span>←</span>
뒤로
</button>
</div>
<div class="page-header-center">
<h2 class="page-title">⚙️ 관리 페이지</h2>
<p class="page-subtitle">시스템 설정 및 데이터 관리</p>
</div>
<div class="page-header-right">
<!-- 추가 액션 버튼 -->
<button class="btn btn-primary">
<span>➕</span>
추가
</button>
</div>
</div>
<!-- 관리 콘텐츠 카드 -->
<div class="admin-card">
<!-- 탭 네비게이션 (선택사항) -->
<div class="tab-navigation">
<button class="tab-btn active" data-tab="tab1">탭 1</button>
<button class="tab-btn" data-tab="tab2">탭 2</button>
<button class="tab-btn" data-tab="tab3">탭 3</button>
</div>
<!-- 검색/필터 영역 -->
<div class="admin-filters">
<div class="filter-group">
<label class="filter-label">검색</label>
<input type="text" class="filter-input" placeholder="검색어 입력">
</div>
<div class="filter-group">
<label class="filter-label">상태</label>
<select class="filter-select">
<option value="all">전체</option>
<option value="active">활성</option>
<option value="inactive">비활성</option>
</select>
</div>
<button class="btn btn-primary">
<span>🔍</span>
검색
</button>
</div>
<!-- 데이터 테이블 영역 -->
<div class="admin-table-container">
<table class="admin-table">
<thead>
<tr>
<th>
<input type="checkbox" id="selectAll">
</th>
<th>ID</th>
<th>이름</th>
<th>상태</th>
<th>등록일</th>
<th>작업</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- 데이터 행들이 동적으로 추가됩니다 -->
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>샘플 데이터</td>
<td><span class="badge badge-success">활성</span></td>
<td>2025-01-20</td>
<td>
<button class="btn btn-sm btn-secondary">수정</button>
<button class="btn btn-sm btn-error">삭제</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 페이지네이션 (선택사항) -->
<div class="pagination">
<button class="pagination-btn" disabled>이전</button>
<span class="pagination-info">1 / 10</span>
<button class="pagination-btn">다음</button>
</div>
</div>
</div>
</main>
<!-- 로딩 스피너 -->
<div id="loadingSpinner" class="loading-overlay" style="display: none;">
<div class="loading-content">
<div class="spinner"></div>
<p>처리 중...</p>
</div>
</div>
<!-- 확인 모달 -->
<div id="confirmModal" class="modal-overlay" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<h2 id="confirmModalTitle">확인</h2>
<button class="modal-close-btn" onclick="closeConfirmModal()">×</button>
</div>
<div class="modal-body">
<p id="confirmModalMessage">작업을 진행하시겠습니까?</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeConfirmModal()">취소</button>
<button class="btn btn-primary" id="confirmModalBtn">확인</button>
</div>
</div>
</div>
</body>
</html>

100
web-ui/templates/dashboard-layout.html Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>대시보드 | 테크니컬코리아</title>
<!-- 모던 디자인 시스템 -->
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/modern-dashboard.css">
<link rel="icon" type="image/png" href="/img/favicon.png">
<!-- 필수 스크립트 (순서 중요) -->
<script type="module" src="/js/api-config.js"></script>
<script type="module" src="/js/auth-check.js" defer></script>
<script type="module" src="/js/load-navbar.js"></script>
<!-- 페이지별 스크립트 추가 -->
<!-- <script type="module" src="/js/your-page.js" defer></script> -->
</head>
<body>
<!-- 메인 컨테이너 -->
<div class="dashboard-container">
<!-- 네비게이션 헤더 (자동 로드됨) -->
<div id="navbar-container"></div>
<!-- 메인 콘텐츠 -->
<main class="dashboard-main">
<!-- 빠른 작업 섹션 (선택사항) -->
<section class="quick-actions-section">
<div class="card">
<div class="card-header">
<h2 class="card-title">⚡ 빠른 작업</h2>
</div>
<div class="card-body">
<div class="quick-actions-grid-full">
<!-- 빠른 작업 카드들 추가 -->
<a href="#" class="quick-action-card">
<div class="action-icon-large">📝</div>
<div class="action-content">
<h3>작업 제목</h3>
<p>작업 설명</p>
</div>
<div class="action-arrow">→</div>
</a>
</div>
</div>
</div>
</section>
<!-- 주요 콘텐츠 섹션 -->
<section class="content-section">
<div class="card">
<div class="card-header">
<div class="flex justify-between items-center">
<h2 class="card-title">📊 콘텐츠 제목</h2>
<!-- 헤더 액션 버튼들 -->
<div class="header-actions">
<button class="btn btn-primary btn-sm">
<span>➕</span>
추가
</button>
</div>
</div>
</div>
<div class="card-body">
<!-- 메인 콘텐츠 영역 -->
<p>여기에 페이지 콘텐츠를 추가하세요.</p>
</div>
</div>
</section>
</main>
<!-- 푸터 -->
<footer class="dashboard-footer">
<div class="footer-content">
<p class="footer-text">
© 2025 (주)테크니컬코리아. 모든 권리 보유.
</p>
<div class="footer-links">
<a href="#" class="footer-link">도움말</a>
<a href="#" class="footer-link">문의하기</a>
<a href="#" class="footer-link">개인정보처리방침</a>
</div>
</div>
</footer>
</div>
<!-- 알림 토스트 (선택사항) -->
<div class="toast-container" id="toastContainer"></div>
</body>
</html>

295
web-ui/templates/simple-layout.html Normal file
View File

@@ -0,0 +1,295 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지 제목 | 테크니컬코리아</title>
<!-- 모던 디자인 시스템 -->
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/common.css">
<!-- 페이지별 CSS 추가 -->
<!-- <link rel="stylesheet" href="/css/your-page.css"> -->
<!-- 필수 스크립트 (순서 중요) -->
<script type="module" src="/js/api-config.js"></script>
<script type="module" src="/js/auth-check.js"></script>
<script type="module" src="/js/load-navbar.js"></script>
<!-- 페이지별 스크립트 추가 -->
<!-- <script type="module" src="/js/your-page.js" defer></script> -->
</head>
<body>
<!-- 네비게이션 헤더 (자동 로드됨) -->
<div id="navbar-container"></div>
<!-- 메인 콘텐츠 -->
<main class="simple-main">
<div class="simple-container">
<!-- 페이지 헤더 -->
<div class="page-header-simple">
<button class="btn btn-secondary" onclick="history.back()">
<span>←</span>
뒤로
</button>
<h2 class="page-title">페이지 제목</h2>
</div>
<!-- 콘텐츠 카드 -->
<div class="card">
<div class="card-header">
<h3 class="card-title">섹션 제목</h3>
</div>
<div class="card-body">
<!-- 폼 예시 -->
<form id="simpleForm" class="simple-form">
<!-- 입력 필드 그룹 -->
<div class="form-group">
<label class="form-label" for="input1">
입력 필드 1
<span class="required">*</span>
</label>
<input
type="text"
id="input1"
class="form-control"
placeholder="값을 입력하세요"
required
>
<small class="form-help">도움말 텍스트</small>
</div>
<!-- 선택 필드 -->
<div class="form-group">
<label class="form-label" for="select1">
선택 필드
</label>
<select id="select1" class="form-control">
<option value="">선택하세요</option>
<option value="option1">옵션 1</option>
<option value="option2">옵션 2</option>
</select>
</div>
<!-- 텍스트 영역 -->
<div class="form-group">
<label class="form-label" for="textarea1">
텍스트 영역
</label>
<textarea
id="textarea1"
class="form-control"
rows="4"
placeholder="내용을 입력하세요"
></textarea>
</div>
<!-- 체크박스 -->
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="checkbox1">
<span>동의합니다</span>
</label>
</div>
<!-- 라디오 버튼 -->
<div class="form-group">
<label class="form-label">옵션 선택</label>
<div class="radio-group">
<label class="radio-label">
<input type="radio" name="option" value="1" checked>
<span>옵션 1</span>
</label>
<label class="radio-label">
<input type="radio" name="option" value="2">
<span>옵션 2</span>
</label>
</div>
</div>
<!-- 버튼 그룹 -->
<div class="form-actions">
<button type="button" class="btn btn-secondary" onclick="history.back()">
취소
</button>
<button type="submit" class="btn btn-primary">
저장
</button>
</div>
</form>
</div>
</div>
<!-- 추가 정보 카드 (선택사항) -->
<div class="card" style="margin-top: var(--space-6);">
<div class="card-header">
<h3 class="card-title">추가 정보</h3>
</div>
<div class="card-body">
<div class="info-list">
<div class="info-item">
<span class="info-label">항목 1:</span>
<span class="info-value">값 1</span>
</div>
<div class="info-item">
<span class="info-label">항목 2:</span>
<span class="info-value">값 2</span>
</div>
<div class="info-item">
<span class="info-label">항목 3:</span>
<span class="info-value">값 3</span>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- 로딩 스피너 (선택사항) -->
<div id="loadingSpinner" class="loading-overlay" style="display: none;">
<div class="loading-content">
<div class="spinner"></div>
<p>처리 중...</p>
</div>
</div>
<!-- 알림 토스트 (선택사항) -->
<div class="toast-container" id="toastContainer"></div>
<style>
/* Simple Layout 전용 스타일 */
.simple-main {
min-height: calc(100vh - 80px);
padding: var(--space-6);
background: var(--bg-secondary);
}
.simple-container {
max-width: 800px;
margin: 0 auto;
}
.page-header-simple {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.simple-form {
max-width: 600px;
}
.form-group {
margin-bottom: var(--space-6);
}
.form-label {
display: block;
font-weight: var(--font-medium);
margin-bottom: var(--space-2);
color: var(--text-primary);
}
.form-label .required {
color: var(--error-500);
}
.form-control {
width: 100%;
padding: var(--space-3);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
font-size: var(--text-base);
transition: var(--transition-fast);
}
.form-control:focus {
outline: none;
border-color: var(--primary-500);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.form-help {
display: block;
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--text-tertiary);
}
.checkbox-label,
.radio-label {
display: flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
font-size: var(--text-base);
}
.radio-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.form-actions {
display: flex;
gap: var(--space-3);
justify-content: flex-end;
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--border-light);
}
.info-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.info-item {
display: flex;
justify-content: space-between;
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border-light);
}
.info-item:last-child {
border-bottom: none;
}
.info-label {
font-weight: var(--font-medium);
color: var(--text-secondary);
}
.info-value {
color: var(--text-primary);
}
@media (max-width: 768px) {
.simple-main {
padding: var(--space-4);
}
.form-actions {
flex-direction: column;
}
.form-actions .btn {
width: 100%;
}
}
</style>
</body>
</html>

127
web-ui/templates/work-layout.html Normal file
View File

@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>작업 관리 | 테크니컬코리아</title>
<!-- 모던 디자인 시스템 -->
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/modern-dashboard.css">
<!-- 페이지별 CSS 추가 -->
<!-- <link rel="stylesheet" href="/css/your-page.css"> -->
<!-- 필수 스크립트 (순서 중요) -->
<script type="module" src="/js/api-config.js"></script>
<script type="module" src="/js/auth-check.js"></script>
<script type="module" src="/js/load-navbar.js"></script>
<!-- 페이지별 스크립트 추가 -->
<!-- <script type="module" src="/js/your-page.js" defer></script> -->
</head>
<body>
<!-- 네비게이션 헤더 (자동 로드됨) -->
<div id="navbar-container"></div>
<!-- 메인 콘텐츠 -->
<main class="dashboard-main">
<div class="work-page-container">
<!-- 페이지 제목 섹션 -->
<div class="page-title-section">
<h2 class="page-title">📋 페이지 제목</h2>
<p class="page-subtitle">페이지 설명을 여기에 작성하세요</p>
</div>
<!-- 작업 콘텐츠 카드 -->
<div class="work-card">
<!-- 필터/검색 영역 (선택사항) -->
<div class="work-filters">
<div class="filter-group">
<label class="filter-label">검색</label>
<input type="text" class="filter-input" placeholder="검색어 입력">
</div>
<div class="filter-group">
<label class="filter-label">필터</label>
<select class="filter-select">
<option value="all">전체</option>
<option value="active">활성</option>
<option value="inactive">비활성</option>
</select>
</div>
<button class="btn btn-primary">
<span>🔍</span>
검색
</button>
</div>
<!-- 작업 콘텐츠 영역 -->
<div class="work-content">
<p>여기에 작업 관련 콘텐츠를 추가하세요.</p>
<!-- 예시: 데이터 테이블 -->
<!--
<table class="data-table">
<thead>
<tr>
<th>컬럼1</th>
<th>컬럼2</th>
<th>작업</th>
</tr>
</thead>
<tbody>
<tr>
<td>데이터1</td>
<td>데이터2</td>
<td>
<button class="btn btn-sm btn-secondary">수정</button>
</td>
</tr>
</tbody>
</table>
-->
</div>
<!-- 액션 버튼 영역 (선택사항) -->
<div class="work-actions">
<button class="btn btn-secondary">취소</button>
<button class="btn btn-primary">저장</button>
</div>
</div>
</div>
</main>
<!-- 로딩 스피너 (선택사항) -->
<div id="loadingSpinner" class="loading-overlay" style="display: none;">
<div class="loading-content">
<div class="spinner"></div>
<p>데이터를 불러오는 중...</p>
</div>
</div>
<!-- 모달 (선택사항) -->
<!--
<div id="modal" class="modal-overlay" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<h2 id="modalTitle">모달 제목</h2>
<button class="modal-close-btn" onclick="closeModal()">×</button>
</div>
<div class="modal-body">
모달 콘텐츠
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeModal()">취소</button>
<button class="btn btn-primary">확인</button>
</div>
</div>
</div>
-->
</body>
</html>