# 인터페이스 및 UI 제어 명세서 (frontend.md)

## 1. 글로벌 테마 변수 강제 (Theme Constraints)
* **임의 색상 지정 금지:** 하드코딩된 Hex 코드 직접 입력 금지.
* **CSS 변수 필수 참조:** 테마 전환(라이트/다크) 및 일관성을 위해 `ui_template_theme.css` 선언 변수(`var(--color-bg)`, `var(--color-text)` 등)만 사용.
* **신규 컴포넌트/템플릿:** 신규 컴포넌트나 템플릿이 필요한 경우`.agent\design.md` 파일을 참고하여 양식을 `ui_template\ui_template_elements.ts`, `ui_template\ui_template_locale.ts`, `ui_template\ui_template_theme.css` 양식화하여 사용할 것

## 2. UI 요소 및 레이아웃 제약 (Layout Constraints)
* **공통 컴포넌트 최우선:** 임의 스타일링 금지. `ui_template_elements.ts` 규격 및 공통 컴포넌트 최우선 상속/참조.
* **3단 기본 레이아웃 준수:** 워크플로우 페이지 기본 배치 강제 (예외 요청 제외)
  1. 상단 영역: 페이지 타이틀 및 현재 진행 단계 상태
  2. 좌측 패널: 데이터 입력 폼 및 설정 제어 영역 (너비 고정)
  3. 우측 영역: WebCAD 도면 뷰어 또는 결과 데이터 그리드 (나머지 전체 너비)

---

## 3. 인덱스 기반 다국어 제어 (i18n Constraints)
* **텍스트 하드코딩 금지:** 라벨, 버튼 문구, 안내 메시지 등 모든 UI 문자열의 컴포넌트 내 직접 입력 절대 금지.
* **🚨 동시 수정 프로토콜 (선언 후 구현):**
  1. **선(先) 등록:** 신규 문구 필요 시, `ui_template_locale.ts` 최하단에 키와 언어 배열 `[한국어, 영어]` 우선 추가.
  2. **후(後) 참조:** 컴포넌트 내 `ui_locales.키값[현재언어인덱스]` 형태로만 호출.
  * *제약 조건:* UI 수정 요청 시 다국어 파일 업데이트 코드 미제시 경우 가이드 위반(에러) 처리.

---

## 4. JS/TS 코드 제어 및 상태 (Logic Constraints)
* **이벤트 핸들러 명명법:** `on[페이지명]_[기능명]_[액션]` 패턴 필수 준수. (예: `onB04_Surface_Calculate_Click`)
* **비동기 상태 제어:** API 호출 시 즉시 로딩 스피너(Overlay) 활성화, 통신 완료(성공/실패) 후 해제 로직 필수 포함.
* **1차 유효성 검사:** 백엔드 전송 전 빈 값 및 데이터 타입(숫자 범위 등) 프론트엔드 선 검증, 에러 시 입력창 하단 표기.

```typescript
export const ui_locales = {
  A01_Home_Title: ["반갑습니다", "Welcome"],
  B04_wf1_Surface_Btn: ["지표면 분석 실행", "Run Surface Analysis"]
};