---
status: stable
related_pages: ["[[A01_Home/A01_frontend]]", "[[A02_ProgDetail/A02_frontend]]", "[[B01_Dashboard/B01_frontend]]", "[[B08_wf5_Quantity/B08_frontend]]"]
last_updated: 2026-07-12
source: ui_template/ 공통 UI 소스 코드 및 스타일시트
---

# UI Templates — Localization & Components

프론트엔드 공통 UI 요소: 다국어(i18n), 공통 컴포넌트, 테마 스타일. 디자인 시스템: [[design.md]]

## ui_template_locale.ts (다국어 관리)

**파일**: `ui_template/ui_template_locale.ts`

### 핵심 기능

| 항목 | 위치 | 역할 |
|---|---|---|
| `currentLanguageIndex` | `ui_template/ui_template_locale.ts:12` | 현재 활성화된 언어 인덱스 (ko=0, en=1) |
| `ui_locales` | `ui_template/ui_template_locale.ts:25` | 다국어 문구가 등록된 2차원 사전 객체 |
| `t(key)` | `ui_template/ui_template_locale.ts:152` | 지정된 키에 대응하는 현재 언어 텍스트 반환 헬퍼 |

### 사용처 (역참조)
- [[A01_Home/A01_frontend]] — MOCK_NEWS 태그, 섹션 제목
- [[A02_ProgDetail/A02_frontend]] — 워크플로우 스텝, 기술 카드
- [[a00_app_shell_framework]] — 헤더 네비, 언어 토글, 버튼 라벨
- 모든 A0x/B0x 페이지 — 동적 텍스트 로드

## ui_template_elements.ts (공통 컴포넌트)

**파일**: `ui_template/ui_template_elements.ts`

### 제공 컴포넌트

| 항목 | 위치 | 역할 |
|---|---|---|
| `createButton(opts)` | `ui_template/ui_template_elements.ts:60` | 버튼. variant: `filled`(기본)/`ghost`/`pill`/`danger` |
| `createInputField(opts)` | `ui_template/ui_template_elements.ts:102` | 입력필드(라벨+입력+에러슬롯), setError 핸들 반환 |
| `createSelectField(opts)` | `ui_template/ui_template_elements.ts:164` | 드롭다운 select 필드 |
| `createCard(opts)` | `ui_template/ui_template_elements.ts:209` | 카드(title + body 배열, raised 옵션) |
| `createTag(label, variant?)` | `ui_template/ui_template_elements.ts:228` | 태그. variant: `accent`/`neutral`(기본)/`success`/`warning`/`danger` |
| `showLoadingOverlay()` | `ui_template/ui_template_elements.ts:253` | 로딩 스피너 오버레이 표시(참조카운트) |
| `hideLoadingOverlay()` | `ui_template/ui_template_elements.ts:259` | 로딩 오버레이 해제 |
| `showToast(msg, kind?, ms?)` | `ui_template/ui_template_elements.ts:282` | 토스트 알림. kind: success/error/info/warning |
| `createWorkflowShell(opts)` | `ui_template/ui_template_elements.ts:315` | 워크플로우 3단 레이아웃(헤더+좌측패널+우측뷰어) |
| `createLineChart(opts)` | `ui_template/ui_template_elements.ts:402` | 시계열 스플라인 차트(인라인 SVG, 외부 라이브러리 없음) |
| `injectBaseStyles()` | `ui_template/ui_template_elements.ts:843` | 공통 컴포넌트 기본 스타일 1회 주입 |

### 사용처 (역참조)
- [[A01_Home/A01_frontend]] — createButton, createCard, createTag
- [[A02_ProgDetail/A02_frontend]] — createButton, createCard
- [[A03_CompDetail/A03_frontend]] — createCard
- [[A04_NewsHistory/A04_frontend]] — createTag
- [[A05_EduDetail/A05_frontend]] — createButton, createCard
- [[a00_app_shell_framework]] — createButton(헤더 네비/인증), createWorkflowShell
- B그룹 모든 페이지 — createWorkflowShell, createLineChart(B01 대시보드)

## theme.css (스타일 변수)

**파일**: `ui_template/theme.css`

### 핵심 변수

| 항목 | 위치 | 역할 |
|---|---|---|
| `--color-primary`, `--color-primary-text` | `ui_template/theme.css:10` | 기본 색상 및 기본 텍스트 색상 |
| `--color-canvas`, `--color-paper` | `ui_template/theme.css:15` | 기본 캔버스 배경 및 레이어 카드 배경 |
| `--color-deep-iris`, `--color-mist-violet` | `ui_template/theme.css:22` | 라벤더 그라디언트 및 브랜드 서브 컬러 |
| `--spacing-8`, `--spacing-16` 등 | `ui_template/theme.css:45` | 기본 마진/패딩 간격 시스템 (8px 배수) |
| `--text-heading-lg`, `--text-body` 등 | `ui_template/theme.css:70` | 타이포그래피 크기 및 라인하이트 스케일 |
| `--radius-cards`, `--radius-icons` | `ui_template/theme.css:110` | 8px 등의 둥근 테두리 곡률 반지름 변수 |
| `--z-header` | `ui_template/theme.css:125` | 전역 헤더 고정용 z-index 인덱스 값 |

## 제약 (backend.md §1)

1. **다국어**: 모든 UI 문구는 반드시 `ui_locales` 등록 후 `L(key)` 또는 `t(key)`로만 참조
2. **스타일**: CSS는 `theme.css` 변수만 사용, 하드코드 색상/단위 금지
3. **컴포넌트 재사용**: `createButton`, `createCard`, `createTag`, `createWorkflowShell` 우선 사용
4. **명명**: 이벤트 핸들러는 `on[페이지]_[기능]_[액션]` 규칙 준수

## 의존성

- **Locale**: 모든 페이지에서 `currentLanguageIndex` 조회
- **요소**: 페이지별로 필요한 컴포넌트만 import