---
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 활성화, 통신 성공/실패 시 즉시 해제 로직 필수.