260706_0_회사싱크 후 커밋

.agent/test/04_Frontend_and_Design.md

@@ -0,0 +1,47 @@
+---
+document_type: frontend
+priority: HIGH
+---
+# 프론트엔드 제어 및 Wiza 디자인 시스템
+
+## 1. Wiza 디자인 시스템 (Theme Constraints)
+프론트엔드 UI는 Wiza 브랜드 가이드라인에 따라 구현해야 합니다. 하드코딩된 색상이나 수치를 금지하며, 제공되는 `ui_template_theme.css` 토큰을 사용합니다.
+
+* **색상 토큰 (Monochromatic Violet):**
+  - `--color-deep-iris` (#26114a): 헤드라인, 메인 버튼 배경 (강조)
+  - `--color-plum-velvet` (#312749): 네비게이션, 2차 헤딩
+  - `--color-royal-amethyst` (#3e0079): 링크, 포커스 링, 강조 아이콘
+  - `--color-lavender-wash`: 영웅 영역 및 섹션의 부드러운 그라데이션 배경
+  - `--color-canvas` (#ffffff): 카드, 입력 폼 등 캔버스 표면
+* **타이포그래피:**
+  - **Display/Heading:** `Britti Sans` (대체제: Plus Jakarta Sans), 500 Weight, **Line-height 1.0 (절대 준수)**.
+  - **Body/UI:** `Inter`, 400/500/700 Weight, 크기는 컴팩트하게(12~16px) 유지.
+* **형태 및 간격 (Spacing & Radius):**
+  - 카드, 버튼, 인풋 폼 등 모든 사각형 컨테이너는 **8px Radius** 강제.
+  - 뱃지(Badge), 필(Pill), 네비게이션 아이템 등은 **1440px Radius** 강제.
+  - 요소 간 기본 간격 유닛은 **8px**.
+
+## 2. 레이아웃 제약
+워크플로우 페이지(B04~B09)는 반드시 **3단 기본 레이아웃**을 따릅니다.
+1. 상단: 페이지 타이틀 및 현재 진행 단계
+2. 좌측: 데이터 입력 폼 및 설정 제어 패널 (너비 고정)
+3. 우측: WebCAD 도면 뷰어 (Canvas/WebGL) 또는 결과 데이터 그리드 (나머지 화면 너비 전체)
+
+## 3. 다국어 제어 원칙 (i18n)
+모든 텍스트는 컴포넌트 내에 직접 작성할 수 없습니다.
+
+```typescript
+// 선언부: ui_template/ui_template_locale.ts
+export const ui_locales = {
+  A01_Home_Title: ["반갑습니다", "Welcome"],
+  B04_wf1_Surface_Btn: ["지표면 분석 실행", "Run Surface Analysis"]
+};
+
+// 구현부 호출 예시
+<button>{ui_locales.B04_wf1_Surface_Btn[currentLanguageIndex]}</button>
+```
+
+## 4. 로직 컨벤션 (TypeScript)
+* **이벤트 핸들러:** `on[페이지명]_[기능명]_[액션]` 형태 강제. (예: `onB04_Surface_Calculate_Click`)
+* **프론트 유효성 검사:** 백엔드 API 전송 전, 1차적으로 빈 값 및 타입 유효성 검사를 수행하여 피드백합니다.
+* **로딩 스피너:** API 요청 시작 전 Overlay 활성화, 통신 성공/실패 시 즉시 해제 로직 필수.