TK-FB-Project/web-ui/templates

페이지 레이아웃 템플릿 가이드

이 디렉토리에는 프로젝트의 표준 페이지 레이아웃 템플릿이 포함되어 있습니다.

📋 사용 가능한 템플릿

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

<link rel="stylesheet" href="/css/design-system.css">

• 색상, 타이포그래피, 간격 등 CSS 변수
• 공통 컴포넌트 스타일 (버튼, 카드, 배지 등)

상단 네비게이션 (Navbar)

<div id="navbar-container"></div>
<script type="module" src="/js/load-navbar.js"></script>

• 자동으로 로드되는 표준 네비게이션 헤더
• 사용자 프로필 메뉴, 로그아웃 기능 포함
• 현재 시각 표시

사이드바 네비게이션 (Sidebar)

<div id="sidebar-container"></div>
<script type="module" src="/js/load-sidebar.js"></script>

• 카테고리별 접이식 메뉴 (작업관리, 안전관리, 근태관리, 시스템관리)
• 사용자 권한에 따른 메뉴 자동 필터링
• 접기/펼치기 상태 자동 저장 (localStorage)
• 현재 페이지 자동 하이라이트

인증

<script type="module" src="/js/auth-check.js"></script>

• 페이지 접근 시 자동 로그인 확인
• 미인증 시 로그인 페이지로 리다이렉트

---

🚀 템플릿 사용 방법

1단계: 템플릿 복사

cp web-ui/templates/work-layout.html web-ui/pages/work/new-page.html

2단계: 메타데이터 수정

<title>새 페이지 | 테크니컬코리아</title>

3단계: CSS/JS 추가

<!-- 페이지별 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 변수를 사용합니다:

색상

var(--primary-500)    /* 하늘색 (기본) */
var(--success-500)    /* 성공 (녹색) */
var(--error-500)      /* 오류 (빨간색) */
var(--text-primary)   /* 주요 텍스트 */

간격

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(--font-bold)     /* 700 */

기타

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