36 lines
2.2 KiB
Markdown
36 lines
2.2 KiB
Markdown
# 인터페이스 및 UI 제어 명세서 (frontend.md)
|
|
|
|
## 1. 글로벌 테마 변수 강제 (Theme Constraints)
|
|
* **임의 색상 지정 금지:** 하드코딩된 Hex 코드 직접 입력 금지.
|
|
* **CSS 변수 필수 참조:** 테마 전환(라이트/다크) 및 일관성을 위해 `ui_template_theme.css` 선언 변수(`var(--color-bg)`, `var(--color-text)` 등)만 사용.
|
|
|
|
---
|
|
|
|
## 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"]
|
|
}; |