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>
296 lines
7.6 KiB
HTML
296 lines
7.6 KiB
HTML
<!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>
|