4.8 KiB
4.8 KiB
status, related_pages, last_updated, source
| status | related_pages | last_updated | source | ||||
|---|---|---|---|---|---|---|---|
| stable |
|
2026-07-12 | 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)
- 다국어: 모든 UI 문구는 반드시
ui_locales등록 후L(key)또는t(key)로만 참조 - 스타일: CSS는
theme.css변수만 사용, 하드코드 색상/단위 금지 - 컴포넌트 재사용:
createButton,createCard,createTag,createWorkflowShell우선 사용 - 명명: 이벤트 핸들러는
on[페이지]_[기능]_[액션]규칙 준수
의존성
- Locale: 모든 페이지에서
currentLanguageIndex조회 - 요소: 페이지별로 필요한 컴포넌트만 import