---
status: stable
related_pages: ["[[A01_Home/A01_frontend]]", "[[A02_ProgDetail/A02_frontend]]", "[[B01_Dashboard/B01_frontend]]", "[[B03_FileInput/B03_frontend]]", "[[B04_PreProcess/B04_frontend]]", "[[B05_Profile/B05_frontend]]", "[[B06_Section/B06_frontend]]", "[[B07_Quantity/B07_frontend]]", "[[B08_DesignDetail/B08_frontend]]", "[[B09_Estimation/B09_frontend]]", "[[A06_Login/A06_frontend]]", "[[B10_Payment/B10_frontend]]", "[[B11_Status/B11_frontend]]", "[[architecture/shared_resources]]"]
last_updated: 2026-08-22
source: ["docs/raw/verification/2026-08-08_verify_dashboard_scroll_limit.md", "docs/raw/verification/2026-08-08_verify_project_delete_hard.md"]
---

# UI Templates — Localization & Components

프론트엔드 공통 UI 요소: 다국어(i18n), 공통 컴포넌트, 테마 스타일, 레이아웃, 리사이저, 지도 팔레트. 디자인 시스템: [[design]]

## ui_template_locale.ts (다국어 관리)
**파일**: `ui_template/ui_template_locale.ts` (배럴 파일) 및 하위 사전 파일 4종

| 항목 | 위치 | 역할 |
|---|---|---|
| `ui_template_locale.ts` | `ui_template/ui_template_locale.ts` | 배럴 파일. `ui_template_locale_common/a/b1/b2` 합성 및 `LANGUAGES`/`LanguageCode`/`currentLanguageIndex`/`setLanguage`/`t`/`ui_locales`/`LocaleKey` 동일 노출 |
| `ui_template_locale_common.ts` | `ui_template/ui_template_locale_common.ts` | 헤더/푸터/버튼/공통 문구 사전 (60개 키, 105줄) |
| `ui_template_locale_a.ts` | `ui_template/ui_template_locale_a.ts` | A그룹 (A01~A09 로그인 전) 문구 사전 (141개 키, 278줄) |
| `ui_template_locale_b1.ts` | `ui_template/ui_template_locale_b1.ts` | B그룹 전반부 (B01~B04) 문구 사전 (하드 삭제 경고 `B01_Dashboard_Confirm_DeleteProject_Hard` 추가) |
| `ui_template_locale_b2.ts` | `ui_template/ui_template_locale_b2.ts` | B그룹 후반부 (B05~B11) 문구 사전 (253개 키, 420줄) |
| `t(key)` | `ui_template/ui_template_locale.ts` | 지정된 키에 대응하는 현재 언어 텍스트 반환 |

## ui_template_resizer.ts (패널 리사이저 템플릿)
**파일**: `ui_template/ui_template_resizer.ts`

| 항목 | 위치 | 역할 |
|---|---|---|
| `attachResizer(opts)` | `ui_template/ui_template_resizer.ts` | 패널 상하/좌우 드래그 리사이저 핸들 조립 (Pointer Capture 적용, CSS 변수 및 `sessionStorage` 연동) |

## ui_template_palette.ts (지도 팔레트 캐싱 유틸)
**파일**: `ui_template/ui_template_palette.ts`

| 항목 | 위치 | 역할 |
|---|---|---|
| `themeColor(tokenName)` | `ui_template/themeColor(tokenName)` | CSS 변수 `--map-*` 33종 색상 토큰을 캔버스/SVG용 hex/rgb로 파싱 및 캐싱 |

## ui_template_general_blocks.ts (일반업무 공용 블록)
**파일**: `ui_template/ui_template_general_blocks.ts`

| 항목 | 위치 | 역할 |
|---|---|---|
| `section(title, content)` | `ui_template/ui_template_general_blocks.ts:29` | 일반업무(B01/B02/B03/B10/B11)용 레이아웃 섹션 래퍼 |
| `buildSectionHeader(title)` | `ui_template/ui_template_general_blocks.ts:9` | 섹션 타이틀 헤더 렌더링 |
| `table(headers, rows)` | `ui_template/ui_template_general_blocks.ts:88` | 스타일이 적용된 데이터 테이블 조립 컴포넌트 |
| `limitVisibleRows(host, items, visible)` | `ui_template/ui_template_general_blocks.ts:53` | 지정한 개수 이상일 때 4행 높이에 맞춰 컨테이너의 `max-height`를 동적으로 재고 세로 스크롤 활성화 (WeakMap으로 리사이즈 중복 리스너 해제) |

## ui_template_general_layout.ts (일반업무 레이아웃)
**파일**: `ui_template/ui_template_general_layout.ts`

| 항목 | 위치 | 역할 |
|---|---|---|
| `createGeneralLayout(opts)` | `ui_template/ui_template_general_layout.ts:20` | B01 스타일 기준의 중앙 콘텐츠 폭을 지닌 일반업무용 페이지 프레임 구성 |

## ui_template_elements.ts (공통 엘리먼트 템플릿)
**파일**: `ui_template/ui_template_elements.ts`

| 항목 | 위치 | 역할 |
|---|---|---|
| `createButton(opts)` | `ui_template/ui_template_elements.ts:15` | 공통 버튼 생성 템플릿. `ButtonVariant` 타입에 `"glass"` 추가, 반투명 배경 및 블러 스타일(`.ui-btn--glass`) 지원 |

## ui_template_overlay.ts (오버레이 컴포넌트)
**파일**: `ui_template/ui_template_overlay.ts`

| 항목 | 위치 | 역할 |
|---|---|---|
| `createVerticalStepBar(opts)` | `ui_template/ui_template_overlay.ts:15` | 우측 세로 진행단계 오버레이 패널 (기본 펼침, 접기/펼치기 및 sessionStorage에 토글 상태 보존) |
| `createWorkflowPanelHandle(opts)` | `ui_template/ui_template_overlay.ts:50` | 공통 접기/펼치기 핸들 컴포넌트 (placement 'side'/'bottom' 및 collapseToward 'left'/'right'/'up'/'down' 대응, CSS 삼각형 rotate 토글 적용) |
| `createTitleCard(title, subtitle)` | `ui_template/ui_template_overlay.ts:85` | 헤더 제거 페이지(B03, B04~B09)용 좌상단 오버레이 카드 |
| `createOptionOverlay(content)` | `ui_template/ui_template_overlay.ts:125` | 엔지니어링 그룹용 제목 카드 하단 옵션 배치 오버레이 |

## ui_template_workflow_layout.ts (엔지니어링 레이아웃)
**파일**: `ui_template/ui_template_workflow_layout.ts`

| 항목 | 위치 | 역할 |
|---|---|---|
| `createWorkflowLayout(opts)` | `ui_template/ui_template_workflow_layout.ts:28` | **상단 헤더(제목/단계)가 제거**되고, 전체 화면 폭 본문 + 좌상단 제목 카드 + 우측 세로 단계 오버레이가 결합된 완성형 엔지니어링 레이아웃 |

## 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 배수) |
| `--radius-cards`, `--radius-icons` | `ui_template/theme.css:110` | 8px 등의 둥근 테두리 곡률 반지름 변수 |

## 제약 (backend.md §1)
1. **다국어**: 모든 UI 문구는 반드시 `ui_locales` 등록 후 `L(key)` 또는 `t(key)`로만 참조
2. **스타일**: CSS는 `theme.css` 변수만 사용, 하드코드 색상/단위 금지
3. **컴포넌트 재사용**: `createGeneralLayout`, `createWorkflowLayout`, `createVerticalStepBar` 등 공용 템플릿 사용

## 남은 파일 한계

2026-08-22 현재 `ui_template_elements.ts`는 891줄이다. 동작 문제는 아니지만 단일 파일 700줄 제한을 넘으므로 후속 분리 대상이다.