KArtSell.Aegis/docs/Design/kbx-foundation-v60-status-canonical-contract-hardening/docs/frontend/KBX-FE-Completion-v37.md

KBX FE Completion v37

목적

이번 단계의 우선순위는 Backend 연계 완성도가 아니라 브라우저에서 직접 확인되는 FE 완성도다. 기존 계약/Manifest/BE 연계 구조를 제거하지 않되, 화면을 보기 위해 API가 먼저 완성되어야 하는 흐름을 분리한다.

추가 산출물

apps/web/fe-reference/

• index.html: 실제 Application Shell + 홈 + T01~T09
• kbx-fe.css: KBX Dense Desktop / WMS Touch 시각 규칙
• kbx-fe.js: 순수 JavaScript 상호작용
• README.md: 실행 및 검증 방법

FE Reference Lab이 검증하는 계약

Application Shell

• Global Header 56px
• Side Navigation 220px / Collapsed 56px
• Workspace Tabs 40px
• Ctrl+K 메뉴 검색
• 모듈 필터
• 즐겨찾기 / 최근 메뉴
• Compact / Comfortable 밀도

Home

Home은 KPI Card Dashboard가 아니라 업무 시작점으로 구성한다.

1. 확인 필요: 실패/예외/중요 알림/진행 작업
2. 바로 시작: 미저장/열린 업무/즐겨찾기/최근
3. 모듈별 업무: OMS/ERP/WMS/공통 메뉴 탐색

T01 Search/List

Search → Quick Filter → Context → Bulk Action → Grid → Summary → Detail Drawer.

T02 Master CRUD

목록과 상세를 동시에 유지하고, Form을 2-column Dense layout으로 구성한다.

T03 Header + Detail Transaction

Header Form → Editable Detail Grid → Summary. 변경 시 Workspace Tab dirty 상태가 시각적으로 나타난다.

T04 Fast Grid Entry

Enter 이동, contenteditable 기반 실제 셀 편집, Excel Paste를 전제로 한 Grid-first 화면을 제공한다.

T05 Master/Detail Explorer

품목 → 창고/Location → 재고이력을 한 화면에서 확인한다.

T06 Work Queue

그래프 Dashboard 대신 지금 처리해야 할 Queue와 예외를 먼저 노출한다.

T07 Reconcile

Expected / Actual / Difference / Reason / Resolution 문법을 유지한다.

T08 Excel Import

파일 → 매핑 → 검증 → 반영 → 결과 5단계를 실제 버튼으로 진행할 수 있다.

T09 WMS Mobile

390px 기준 Picking 화면, 54px CTA, 네트워크 상태, 스캔/수량/예외 피드백을 독립 검증한다.

구현 원칙

• FE 원형에서 Backend DTO/Endpoint를 호출하지 않는다.
• 사용자 업무 문법을 확인하기 위해 Mock data를 명시적으로 사용한다.
• Component API를 늘리기 전에 실제 화면에서 반복되는 UI 패턴을 먼저 확인한다.
• Reference Lab에서 검증된 패턴만 @kbx/ui에 승격한다.
• PrimeVue/AG Grid 교체를 목표로 하지 않는다. 실제 제품에서는 기존 KBX wrapper를 유지한다.

승격 기준

Reference Lab의 패턴을 공통 컴포넌트로 승격할 때 다음 3개를 모두 만족해야 한다.

1. 동일한 업무 의미인가?
2. 동일한 변화 이유를 가지는가?
3. 동일한 UX 계약을 가져야 하는가?

단순히 HTML/CSS가 비슷하다는 이유로 공통화하지 않는다.

다음 FE 작업 우선순위

1. Golden Screen OMS-ORD-001을 Lab과 실제 Vue 페이지 사이에 Visual Parity 맞추기
2. OMS-ORD-002 Header/Detail Keyboard flow 완성
3. KbxDataGrid 변경/오류/편집/Clipboard 상태의 시각 카탈로그 강화
4. KbxLookup F2/Enter/Esc/Focus Restore 브라우저 조작성 강화
5. 홈과 Side Navigation의 화면 수가 100+로 늘어났을 때 정보 탐색성 검증
6. 1280px Compact Desktop 회귀 검증
7. WMS 390×844 실제 Touch/Scanner 상태 회귀 검증