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

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>