eomsangdonandClaude Opus 5
eb30b774f8
- `docs/` 를 .gitignore 에서 빼 git 추적 대상으로 전환 (위키·완료 이력·검증 기록) - `docs/raw/PLAN.md` · `docs/raw/OWNERS.md` 를 저장소 최상위로 이동 후 .gitignore 에 등록 — 창끼리 공유하되 저장소에는 안 올리는 장부 - 살아 있는 경로 참조 7개 파일 정정 (아카이브 107건은 그때 사실이라 그대로 둠) - graphify 날짜별 산출물(`docs/wiki/graphify-out/20*/`) 제외 — `graphify update` 가 다시 만듦 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
6.7 KiB
6.7 KiB
status, related_pages, last_updated, source
| status | related_pages | last_updated | source | ||
|---|---|---|---|---|---|
| stable | 2026-08-22 |
|
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)
- 다국어: 모든 UI 문구는 반드시
ui_locales등록 후L(key)또는t(key)로만 참조 - 스타일: CSS는
theme.css변수만 사용, 하드코드 색상/단위 금지 - 컴포넌트 재사용:
createGeneralLayout,createWorkflowLayout,createVerticalStepBar등 공용 템플릿 사용
남은 파일 한계
2026-08-22 현재 ui_template_elements.ts는 891줄이다. 동작 문제는 아니지만 단일 파일 700줄 제한을 넘으므로 후속 분리 대상이다.