Aislo/.agent/test/04_Frontend_and_Design.md

document_type, priority

document_type	priority
frontend	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)

모든 텍스트는 컴포넌트 내에 직접 작성할 수 없습니다.

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