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

138
web-ui/components/navbar.html
View File

@@ -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>

25
web-ui/css/design-system.css
View File

@@ -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;

31
web-ui/css/modern-dashboard.css
View File

@@ -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;

27
web-ui/css/project-management.css
View File

@@ -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;

76
web-ui/js/modern-dashboard.js
View File

@@ -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');

1
web-ui/pages/admin/accounts.html
View File

@@ -4,6 +4,7 @@
<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?v=1">
<link rel="stylesheet" href="/css/admin-settings.css?v=1">
<link rel="icon" type="image/png" href="/img/favicon.png">

54
web-ui/pages/dashboard.html
View File

@@ -14,6 +14,7 @@
<!-- 스크립트 (순서 중요: api-config.js가 먼저 로드되어야 함) -->
<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/modern-dashboard.js?v=10" defer></script>
<script type="module" src="/js/group-leader-dashboard.js?v=1" defer></script>
</head>
@@ -22,57 +23,8 @@
<!-- 메인 컨테이너 -->
<div class="dashboard-container">
<!-- 헤더 -->
<header class="dashboard-header">
<div class="header-content">
<div class="header-left">
<div class="brand">
<img src="/img/logo.png" alt="테크니컬코리아" class="brand-logo">
<div class="brand-text">
<h1 class="brand-title">테크니컬코리아</h1>
<p class="brand-subtitle">작업 현황판</p>
</div>
</div>
</div>
<div class="header-center">
<div class="current-time" id="currentTime">
<span class="time-label">현재 시각</span>
<span class="time-value" id="timeValue">--:--:--</span>
</div>
</div>
<div class="header-right">
<div class="user-profile" id="userProfile">
<div class="user-avatar">
<span class="avatar-text" id="userInitial">사</span>
</div>
<div class="user-info">
<span class="user-name" id="userName">사용자</span>
<span class="user-role" id="userRole">작업자</span>
</div>
<div class="profile-menu" id="profileMenu">
<a href="/pages/profile/my-profile.html" class="menu-item">
<span class="menu-icon">👤</span>
내 프로필
</a>
<a href="/pages/profile/change-password.html" class="menu-item">
<span class="menu-icon">🔐</span>
비밀번호 변경
</a>
<a href="/pages/profile/admin-settings.html" class="menu-item admin-only">
<span class="menu-icon">⚙️</span>
관리자 설정
</a>
<button class="menu-item logout-btn" id="logoutBtn">
<span class="menu-icon">🚪</span>
로그아웃
</button>
</div>
</div>
</div>
</div>
</header>
<!-- 네비게이션 헤더 -->
<div id="navbar-container"></div>
<!-- 메인 콘텐츠 -->
<main class="dashboard-main">

1
web-ui/pages/work/analysis.html
View File

@@ -7,6 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/work-analysis.css?v=41">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/auth-check.js?v=1" defer></script>

61
web-ui/pages/work/report-view.html
View File

@@ -4,65 +4,14 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>작업 현황 확인 - TK 건설</title>
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/common.css?v=13">
<link rel="stylesheet" href="/css/modern-dashboard.css?v=14">
<link rel="stylesheet" href="/css/work-report-calendar.css?v=29">
</head>
<body>
<!-- 대시보드 헤더 -->
<header class="dashboard-header">
<div class="header-content">
<div class="header-left">
<div class="brand">
<img src="/img/logo.png" alt="테크니컬코리아" class="brand-logo">
<div class="brand-text">
<h1 class="brand-title">테크니컬코리아</h1>
<p class="brand-subtitle">작업 현황 확인</p>
</div>
</div>
</div>
<div class="header-center">
<div class="current-time" id="currentTime">
<span class="time-label">현재 시각</span>
<span class="time-value" id="timeValue">--:--:--</span>
</div>
</div>
<div class="header-right">
<div class="header-actions">
<button class="btn btn-secondary dashboard-btn" onclick="window.location.href='/pages/dashboard.html'">
<span class="btn-icon">🏠</span>
대시보드
</button>
</div>
<div class="user-profile" id="userProfile">
<div class="user-avatar">
<span class="avatar-text" id="userInitial">사</span>
</div>
<div class="user-info">
<span class="user-name" id="userName">사용자</span>
<span class="user-role" id="userRole">작업자</span>
</div>
<div class="profile-menu" id="profileMenu">
<a href="/pages/profile/my-profile.html" class="menu-item">
<span class="menu-icon">👤</span>
내 프로필
</a>
<a href="/pages/profile/change-password.html" class="menu-item">
<span class="menu-icon">🔐</span>
비밀번호 변경
</a>
<button class="menu-item logout-btn" id="logoutBtn">
<span class="menu-icon">🚪</span>
로그아웃
</button>
</div>
</div>
</div>
</div>
</header>
<!-- 네비게이션 헤더 -->
<div id="navbar-container"></div>
<!-- 메인 콘텐츠 -->
<main class="dashboard-main">
@@ -335,8 +284,8 @@
<!-- JavaScript -->
<script type="module" src="/js/api-config.js?v=13"></script>
<script src="/js/auth-check.js?v=13"></script>
<!-- load-navbar.js 제거: 이 페이지는 자체 헤더 사용 -->
<script type="module" src="/js/auth-check.js?v=13"></script>
<script type="module" src="/js/load-navbar.js"></script>
<script src="/js/modules/calendar/CalendarState.js?v=1"></script>
<script src="/js/modules/calendar/CalendarAPI.js?v=1"></script>
<script src="/js/modules/calendar/CalendarView.js?v=1"></script>

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>