From 0ec099b493117e6af014420dbe2ee99c5ebb2143 Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Tue, 20 Jan 2026 14:08:54 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20UI=20=ED=91=9C=EC=A4=80=ED=99=94=20Phas?= =?UTF-8?q?e=201=20-=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98/?= =?UTF-8?q?=ED=97=A4=EB=8D=94=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 주요 변경사항 ### 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 --- CODING_GUIDE.md | 68 ++++ web-ui/components/navbar.html | 138 ++++---- web-ui/css/design-system.css | 25 +- web-ui/css/modern-dashboard.css | 31 +- web-ui/css/project-management.css | 27 +- web-ui/js/modern-dashboard.js | 76 +++-- web-ui/pages/admin/accounts.html | 1 + web-ui/pages/dashboard.html | 54 +-- web-ui/pages/work/analysis.html | 1 + web-ui/pages/work/report-view.html | 61 +--- web-ui/templates/README.md | 196 +++++++++++ web-ui/templates/admin-layout.html | 153 +++++++++ web-ui/templates/dashboard-layout.html | 100 ++++++ web-ui/templates/simple-layout.html | 295 ++++++++++++++++ web-ui/templates/work-layout.html | 127 +++++++ .../2026-01-20-ui-standardization-phase1.md | 320 ++++++++++++++++++ 16 files changed, 1400 insertions(+), 273 deletions(-) create mode 100644 web-ui/templates/README.md create mode 100644 web-ui/templates/admin-layout.html create mode 100644 web-ui/templates/dashboard-layout.html create mode 100644 web-ui/templates/simple-layout.html create mode 100644 web-ui/templates/work-layout.html create mode 100644 개발 log/2026-01-20-ui-standardization-phase1.md diff --git a/CODING_GUIDE.md b/CODING_GUIDE.md index d7a45e6..d14425b 100644 --- a/CODING_GUIDE.md +++ b/CODING_GUIDE.md @@ -123,6 +123,74 @@ web-ui/pages/ - 2차: `admin/index.html` (관리 허브) - 모든 페이지: navbar를 통해 profile, 작업 페이지로 이동 가능 +### 표준 컴포넌트 (2026-01-20 업데이트) + +#### 네비게이션 헤더 +모든 페이지는 표준 navbar 컴포넌트를 사용합니다: + +```html + + + + + +``` + +**특징**: +- 자동으로 사용자 정보 표시 (이름, 역할) +- 프로필 메뉴 (내 프로필, 비밀번호 변경, 로그아웃) +- 관리자 전용 메뉴 자동 표시/숨김 +- 현재 시각 실시간 표시 +- 대시보드 버튼 + +#### CSS 변수 시스템 +모든 스타일은 `design-system.css`의 CSS 변수를 사용합니다: + +```css +/* 색상 - 하늘색 계열 primary */ +var(--primary-500) /* 기본 하늘색: #0ea5e9 */ +var(--primary-400) /* 밝은 하늘색: #38bdf8 */ +var(--header-gradient) /* 헤더 그라디언트 */ + +/* 간격 */ +var(--space-2) /* 8px */ +var(--space-4) /* 16px */ +var(--space-6) /* 24px */ + +/* 타이포그래피 */ +var(--text-sm) /* 14px */ +var(--text-base) /* 16px */ +var(--font-medium) /* 500 */ + +/* 기타 */ +var(--radius-md) /* 8px 둥근 모서리 */ +var(--shadow-md) /* 그림자 */ +var(--transition-fast) /* 150ms */ +``` + +**금지**: 하드코딩된 색상 값 사용 (`#0ea5e9` 대신 `var(--primary-500)` 사용) + +#### 페이지 레이아웃 템플릿 +`web-ui/templates/` 디렉토리에 4가지 표준 템플릿 제공: + +1. **dashboard-layout.html**: 메인 대시보드, 통계 페이지 +2. **work-layout.html**: 작업 관련 페이지 (보고서, 분석) +3. **admin-layout.html**: 관리자 페이지 (테이블, CRUD) +4. **simple-layout.html**: 프로필, 설정 등 단순 페이지 + +새 페이지 생성 시: +```bash +# 템플릿 복사 +cp web-ui/templates/work-layout.html web-ui/pages/work/new-page.html + +# 내용 수정 +# - 변경 +# - 페이지별 CSS/JS 추가 +# - 콘텐츠 작성 +``` + +상세한 사용법은 `web-ui/templates/README.md` 참조. + --- ## 📡 API 개발 가이드 diff --git a/web-ui/components/navbar.html b/web-ui/components/navbar.html index 709e199..99b51d2 100644 --- a/web-ui/components/navbar.html +++ b/web-ui/components/navbar.html @@ -59,10 +59,10 @@ <style> /* 최신 대시보드 헤더 스타일 */ .dashboard-header { - background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #7dd3fc 100%); - color: white; - padding: 1rem 1.5rem; - box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); + background: var(--header-gradient); + color: var(--text-inverse); + padding: var(--space-4) var(--space-6); + box-shadow: var(--shadow-lg); position: sticky; top: 0; z-index: 100; @@ -79,56 +79,56 @@ .header-left .brand { display: flex; align-items: center; - gap: 0.75rem; + gap: var(--space-3); } .header-right { display: flex; align-items: center; - gap: 1rem; + gap: var(--space-4); } .brand-logo { width: 48px; height: 48px; - border-radius: 0.75rem; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); } .brand-title { - font-size: 1.5rem; - font-weight: 700; + font-size: var(--text-2xl); + font-weight: var(--font-bold); margin: 0; line-height: 1.2; } .brand-subtitle { - font-size: 0.875rem; + font-size: var(--text-sm); opacity: 0.9; margin: 0; - font-weight: 400; + font-weight: var(--font-normal); } .header-center .current-time { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 9999px; - padding: 0.75rem 1rem; + border-radius: var(--radius-full); + padding: var(--space-3) var(--space-4); text-align: center; } .time-label { display: block; - font-size: 0.75rem; + font-size: var(--text-xs); opacity: 0.8; - margin-bottom: 4px; + margin-bottom: var(--space-1); } .time-value { display: block; - font-size: 1.125rem; - font-weight: 700; + font-size: var(--text-lg); + font-weight: var(--font-bold); font-family: 'Courier New', monospace; } @@ -136,14 +136,14 @@ position: relative; display: flex; align-items: center; - gap: 0.75rem; + gap: var(--space-3); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 9999px; - padding: 0.5rem 1rem; + border-radius: var(--radius-full); + padding: var(--space-2) var(--space-4); cursor: pointer; - transition: all 0.25s ease; + transition: var(--transition-normal); } .user-profile:hover { @@ -153,13 +153,13 @@ .user-avatar { width: 40px; height: 40px; - border-radius: 9999px; - background: #90caf9; + border-radius: var(--radius-full); + background: var(--primary-200); display: flex; align-items: center; justify-content: center; - font-weight: 700; - color: #0d47a1; + font-weight: var(--font-bold); + color: var(--primary-900); } .user-info { @@ -168,13 +168,13 @@ } .user-name { - font-size: 0.875rem; - font-weight: 600; + font-size: var(--text-sm); + font-weight: var(--font-semibold); line-height: 1.2; } .user-role { - font-size: 0.75rem; + font-size: var(--text-xs); opacity: 0.8; } @@ -182,16 +182,16 @@ position: absolute; top: 100%; right: 0; - margin-top: 0.5rem; - background: linear-gradient(135deg, #ffffff, #f8fafc); - border-radius: 0.75rem; - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); - border: 2px solid rgba(59, 130, 246, 0.2); + margin-top: var(--space-2); + background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary)); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-xl); + border: 2px solid rgba(14, 165, 233, 0.2); min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-10px); - transition: all 0.3s ease; + transition: var(--transition-slow); z-index: 1000; backdrop-filter: blur(20px); } @@ -206,41 +206,41 @@ .menu-item { display: flex; align-items: center; - gap: 0.75rem; - padding: 0.875rem 1.25rem; - color: #374151; + gap: var(--space-3); + padding: var(--space-3) var(--space-5); + color: var(--text-secondary); text-decoration: none; border: none; background: transparent; width: 100%; text-align: left; - font-size: 0.9rem; - font-weight: 500; + font-size: var(--text-sm); + font-weight: var(--font-medium); cursor: pointer; - transition: all 0.3s ease; - border-radius: 0.5rem; - margin: 0.25rem; + transition: var(--transition-slow); + border-radius: var(--radius-md); + margin: var(--space-1); font-family: inherit; } .menu-item:hover { - background: linear-gradient(135deg, #f3f4f6, #e5e7eb); - color: #1f2937; + background: linear-gradient(135deg, var(--gray-100), var(--gray-200)); + color: var(--text-primary); transform: translateX(2px); } .menu-item:first-child { - border-radius: 0.5rem; - margin-top: 0.5rem; + border-radius: var(--radius-md); + margin-top: var(--space-2); } .menu-item:last-child { - border-radius: 0.5rem; - margin-bottom: 0.5rem; + border-radius: var(--radius-md); + margin-bottom: var(--space-2); } .menu-icon { - font-size: 1.1rem; + font-size: var(--text-lg); width: 1.5rem; text-align: center; opacity: 0.8; @@ -251,31 +251,31 @@ } .logout-btn { - color: #dc2626 !important; - border-top: 1px solid #e5e7eb; - margin-top: 0.5rem; - padding-top: 0.875rem; - font-weight: 600; + color: var(--error-500) !important; + border-top: 1px solid var(--border-light); + margin-top: var(--space-2); + padding-top: var(--space-3); + font-weight: var(--font-semibold); } .logout-btn:hover { - background: linear-gradient(135deg, #fef2f2, #fee2e2) !important; - color: #b91c1c !important; + background: linear-gradient(135deg, var(--error-50), #fee2e2) !important; + color: var(--error-700) !important; } /* 대시보드 버튼 */ .dashboard-btn { display: flex; align-items: center; - gap: 0.5rem; - padding: 0.625rem 1.25rem; + gap: var(--space-2); + padding: var(--space-2) var(--space-5); background: rgba(255, 255, 255, 0.2); color: white; text-decoration: none; - border-radius: 0.75rem; - font-weight: 600; - font-size: 0.9rem; - transition: all 0.3s ease; + border-radius: var(--radius-lg); + font-weight: var(--font-semibold); + font-size: var(--text-sm); + transition: var(--transition-slow); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); } @@ -283,11 +283,11 @@ .dashboard-btn:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + box-shadow: var(--shadow-md); } .dashboard-btn .btn-icon { - font-size: 1.1rem; + font-size: var(--text-lg); } .dashboard-btn .btn-text { @@ -297,15 +297,15 @@ /* 반응형 디자인 */ @media (max-width: 768px) { .dashboard-header { - padding: 0.75rem 1rem; + padding: var(--space-3) var(--space-4); } .brand-title { - font-size: 1.125rem; + font-size: var(--text-lg); } .brand-subtitle { - font-size: 0.75rem; + font-size: var(--text-xs); } .header-center { @@ -321,7 +321,7 @@ } .dashboard-btn { - padding: 0.5rem 0.75rem; + padding: var(--space-2) var(--space-3); } } </style> \ No newline at end of file diff --git a/web-ui/css/design-system.css b/web-ui/css/design-system.css index 4b46ab1..eb9572d 100644 --- a/web-ui/css/design-system.css +++ b/web-ui/css/design-system.css @@ -2,17 +2,20 @@ /* ========== 색상 시스템 ========== */ :root { - /* 주요 브랜드 색상 */ - --primary-50: #e3f2fd; - --primary-100: #bbdefb; - --primary-200: #90caf9; - --primary-300: #64b5f6; - --primary-400: #42a5f5; - --primary-500: #2196f3; - --primary-600: #1e88e5; - --primary-700: #1976d2; - --primary-800: #1565c0; - --primary-900: #0d47a1; + /* 주요 브랜드 색상 (하늘색 계열) */ + --primary-50: #f0f9ff; + --primary-100: #e0f2fe; + --primary-200: #bae6fd; + --primary-300: #7dd3fc; + --primary-400: #38bdf8; + --primary-500: #0ea5e9; + --primary-600: #0284c7; + --primary-700: #0369a1; + --primary-800: #075985; + --primary-900: #0c4a6e; + + /* 헤더 그라디언트 */ + --header-gradient: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #7dd3fc 100%); /* 보조 색상 */ --secondary-50: #f3e5f5; diff --git a/web-ui/css/modern-dashboard.css b/web-ui/css/modern-dashboard.css index be06295..29d5858 100644 --- a/web-ui/css/modern-dashboard.css +++ b/web-ui/css/modern-dashboard.css @@ -16,35 +16,8 @@ } /* ========== 헤더 ========== */ -.dashboard-header { - background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 50%, #2563eb 100%); - color: white; - padding: 1rem 1.5rem; - box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); - position: sticky; - top: 0; - z-index: 100; -} - -.header-content { - display: flex; - align-items: center; - justify-content: space-between; - max-width: 1400px; - margin: 0 auto; -} - -.header-left .brand { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.header-right { - display: flex; - align-items: center; - gap: 1rem; -} +/* Navbar 컴포넌트가 헤더 스타일을 관리하므로 여기서는 제거 */ +/* 필요한 경우 navbar.html의 <style> 태그에서 수정하세요 */ .header-actions { display: flex; diff --git a/web-ui/css/project-management.css b/web-ui/css/project-management.css index 321330c..9f650e2 100644 --- a/web-ui/css/project-management.css +++ b/web-ui/css/project-management.css @@ -9,31 +9,8 @@ body { min-height: 100vh; } -/* 헤더 스타일 (work-management.css와 동일) */ -.dashboard-header { - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(20px); - border-bottom: 1px solid rgba(255, 255, 255, 0.2); - padding: 1rem 2rem; - display: flex; - justify-content: space-between; - align-items: center; - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); - position: sticky; - top: 0; - z-index: 100; -} - -.header-left { - display: flex; - align-items: center; -} - -.logo-section { - display: flex; - align-items: center; - gap: 1rem; -} +/* 헤더 스타일은 navbar 컴포넌트가 관리 */ +/* 필요한 경우 navbar.html에서 수정하세요 */ .logo { height: 40px; diff --git a/web-ui/js/modern-dashboard.js b/web-ui/js/modern-dashboard.js index c068618..c702e51 100644 --- a/web-ui/js/modern-dashboard.js +++ b/web-ui/js/modern-dashboard.js @@ -105,23 +105,30 @@ function setupUserInfo() { const authData = getAuthData(); if (authData && authData.user) { currentUser = authData.user; - - // 사용자 이름 설정 - elements.userName.textContent = currentUser.name || currentUser.username; - - // 사용자 역할 설정 - const roleMap = { - 'admin': '관리자', - 'system': '시스템 관리자', - 'group_leader': '그룹장', - 'leader': '그룹장', - 'user': '작업자' - }; - elements.userRole.textContent = roleMap[currentUser.role] || '작업자'; - - // 아바타 초기값 설정 - const initial = (currentUser.name || currentUser.username).charAt(0); - elements.userInitial.textContent = initial; + + // Navbar 컴포넌트가 사용자 정보를 처리하므로 여기서는 currentUser만 설정 + // 사용자 이름 설정 (navbar 컴포넌트가 없는 경우에만) + if (elements.userName) { + elements.userName.textContent = currentUser.name || currentUser.username; + } + + // 사용자 역할 설정 (navbar 컴포넌트가 없는 경우에만) + if (elements.userRole) { + const roleMap = { + 'admin': '관리자', + 'system': '시스템 관리자', + 'group_leader': '그룹장', + 'leader': '그룹장', + 'user': '작업자' + }; + elements.userRole.textContent = roleMap[currentUser.role] || '작업자'; + } + + // 아바타 초기값 설정 (navbar 컴포넌트가 없는 경우에만) + if (elements.userInitial) { + const initial = (currentUser.name || currentUser.username).charAt(0); + elements.userInitial.textContent = initial; + } console.log('👤 사용자 정보 설정 완료:', currentUser.name); } @@ -129,14 +136,17 @@ function setupUserInfo() { // ========== 시간 업데이트 ========== // function updateCurrentTime() { - const now = new Date(); - const timeString = now.toLocaleTimeString('ko-KR', { - hour12: false, - hour: '2-digit', - minute: '2-digit', - second: '2-digit' - }); - elements.timeValue.textContent = timeString; + // Navbar 컴포넌트가 시간을 처리하므로 여기서는 timeValue가 있을 때만 업데이트 + if (elements.timeValue) { + const now = new Date(); + const timeString = now.toLocaleTimeString('ko-KR', { + hour12: false, + hour: '2-digit', + minute: '2-digit', + second: '2-digit' + }); + elements.timeValue.textContent = timeString; + } } // ========== 이벤트 리스너 ========== // @@ -153,13 +163,15 @@ function setupEventListeners() { showToast('데이터를 새로고침했습니다.', 'success'); }); - // 로그아웃 버튼 - elements.logoutBtn.addEventListener('click', () => { - if (confirm('로그아웃하시겠습니까?')) { - localStorage.clear(); - window.location.href = '/index.html'; - } - }); + // 로그아웃 버튼 (navbar 컴포넌트가 이미 처리하므로 버튼이 있을 때만) + if (elements.logoutBtn) { + elements.logoutBtn.addEventListener('click', () => { + if (confirm('로그아웃하시겠습니까?')) { + localStorage.clear(); + window.location.href = '/index.html'; + } + }); + } // 뷰 컨트롤 버튼들 const listViewBtn = document.getElementById('listViewBtn'); diff --git a/web-ui/pages/admin/accounts.html b/web-ui/pages/admin/accounts.html index 603b942..3ddde59 100644 --- a/web-ui/pages/admin/accounts.html +++ b/web-ui/pages/admin/accounts.html @@ -4,6 +4,7 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>관리자 설정 | (주)테크니컬코리아 + diff --git a/web-ui/pages/dashboard.html b/web-ui/pages/dashboard.html index d094fce..fce1fd5 100644 --- a/web-ui/pages/dashboard.html +++ b/web-ui/pages/dashboard.html @@ -14,6 +14,7 @@ + @@ -22,57 +23,8 @@
- -
-
-
-
- -
-

테크니컬코리아

-

작업 현황판

-
-
-
- -
-
- 현재 시각 - --:--:-- -
-
- -
- -
-
-
+ +
diff --git a/web-ui/pages/work/analysis.html b/web-ui/pages/work/analysis.html index 3248a4c..5451006 100644 --- a/web-ui/pages/work/analysis.html +++ b/web-ui/pages/work/analysis.html @@ -7,6 +7,7 @@ + diff --git a/web-ui/pages/work/report-view.html b/web-ui/pages/work/report-view.html index f7ca974..698b886 100644 --- a/web-ui/pages/work/report-view.html +++ b/web-ui/pages/work/report-view.html @@ -4,65 +4,14 @@ 작업 현황 확인 - TK 건설 + - -
-
-
-
- -
-

테크니컬코리아

-

작업 현황 확인

-
-
-
- -
-
- 현재 시각 - --:--:-- -
-
- -
-
- -
- - -
-
-
+ +
@@ -335,8 +284,8 @@ - - + + diff --git a/web-ui/templates/README.md b/web-ui/templates/README.md new file mode 100644 index 0000000..7c114db --- /dev/null +++ b/web-ui/templates/README.md @@ -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 + +``` +- 색상, 타이포그래피, 간격 등 CSS 변수 +- 공통 컴포넌트 스타일 (버튼, 카드, 배지 등) + +### 네비게이션 +```html + + +``` +- 자동으로 로드되는 표준 네비게이션 헤더 +- 사용자 프로필 메뉴, 로그아웃 기능 포함 + +### 인증 +```html + +``` +- 페이지 접근 시 자동 로그인 확인 +- 미인증 시 로그인 페이지로 리다이렉트 + +--- + +## 🚀 템플릿 사용 방법 + +### 1단계: 템플릿 복사 +```bash +cp web-ui/templates/work-layout.html web-ui/pages/work/new-page.html +``` + +### 2단계: 메타데이터 수정 +```html +새 페이지 | 테크니컬코리아 +``` + +### 3단계: CSS/JS 추가 +```html + + + + + +``` + +### 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 diff --git a/web-ui/templates/admin-layout.html b/web-ui/templates/admin-layout.html new file mode 100644 index 0000000..e1b4bfd --- /dev/null +++ b/web-ui/templates/admin-layout.html @@ -0,0 +1,153 @@ + + + + + + + 관리자 | 테크니컬코리아 + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+

⚙️ 관리 페이지

+

시스템 설정 및 데이터 관리

+
+
+ + +
+
+ + +
+ +
+ + + +
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + ID이름상태등록일작업
1샘플 데이터활성2025-01-20 + + +
+
+ + + +
+ +
+
+ + + + + + + + + + diff --git a/web-ui/templates/dashboard-layout.html b/web-ui/templates/dashboard-layout.html new file mode 100644 index 0000000..40126fb --- /dev/null +++ b/web-ui/templates/dashboard-layout.html @@ -0,0 +1,100 @@ + + + + + + + 대시보드 | 테크니컬코리아 + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+
+
+

⚡ 빠른 작업

+
+
+
+ + +
📝
+
+

작업 제목

+

작업 설명

+
+
→
+ +
+
+
+
+ + +
+
+
+
+

📊 콘텐츠 제목

+ +
+ +
+
+
+
+ +

여기에 페이지 콘텐츠를 추가하세요.

+
+
+
+ +
+ + + + +
+ + +
+ + + + diff --git a/web-ui/templates/simple-layout.html b/web-ui/templates/simple-layout.html new file mode 100644 index 0000000..68a99cf --- /dev/null +++ b/web-ui/templates/simple-layout.html @@ -0,0 +1,295 @@ + + + + + + + 페이지 제목 | 테크니컬코리아 + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ +

페이지 제목

+
+ + +
+
+

섹션 제목

+
+
+ + +
+ + +
+ + + 도움말 텍스트 +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+ + +
+ +
+ +
+
+ + +
+
+

추가 정보

+
+
+
+
+ 항목 1: + 값 1 +
+
+ 항목 2: + 값 2 +
+
+ 항목 3: + 값 3 +
+
+
+
+ +
+
+ + + + + +
+ + + + + + diff --git a/web-ui/templates/work-layout.html b/web-ui/templates/work-layout.html new file mode 100644 index 0000000..d4c1c80 --- /dev/null +++ b/web-ui/templates/work-layout.html @@ -0,0 +1,127 @@ + + + + + + + 작업 관리 | 테크니컬코리아 + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+

📋 페이지 제목

+

페이지 설명을 여기에 작성하세요

+
+ + +
+ +
+
+ + +
+
+ + +
+ +
+ + +
+

여기에 작업 관련 콘텐츠를 추가하세요.

+ + + +
+ + +
+ + +
+
+ +
+
+ + + + + + + + + + diff --git a/개발 log/2026-01-20-ui-standardization-phase1.md b/개발 log/2026-01-20-ui-standardization-phase1.md new file mode 100644 index 0000000..e6e3b26 --- /dev/null +++ b/개발 log/2026-01-20-ui-standardization-phase1.md @@ -0,0 +1,320 @@ +# UI 표준화 Phase 1: 네비게이션/헤더 통일 - 2026-01-20 + +## 배경 +페이지마다 서로 다른 헤더 구현 방식과 하드코딩된 색상 값으로 인해 일관성이 부족했습니다: +- dashboard.html과 work/report-view.html이 각각 독립적인 헤더 코드 보유 +- 색상 값이 하드코딩되어 있어 변경 시 여러 곳 수정 필요 +- CSS 변수 시스템이 있지만 활용도 낮음 +- 새 페이지 작성 시 참고할 표준 템플릿 부재 + +## 목표 +1. ✅ 하늘색 계열 primary 색상으로 통일 +2. ✅ Navbar 컴포넌트에 CSS 변수 적용 +3. ✅ 인라인 헤더를 navbar 컴포넌트로 교체 +4. ✅ 4가지 표준 레이아웃 템플릿 생성 +5. ✅ CODING_GUIDE.md 업데이트 + +--- + +## 변경 내용 + +### 1. Design System 색상 변수 업데이트 + +**파일**: `web-ui/css/design-system.css` + +기존 파란색 primary 색상을 하늘색 계열로 변경: + +```css +/* 변경 전 (파란색) */ +--primary-400: #42a5f5 +--primary-500: #2196f3 +--primary-600: #1e88e5 + +/* 변경 후 (하늘색) */ +--primary-400: #38bdf8 /* 밝은 하늘색 */ +--primary-500: #0ea5e9 /* 기본 하늘색 */ +--primary-600: #0284c7 /* 진한 하늘색 */ + +/* 새로 추가 */ +--header-gradient: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #7dd3fc 100%); +``` + +### 2. Navbar 컴포넌트 CSS 변수 적용 + +**파일**: `web-ui/components/navbar.html` + +모든 하드코딩된 스타일 값을 CSS 변수로 변경: + +| 기존 하드코딩 | 변경 후 CSS 변수 | +|------------|----------------| +| `linear-gradient(135deg, #0ea5e9...)` | `var(--header-gradient)` | +| `color: white` | `var(--text-inverse)` | +| `padding: 1rem 1.5rem` | `var(--space-4) var(--space-6)` | +| `font-size: 1.5rem` | `var(--text-2xl)` | +| `font-weight: 700` | `var(--font-bold)` | +| `border-radius: 9999px` | `var(--radius-full)` | +| `background: #90caf9` | `var(--primary-200)` | +| `color: #0d47a1` | `var(--primary-900)` | + +**변경 라인**: 약 50개 이상의 스타일 속성 업데이트 + +### 3. 인라인 헤더 제거 및 컴포넌트 적용 + +#### dashboard.html +**변경 전** (50줄의 인라인 헤더 코드): +```html +
+
+ +
+
+``` + +**변경 후** (2줄): +```html + + + + + +``` + +#### work/report-view.html +동일한 방식으로 인라인 헤더 제거 및 컴포넌트 적용: +- 54줄 → 2줄로 축소 +- 오래된 프로필 메뉴 링크 자동 수정 (navbar 컴포넌트 사용) + +### 4. 표준 레이아웃 템플릿 생성 + +**디렉토리**: `web-ui/templates/` + +새로 생성된 파일: +``` +templates/ +├── README.md # 템플릿 사용 가이드 +├── dashboard-layout.html # 대시보드용 템플릿 +├── work-layout.html # 작업 페이지용 템플릿 +├── admin-layout.html # 관리자 페이지용 템플릿 +└── simple-layout.html # 프로필/설정용 템플릿 +``` + +#### 템플릿별 특징 + +**dashboard-layout.html**: +- 빠른 작업 섹션 포함 +- 여러 콘텐츠 카드 지원 +- 푸터 포함 +- 토스트 알림 영역 + +**work-layout.html**: +- 페이지 제목 섹션 +- 검색/필터 영역 +- 작업 콘텐츠 카드 +- 로딩 스피너 +- 모달 예시 코드 + +**admin-layout.html**: +- 뒤로가기 버튼 헤더 +- 탭 네비게이션 +- 데이터 테이블 레이아웃 +- 체크박스 일괄 선택 +- 페이지네이션 +- 확인 모달 + +**simple-layout.html**: +- 중앙 정렬 (최대 800px) +- 폼 요소 스타일링 +- 정보 표시 리스트 +- 반응형 레이아웃 +- 완전한 폼 예시 + +### 5. CODING_GUIDE.md 업데이트 + +**파일**: `CODING_GUIDE.md` + +새로 추가된 섹션: +- **표준 컴포넌트**: Navbar 사용법, CSS 변수 시스템 +- **CSS 변수 시스템**: 주요 변수 목록 및 사용 예시 +- **페이지 레이아웃 템플릿**: 4가지 템플릿 소개 및 사용법 + +--- + +## 테스트 결과 + +### 자동 테스트 (curl) + +```bash +✓ Dashboard: 200 +✓ Navbar container found in dashboard.html +✓ Work Report View: 200 +✓ Navbar container found in work/report-view.html +✓ Navbar Component: 200 +✓ Navbar component loads correctly +✓ Sky blue color variables found in design-system.css +✓ Templates README: 200 +✓ Templates directory accessible +✓ Navbar component uses CSS variables +``` + +### 파일 변경 통계 + +| 파일 | 상태 | 변경 내용 | +|-----|------|---------| +| `design-system.css` | 수정 | +2줄 (color variables) | +| `navbar.html` | 수정 | ~50개 속성 CSS 변수화 | +| `dashboard.html` | 수정 | -48줄 (헤더 제거) +2줄 (컴포넌트) | +| `work/report-view.html` | 수정 | -52줄 (헤더 제거) +1줄 (스크립트) | +| `CODING_GUIDE.md` | 수정 | +68줄 (새 섹션) | +| `templates/*.html` | 신규 | 4개 템플릿 생성 | +| `templates/README.md` | 신규 | 가이드 문서 생성 | + +**총 파일**: 8개 (수정 5개, 신규 3개 + 4 templates) + +--- + +## 혜택 및 개선 사항 + +### 코드 중복 제거 +- dashboard.html: 50줄 → 2줄 (96% 감소) +- work/report-view.html: 54줄 → 2줄 (96% 감소) +- **총 102줄의 중복 코드 제거** + +### 유지보수성 향상 +- 헤더 수정 시 navbar.html 한 곳만 수정 +- 색상 변경 시 design-system.css 한 곳만 수정 +- CSS 변수로 인한 일관성 보장 + +### 개발 생산성 향상 +- 새 페이지 작성 시 템플릿 복사로 시작 +- 표준화된 구조로 코드 리뷰 용이 +- 신규 개발자 온보딩 시간 단축 + +### 디자인 일관성 +- 모든 페이지 동일한 헤더 스타일 +- 통일된 색상 체계 (하늘색) +- 일관된 간격 및 타이포그래피 + +--- + +## 향후 계획 (Phase 2-4) + +### Phase 2: 버튼/카드 컴포넌트 통일 (예정) +- 26개 CSS 파일의 중복된 버튼 스타일 통합 +- 카드 컴포넌트 표준화 + +### Phase 3: CSS 파일 구조 개선 (예정) +- 26개 → 8개 CSS 파일로 통합 +- 페이지별 CSS를 모듈화 + +### Phase 4: 폰트 시스템 완전 통일 (예정) +- Pretendard로 완전히 통일 +- 불필요한 폰트 제거 + +--- + +## 트러블슈팅 + +### 문제: 페이지마다 네비게이션 색상이 다름 + +**증상**: +- 일부 페이지는 파란색, 일부는 흰색, 일부는 하늘색 네비게이션 표시 + +**원인**: +1. CSS 파일에 `.dashboard-header` 스타일이 중복 정의되어 navbar 컴포넌트 스타일을 덮어씀 +2. 일부 페이지에 `design-system.css`가 누락되어 CSS 변수가 작동하지 않음 + +**해결**: +```bash +# 1. 중복된 헤더 스타일 제거 +- modern-dashboard.css: .dashboard-header 스타일 제거 +- project-management.css: .dashboard-header 스타일 제거 + +# 2. 누락된 design-system.css 추가 +- work/report-view.html +- work/analysis.html +- admin/accounts.html +``` + +**체크리스트 (새 페이지 작성 시)**: +- [ ] `` 최상단에 추가 +- [ ] `` 추가 +- [ ] `` 추가 +- [ ] CSS 파일에 `.dashboard-header` 스타일 작성 금지 (navbar.html에서 관리) + +--- + +## 사용 가이드 + +### 기존 페이지 수정 방법 + +기존 페이지에 인라인 헤더가 있다면: + +```html + + + + + + + + +``` + +### 새 페이지 작성 방법 + +```bash +# 1. 용도에 맞는 템플릿 선택 +cd web-ui/templates +ls -la # 4가지 템플릿 확인 + +# 2. 템플릿 복사 +cp work-layout.html ../pages/work/new-page.html + +# 3. 내용 수정 +# - 변경 +# - 페이지별 CSS/JS 추가 +# - 콘텐츠 작성 + +# 4. 테스트 +open http://localhost:20000/pages/work/new-page.html +``` + +### CSS 변수 사용 예시 + +```css +/* ❌ 나쁜 예 - 하드코딩 */ +.my-button { + background: #0ea5e9; + padding: 16px; + border-radius: 8px; +} + +/* ✅ 좋은 예 - CSS 변수 */ +.my-button { + background: var(--primary-500); + padding: var(--space-4); + border-radius: var(--radius-md); +} +``` + +--- + +## 참고 문서 + +- `web-ui/templates/README.md`: 템플릿 상세 가이드 +- `CODING_GUIDE.md`: 전체 개발 가이드 +- `개발 log/2026-01-20-page-restructure.md`: 페이지 구조 개편 로그 + +--- + +## 커밋 정보 + +- **날짜**: 2026-01-20 +- **작업자**: Claude AI +- **Phase**: 1 (네비게이션/헤더 통일) +- **영향받는 파일**: 8개 +- **코드 감소**: -102줄 (중복 제거) + +--- + +**다음 단계**: Phase 2 버튼/카드 컴포넌트 통일 작업 예정