diff --git a/.playwright-cli/page-2026-08-08T16-09-25-353Z.yml b/.playwright-cli/page-2026-08-08T16-09-25-353Z.yml new file mode 100644 index 00000000..e69de29b diff --git a/.playwright-cli/page-2026-08-08T16-11-00-076Z.yml b/.playwright-cli/page-2026-08-08T16-11-00-076Z.yml new file mode 100644 index 00000000..e69de29b diff --git a/.playwright-cli/page-2026-08-08T17-44-06-641Z.yml b/.playwright-cli/page-2026-08-08T17-44-06-641Z.yml new file mode 100644 index 00000000..e69de29b diff --git a/.playwright-cli/page-2026-08-08T17-44-23-931Z.yml b/.playwright-cli/page-2026-08-08T17-44-23-931Z.yml new file mode 100644 index 00000000..8cf52d1a --- /dev/null +++ b/.playwright-cli/page-2026-08-08T17-44-23-931Z.yml @@ -0,0 +1,256 @@ +- generic [ref=e3]: + - link "본문으로 건너뛰기" [ref=e4] [cursor=pointer]: + - /url: "#ks-main" + - banner [ref=e5]: + - button "K-ArtSell Aegis IMPLEMENTATION_TEMPLATE" [ref=e6] [cursor=pointer]: + - strong [ref=e7]: K-ArtSell Aegis + - generic [ref=e8]: IMPLEMENTATION_TEMPLATE + - button "메뉴명 · 화면코드 · 업무명 검색 Ctrl K" [ref=e9]: + - generic [ref=e10]: 메뉴명 · 화면코드 · 업무명 검색 + - generic [ref=e11]: Ctrl K + - status [ref=e12]: 투자자문형 · 자동주문/KIS 제출 OFF · 자동 모델승격 OFF + - navigation "열린 업무" [ref=e13]: + - generic [ref=e14]: + - button "컴포넌트 확인" [ref=e15] [cursor=pointer] + - button "탭 고정" [ref=e17] [cursor=pointer]: 📍 + - button "탭 닫기" [ref=e18] [cursor=pointer]: × + - generic [ref=e19]: + - complementary "주요 메뉴" [ref=e20]: + - button "« 접기" [expanded] [ref=e21] [cursor=pointer] + - generic [ref=e22]: + - heading "Design System" [level=2] [ref=e23] + - link "컴포넌트 확인" [ref=e24] [cursor=pointer]: + - /url: /internal/ui-standard + - generic [ref=e25]: + - heading "Operations" [level=2] [ref=e26] + - link "데이터 품질" [ref=e27] [cursor=pointer]: + - /url: /ops/data-quality + - link "시장 데이터 수집" [ref=e28] [cursor=pointer]: + - /url: /ops/market-data-ingestion + - link "수집 이력" [ref=e29] [cursor=pointer]: + - /url: /ops/market-data-history + - link "모델 운영" [ref=e30] [cursor=pointer]: + - /url: /ops/model-operations + - generic [ref=e31]: + - heading "Portfolio" [level=2] [ref=e32] + - link "포트폴리오 리스크" [ref=e33] [cursor=pointer]: + - /url: /portfolio/risk + - link "리밸런싱 제안" [ref=e34] [cursor=pointer]: + - /url: /portfolio/rebalance + - generic [ref=e35]: + - heading "Research" [level=2] [ref=e36] + - link "매도 의사결정" [ref=e37] [cursor=pointer]: + - /url: /research/sell-decision + - main [ref=e38]: + - generic [ref=e39]: + - generic [ref=e40]: + - generic [ref=e41]: + - heading "표준 UI 패턴" [level=1] [ref=e42] + - paragraph [ref=e43]: Feature는 공급자 라이브러리를 직접 사용하지 않고, v4 어댑터·레이아웃·화면 계약을 사용한다. + - generic [ref=e44]: + - generic [ref=e45]: "상태: READY" + - generic [ref=e46]: "As-of: 2026-08-02" + - generic [ref=e47]: "Version: UI-CONTRACT-4.0" + - button "새 화면 패킷" [ref=e49] [cursor=pointer] + - generic [ref=e50]: + - generic [ref=e51]: + - strong [ref=e52]: "10" + - generic [ref=e53]: 화면 타입 + - generic [ref=e54]: + - strong [ref=e55]: "14" + - generic [ref=e56]: 어댑터 포트 + - generic [ref=e57]: + - generic [ref=e58]: primevue-aggrid + - generic [ref=e60]: PrimeVue + AG Grid Community + - generic [ref=e61]: + - generic [ref=e62]: 자동주문 OFF + - generic [ref=e64]: 고정 경계 + - generic [ref=e66]: + - generic [ref=e67]: + - generic [ref=e68]: 검색 + - textbox "검색" [ref=e69]: + - /placeholder: 화면 ID, 타입 또는 컴포넌트 + - generic [ref=e70]: + - generic [ref=e71]: 상태 + - combobox "전체" [ref=e73] + - generic [ref=e79]: + - generic [ref=e81]: + - main [ref=e82]: + - generic [ref=e85]: + - generic [ref=e86]: No Rows To Show + - grid [ref=e87]: + - rowgroup [ref=e88]: + - row [ref=e89]: + - columnheader [ref=e90] + - columnheader "화면 ID" [ref=e91]: + - generic [ref=e93] [cursor=pointer] + - columnheader "화면 타입" [ref=e95]: + - generic [ref=e97] [cursor=pointer] + - columnheader "표준 컴포넌트" [ref=e99]: + - generic [ref=e101] [cursor=pointer] + - columnheader "필수 증거" [ref=e103]: + - generic [ref=e105] [cursor=pointer] + - columnheader "상태" [ref=e107]: + - generic [ref=e109] [cursor=pointer] + - rowgroup [ref=e111]: + - row [ref=e112]: + - gridcell [ref=e113]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e114] [cursor=pointer] + - gridcell "T01" [ref=e115] + - gridcell "검색·목록형 CRUD" [ref=e116] + - gridcell "SearchListCrudPage" [ref=e117] + - gridcell "3" [ref=e118] + - gridcell "READY" [ref=e119] + - row [ref=e120]: + - gridcell [ref=e121]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e122] [cursor=pointer] + - gridcell "T02" [ref=e123] + - gridcell "상세 조회형" [ref=e124] + - gridcell "DetailReadPage" [ref=e125] + - gridcell "3" [ref=e126] + - gridcell "READY" [ref=e127] + - row [ref=e128]: + - gridcell [ref=e129]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e130] [cursor=pointer] + - gridcell "T03" [ref=e131] + - gridcell "등록·편집 Form" [ref=e132] + - gridcell "EditFormPage" [ref=e133] + - gridcell "3" [ref=e134] + - gridcell "READY" [ref=e135] + - row [ref=e136]: + - gridcell [ref=e137]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e138] [cursor=pointer] + - gridcell "T04" [ref=e139] + - gridcell "Master-Detail" [ref=e140] + - gridcell "MasterDetailCrudPage" [ref=e141] + - gridcell "3" [ref=e142] + - gridcell "READY" [ref=e143] + - row [ref=e144]: + - gridcell [ref=e145]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e146] [cursor=pointer] + - gridcell "T05" [ref=e147] + - gridcell "검토·승인 Workbench" [ref=e148] + - gridcell "ApprovalWorkbenchPage" [ref=e149] + - gridcell "3" [ref=e150] + - gridcell "READY" [ref=e151] + - row [ref=e152]: + - gridcell [ref=e153]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e154] [cursor=pointer] + - gridcell "T06" [ref=e155] + - gridcell "단계 Wizard" [ref=e156] + - gridcell "StepWizardPage" [ref=e157] + - gridcell "3" [ref=e158] + - gridcell "READY" [ref=e159] + - row [ref=e160]: + - gridcell [ref=e161]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e162] [cursor=pointer] + - gridcell "T07" [ref=e163] + - gridcell "Dashboard·Scorecard" [ref=e164] + - gridcell "ScorecardDashboardPage" [ref=e165] + - gridcell "3" [ref=e166] + - gridcell "READY" [ref=e167] + - row [ref=e168]: + - gridcell [ref=e169]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e170] [cursor=pointer] + - gridcell "T08" [ref=e171] + - gridcell "Batch·데이터 운영" [ref=e172] + - gridcell "BatchOperationsPageV2" [ref=e173] + - gridcell "3" [ref=e174] + - gridcell "READY" [ref=e175] + - row [ref=e176]: + - gridcell [ref=e177]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e178] [cursor=pointer] + - gridcell "T09" [ref=e179] + - gridcell "대사·예외 처리" [ref=e180] + - gridcell "ReconciliationExceptionPage" [ref=e181] + - gridcell "3" [ref=e182] + - gridcell "READY" [ref=e183] + - row [ref=e184]: + - gridcell [ref=e185]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e186] [cursor=pointer] + - gridcell "T10" [ref=e187] + - gridcell "버전 비교·거버넌스" [ref=e188] + - gridcell "VersionGovernancePage" [ref=e189] + - gridcell "3" [ref=e190] + - gridcell "READY" [ref=e191] + - row [ref=e192]: + - gridcell [ref=e193]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e194] [cursor=pointer] + - gridcell "T11" [ref=e195] + - gridcell "대량 입력(Fast Grid Entry)" [ref=e196] + - gridcell "FastEntryGridPage" [ref=e197] + - gridcell "3" [ref=e198] + - gridcell "READY" [ref=e199] + - row [ref=e200]: + - gridcell [ref=e201]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e202] [cursor=pointer] + - gridcell "T12" [ref=e203] + - gridcell "작업 큐(Work Queue)" [ref=e204] + - gridcell "WorkQueuePage" [ref=e205] + - gridcell "2" [ref=e206] + - gridcell "READY" [ref=e207] + - rowgroup + - rowgroup + - rowgroup + - region [ref=e215]: + - generic [ref=e216]: + - heading "컴포넌트 동작 프리뷰" [level=2] [ref=e217] + - paragraph [ref=e218]: 공유 UI 포트를 실제 상태로 확인하는 내부 전용 카탈로그입니다. + - generic [ref=e219]: + - generic [ref=e220]: + - heading "Actions" [level=3] [ref=e221] + - button "기본 버튼" [ref=e222] [cursor=pointer] + - button "주의 상태" [ref=e223] [cursor=pointer] + - generic [ref=e224]: + - heading "Status" [level=3] [ref=e225] + - generic [ref=e226]: + - generic [ref=e227]: READY + - generic [ref=e229]: REVIEW + - generic [ref=e231]: BLOCKED + - generic [ref=e233]: + - heading "Inputs" [level=3] [ref=e234] + - generic [ref=e235]: + - generic [ref=e236]: 텍스트 필드 + - textbox "텍스트 필드" [ref=e237]: 샘플 값 + - generic [ref=e238]: + - generic [ref=e239]: 선택 필드 + - combobox "준비" [ref=e241] + - region [ref=e245]: + - generic [ref=e246]: + - heading "입력 유형 기능 테스트" [level=2] [ref=e247] + - paragraph [ref=e248]: 서버 요청 없이 shared UI의 입력·검증·읽기전용 조합을 확인합니다. + - generic [ref=e249]: + - generic [ref=e250]: + - heading "기본 입력" [level=2] [ref=e251] + - paragraph [ref=e252]: 필수 항목과 유효성 상태를 조작할 수 있습니다. + - button "읽기 전용" [ref=e254] [cursor=pointer] + - group "기능 테스트 입력" [ref=e256]: + - generic [ref=e257]: + - generic [ref=e258]: 이름 + - textbox "이름" [ref=e259]: 테스트 + - generic [ref=e260]: + - generic [ref=e261]: 금액 + - spinbutton "금액" [ref=e263] + - generic [ref=e264]: + - generic [ref=e265]: 기준일 + - generic [ref=e266]: + - combobox "기준일" [ref=e267] + - button "Choose Date" [ref=e268] + - generic [ref=e271] [cursor=pointer]: + - checkbox "검증 조건을 확인했습니다" [checked] [active] [ref=e273] + - generic [ref=e274]: 검증 조건을 확인했습니다 + - generic [ref=e276]: + - button "검증 실행" [ref=e277] [cursor=pointer] + - button "초기화" [ref=e278] [cursor=pointer] + - complementary [ref=e279]: + - generic [ref=e280]: + - heading "교체 계약" [level=2] [ref=e281] + - paragraph [ref=e282]: + - text: 기본 공급자 교체는 + - code [ref=e283]: VITE_UI_ADAPTER + - text: 와 provider registry에서 수행한다. Feature 코드는 변경하지 않는다. + - paragraph [ref=e284]: PrimeVue+AG Grid와 Native reference adapter가 동일 contract test를 통과해야 한다. + - paragraph [ref=e285]: 생산 교체는 접근성, 키보드, 상태행렬, 시각회귀, 대량목록 성능을 별도 Gate로 검증한다. + - text: "데이터 기준시각: 2026-08-02" + - contentinfo [ref=e286]: RESEARCH_CANDIDATE_NOT_PRODUCTION + - generic "애플리케이션 버전" [ref=e287]: v0.1.0 · UI contract 4.0 \ No newline at end of file diff --git a/.playwright-cli/page-2026-08-08T17-44-28-036Z.yml b/.playwright-cli/page-2026-08-08T17-44-28-036Z.yml new file mode 100644 index 00000000..be8fa34c --- /dev/null +++ b/.playwright-cli/page-2026-08-08T17-44-28-036Z.yml @@ -0,0 +1,261 @@ +- generic [ref=e3]: + - link "본문으로 건너뛰기" [ref=e4] [cursor=pointer]: + - /url: "#ks-main" + - banner [ref=e5]: + - button "K-ArtSell Aegis IMPLEMENTATION_TEMPLATE" [ref=e6] [cursor=pointer]: + - strong [ref=e7]: K-ArtSell Aegis + - generic [ref=e8]: IMPLEMENTATION_TEMPLATE + - button "메뉴명 · 화면코드 · 업무명 검색 Ctrl K" [ref=e9]: + - generic [ref=e10]: 메뉴명 · 화면코드 · 업무명 검색 + - generic [ref=e11]: Ctrl K + - status [ref=e12]: 투자자문형 · 자동주문/KIS 제출 OFF · 자동 모델승격 OFF + - navigation "열린 업무" [ref=e13]: + - generic [ref=e14]: + - button "컴포넌트 확인" [ref=e15] [cursor=pointer] + - button "탭 고정" [ref=e17] [cursor=pointer]: 📍 + - button "탭 닫기" [ref=e18] [cursor=pointer]: × + - generic [ref=e19]: + - complementary "주요 메뉴" [ref=e20]: + - button "« 접기" [expanded] [ref=e21] [cursor=pointer] + - generic [ref=e22]: + - heading "Design System" [level=2] [ref=e23] + - link "컴포넌트 확인" [ref=e24] [cursor=pointer]: + - /url: /internal/ui-standard + - generic [ref=e25]: + - heading "Operations" [level=2] [ref=e26] + - link "데이터 품질" [ref=e27] [cursor=pointer]: + - /url: /ops/data-quality + - link "시장 데이터 수집" [ref=e28] [cursor=pointer]: + - /url: /ops/market-data-ingestion + - link "수집 이력" [ref=e29] [cursor=pointer]: + - /url: /ops/market-data-history + - link "모델 운영" [ref=e30] [cursor=pointer]: + - /url: /ops/model-operations + - generic [ref=e31]: + - heading "Portfolio" [level=2] [ref=e32] + - link "포트폴리오 리스크" [ref=e33] [cursor=pointer]: + - /url: /portfolio/risk + - link "리밸런싱 제안" [ref=e34] [cursor=pointer]: + - /url: /portfolio/rebalance + - generic [ref=e35]: + - heading "Research" [level=2] [ref=e36] + - link "매도 의사결정" [ref=e37] [cursor=pointer]: + - /url: /research/sell-decision + - main [ref=e38]: + - generic [ref=e39]: + - generic [ref=e40]: + - generic [ref=e41]: + - heading "표준 UI 패턴" [level=1] [ref=e42] + - paragraph [ref=e43]: Feature는 공급자 라이브러리를 직접 사용하지 않고, v4 어댑터·레이아웃·화면 계약을 사용한다. + - generic [ref=e44]: + - generic [ref=e45]: "상태: READY" + - generic [ref=e46]: "As-of: 2026-08-02" + - generic [ref=e47]: "Version: UI-CONTRACT-4.0" + - button "새 화면 패킷" [ref=e49] [cursor=pointer] + - generic [ref=e50]: + - generic [ref=e51]: + - strong [ref=e52]: "10" + - generic [ref=e53]: 화면 타입 + - generic [ref=e54]: + - strong [ref=e55]: "14" + - generic [ref=e56]: 어댑터 포트 + - generic [ref=e57]: + - generic [ref=e58]: primevue-aggrid + - generic [ref=e60]: PrimeVue + AG Grid Community + - generic [ref=e61]: + - generic [ref=e62]: 자동주문 OFF + - generic [ref=e64]: 고정 경계 + - generic [ref=e66]: + - generic [ref=e67]: + - generic [ref=e68]: 검색 + - textbox "검색" [ref=e69]: + - /placeholder: 화면 ID, 타입 또는 컴포넌트 + - generic [ref=e70]: + - generic [ref=e71]: 상태 + - combobox "전체" [ref=e73] + - generic [ref=e79]: + - generic [ref=e81]: + - main [ref=e82]: + - generic [ref=e85]: + - generic [ref=e86]: No Rows To Show + - grid [ref=e87]: + - rowgroup [ref=e88]: + - row [ref=e89]: + - columnheader [ref=e90] + - columnheader "화면 ID" [ref=e91]: + - generic [ref=e93] [cursor=pointer] + - columnheader "화면 타입" [ref=e95]: + - generic [ref=e97] [cursor=pointer] + - columnheader "표준 컴포넌트" [ref=e99]: + - generic [ref=e101] [cursor=pointer] + - columnheader "필수 증거" [ref=e103]: + - generic [ref=e105] [cursor=pointer] + - columnheader "상태" [ref=e107]: + - generic [ref=e109] [cursor=pointer] + - rowgroup [ref=e111]: + - row [ref=e112]: + - gridcell [ref=e113]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e114] [cursor=pointer] + - gridcell "T01" [ref=e115] + - gridcell "검색·목록형 CRUD" [ref=e116] + - gridcell "SearchListCrudPage" [ref=e117] + - gridcell "3" [ref=e118] + - gridcell "READY" [ref=e119] + - row [ref=e120]: + - gridcell [ref=e121]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e122] [cursor=pointer] + - gridcell "T02" [ref=e123] + - gridcell "상세 조회형" [ref=e124] + - gridcell "DetailReadPage" [ref=e125] + - gridcell "3" [ref=e126] + - gridcell "READY" [ref=e127] + - row [ref=e128]: + - gridcell [ref=e129]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e130] [cursor=pointer] + - gridcell "T03" [ref=e131] + - gridcell "등록·편집 Form" [ref=e132] + - gridcell "EditFormPage" [ref=e133] + - gridcell "3" [ref=e134] + - gridcell "READY" [ref=e135] + - row [ref=e136]: + - gridcell [ref=e137]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e138] [cursor=pointer] + - gridcell "T04" [ref=e139] + - gridcell "Master-Detail" [ref=e140] + - gridcell "MasterDetailCrudPage" [ref=e141] + - gridcell "3" [ref=e142] + - gridcell "READY" [ref=e143] + - row [ref=e144]: + - gridcell [ref=e145]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e146] [cursor=pointer] + - gridcell "T05" [ref=e147] + - gridcell "검토·승인 Workbench" [ref=e148] + - gridcell "ApprovalWorkbenchPage" [ref=e149] + - gridcell "3" [ref=e150] + - gridcell "READY" [ref=e151] + - row [ref=e152]: + - gridcell [ref=e153]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e154] [cursor=pointer] + - gridcell "T06" [ref=e155] + - gridcell "단계 Wizard" [ref=e156] + - gridcell "StepWizardPage" [ref=e157] + - gridcell "3" [ref=e158] + - gridcell "READY" [ref=e159] + - row [ref=e160]: + - gridcell [ref=e161]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e162] [cursor=pointer] + - gridcell "T07" [ref=e163] + - gridcell "Dashboard·Scorecard" [ref=e164] + - gridcell "ScorecardDashboardPage" [ref=e165] + - gridcell "3" [ref=e166] + - gridcell "READY" [ref=e167] + - row [ref=e168]: + - gridcell [ref=e169]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e170] [cursor=pointer] + - gridcell "T08" [ref=e171] + - gridcell "Batch·데이터 운영" [ref=e172] + - gridcell "BatchOperationsPageV2" [ref=e173] + - gridcell "3" [ref=e174] + - gridcell "READY" [ref=e175] + - row [ref=e176]: + - gridcell [ref=e177]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e178] [cursor=pointer] + - gridcell "T09" [ref=e179] + - gridcell "대사·예외 처리" [ref=e180] + - gridcell "ReconciliationExceptionPage" [ref=e181] + - gridcell "3" [ref=e182] + - gridcell "READY" [ref=e183] + - row [ref=e184]: + - gridcell [ref=e185]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e186] [cursor=pointer] + - gridcell "T10" [ref=e187] + - gridcell "버전 비교·거버넌스" [ref=e188] + - gridcell "VersionGovernancePage" [ref=e189] + - gridcell "3" [ref=e190] + - gridcell "READY" [ref=e191] + - row [ref=e192]: + - gridcell [ref=e193]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e194] [cursor=pointer] + - gridcell "T11" [ref=e195] + - gridcell "대량 입력(Fast Grid Entry)" [ref=e196] + - gridcell "FastEntryGridPage" [ref=e197] + - gridcell "3" [ref=e198] + - gridcell "READY" [ref=e199] + - row [ref=e200]: + - gridcell [ref=e201]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e202] [cursor=pointer] + - gridcell "T12" [ref=e203] + - gridcell "작업 큐(Work Queue)" [ref=e204] + - gridcell "WorkQueuePage" [ref=e205] + - gridcell "2" [ref=e206] + - gridcell "READY" [ref=e207] + - rowgroup + - rowgroup + - rowgroup + - region [ref=e215]: + - generic [ref=e216]: + - heading "컴포넌트 동작 프리뷰" [level=2] [ref=e217] + - paragraph [ref=e218]: 공유 UI 포트를 실제 상태로 확인하는 내부 전용 카탈로그입니다. + - generic [ref=e219]: + - generic [ref=e220]: + - heading "Actions" [level=3] [ref=e221] + - button "기본 버튼" [ref=e222] [cursor=pointer] + - button "주의 상태" [ref=e223] [cursor=pointer] + - generic [ref=e224]: + - heading "Status" [level=3] [ref=e225] + - generic [ref=e226]: + - generic [ref=e227]: READY + - generic [ref=e229]: REVIEW + - generic [ref=e231]: BLOCKED + - generic [ref=e233]: + - heading "Inputs" [level=3] [ref=e234] + - generic [ref=e235]: + - generic [ref=e236]: 텍스트 필드 + - textbox "텍스트 필드" [ref=e237]: 샘플 값 + - generic [ref=e238]: + - generic [ref=e239]: 선택 필드 + - combobox "준비" [ref=e241] + - region [ref=e245]: + - generic [ref=e246]: + - heading "입력 유형 기능 테스트" [level=2] [ref=e247] + - paragraph [ref=e248]: 서버 요청 없이 shared UI의 입력·검증·읽기전용 조합을 확인합니다. + - alert [ref=e291]: + - strong [ref=e292]: 저장할 수 없습니다. 1개 항목을 확인하세요. + - list [ref=e293]: + - listitem [ref=e294]: 0보다 큰 금액을 입력하세요. + - generic [ref=e249]: + - generic [ref=e250]: + - heading "기본 입력" [level=2] [ref=e251] + - paragraph [ref=e252]: 필수 항목과 유효성 상태를 조작할 수 있습니다. + - button "읽기 전용" [ref=e254] [cursor=pointer] + - group "기능 테스트 입력" [ref=e256]: + - generic [ref=e257]: + - generic [ref=e258]: 이름 + - textbox "이름" [active] [ref=e259]: 테스트 + - generic [ref=e260]: + - generic [ref=e261]: 금액 + - spinbutton "금액" [invalid] [ref=e263] + - alert [ref=e295]: 0보다 커야 합니다. + - generic [ref=e264]: + - generic [ref=e265]: 기준일 + - generic [ref=e266]: + - combobox "기준일" [ref=e267] + - button "Choose Date" [ref=e268] + - generic [ref=e271] [cursor=pointer]: + - checkbox "검증 조건을 확인했습니다" [checked] [ref=e273] + - generic [ref=e274]: 검증 조건을 확인했습니다 + - generic [ref=e276]: + - button "검증 실행" [ref=e277] [cursor=pointer] + - button "초기화" [ref=e278] [cursor=pointer] + - complementary [ref=e279]: + - generic [ref=e280]: + - heading "교체 계약" [level=2] [ref=e281] + - paragraph [ref=e282]: + - text: 기본 공급자 교체는 + - code [ref=e283]: VITE_UI_ADAPTER + - text: 와 provider registry에서 수행한다. Feature 코드는 변경하지 않는다. + - paragraph [ref=e284]: PrimeVue+AG Grid와 Native reference adapter가 동일 contract test를 통과해야 한다. + - paragraph [ref=e285]: 생산 교체는 접근성, 키보드, 상태행렬, 시각회귀, 대량목록 성능을 별도 Gate로 검증한다. + - text: "데이터 기준시각: 2026-08-02" + - contentinfo [ref=e286]: RESEARCH_CANDIDATE_NOT_PRODUCTION + - generic "애플리케이션 버전" [ref=e287]: v0.1.0 · UI contract 4.0 \ No newline at end of file diff --git a/.playwright-cli/page-2026-08-08T17-44-51-634Z.yml b/.playwright-cli/page-2026-08-08T17-44-51-634Z.yml new file mode 100644 index 00000000..f91b3991 --- /dev/null +++ b/.playwright-cli/page-2026-08-08T17-44-51-634Z.yml @@ -0,0 +1,174 @@ +- generic [ref=e3]: + - link "본문으로 건너뛰기" [ref=e4] [cursor=pointer]: + - /url: "#ks-main" + - banner [ref=e5]: + - button "K-ArtSell Aegis IMPLEMENTATION_TEMPLATE" [ref=e6] [cursor=pointer]: + - strong [ref=e7]: K-ArtSell Aegis + - generic [ref=e8]: IMPLEMENTATION_TEMPLATE + - button "메뉴명 · 화면코드 · 업무명 검색 Ctrl K" [ref=e9]: + - generic [ref=e10]: 메뉴명 · 화면코드 · 업무명 검색 + - generic [ref=e11]: Ctrl K + - status [ref=e12]: 투자자문형 · 자동주문/KIS 제출 OFF · 자동 모델승격 OFF + - navigation "열린 업무" [ref=e13]: + - generic [ref=e14]: + - button "컴포넌트 확인" [ref=e15] [cursor=pointer] + - button "탭 고정" [ref=e17] [cursor=pointer]: 📍 + - button "탭 닫기" [ref=e18] [cursor=pointer]: × + - generic [ref=e19]: + - complementary "주요 메뉴" [ref=e20]: + - button "« 접기" [expanded] [ref=e21] [cursor=pointer] + - generic [ref=e22]: + - heading "Design System" [level=2] [ref=e23] + - link "컴포넌트 확인" [ref=e24] [cursor=pointer]: + - /url: /internal/ui-standard + - generic [ref=e25]: + - heading "Operations" [level=2] [ref=e26] + - link "데이터 품질" [ref=e27] [cursor=pointer]: + - /url: /ops/data-quality + - link "시장 데이터 수집" [ref=e28] [cursor=pointer]: + - /url: /ops/market-data-ingestion + - link "수집 이력" [ref=e29] [cursor=pointer]: + - /url: /ops/market-data-history + - link "모델 운영" [ref=e30] [cursor=pointer]: + - /url: /ops/model-operations + - generic [ref=e31]: + - heading "Portfolio" [level=2] [ref=e32] + - link "포트폴리오 리스크" [ref=e33] [cursor=pointer]: + - /url: /portfolio/risk + - link "리밸런싱 제안" [ref=e34] [cursor=pointer]: + - /url: /portfolio/rebalance + - generic [ref=e35]: + - heading "Research" [level=2] [ref=e36] + - link "매도 의사결정" [ref=e37] [cursor=pointer]: + - /url: /research/sell-decision + - main [ref=e38]: + - generic [ref=e39]: + - generic [ref=e40]: + - generic [ref=e41]: + - heading "표준 UI 패턴" [level=1] [ref=e42] + - paragraph [ref=e43]: Feature는 공급자 라이브러리를 직접 사용하지 않고, v4 어댑터·레이아웃·화면 계약을 사용한다. + - generic [ref=e44]: + - generic [ref=e45]: "상태: READY" + - generic [ref=e46]: "As-of: 2026-08-02" + - generic [ref=e47]: "Version: UI-CONTRACT-4.0" + - button "새 화면 패킷" [ref=e49] [cursor=pointer] + - generic [ref=e50]: + - generic [ref=e51]: + - strong [ref=e52]: "10" + - generic [ref=e53]: 화면 타입 + - generic [ref=e54]: + - strong [ref=e55]: "14" + - generic [ref=e56]: 어댑터 포트 + - generic [ref=e57]: + - generic [ref=e58]: primevue-aggrid + - generic [ref=e60]: PrimeVue + AG Grid Community + - generic [ref=e61]: + - generic [ref=e62]: 자동주문 OFF + - generic [ref=e64]: 고정 경계 + - generic [ref=e66]: + - generic [ref=e67]: + - generic [ref=e68]: 검색 + - textbox "검색" [ref=e69]: + - /placeholder: 화면 ID, 타입 또는 컴포넌트 + - text: T01 + - generic [ref=e70]: + - generic [ref=e71]: 상태 + - combobox "전체" [ref=e73] + - generic [ref=e79]: + - generic [ref=e81]: + - main [ref=e82]: + - generic [ref=e85]: + - generic [ref=e86]: No Rows To Show + - grid [ref=e87]: + - rowgroup [ref=e88]: + - row [ref=e89]: + - columnheader [ref=e90] + - columnheader "화면 ID" [ref=e91]: + - generic [ref=e93] [cursor=pointer] + - columnheader "화면 타입" [ref=e95]: + - generic [ref=e97] [cursor=pointer] + - columnheader "표준 컴포넌트" [ref=e99]: + - generic [ref=e101] [cursor=pointer] + - columnheader "필수 증거" [ref=e103]: + - generic [ref=e105] [cursor=pointer] + - columnheader "상태" [ref=e107]: + - generic [ref=e109] [cursor=pointer] + - rowgroup [ref=e111]: + - row [ref=e296]: + - gridcell [ref=e297]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e298] [cursor=pointer] + - gridcell "T01" [ref=e299] + - gridcell "검색·목록형 CRUD" [ref=e300] + - gridcell "SearchListCrudPage" [ref=e301] + - gridcell "3" [ref=e302] + - gridcell "READY" [ref=e303] + - rowgroup + - rowgroup + - rowgroup + - region [ref=e215]: + - generic [ref=e216]: + - heading "컴포넌트 동작 프리뷰" [level=2] [ref=e217] + - paragraph [ref=e218]: 공유 UI 포트를 실제 상태로 확인하는 내부 전용 카탈로그입니다. + - generic [ref=e219]: + - generic [ref=e220]: + - heading "Actions" [level=3] [ref=e221] + - button "기본 버튼" [ref=e222] [cursor=pointer] + - button "주의 상태" [ref=e223] [cursor=pointer] + - generic [ref=e224]: + - heading "Status" [level=3] [ref=e225] + - generic [ref=e226]: + - generic [ref=e227]: READY + - generic [ref=e229]: REVIEW + - generic [ref=e231]: BLOCKED + - generic [ref=e233]: + - heading "Inputs" [level=3] [ref=e234] + - generic [ref=e235]: + - generic [ref=e236]: 텍스트 필드 + - textbox "텍스트 필드" [ref=e237]: 샘플 값 + - generic [ref=e238]: + - generic [ref=e239]: 선택 필드 + - combobox "준비" [ref=e241] + - region [ref=e245]: + - generic [ref=e246]: + - heading "입력 유형 기능 테스트" [level=2] [ref=e247] + - paragraph [ref=e248]: 서버 요청 없이 shared UI의 입력·검증·읽기전용 조합을 확인합니다. + - alert [ref=e291]: + - strong [ref=e292]: 저장할 수 없습니다. 1개 항목을 확인하세요. + - list [ref=e293]: + - listitem [ref=e294]: 0보다 큰 금액을 입력하세요. + - generic [ref=e249]: + - generic [ref=e250]: + - heading "기본 입력" [level=2] [ref=e251] + - paragraph [ref=e252]: 필수 항목과 유효성 상태를 조작할 수 있습니다. + - button "편집 허용" [active] [ref=e304] [cursor=pointer] + - group "기능 테스트 입력" [ref=e256]: + - generic [ref=e257]: + - generic [ref=e258]: 이름 + - textbox "이름" [disabled] [ref=e259]: 테스트 + - generic [ref=e260]: + - generic [ref=e261]: 금액 + - spinbutton "금액" [disabled] [invalid] [ref=e263] + - alert [ref=e295]: 0보다 커야 합니다. + - generic [ref=e264]: + - generic [ref=e265]: 기준일 + - generic [ref=e266]: + - combobox "기준일" [disabled] [ref=e267] + - button "Choose Date" [disabled] [ref=e268] + - generic [ref=e271] [cursor=pointer]: + - checkbox "검증 조건을 확인했습니다" [checked] [disabled] [ref=e273] + - generic [ref=e274]: 검증 조건을 확인했습니다 + - generic [ref=e276]: + - button "검증 실행" [disabled] [ref=e277] + - button "초기화" [ref=e278] [cursor=pointer] + - complementary [ref=e279]: + - generic [ref=e280]: + - heading "교체 계약" [level=2] [ref=e281] + - paragraph [ref=e282]: + - text: 기본 공급자 교체는 + - code [ref=e283]: VITE_UI_ADAPTER + - text: 와 provider registry에서 수행한다. Feature 코드는 변경하지 않는다. + - paragraph [ref=e284]: PrimeVue+AG Grid와 Native reference adapter가 동일 contract test를 통과해야 한다. + - paragraph [ref=e285]: 생산 교체는 접근성, 키보드, 상태행렬, 시각회귀, 대량목록 성능을 별도 Gate로 검증한다. + - text: "데이터 기준시각: 2026-08-02" + - contentinfo [ref=e286]: RESEARCH_CANDIDATE_NOT_PRODUCTION + - generic "애플리케이션 버전" [ref=e287]: v0.1.0 · UI contract 4.0 \ No newline at end of file diff --git a/.playwright-cli/page-2026-08-08T17-47-17-147Z.yml b/.playwright-cli/page-2026-08-08T17-47-17-147Z.yml new file mode 100644 index 00000000..e69de29b diff --git a/.playwright-cli/page-2026-08-08T17-49-59-482Z.yml b/.playwright-cli/page-2026-08-08T17-49-59-482Z.yml new file mode 100644 index 00000000..e69de29b diff --git a/.playwright-cli/page-2026-08-08T17-50-12-371Z.yml b/.playwright-cli/page-2026-08-08T17-50-12-371Z.yml new file mode 100644 index 00000000..f5b3f77f --- /dev/null +++ b/.playwright-cli/page-2026-08-08T17-50-12-371Z.yml @@ -0,0 +1,208 @@ +- generic [ref=e3]: + - link "본문으로 건너뛰기" [ref=e4] [cursor=pointer]: + - /url: "#ks-main" + - banner [ref=e5]: + - button "K-ArtSell Aegis IMPLEMENTATION_TEMPLATE" [ref=e6] [cursor=pointer]: + - strong [ref=e7]: K-ArtSell Aegis + - generic [ref=e8]: IMPLEMENTATION_TEMPLATE + - button "메뉴명 · 화면코드 · 업무명 검색 Ctrl K" [ref=e9]: + - generic [ref=e10]: 메뉴명 · 화면코드 · 업무명 검색 + - generic [ref=e11]: Ctrl K + - status [ref=e12]: 투자자문형 · 자동주문/KIS 제출 OFF · 자동 모델승격 OFF + - navigation "열린 업무" [ref=e13]: + - generic [ref=e14]: + - button "컴포넌트 확인" [ref=e15] [cursor=pointer] + - button "탭 고정" [ref=e17] [cursor=pointer]: 📍 + - button "탭 닫기" [ref=e18] [cursor=pointer]: × + - generic [ref=e19]: + - complementary "주요 메뉴" [ref=e20]: + - button "« 접기" [expanded] [ref=e21] [cursor=pointer] + - generic [ref=e22]: + - heading "Design System" [level=2] [ref=e23] + - link "컴포넌트 확인" [ref=e24] [cursor=pointer]: + - /url: /internal/ui-standard + - generic [ref=e25]: + - heading "Operations" [level=2] [ref=e26] + - link "데이터 품질" [ref=e27] [cursor=pointer]: + - /url: /ops/data-quality + - link "시장 데이터 수집" [ref=e28] [cursor=pointer]: + - /url: /ops/market-data-ingestion + - link "수집 이력" [ref=e29] [cursor=pointer]: + - /url: /ops/market-data-history + - link "모델 운영" [ref=e30] [cursor=pointer]: + - /url: /ops/model-operations + - generic [ref=e31]: + - heading "Portfolio" [level=2] [ref=e32] + - link "포트폴리오 리스크" [ref=e33] [cursor=pointer]: + - /url: /portfolio/risk + - link "리밸런싱 제안" [ref=e34] [cursor=pointer]: + - /url: /portfolio/rebalance + - generic [ref=e35]: + - heading "Research" [level=2] [ref=e36] + - link "매도 의사결정" [ref=e37] [cursor=pointer]: + - /url: /research/sell-decision + - main [ref=e38]: + - generic [ref=e39]: + - generic [ref=e40]: + - generic [ref=e41]: + - heading "표준 UI 패턴" [level=1] [ref=e42] + - paragraph [ref=e43]: 화면 유형을 선택하고, 실제 화면 ID를 선택해 기능 화면을 엽니다. + - generic [ref=e44]: + - generic [ref=e45]: "상태: READY" + - generic [ref=e46]: "As-of: 2026-08-02" + - generic [ref=e47]: "Version: UI-CONTRACT-4.0" + - button "선택 화면 열기" [ref=e49] [cursor=pointer] + - generic [ref=e50]: + - generic [ref=e51]: + - strong [ref=e52]: "12" + - generic [ref=e53]: 화면 타입 + - generic [ref=e54]: + - strong [ref=e55]: "7" + - generic [ref=e56]: 연결된 기능 화면 + - generic [ref=e57]: + - generic [ref=e58]: primevue-aggrid + - generic [ref=e60]: PrimeVue + AG Grid Community + - generic [ref=e61]: + - generic [ref=e62]: 자동주문 OFF + - generic [ref=e64]: 고정 경계 + - generic [ref=e66]: + - generic [ref=e67]: + - generic [ref=e68]: 화면 검색 + - textbox "화면 검색" [ref=e69]: + - /placeholder: 화면 ID, 기능명 또는 화면 유형 + - generic [ref=e70]: + - generic [ref=e71]: 화면 유형 + - combobox "전체 화면 유형" [ref=e73] + - generic [ref=e79]: + - generic [ref=e81]: + - main [ref=e82]: + - generic [ref=e85]: + - generic [ref=e86]: Press SPACE to select this row + - grid [ref=e87]: + - rowgroup [ref=e88]: + - row [ref=e89]: + - columnheader [ref=e90] + - columnheader "화면 ID" [ref=e91]: + - generic [ref=e93] [cursor=pointer] + - columnheader "기능 화면" [ref=e95]: + - generic [ref=e97] [cursor=pointer] + - columnheader "유형" [ref=e99]: + - generic [ref=e101] [cursor=pointer] + - columnheader "화면 유형" [ref=e103]: + - generic [ref=e105] [cursor=pointer] + - rowgroup [ref=e107]: + - row [selected] [ref=e108]: + - gridcell [ref=e109]: + - checkbox "Press Space to toggle row selection (checked)" [checked] [ref=e110] [cursor=pointer] + - gridcell "SCR-002" [ref=e111] + - gridcell "매도 의사결정" [ref=e112] + - gridcell "T03" [ref=e113] + - gridcell "등록·편집 Form" [ref=e114] + - row [ref=e115]: + - gridcell [ref=e116]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e117] [cursor=pointer] + - gridcell "SCR-013" [ref=e118] + - gridcell "데이터 품질" [ref=e119] + - gridcell "T08" [ref=e120] + - gridcell "Batch·데이터 운영" [ref=e121] + - row [ref=e122]: + - gridcell [ref=e123]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e124] [cursor=pointer] + - gridcell "SCR-015" [ref=e125] + - gridcell "모델 운영" [ref=e126] + - gridcell "T10" [ref=e127] + - gridcell "버전 비교·거버넌스" [ref=e128] + - row [ref=e129]: + - gridcell [ref=e130]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e131] [cursor=pointer] + - gridcell "SCR-016" [ref=e132] + - gridcell "시장 데이터 수집" [active] [ref=e133] + - gridcell "T08" [ref=e134] + - gridcell "Batch·데이터 운영" [ref=e135] + - row [ref=e136]: + - gridcell [ref=e137]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e138] [cursor=pointer] + - gridcell "SCR-017" [ref=e139] + - gridcell "수집 이력" [ref=e140] + - gridcell "T08" [ref=e141] + - gridcell "Batch·데이터 운영" [ref=e142] + - row [ref=e143]: + - gridcell [ref=e144]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e145] [cursor=pointer] + - gridcell "SCR-018" [ref=e146] + - gridcell "포트폴리오 리스크" [ref=e147] + - gridcell "T07" [ref=e148] + - gridcell "Dashboard·Scorecard" [ref=e149] + - row [ref=e150]: + - gridcell [ref=e151]: + - checkbox "Press Space to toggle row selection (unchecked)" [ref=e152] [cursor=pointer] + - gridcell "SCR-019" [ref=e153] + - gridcell "리밸런싱 제안" [ref=e154] + - gridcell "T03" [ref=e155] + - gridcell "등록·편집 Form" [ref=e156] + - rowgroup + - rowgroup + - rowgroup + - region [ref=e160]: + - generic [ref=e161]: + - heading "컴포넌트 동작 프리뷰" [level=2] [ref=e162] + - paragraph [ref=e163]: 공유 UI 포트를 실제 상태로 확인하는 내부 전용 카탈로그입니다. + - generic [ref=e164]: + - generic [ref=e165]: + - heading "Actions" [level=3] [ref=e166] + - button "기본 버튼" [ref=e167] [cursor=pointer] + - button "주의 상태" [ref=e168] [cursor=pointer] + - generic [ref=e169]: + - heading "Status" [level=3] [ref=e170] + - generic [ref=e171]: + - generic [ref=e172]: READY + - generic [ref=e174]: REVIEW + - generic [ref=e176]: BLOCKED + - generic [ref=e178]: + - heading "Inputs" [level=3] [ref=e179] + - generic [ref=e180]: + - generic [ref=e181]: 텍스트 필드 + - textbox "텍스트 필드" [ref=e182]: 샘플 값 + - generic [ref=e183]: + - generic [ref=e184]: 선택 필드 + - combobox "준비" [ref=e186] + - region [ref=e190]: + - generic [ref=e191]: + - heading "입력 유형 기능 테스트" [level=2] [ref=e192] + - paragraph [ref=e193]: 서버 요청 없이 shared UI의 입력·검증·읽기전용 조합을 확인합니다. + - generic [ref=e194]: + - generic [ref=e195]: + - heading "기본 입력" [level=2] [ref=e196] + - paragraph [ref=e197]: 필수 항목과 유효성 상태를 조작할 수 있습니다. + - button "읽기 전용" [ref=e199] [cursor=pointer] + - group "기능 테스트 입력" [ref=e201]: + - generic [ref=e202]: + - generic [ref=e203]: 이름 + - textbox "이름" [ref=e204] + - generic [ref=e205]: + - generic [ref=e206]: 금액 + - spinbutton "금액" [ref=e208] + - generic [ref=e209]: + - generic [ref=e210]: 기준일 + - generic [ref=e211]: + - combobox "기준일" [ref=e212] + - button "Choose Date" [ref=e213] + - generic [ref=e216] [cursor=pointer]: + - checkbox "검증 조건을 확인했습니다" [ref=e218] + - generic [ref=e219]: 검증 조건을 확인했습니다 + - generic [ref=e221]: + - button "검증 실행" [ref=e222] [cursor=pointer] + - button "초기화" [ref=e223] [cursor=pointer] + - complementary [ref=e224]: + - generic [ref=e225]: + - heading "선택한 기능 화면" [level=2] [ref=e226] + - paragraph [ref=e230]: + - strong [ref=e231]: SCR-016 + - text: · 시장 데이터 수집 + - paragraph [ref=e232]: T08 · Batch·데이터 운영 + - paragraph [ref=e233]: + - code [ref=e234]: /ops/market-data-ingestion + - button "선택 화면 열기" [ref=e235] [cursor=pointer] + - text: "데이터 기준시각: 2026-08-02" + - contentinfo [ref=e228]: RESEARCH_CANDIDATE_NOT_PRODUCTION + - generic "애플리케이션 버전" [ref=e229]: v0.1.0 · UI contract 4.0 \ No newline at end of file diff --git a/.playwright-cli/page-2026-08-08T17-51-24-694Z.yml b/.playwright-cli/page-2026-08-08T17-51-24-694Z.yml new file mode 100644 index 00000000..e69de29b diff --git a/.playwright-cli/page-2026-08-08T17-51-50-139Z.yml b/.playwright-cli/page-2026-08-08T17-51-50-139Z.yml new file mode 100644 index 00000000..07d2bb9e --- /dev/null +++ b/.playwright-cli/page-2026-08-08T17-51-50-139Z.yml @@ -0,0 +1,203 @@ +- generic [ref=e1]: + - generic [ref=e3]: + - link "본문으로 건너뛰기" [ref=e4] [cursor=pointer]: + - /url: "#ks-main" + - banner [ref=e5]: + - button "K-ArtSell Aegis IMPLEMENTATION_TEMPLATE" [ref=e6] [cursor=pointer]: + - strong [ref=e7]: K-ArtSell Aegis + - generic [ref=e8]: IMPLEMENTATION_TEMPLATE + - button "메뉴명 · 화면코드 · 업무명 검색 Ctrl K" [ref=e9]: + - generic [ref=e10]: 메뉴명 · 화면코드 · 업무명 검색 + - generic [ref=e11]: Ctrl K + - status [ref=e12]: 투자자문형 · 자동주문/KIS 제출 OFF · 자동 모델승격 OFF + - navigation "열린 업무" [ref=e13]: + - generic [ref=e14]: + - button "컴포넌트 확인" [ref=e15] [cursor=pointer] + - button "탭 고정" [ref=e17] [cursor=pointer]: 📍 + - button "탭 닫기" [ref=e18] [cursor=pointer]: × + - generic [ref=e222]: + - button "데이터 품질" [ref=e223] [cursor=pointer] + - button "탭 고정" [ref=e225] [cursor=pointer]: 📍 + - button "탭 닫기" [ref=e226] [cursor=pointer]: × + - generic [ref=e19]: + - complementary "주요 메뉴" [ref=e20]: + - button "« 접기" [expanded] [ref=e21] [cursor=pointer] + - generic [ref=e22]: + - heading "Design System" [level=2] [ref=e23] + - link "컴포넌트 확인" [ref=e24] [cursor=pointer]: + - /url: /internal/ui-standard + - generic [ref=e25]: + - heading "Operations" [level=2] [ref=e26] + - link "데이터 품질" [ref=e27] [cursor=pointer]: + - /url: /ops/data-quality + - link "시장 데이터 수집" [ref=e28] [cursor=pointer]: + - /url: /ops/market-data-ingestion + - link "수집 이력" [ref=e29] [cursor=pointer]: + - /url: /ops/market-data-history + - link "모델 운영" [ref=e30] [cursor=pointer]: + - /url: /ops/model-operations + - generic [ref=e31]: + - heading "Portfolio" [level=2] [ref=e32] + - link "포트폴리오 리스크" [ref=e33] [cursor=pointer]: + - /url: /portfolio/risk + - link "리밸런싱 제안" [ref=e34] [cursor=pointer]: + - /url: /portfolio/rebalance + - generic [ref=e35]: + - heading "Research" [level=2] [ref=e36] + - link "매도 의사결정" [ref=e37] [cursor=pointer]: + - /url: /research/sell-decision + - main [ref=e38]: + - generic [ref=e227]: + - generic [ref=e228]: + - generic [ref=e229]: + - heading "표준 UI 패턴" [level=1] [ref=e230] + - paragraph [ref=e231]: 화면 유형을 선택하고, 실제 화면 ID를 선택해 기능 화면을 엽니다. + - generic [ref=e232]: + - generic [ref=e233]: "상태: READY" + - generic [ref=e234]: "As-of: 2026-08-02" + - generic [ref=e235]: "Version: UI-CONTRACT-4.0" + - button "선택 화면 열기" [disabled] [ref=e237] + - generic [ref=e238]: + - generic [ref=e239]: + - strong [ref=e240]: "12" + - generic [ref=e241]: 화면 타입 + - generic [ref=e242]: + - strong [ref=e243]: "7" + - generic [ref=e244]: 연결된 기능 화면 + - generic [ref=e245]: + - generic [ref=e246]: primevue-aggrid + - generic [ref=e248]: PrimeVue + AG Grid Community + - generic [ref=e249]: + - generic [ref=e250]: 자동주문 OFF + - generic [ref=e252]: 고정 경계 + - generic [ref=e254]: + - generic [ref=e255]: + - generic [ref=e256]: 화면 검색 + - textbox "화면 검색" [ref=e257]: + - /placeholder: 화면 ID, 기능명 또는 화면 유형 + - generic [ref=e258]: + - generic [ref=e259]: 화면 유형 + - combobox "전체 화면 유형" [ref=e261] + - generic [ref=e265]: + - generic [ref=e266]: 열 화면 + - combobox "화면 ID를 선택하세요" [expanded] [active] [ref=e268] + - generic [ref=e274]: + - generic [ref=e276]: + - main [ref=e277]: + - grid [ref=e282]: + - rowgroup [ref=e283]: + - row [ref=e284]: + - columnheader "화면 ID" [ref=e285]: + - generic [ref=e287] [cursor=pointer] + - columnheader "기능 화면" [ref=e289]: + - generic [ref=e291] [cursor=pointer] + - columnheader "유형" [ref=e293]: + - generic [ref=e295] [cursor=pointer] + - columnheader "화면 유형" [ref=e297]: + - generic [ref=e299] [cursor=pointer] + - rowgroup [ref=e301]: + - row [ref=e302]: + - gridcell "SCR-002" [ref=e303] + - gridcell "매도 의사결정" [ref=e304] + - gridcell "T03" [ref=e305] + - gridcell "등록·편집 Form" [ref=e306] + - row [ref=e307]: + - gridcell "SCR-013" [ref=e308] + - gridcell "데이터 품질" [ref=e309] + - gridcell "T08" [ref=e310] + - gridcell "Batch·데이터 운영" [ref=e311] + - row [ref=e312]: + - gridcell "SCR-015" [ref=e313] + - gridcell "모델 운영" [ref=e314] + - gridcell "T10" [ref=e315] + - gridcell "버전 비교·거버넌스" [ref=e316] + - row [ref=e317]: + - gridcell "SCR-016" [ref=e318] + - gridcell "시장 데이터 수집" [ref=e319] + - gridcell "T08" [ref=e320] + - gridcell "Batch·데이터 운영" [ref=e321] + - row [ref=e322]: + - gridcell "SCR-017" [ref=e323] + - gridcell "수집 이력" [ref=e324] + - gridcell "T08" [ref=e325] + - gridcell "Batch·데이터 운영" [ref=e326] + - row [ref=e327]: + - gridcell "SCR-018" [ref=e328] + - gridcell "포트폴리오 리스크" [ref=e329] + - gridcell "T07" [ref=e330] + - gridcell "Dashboard·Scorecard" [ref=e331] + - row [ref=e332]: + - gridcell "SCR-019" [ref=e333] + - gridcell "리밸런싱 제안" [ref=e334] + - gridcell "T03" [ref=e335] + - gridcell "등록·편집 Form" [ref=e336] + - rowgroup + - rowgroup + - rowgroup + - region [ref=e340]: + - generic [ref=e341]: + - heading "컴포넌트 동작 프리뷰" [level=2] [ref=e342] + - paragraph [ref=e343]: 공유 UI 포트를 실제 상태로 확인하는 내부 전용 카탈로그입니다. + - generic [ref=e344]: + - generic [ref=e345]: + - heading "Actions" [level=3] [ref=e346] + - button "기본 버튼" [ref=e347] [cursor=pointer] + - button "주의 상태" [ref=e348] [cursor=pointer] + - generic [ref=e349]: + - heading "Status" [level=3] [ref=e350] + - generic [ref=e351]: + - generic [ref=e352]: READY + - generic [ref=e354]: REVIEW + - generic [ref=e356]: BLOCKED + - generic [ref=e358]: + - heading "Inputs" [level=3] [ref=e359] + - generic [ref=e360]: + - generic [ref=e361]: 텍스트 필드 + - textbox "텍스트 필드" [ref=e362]: 샘플 값 + - generic [ref=e363]: + - generic [ref=e364]: 선택 필드 + - combobox "준비" [ref=e366] + - region [ref=e370]: + - generic [ref=e371]: + - heading "입력 유형 기능 테스트" [level=2] [ref=e372] + - paragraph [ref=e373]: 서버 요청 없이 shared UI의 입력·검증·읽기전용 조합을 확인합니다. + - generic [ref=e374]: + - generic [ref=e375]: + - heading "기본 입력" [level=2] [ref=e376] + - paragraph [ref=e377]: 필수 항목과 유효성 상태를 조작할 수 있습니다. + - button "읽기 전용" [ref=e379] [cursor=pointer] + - group "기능 테스트 입력" [ref=e381]: + - generic [ref=e382]: + - generic [ref=e383]: 이름 + - textbox "이름" [ref=e384] + - generic [ref=e385]: + - generic [ref=e386]: 금액 + - spinbutton "금액" [ref=e388] + - generic [ref=e389]: + - generic [ref=e390]: 기준일 + - generic [ref=e391]: + - combobox "기준일" [ref=e392] + - button "Choose Date" [ref=e393] + - generic [ref=e396] [cursor=pointer]: + - checkbox "검증 조건을 확인했습니다" [ref=e398] + - generic [ref=e399]: 검증 조건을 확인했습니다 + - generic [ref=e401]: + - button "검증 실행" [ref=e402] [cursor=pointer] + - button "초기화" [ref=e403] [cursor=pointer] + - complementary [ref=e404]: + - generic [ref=e405]: + - heading "선택한 기능 화면" [level=2] [ref=e406] + - paragraph [ref=e407]: 목록에서 화면 ID를 선택한 뒤, “선택 화면 열기”를 누르세요. + - text: "데이터 기준시각: 2026-08-02" + - contentinfo [ref=e220]: RESEARCH_CANDIDATE_NOT_PRODUCTION + - generic "애플리케이션 버전" [ref=e221]: v0.1.0 · UI contract 4.0 + - generic [ref=e408]: + - listbox [ref=e410]: + - option "SCR-002 · 매도 의사결정" [ref=e411] + - option "SCR-013 · 데이터 품질" [ref=e412] + - option "SCR-015 · 모델 운영" [ref=e413] + - option "SCR-016 · 시장 데이터 수집" [ref=e414] + - option "SCR-017 · 수집 이력" [ref=e415] + - option "SCR-018 · 포트폴리오 리스크" [ref=e416] + - option "SCR-019 · 리밸런싱 제안" [ref=e417] + - status: No selected item \ No newline at end of file diff --git a/TECH_DEBT_REGISTER.md b/TECH_DEBT_REGISTER.md index 09ce8bcf..38ac9e97 100644 --- a/TECH_DEBT_REGISTER.md +++ b/TECH_DEBT_REGISTER.md @@ -63,6 +63,14 @@ | DEBT-028 | `ActivateModelHandler` had no HTTP endpoint, and would have corrupted approval data if wired naively | High (3) | Low (1) | Completed (DB verification pending) | Found via a systematic sweep of every `*Handler` registered in `Program.cs`'s DI container, checking whether each is actually referenced by an `Endpoint.cs` or a job (the same method that found DEBT-026/027) — `ActivateModelHandler` was the only remaining orphan in `Features/ApprovalWorkflow/`: no `POST /approvals/{id}/activate` existed, so an `Approved` proposal could never reach `Active`, the step this whole slice exists for. While wiring it up, found the handler's original call — `_sql.UpdateProposalStatusAsync(proposalId, ApprovalStatus.Active, userEmail, "Model activated by SRE", ct)` — would have passed the *activating SRE's* email/note through the `approvedBy`/`approvalNotes` parameters, overwriting the checker's real `approved_by`/`approval_notes` on activation, and never touched the schema's `activated_by`/`activated_at` columns at all (they existed since migration `0036` but nothing ever wrote them). Added a dedicated `ApprovalWorkflowSql.ActivateProposalAsync(proposalId, activatedBy, ct)` that only sets `status='ACTIVE'`, `activated_by`, `activated_at`, leaving `approved_by`/`approval_notes` untouched, and switched `ActivateModelHandler` to call it. Added `ActivateApprovalEndpoint` (`POST /approvals/{id}/activate`). Strengthened the existing `Activate_BySreAfterApproval_TransitionsToActive` test to assert `activated_by`/`activated_at` are set and the checker's `approved_by`/`approval_notes` survive activation unchanged — this would have caught the bug. `dotnet build -c Release` clean (0/0). Not run against a live database this session. | @claude | Session 2026-08-09 (BE/scheduler priority pass) | | DEBT-029 | `LogAuditEventCommandHandler` (VS-27 audit trail) is never called by any other slice | High (3) | Medium (2) | Backlog | Found during the same orphaned-handler sweep that found DEBT-027/028 — but unlike those, this one is NOT a missing single endpoint; it's a missing *cross-cutting integration*. `LogAuditEventCommandHandler` (`src/KArtSell.Modules.ModelOperations/Compliance/LogAuditEventHandler.cs`) is the intended call point for every other slice to record an auditable action (per `compliance.audit_event_types`'s seed data: `APPROVAL_PROPOSED`, `APPROVAL_APPROVED`, `MODEL_ACTIVATED`, `SELL_DECISION_MADE`, `SELL_EXECUTED`, etc.) — but nothing in `ApprovalWorkflow/Handlers.cs`, `TradeExecution/TradeHandlers.cs`, `SellDecision/*`, or `PortfolioReconciliation/ReconcileTradeHandler.cs` actually calls it. VS-27 ("Immutable Audit Trail") is marked `COMPLETED` in the WBS tracker with 5/5 tests passing, but those tests only exercise `AuditSql` directly — they don't prove the rest of the system ever produces an audit trail in practice. Net effect: the compliance/GDPR audit trail this system's governance model depends on (CLAUDE.md's "Evidence & Audit: Update/delete are blocked; new state appended as new revision") is currently empty in production regardless of how many approvals/trades/sell-decisions happen, because nothing populates it outside of direct `AuditSql` test calls. **Not fixed this session** — wiring it in touches 4+ handler classes across 3+ slices (a genuine cross-cutting integration, not a single bounded fix like DEBT-026/027/028), and each call site needs to decide what `EventType`/`Details`/`EvidenceLinks` are correct for that action rather than a mechanical change. Recommend one slice at a time, starting with `ApprovalWorkflow` (highest governance stakes) via its outbox events (`ApprovalWorkflowPolicy.CreateStateChangeEvent` already emits an event per transition — a downstream consumer job could call `LogAuditEventCommandHandler` from there instead of wiring it into every handler directly, matching this repo's existing Outbox→Inbox→consumer pattern). | @claude | Session 2026-08-09 (BE/scheduler priority pass, discovery only) | +### Frontend Shell / Home (KBX Design Philosophy Adoption, V13-FE-007+) + +| ID | Category | Impact | Effort | Status | Notes | Owner | ADR | +|----|----------|--------|--------|--------|-------|-------|-----| +| DEBT-030 | `HomePage.vue` "확인 필요" section has no real signal source | Medium (2) | Medium (2) | Backlog | `frontend/src/features/home/pages/HomePage.vue`'s Attention section (KBX Business UX-AX Standard §2.4 "Exception Driven") currently always renders the empty state — there is no cross-feature aggregation endpoint yet for failed batch jobs, pending maker-checker approvals, or reconciliation breaks. Only `model-operations` and `sell-decision` features have `queries.ts`; other features (data-quality, marketData, portfolio) have no query hooks to source counts from. Wire real counts feature-by-feature once each has a stable query hook, rather than fabricating a placeholder aggregation API now. | @claude | V13-FE-007 (KBX shell/home adoption) | +| DEBT-031 | Workspace tab dirty-guard has no feature screen wired to report dirty state | Low (1) | Medium (2) | Backlog | `frontend/src/shared/shell/workspaceStore.ts`'s `setDirty(screenId, path, dirty)` action and `KsWorkspaceTabs.vue`'s close-confirmation dialog (Business UX-AX Standard §58~59) are implemented and functional, but no feature page currently calls `setDirty`. `StandardScreenBoundary.vue` already receives a `state==='DIRTY'` prop per screen, but nothing bridges that per-screen signal up into the shared workspace store yet. Until a screen calls `setDirty`, tab close always takes the non-dirty path (closes immediately, no confirm). Wire via a small composable (e.g. `useWorkspaceDirtyBridge(screenId, path)`) called from screens that pass `state: 'DIRTY'`, one feature at a time — do not force every screen to adopt it in one sweep. Also note: the confirm dialog only offers "계속 편집"/"변경 버리기" (no generic "저장 후 이동", since there is no cross-screen save-orchestration hook to call). | @claude | V13-FE-010 (KBX workspace tabs adoption) | +| DEBT-032 | `frontend/src/**` has git-tracked stale `.js`/`.vue.js` twins next to every `.ts`/`.vue` source, and they can silently shadow the source under default Vite/Vitest module resolution | High (3) | High (3) | Backlog | Discovered while adding two entries to `screen-types/catalogue.ts` (V13-FE-009): `vitest.config.ts` had no `resolve.extensions` override, so Vitest fell back to Vite's default order (`.js` before `.ts`), causing `catalogue.spec.ts`'s extensionless `import '../catalogue'` to silently resolve to a stale, git-tracked `catalogue.js` twin instead of the edited `catalogue.ts` — the new T11/T12 entries were invisible to the test. `vite.config.ts` already declares `extensions: ['.ts', '.tsx', '.vue', '.js', ...]` (so the dev server was never at risk), but `vitest.config.ts` did not match it. Fixed the immediate blocker: added the same `resolve.extensions` order to `vitest.config.ts`, and deleted the three stale twins directly implicated (`screen-types/catalogue.js`, `screen-types/tests/catalogue.spec.js`, `app/router.js` — confirmed unreferenced by any `.gitea/workflows/*.yml` and not emitted by any `package.json` script). **Not fixed**: this is a repo-wide pattern (confirmed present across most of `frontend/src`, deliberately git-committed across multiple past sessions per `git log`, e.g. commit `cada8fe`) — dozens/hundreds of other stale `.js`/`.vue.js` files likely still exist alongside their `.ts`/`.vue` sources and were not swept in this session (out of scope for the KBX design-philosophy adoption this debt was found during). Needs a dedicated session to (a) determine why these were being dual-maintained in the first place — no `package.json` script emits them, so likely a leftover from an earlier tsc/build config or manual habit — and (b) either delete them all (now safe, since `vitest.config.ts`/`vite.config.ts` both prefer `.ts`) or explain why they must stay. | @claude | V13-FE-009 (KBX Fast Entry/Work Queue template adoption, discovery) | + --- ## Impact/Effort Matrix (Updated: PR 4) diff --git a/docs/CURRENT/CATALOGS/WBS_PROGRESS_TRACKER.csv b/docs/CURRENT/CATALOGS/WBS_PROGRESS_TRACKER.csv index d056d23a..a14ee6af 100644 --- a/docs/CURRENT/CATALOGS/WBS_PROGRESS_TRACKER.csv +++ b/docs/CURRENT/CATALOGS/WBS_PROGRESS_TRACKER.csv @@ -51,4 +51,4 @@ V13-FE-003,S0,Cross,UiAdapter Port 정의,COMPLETED,2026-08-09,"docs/CURRENT/V13 V13-FE-004,S0,Cross,PrimeVue/AG Grid Adapter 구현,COMPLETED,2026-08-09,"docs/CURRENT/V13-FE-004_ADAPTER_IMPLEMENTATION_RECONCILIATION.md; frontend/src/shared/ui/adapter/primevue; frontend/src/shared/ui/adapter/tests/uiAdapter.contract.spec.ts",FE Architect/QA,"Dependency V13-FE-003 is COMPLETED. PrimeVue/AG Grid remain confined behind adapter v4. Actual targeted Vitest evidence: 2 files / 4 tests passed, exit 0, 2026-08-09. This is contract/accessibility-attribute evidence only; no visual/AT/runtime claim is made." V13-FE-005,S0,Cross,Ks* vendor-neutral components,COMPLETED,2026-08-09,"docs/CURRENT/V13-FE-005_KBX_FORM_COMPONENT_ADOPTION.md; frontend/src/shared/ui/components/KsFormGrid.vue; frontend/src/shared/ui/components/KsFormSection.vue; frontend/src/shared/ui/components/KsFormSpan.vue; frontend/src/shared/ui/components/KsValidationSummary.vue; frontend/src/shared/ui/components/tests/KsFormLayouts.spec.ts",FE Architect/QA,"Dependency V13-FE-004 is COMPLETED. Reimplemented only KBX presentation-only form components against existing K-ArtSell tokens; no KBX package, contracts, provider dependency, routing, permissions, or business policy imported. Actual evidence: targeted Vitest 2 files / 6 tests passed and pnpm typecheck exit 0 on 2026-08-09. Visual/AT/performance baseline remains outside this Slice." V13-FE-006,S0,Cross,AppShell/Page layouts,COMPLETED,2026-08-09,"docs/CURRENT/V13-FE-006_LAYOUT_CONTRACT_RECONCILIATION.md; frontend/src/shared/ui/layouts/tests/layout.contract.spec.ts; frontend/src/shared/ui/layouts/AppShellLayout.vue; frontend/src/shared/ui/layouts/PageLayout.vue",UX/FE/QA/Security,"Dependency V13-FE-005 is COMPLETED. Preserved the existing slot-based layout rather than importing KBX's coupled workspace shell. Actual DOM contract evidence: 1 file / 2 tests passed, exit 0, 2026-08-09; verifies skip navigation, structural landmarks, default automation OFF boundary, and evidence/aside/footer separation. No visual/AT/E2E claim is made." -V13-FE-011,S6,Cross,T01 검색목록 화면 템플릿,IN_PROGRESS,TBD,"docs/CURRENT/V13-FE-011_T01_SEARCH_LIST_LAYOUT_SLICE_NOTE.md; frontend/src/shared/ui/screen-types/v2/SearchListCrudPage.vue; frontend/src/shared/ui/screen-types/tests/SearchListCrudPage.spec.ts; evidence/V13-FE-011/t01-search-list-layout_20260809.log",UX/FE,"2026-08-09: Scope limited to adapter-neutral T01 composition: list body plus optional detail region through CrudWorkspaceLayout. Actual execution evidence: targeted Vitest 1 file / 2 tests passed; pnpm typecheck passed. Dependency V13-FE-006 is completed. MVP-A Gate passage, visual/assistive-technology approval, and Playwright evidence are not claimed." +V13-FE-011,S6,Cross,T01 검색목록 화면 템플릿,IN_PROGRESS,TBD,"docs/CURRENT/V13-FE-011_T01_SEARCH_LIST_LAYOUT_SLICE_NOTE.md; frontend/src/shared/ui/screen-types/v2/SearchListCrudPage.vue; frontend/src/shared/ui/screen-types/tests/SearchListCrudPage.spec.ts; frontend/src/shared/shell/tests/navigationCatalog.spec.ts; evidence/V13-FE-011/t01-search-list-layout_20260809.log",UX/FE,"2026-08-09: Scope limited to adapter-neutral T01 composition: list body plus optional detail region through CrudWorkspaceLayout and read-only component catalogue visibility in the Design System menu; WBS workspace remains hidden. Actual execution evidence: targeted Vitest 2 files / 3 tests passed; pnpm typecheck passed. Dependency V13-FE-006 is completed. MVP-A Gate passage, visual/assistive-technology approval, and Playwright evidence are not claimed." diff --git a/docs/CURRENT/V13-FE-011_T01_SEARCH_LIST_LAYOUT_SLICE_NOTE.md b/docs/CURRENT/V13-FE-011_T01_SEARCH_LIST_LAYOUT_SLICE_NOTE.md index 69ae55a5..069d73ee 100644 --- a/docs/CURRENT/V13-FE-011_T01_SEARCH_LIST_LAYOUT_SLICE_NOTE.md +++ b/docs/CURRENT/V13-FE-011_T01_SEARCH_LIST_LAYOUT_SLICE_NOTE.md @@ -9,8 +9,8 @@ ## Source / Assumption / Unknown / Decision Required -- **Source:** `DEC-046` approves T01~T10 standard screen types. `FE_COMPONENT.csv` defines T01 as a list screen composed from shared layouts. `UiStandardPage.vue` is the current T01 consumer. -- **Assumption:** T01 needs one responsive workspace boundary for its list body and optional detail region; `CrudWorkspaceLayout` already provides that adapter-neutral responsibility. +- **Source:** `DEC-046` approves T01~T10 standard screen types. `FE_COMPONENT.csv` defines T01 as a list screen composed from shared layouts. `UiStandardPage.vue` is the current T01 consumer. `KsAppShell.vue` excludes `internalOnly` routes from its shared menu catalogue. +- **Assumption:** T01 needs one responsive workspace boundary for its list body and optional detail region; `CrudWorkspaceLayout` already provides that adapter-neutral responsibility. The UI catalogue is read-only design evidence, so it may be discoverable from the Design System menu while the WBS workspace remains hidden. - **Unknown:** MVP-A Gate passage and visual/assistive-technology approval evidence are not present in the tracker. - **Decision Required:** UX/QA approval is required before marking this WBS item completed at MVP-A. @@ -19,6 +19,7 @@ - Compose the existing T01 screen type with `CrudWorkspaceLayout`. - Preserve named slots and `StandardScreenBoundary` state handling. - Add a focused DOM contract test for the main/detail layout relationship. +- Expose the read-only component catalogue through the `Design System` navigation section; preserve the internal WBS workspace as hidden. ## Out of scope @@ -26,6 +27,6 @@ ## Actual execution evidence -- `pnpm test -- --run src/shared/ui/screen-types/tests/SearchListCrudPage.spec.ts` — 1 file / 2 tests passed, exit 0. +- `pnpm test -- --run src/shared/ui/screen-types/tests/SearchListCrudPage.spec.ts src/shared/shell/tests/navigationCatalog.spec.ts` — 2 files / 3 tests passed, exit 0. - `pnpm typecheck` — `vue-tsc --noEmit`, exit 0. - Preserved output: `evidence/V13-FE-011/t01-search-list-layout_20260809.log`. diff --git a/docs/Design/KBX Business UX-AX Standard v1.0.md b/docs/Design/KBX Business UX-AX Standard v1.0.md new file mode 100644 index 00000000..00319a9e --- /dev/null +++ b/docs/Design/KBX Business UX-AX Standard v1.0.md @@ -0,0 +1,2219 @@ +# KBX Business UX/AX Standard v1.0 +### OMS · WMS · ERP 업무형 UX/AX 표준 + +--- + +## 1. 표준의 목적 + +KBX의 목표는 새로운 UX를 발명하는 것이 아니다. + +**한국 업무사용자가 더존 Smart A 계열, WEHAGO, 이카운트, 영림원, 사방넷, 이지어드민, 카페24 등의 업무시스템에서 이미 학습한 사용 문법을 정리하고, OMS·WMS·ERP 전체에서 동일하게 재사용하는 것​**을 목표로 한다. + +성공 기준은 다음과 같다. + +1. 별도 교육 없이 기본적인 조회·등록·수정 업무가 가능하다. +2. 초보자는 마우스로 모든 기능을 사용할 수 있다. +3. 숙련자는 키보드 중심으로 빠르게 업무할 수 있다. +4. Excel 사용자가 Excel을 포기하지 않아도 된다. +5. 반복 클릭과 중복입력을 최소화한다. +6. 정상 데이터는 자동처리하고 예외만 사용자에게 노출한다. +7. AI는 기존 업무 UI를 대체하지 않고 업무 옆에서 보조한다. +8. AI가 잘못 판단하더라도 업무 데이터 정합성을 훼손할 수 없다. +9. 모든 주요 변경은 원인과 결과를 재현할 수 있다. +10. 화면 수가 증가해도 UX가 분화되지 않는다. + +--- + +# 2. KBX의 7대 설계 원칙 + +## 2.1 Familiar First + +기존 한국 ERP 문법을 우선한다. + +권장 용어: + +- 조회 +- 신규 +- 저장 +- 수정 +- 취소 +- 삭제 +- 복사 +- 인쇄 +- 엑셀 +- 도움말 +- 변경이력 +- 확정 +- 마감 +- 일괄처리 + +불필요하게 다음과 같이 바꾸지 않는다. + +- Create +- Submit +- Action +- Manage +- Process +- Execute + +업무 사용자가 이미 아는 표현을 다시 학습시키지 않는다. + +--- + +## 2.2 Keyboard Accelerated, Mouse Complete + +마우스만으로 모든 업무가 가능해야 한다. + +동시에 숙련 사용자는 키보드를 통해 반복 업무를 가속할 수 있어야 한다. + +단축키는 필수 학습 기능이 아니라 생산성 증폭 장치다. + +--- + +## 2.3 Grid First + +OMS·WMS·ERP에서 Grid는 단순 조회 Table이 아니다. + +Grid는 다음 역할을 수행한다. + +- 조회 +- 선택 +- 편집 +- 비교 +- 대량입력 +- 복사 +- 붙여넣기 +- 일괄처리 +- 검증 +- 합계 +- Drill-down + +따라서 `KbxDataGrid`는 전체 제품에서 가장 중요한 공통 컴포넌트로 관리한다. + +--- + +## 2.4 Exception Driven + +사용자가 정상 건을 일일이 처리하지 않는다. + +예: + +전체 주문 8,240건 중 + +- 재고 부족 7건 +- 주소 오류 4건 +- SKU Mapping 오류 2건 +- 송장 발급 실패 3건 + +이라면 사용자의 업무 대상은 8,240건이 아니라 **16건**이어야 한다. + +--- + +## 2.5 Predictable Layout + +동일한 기능은 모든 화면에서 동일한 위치에 존재한다. + +화면마다 버튼 위치가 달라지면 안 된다. + +--- + +## 2.6 Explicit State + +현재 상태와 다음 행동을 숨기지 않는다. + +예: + +`작성 → 확정 → 할당 → 피킹 → 검수 → 출고` + +현재: + +`피킹 완료` + +다음 가능 작업: + +`검수 시작` + +금지 작업: + +`주문 수정` + +--- + +## 2.7 Audit by Default + +중요한 변경은 항상 다음을 기록한다. + +- 누가 +- 언제 +- 어디서 +- 무엇을 +- 변경 전 +- 변경 후 +- 변경 방법 +- 업무 사유 + +자동화나 AI에 의한 작업도 사용자 작업과 동일하게 추적한다. + +--- + +# 3. Desktop 표준 화면 구조 + +기준 Viewport: + +`1440 × 900` + +이보다 커져도 본문이 무작정 확장되지 않도록 구성한다. + +기본 화면: + +```text +┌──────────────────────────────────────────────────────────────┐ +│ Logo │ 모듈 │ 메뉴검색 │ Workspace Tabs 사용자 │ +├───────────┬──────────────────────────────────────────────────┤ +│ │ Breadcrumb / 화면명 도움말 AI 제안│ +│ ├──────────────────────────────────────────────────┤ +│ 메뉴 │ Command Bar │ +│ │ [조회] [신규] [저장] [일괄처리] [엑셀▼] │ +│ 즐겨찾기 ├──────────────────────────────────────────────────┤ +│ 최근메뉴 │ Search Condition │ +│ ├──────────────────────────────────────────────────┤ +│ │ │ +│ │ Main Workspace │ +│ │ │ +│ ├──────────────────────────────────────────────────┤ +│ │ Summary / Total / Selection Status │ +└───────────┴──────────────────────────────────────────────────┘ +``` + +--- + +# 4. 기본 치수 + +## Desktop Dense + +| 항목 | 기준 | +|---|---:| +| 기본 Font | 14px | +| Grid Font | 13~14px | +| Input Height | 34px | +| Button Height | 34px | +| Grid Row | 34px | +| Grid Header | 36px | +| Page Title | 20px | +| Section Title | 16px | +| Label Width | 88~120px | +| 기본 Input | 180~240px | +| Radius | 4~6px | +| 기본 Gap | 8px | +| Section Gap | 16~24px | + +### 원칙 + +업무시스템에서 8px 단위의 과도하게 큰 여백을 반복 사용하지 않는다. + +`예쁜 여백`보다 `정보 접근성`을 우선한다. + +--- + +# 5. Command Bar 표준 + +버튼 순서는 가능한 한 고정한다. + +```text +[조회 F3] +[신규] +[저장 F8] +[삭제/취소] +| +[업무별 주요 Action] +| +[인쇄] +[엑셀 ▼] +[더보기 ⋯] +``` + +### 규칙 + +Primary Action은 화면당 최대 1개. + +예: + +- 저장 +- 출고확정 +- 입고확정 +- 검수완료 + +나머지는 Secondary 처리한다. + +화면마다 여러 개의 파란 Primary 버튼을 사용하지 않는다. + +--- + +# 6. Search Panel 표준 + +검색 조건은 최대한 한 줄에 구성한다. + +```text +기간 [2026-08-01 ~ 2026-08-08] +거래처 [10001 대한상사] +상태 [전체 ▼] +키워드 [ ] +[조회] +[상세조건] +``` + +### 규칙 + +초기 화면: + +- 자주 사용하는 조건만 표시 +- 4~6개 이내 + +상세조건: + +- Accordion 또는 Drawer +- 최근 조건 유지 가능 + +사용자별로: + +`마지막 조회조건 기억` + +옵션 제공 가능. + +--- + +# 7. 표준 Screen Template + +전체 제품 화면의 최소 90%를 다음 9개 타입으로 제한한다. + +--- + +## T01 — Search / List + +적용: + +- 주문조회 +- 입고조회 +- 출고조회 +- 구매조회 +- 재고조회 +- 작업조회 + +구조: + +```text +Page Header +Command Bar +Search Panel +Data Grid +Summary Bar +``` + +--- + +## T02 — Master CRUD + +적용: + +- 품목 +- 거래처 +- 창고 +- 로케이션 +- 배송사 +- 단가정책 + +구조: + +```text +Page Header +Command Bar +Basic Information +Additional Information +Optional Tabs +Audit +``` + +--- + +## T03 — Header + Detail Transaction + +적용: + +- 주문등록 +- 구매등록 +- 입고등록 +- 출고등록 +- 재고이동 + +구조: + +```text +Header Form +Detail Grid +Summary +Command Bar +``` + +가장 중요한 Transaction Template이다. + +--- + +## T04 — Fast Grid Entry + +다량 행 입력용. + +적용: + +- 주문 일괄등록 +- 재고조정 +- 품목 단가 +- 입고 예정 +- 거래처별 가격 + +특징: + +- Enter 연속입력 +- 이전 값 자동복사 +- F2 Lookup +- 다중 Cell Paste +- 행 복제 +- Fill Down + +--- + +## T05 — Master / Detail Explorer + +적용: + +```text +거래처 → 주문 +품목 → 재고 +창고 → 로케이션 +주문 → 출고 +``` + +구조: + +```text +┌──────────────┬────────────────────────┐ +│ Master Grid │ Detail Grid │ +│ │ │ +│ │ │ +└──────────────┴────────────────────────┘ +``` + +사용자가 상세 화면을 반복적으로 열었다 닫지 않아도 된다. + +--- + +## T06 — Work Queue + +사용자가 지금 처리할 업무를 보여준다. + +예: + +```text +오늘 업무 + +신규주문 2,138 +출고 준비 927 +재고부족 7 +주소 확인 4 +송장 실패 3 +반품 검수 12 +``` + +차트 중심 Dashboard와 구분한다. + +--- + +## T07 — Reconcile / Verification + +데이터 정합성 비교 화면. + +예: + +```text + 주문 할당 피킹 검수 출고 + +ABC-001 10 10 10 9 0 + ▲ 불일치 +``` + +또는: + +```text +OMS WMS Difference + +10 9 -1 +``` + +불일치만 필터링할 수 있어야 한다. + +--- + +## T08 — Excel Import + +모든 Import는 동일한 UX를 사용한다. + +```text +파일 선택 + ↓ +필드 매핑 + ↓ +검증 + ↓ +Preview + ↓ +반영 + ↓ +결과 +``` + +--- + +## T09 — WMS Mobile Operation + +Desktop Template과 별도로 관리한다. + +적용: + +- 입고 +- 적치 +- 피킹 +- 검수 +- 패킹 +- 재고이동 +- 실사 + +--- + +# 8. Form 표준 + +## 8.1 Layout + +기본 2-column. + +```text +주문일 [2026-08-08] 거래처 [10001][대한상사][F2] + +담당자 [홍길동 ] 출고창고 [서울물류센터 ▼] +``` + +필드 관계가 없는 값을 공간이 남는다는 이유만으로 옆에 배치하지 않는다. + +--- + +## 8.2 Required + +```text +거래처 * +[ ] +``` + +별표 + validation message를 같이 사용한다. + +색상만으로 표현하지 않는다. + +--- + +## 8.3 Validation Timing + +검증 단계: + +```text +입력 즉시 + ↓ +Field Validation + ↓ +화면 저장 + ↓ +Business Validation + ↓ +Server Validation + ↓ +Database Constraint +``` + +Zod는 사용자 편의를 위한 1차 검증이다. + +최종 데이터 정합성은 서버가 책임진다. + +--- + +# 9. KbxLookup 표준 + +ERP 친숙도를 결정하는 핵심 Component. + +기본: + +```text +거래처 +[10001] [대한상사 ] [검색] +``` + +지원: + +1. 코드 직접입력 +2. 이름 직접입력 +3. Auto Complete +4. F2 Lookup +5. 검색 버튼 +6. 최근 사용 +7. 즐겨찾기 + +### Lookup Popup + +```text +거래처 검색 + +검색어 [대한 ] [조회] + +코드 거래처명 사업자번호 +10001 대한상사 +10002 대한유통 +10003 대한물류 +``` + +Enter: + +선택 + +Esc: + +닫기 + +선택 완료: + +원래 입력 필드 다음 위치로 Focus 이동 + +--- + +# 10. KbxDataGrid 표준 + +## 필수 기능 + +- Column Resize +- Column Move +- Pin +- Sort +- Filter +- Multi Select +- Checkbox +- Keyboard Navigation +- Copy +- Paste +- Fill Down +- Row Add +- Row Duplicate +- Group +- Summary +- Export +- Saved Layout +- Personal Layout +- Changed Cell 표시 +- Inline Validation +- Context Menu +- Drill Down + +--- + +## Grid 정렬 + +| 유형 | 정렬 | +|---|---| +| 코드 | Left | +| 이름 | Left | +| 날짜 | Center | +| 상태 | Center | +| Boolean | Center | +| 수량 | Right | +| 금액 | Right | +| 비율 | Right | + +--- + +## 금액 + +```text +1,250,000 +``` + +소수점이 필요한 경우: + +```text +1,250.50 +``` + +표시와 DB Numeric Precision은 별도 관리한다. + +--- + +# 11. Grid Editing + +편집 가능한 셀은 화면만 보아도 구분할 수 있어야 한다. + +상태: + +- Readonly +- Editable +- Changed +- Invalid +- Computed +- AI Suggested + +예: + +```text +수량 +[ 10 ] + +수량 +[ 20 ] 변경됨 + +수량 +[ -1 ] 수량은 0보다 커야 합니다. +``` + +--- + +# 12. Keyboard Standard + +## 공통 + +| Key | Action | +|---|---| +| Tab | 다음 필드 | +| Shift+Tab | 이전 필드 | +| Enter | 입력 확정 / 다음 | +| Shift+Enter | 이전 | +| Esc | 편집취소 / Popup 닫기 | +| F2 | Lookup | +| F3 | 조회 | +| F8 | 저장 | +| Ctrl+S | 저장 | +| Ctrl+C | Copy | +| Ctrl+V | Paste | +| Ctrl+Z | 편집 Undo 가능 범위 | +| Ctrl+F | 화면/Grid 검색 | + +Browser 기본 단축키를 무리하게 override하지 않는다. + +--- + +# 13. Enter Key 정책 + +ERP 사용성에서 매우 중요하다. + +Form: + +`Enter = 다음 입력` + +Grid: + +`Enter = 현재 값 확정 + 다음 행/셀` + +Textarea: + +`Enter = 줄바꿈` + +Popup: + +`Enter = 선택` + +일관되지 않은 Enter 동작을 허용하지 않는다. + +--- + +# 14. Delete 정책 + +`Delete` 키로 업무 Record를 삭제하지 않는다. + +Delete 키: + +`현재 Cell 값 제거` + +Record 삭제 또는 업무 취소: + +명시적 Action 필요. + +```text +[삭제] +``` + +또는 + +```text +[주문취소] +``` + +Transaction은 가능한 한 물리 삭제보다 상태 기반 취소를 사용한다. + +--- + +# 15. Mouse Standard + +Single click: + +`선택` + +Double click: + +`상세 열기` + +Right click: + +`보조 메뉴` + +하지만 우클릭에서만 접근 가능한 핵심 기능은 금지한다. + +--- + +# 16. Bulk Action + +선택 시 contextual toolbar를 표시한다. + +```text +✓ 17건 선택 + +[출고지시] +[담당자 변경] +[상태 변경] +[엑셀] +``` + +처리 결과: + +```text +17건 처리 + +성공 15 +실패 2 + +[실패건 보기] +``` + +전체 실패 때문에 정상 15건을 다시 처리하게 만들지 않는다. + +--- + +# 17. Excel Standard + +모든 입력형 업무 화면에는 공통 Excel 기능을 제공한다. + +```text +엑셀 ▼ + +현재 조회결과 다운로드 +업로드 양식 다운로드 +엑셀 업로드 +Excel 붙여넣기 +최근 업로드 결과 +``` + +--- + +# 18. Excel Import Mapping + +```text +Excel Column System Field + +상품코드 → 품목코드 ✓ +상품명 → 품목명 ✓ +수량 → 주문수량 ✓ +업체 → 거래처 ? +배송메모 → 배송메모 ✓ +``` + +매핑 판단순서: + +1. 정확한 Field Name +2. Alias +3. 사용자 저장 Mapping +4. AI Suggestion +5. 사용자 선택 + +--- + +# 19. Field Metadata + +화면·API·Excel·AI에서 동일한 Field Definition을 사용한다. + +```text +FieldKey +Label +Aliases +DataType +Required +Format +MaxLength +Precision +Scale +LookupSource +EnumValues +DefaultValue +Importable +Exportable +Readonly +ValidationRule +Sensitive +HelpText +``` + +이 메타데이터는 UI Schema의 Source 역할을 수행한다. + +단, Domain Business Rule 전체를 UI Metadata에 넣지는 않는다. + +--- + +# 20. Excel Backend Flow + +```text +Upload + ↓ +File Parse + ↓ +Staging + ↓ +Normalization + ↓ +Field Validation + ↓ +Business Validation + ↓ +Preview + ↓ +Commit + ↓ +Audit +``` + +DB에 즉시 Import하지 않는다. + +--- + +# 21. Excel 오류 UX + +```text +전체 18,230건 + +정상 17,894 +오류 336 +``` + +오류: + +```text +8행 +존재하지 않는 품목코드입니다. + +12행 +주문수량은 0보다 커야 합니다. + +17행 +출고완료 주문은 수정할 수 없습니다. +``` + +사용자는 실패 데이터만 Excel로 다시 내려받을 수 있다. + +```text +[오류 336건 다운로드] +``` + +--- + +# 22. Excel Mapping 재사용 + +저장 키: + +```text +Tenant +User +Screen +ImportType +SourceTemplate +``` + +예: + +```text +쿠팡 주문양식 → OMS 주문 Import +``` + +한 번 매핑한 사용자는 이후 자동 적용한다. + +--- + +# 23. OMS 주문관리 표준 + +```text +주문관리 + +기간 [오늘 ▼] +판매채널 [전체 ▼] +상태 [전체 ▼] +검색 [ ] + [조회 F3] + +전체 신규 출고대기 오류 +8,241 2,138 927 16 + +──────────────────────────────────────────────── + +□ 주문번호 │ 채널 │ 주문자 │ 상품 │ 수량 │ 재고 │ 상태 │ 송장 +``` + +--- + +# 24. OMS Exception UX + +상단 또는 우측에: + +```text +확인 필요 + +재고부족 7 +주소 오류 4 +SKU 매칭실패 2 +송장실패 3 +``` + +각 숫자는 필터 바로가기 역할을 한다. + +--- + +# 25. OMS 주문 Detail + +전체 페이지 전환보다 Drawer 또는 Side Detail을 우선 고려한다. + +```text +주문목록 주문 상세 + +202608080001 주문자 +202608080002 상품 +202608080003 배송 + 처리이력 + CS +``` + +조회 Context를 유지해야 한다. + +복잡한 수정 작업이 필요한 경우만 전체 화면으로 전환한다. + +--- + +# 26. ERP — 회계 제외 Master 화면 + +예: 품목관리 + +```text +품목관리 + +[조회] [신규] [저장] [복사] [엑셀▼] + +기본정보 +──────────────────────────────── + +품목코드 * [ABC-001 ] +품목명 * [스포츠화 ] +규격 [270 / BLACK ] +단위 [EA ▼] + +물류정보 +──────────────────────────────── + +기본창고 [WH01 서울센터 F2] +바코드 [8801234567890 ] +LOT관리 [✓] +유통기한관리 [ ] + +[변경이력] +``` + +--- + +# 27. WMS Desktop + +관리자는 Desktop으로 다음을 처리한다. + +- 입출고 현황 +- 재고현황 +- 로케이션 +- 작업지시 +- 작업자 배정 +- Wave/Picking +- Inventory Reconcile +- Exception + +현장 작업 화면과 분리한다. + +--- + +# 28. WMS Mobile + +기준: + +- Scanner +- PDA +- Mobile +- 한 손 조작 +- 장갑 +- 이동중 +- 네트워크 지연 + +Touch Target: + +`48px 이상` + +주요 CTA: + +`52~56px` + +--- + +# 29. Picking 화면 + +```text +출고 피킹 + +23 / 138 + +LOCATION +A-03-02 + +┌──────────────────────────┐ +│ BARCODE SCAN │ +└──────────────────────────┘ + +ABC 운동화 +BLACK / 270 + +필요 피킹 남음 + 6 4 2 + +[ +1 ] [수량입력] +``` + +다음 상품 이동을 위한 별도 확인 버튼을 최소화한다. + +정상 Barcode Scan이면 자동 진행한다. + +--- + +# 30. WMS Feedback + +성공: + +- 시각 Feedback +- 짧은 Success Sound +- Vibration + +오류: + +- 강한 Error Feedback +- Error Sound +- Vibration +- 수정 방법 표시 + +금지: + +```text +오류가 발생했습니다. +[확인] +``` + +권장: + +```text +잘못된 위치입니다. + +현재 스캔 +A-03-01 + +작업 위치 +A-03-02 + +A-03-02로 이동하세요. +``` + +--- + +# 31. Offline / Network UX + +WMS는 Network 상태를 명확히 표시한다. + +```text +온라인 +동기화 완료 +``` + +또는 + +```text +네트워크 불안정 + +작업 3건 전송 대기 +``` + +네트워크 장애 때문에 사용자가 동일 작업을 반복하지 않게 한다. + +Idempotency와 UX가 연결되어야 한다. + +--- + +# 32. Help Standard + +우측 Utility Rail: + +```text +[도움말] +[AI] +[제안] +``` + +--- + +## 도움말 + +화면 도움말: + +```text +출고지시 + +이 화면에서는 출고대상 주문을 +WMS 작업으로 전송합니다. + +사용순서 + +1. 주문 조회 +2. 주문 선택 +3. 출고지시 + +단축키 + +F3 조회 +Space 선택 +F8 실행 + +주의 + +출고완료 주문은 수정할 수 없습니다. +``` + +별도의 대형 매뉴얼을 먼저 읽게 하지 않는다. + +--- + +# 33. Field Help + +짧은 의미: + +Tooltip + +복잡한 규칙: + +Help Panel + +예: + +`안전재고` + +Tooltip: + +`출고 가능 수량 계산 시 확보하는 최소 재고` + +Help: + +구체적인 계산 규칙 및 예제 + +--- + +# 34. AI 위치 + +AI를 업무 메인 화면으로 만들지 않는다. + +기본: + +```text +┌────────────────────────────┐ +│ AI 도우미 │ +├────────────────────────────┤ +│ 현재 화면: 주문관리 │ +│ │ +│ 확인 필요 │ +│ 재고부족 7건 │ +│ 주소오류 4건 │ +│ │ +│ 추천 │ +│ 출고 가능 주문 927건 │ +│ │ +│ 질문 │ +│ [ ] │ +└────────────────────────────┘ +``` + +--- + +# 35. AI Capability Level + +AI 기능을 4등급으로 구분한다. + +## L1 — Explain + +읽기만 한다. + +예: + +`왜 출고가 안 됐어?` + +--- + +## L2 — Suggest + +업무값을 추천한다. + +예: + +`배송사를 롯데택배로 추천합니다.` + +--- + +## L3 — Draft + +Command 초안을 생성한다. + +예: + +`재고조정안 17건 생성` + +--- + +## L4 — Execute + +실제 Domain Command 실행. + +L4는 제한적으로만 허용한다. + +중요 Transaction은 사용자 확인이 필요하다. + +--- + +# 36. AI Proposal Pattern + +```text +AI 제안 + +재고조정 17건 + +ABC001 +10 → 8 + +ABC002 +12 → 11 + +근거 +2026-08-08 실사자료 + +[취소] +[상세보기] +[17건 반영] +``` + +버튼을 누르기 전 DB를 변경하지 않는다. + +--- + +# 37. AI Hallucination 방어 + +AI는 다음을 직접 생성할 수 없다. + +- 존재하지 않는 ItemId +- 존재하지 않는 CustomerId +- 존재하지 않는 WarehouseId +- 임의 재고수량 +- 임의 주문 +- 임의 배송상태 + +AI Text: + +```text +대한상사 +``` + +를 Action으로 사용할 때는 반드시: + +```text +CustomerId = 3817 +CustomerCode = 10001 +``` + +와 실제 Domain Identity가 Resolver를 통해 확인되어야 한다. + +--- + +# 38. AI의 Grounding 우선순위 + +```text +Domain DB +↓ +Internal API +↓ +Business Rule +↓ +Audit/Event +↓ +Approved Document +↓ +LLM Knowledge +``` + +업무 사실을 LLM 기억에서 가져오지 않는다. + +--- + +# 39. AI 변경 이력 + +```text +2026-08-08 15:21 + +AI 추천 +택배사 변경 + +CJ대한통운 +→ 롯데택배 + +사용자 승인 +홍길동 +``` + +누가 최종 승인했는지를 반드시 남긴다. + +--- + +# 40. 사용자 제안 UX + +우측: + +```text +제안 +``` + +클릭: + +```text +이 화면에 의견 보내기 + +○ 불편 +○ 오류 +○ 개선 제안 + +내용 +[ ] + +☑ 현재 화면 정보 포함 + +[보내기] +``` + +--- + +# 41. 사용자 제안에 자동 포함되는 정보 + +- Module +- ScreenId +- Route +- AppVersion +- UserRole +- Browser +- Filter +- GridLayout +- 발생시각 + +개인정보와 업무 민감데이터는 자동 첨부하지 않는다. + +--- + +# 42. VOC AI 정리 + +사용자: + +```text +주문조회 들어올 때마다 +쿠팡 다시 선택하는 게 귀찮습니다. +``` + +내부: + +```text +Category +OMS > 주문조회 > 조회조건 + +Summary +최근 판매채널 조건 유지 요청 + +Similar Suggestions +18건 + +Possible Improvement +사용자별 마지막 검색조건 저장 +``` + +사용자에게 복잡한 분류 입력을 요구하지 않는다. + +--- + +# 43. Audit Component + +중요 화면에는 공통: + +```text +[변경이력] +``` + +Panel: + +```text +15:32 홍길동 +출고수량 +10 → 8 + +15:18 시스템 +배송사 +CJ → 롯데 + +사유 +배송정책 자동 적용 +``` + +--- + +# 44. 상태 변경과 수정 분리 + +Transaction 상태가 진행되면 수정 권한도 변해야 한다. + +예: + +```text +작성 +→ 모든 필드 수정 가능 + +확정 +→ 일부 필드 수정 제한 + +피킹 +→ 주문수량 수정 불가 + +출고완료 +→ 업무 취소 프로세스 필요 +``` + +UI Disabled만 믿지 않는다. + +Server에서 동일 Rule을 검증한다. + +--- + +# 45. Frontend Component Architecture + +```text +PrimeVue +AG Grid + ↓ +KBX Primitive + ↓ +KBX Business Component + ↓ +KBX Screen Template + ↓ +Vertical Slice Page +``` + +--- + +# 46. Primitive + +예: + +```text +KbxButton +KbxInput +KbxNumber +KbxDate +KbxSelect +KbxCheckbox +KbxDialog +KbxDrawer +``` + +PrimeVue를 직접 노출하지 않는다. + +--- + +# 47. Business Component + +```text +KbxLookup +KbxMoneyField +KbxQuantityField +KbxBarcodeField +KbxStatus +KbxDataGrid +KbxSearchPanel +KbxCommandBar +KbxAuditTrail +KbxExcelImport +KbxHelpPanel +KbxAiPanel +``` + +--- + +# 48. Template Component + +```text +KbxListPage +KbxMasterPage +KbxTransactionPage +KbxFastEntryPage +KbxMasterDetailPage +KbxQueuePage +KbxReconcilePage +KbxImportPage +KbxWmsMobilePage +``` + +Vertical Slice는 임의의 Layout을 만드는 것이 아니라 Template을 선택해야 한다. + +--- + +# 49. Vertical Slice 예 + +```text +Orders/ + ├─ Search/ + │ ├─ SearchOrderEndpoint.cs + │ ├─ SearchOrderQuery.cs + │ └─ OrderListPage.vue + │ + ├─ Register/ + ├─ Cancel/ + ├─ Allocate/ + └─ Ship/ +``` + +`OrderListPage.vue` + +는: + +```text +KbxListPage + + OrderSearchSchema + + OrderGridSchema + + OrderCommands +``` + +조합으로 만든다. + +--- + +# 50. 과도한 Metadata-driven UI 금지 + +Metadata 기반이라고 모든 화면을 JSON으로 정의하지 않는다. + +단순 화면: + +Schema 중심 가능 + +복잡 화면: + +명시적인 Vue Component 사용 + +권장: + +```text +70% 표준 Template +20% Template Extension +10% Custom +``` + +100% Dynamic Form Framework를 만들려고 하지 않는다. + +그 자체가 기술부채가 된다. + +--- + +# 51. Read Model 원칙 + +업무 Grid에 필요한 데이터는 Backend에서 한 번에 제공한다. + +금지: + +```text +Order API +Customer API +Item API +Warehouse API +Shipment API +``` + +를 Frontend가 호출하고 Join. + +권장: + +```text +OrderSearchReadModel +``` + +예: + +```text +OrderNo +OrderDate +ChannelName +CustomerName +ItemSummary +TotalQty +AllocationStatus +ShipmentStatus +ExceptionCode +``` + +Dapper Read Model이 적합하다. + +--- + +# 52. Normalization / Denormalization + +Write: + +정규화. + +Read: + +업무 UX에 맞는 Projection. + +즉: + +```text +Normalized Transaction + ↓ +Projection + ↓ +Grid optimized Read Model +``` + +UX 때문에 Write DB를 무조건 역정규화하지 않는다. + +--- + +# 53. Outbox UX + +예: + +주문 확정 성공. + +하지만 WMS 이벤트 전달 대기. + +사용자에게: + +```text +주문 확정 완료 + +WMS 출고지시 +전송 대기 +``` + +로 표시한다. + +단순: + +`성공` + +만 표시하지 않는다. + +--- + +# 54. Integration Failure UX + +```text +주문 저장 완료 + +WMS 연계가 지연되고 있습니다. + +시스템이 자동 재처리합니다. + +[상세보기] +``` + +사용자가 중복으로 저장하지 않게 한다. + +Inbox/Idempotency와 UX가 같이 설계되어야 한다. + +--- + +# 55. Hangfire Job UX + +대용량 Excel: + +```text +18,230건 처리 중 + +████████████░░░░ 74% + +정상 13,429 +오류 217 +``` + +다른 화면으로 이동해도 계속 처리한다. + +완료: + +Notification + 작업이력. + +--- + +# 56. Notification 표준 + +정보: + +Toast + +업무 실패: + +Inline Alert / Notification Center + +긴 Batch: + +Job Notification + +위험한 의사결정: + +Confirm Dialog + +모든 성공 작업을 Modal로 보여주지 않는다. + +--- + +# 57. Modal 금지 원칙 + +Modal을 남발하지 않는다. + +Modal 적합: + +- 위험한 확정 +- 짧은 Lookup +- 취소사유 +- 중요한 확인 + +Modal 부적합: + +- 주문 상세 +- 장시간 편집 +- 복잡한 조회 +- 여러 단계 업무 + +이런 경우 Drawer 또는 Page를 사용한다. + +--- + +# 58. Workspace Tabs + +ERP 사용자는 여러 업무를 동시에 확인한다. + +따라서: + +```text +주문조회 × +출고지시 × +재고현황 × +품목조회 × +``` + +Workspace Tab을 제공한다. + +단: + +무제한 Tab은 금지. + +권장 최대: + +`8~12` + +--- + +# 59. Unsaved Changes + +Tab 변경이나 화면 이탈 시: + +수정 없음: + +바로 이동 + +수정 존재: + +```text +저장하지 않은 변경사항이 있습니다. + +[계속 편집] +[변경 버리기] +[저장 후 이동] +``` + +--- + +# 60. 개인화 허용 범위 + +허용: + +- Grid Column +- Column Width +- Sort +- Favorite +- 최근 메뉴 +- 기본 Filter +- Page Size +- Density + +금지: + +- Form 전체 재배치 +- 임의 Workflow +- 업무 필수 필드 제거 +- 업무 상태 변경 + +지원 가능성과 재현성을 유지해야 한다. + +--- + +# 61. Density + +사용자 설정: + +```text +● Compact +○ Comfortable +``` + +Desktop 업무는 기본 Compact. + +WMS Mobile은 별도 Density. + +--- + +# 62. Accessibility + +업무시스템이라고 접근성을 포기하지 않는다. + +필수: + +- Keyboard Focus +- Label 연결 +- 색상 이외의 상태표시 +- Focus Indicator +- 충분한 Contrast +- Screen Reader 기본 지원 +- Tab Order + +업무 효율성과 접근성은 충돌하는 개념이 아니다. + +--- + +# 63. UX Quality Gate + +새 화면은 개발 완료 전에 다음을 통과해야 한다. + +## Familiarity + +- 기존 표준 Template인가? +- 조회/저장 위치가 기존과 같은가? + +## Keyboard + +- Tab 순서가 정상인가? +- F2 Lookup이 동작하는가? +- Enter 입력이 자연스러운가? + +## Grid + +- Copy/Paste 가능한가? +- Column 설정 가능한가? +- 대량 선택 가능한가? + +## Excel + +- Download 가능한가? +- 입력 화면이면 Import 가능한가? +- 오류행 재처리가 가능한가? + +## Validation + +- 오류 위치가 명확한가? +- 입력 단계에서 가능한 오류를 먼저 차단하는가? + +## Audit + +- 중요한 변경을 추적할 수 있는가? + +## Automation + +- 사람이 불필요하게 반복하는 작업이 남아 있지 않은가? + +## AI + +- AI가 없어도 업무를 할 수 있는가? +- AI가 잘못 추천해도 데이터가 안전한가? + +--- + +# 64. 금지 패턴 + +다음 UX는 기본적으로 금지한다. + +### UX + +- Card Dashboard 남발 +- 핵심 기능을 Icon-only 처리 +- Hidden Action +- Hover-only Action +- Drag & Drop 필수 +- 대형 Modal 편집 +- Wizard 남용 +- 화면별 제각각 Button 위치 + +### Data + +- Client-side business truth +- AI 결과 직접 DB Update +- Excel 직접 DB Insert +- Transaction 물리삭제 남용 + +### Architecture + +- Vertical Slice에서 PrimeVue 직접 남발 +- 화면별 AG Grid 설정 복사 +- 화면마다 Excel Parser 개발 +- SharedKernel에 업무규칙 집중 + +--- + +# 65. 신규 화면 생성 규칙 + +화면을 만들 때 다음 순서로 결정한다. + +```text +1. Screen Type 선택 + ↓ +2. KBX Template 선택 + ↓ +3. Business Component 배치 + ↓ +4. Domain-specific Data 연결 + ↓ +5. Exception 정의 + ↓ +6. Excel 정의 + ↓ +7. Keyboard 검증 + ↓ +8. Audit 정의 + ↓ +9. AI 보조가 필요한지 판단 +``` + +디자이너가 빈 Canvas에서 시작하지 않는다. + +--- + +# 66. 화면 요구사항 Definition + +모든 화면 요구사항에 다음 항목을 포함한다. + +```text +ScreenId +ScreenName +Module +TemplateType +Purpose +PrimaryUser +PrimaryAction +SearchFields +FormFields +GridColumns +Lookup +BulkActions +Keyboard +Excel +Validation +States +Exceptions +Audit +Help +AI +Permissions +``` + +이 정의는 디자인, 개발, 테스트, AI Code Generation의 공통 계약으로 사용한다. + +--- + +# 67. Playwright UX Regression + +단순 화면 Screenshot Test만 하지 않는다. + +업무 동작을 검증한다. + +예: + +```text +주문등록 + +거래처 입력 +→ F2 +→ 검색 +→ Enter +→ 품목 입력 +→ 수량 +→ F8 +→ 저장 +``` + +이를 Playwright 표준 Scenario로 유지한다. + +--- + +# 68. Vitest Component Contract + +공통 컴포넌트는 기능계약을 테스트한다. + +예: + +`KbxLookup` + +- F2 open +- Esc close +- Enter select +- Focus restore +- invalid code +- disabled +- readonly + +--- + +# 69. UX 변경의 재현성 + +Production에서 사용자가 문제를 제보할 때: + +```text +ScreenId +ScreenVersion +ComponentVersion +GridLayout +UserPreferenceVersion +``` + +를 알 수 있어야 한다. + +그래야: + +`내 PC에서는 됩니다.` + +문제를 줄일 수 있다. + +--- + +# 70. Design System Versioning + +KBX 자체도 Version을 관리한다. + +```text +KBX 1.0 +KBX 1.1 +KBX 1.2 +``` + +Breaking UX 변경: + +Major + +Component 기능 추가: + +Minor + +Bug fix: + +Patch + +화면별 임의 변경보다 공통 Component 개선을 우선한다. + +--- + +# 71. 최종 제품 철학 + +KBX에서 화면 혁신은 시각적 실험을 의미하지 않는다. + +다음과 같은 변화가 진짜 혁신이다. + +```text +5번 입력 +→ 1번 입력 + +10번 클릭 +→ 2번 클릭 + +1,000건 확인 +→ 예외 7건 확인 + +Excel 수작업 +→ Mapping 저장 + +문제 발생 +→ 원인 추적 가능 + +업무 질문 +→ AI가 현재 Context에서 설명 + +사용자 제안 +→ 화면에서 즉시 제출 + +반복 업무 +→ 자동화 +``` + +--- + +# 72. 최종 판단 기준 + +새 기능이나 디자인을 검토할 때 다음 질문 하나를 먼저 한다. + +> 기존 한국 업무사용자가 설명 없이 사용할 수 있으면서 기존 방식보다 입력·클릭·판단이 줄어드는가? + +YES라면 개선 가능성이 높다. + +NO라면 혁신적으로 보이더라도 채택하지 않는다. + +--- + +# 73. KBX Definition of Done + +하나의 업무 화면은 다음 조건을 만족해야 완료된 것으로 본다. + +- 표준 Screen Type 사용 +- 공통 Command 위치 준수 +- Keyboard 완전 지원 +- Mouse 완전 지원 +- Excel 정책 정의 +- Lookup 표준 준수 +- Grid 표준 준수 +- Validation Server 재검증 +- 변경이력 정의 +- 상태 변화 정의 +- Bulk 처리 결과 정의 +- Error Recovery 가능 +- Loading/Empty/Error 상태 존재 +- Permission 처리 +- AI 비의존 업무 가능 +- 현장 사용 Scenario 검증 +- Playwright 핵심 업무 Scenario 존재 +- 사용자 제안 진입점 존재 + +이 조건을 만족하지 않으면 화면이 예쁘더라도 완료된 것이 아니다. \ No newline at end of file diff --git a/docs/Design/KBX Design System v1.0.md b/docs/Design/KBX Design System v1.0.md new file mode 100644 index 00000000..227b81bc --- /dev/null +++ b/docs/Design/KBX Design System v1.0.md @@ -0,0 +1,2890 @@ +# KBX Design System v1.0 +## OMS · WMS · ERP Component Contract & Design Tokens + +--- + +# 1. 설계 목표 + +KBX Design System의 목적은 예쁜 UI 라이브러리를 만드는 것이 아니다. + +다음 문제를 구조적으로 제거하는 것이 목적이다. + +- 화면별 입력 높이가 다름 +- 조회 버튼 위치가 다름 +- Lookup 방법이 다름 +- Enter 동작이 다름 +- Excel 처리 방식이 다름 +- Grid 설정이 화면마다 다름 +- 오류 표현이 다름 +- 저장 후 Feedback이 다름 +- AI Action 방식이 다름 +- 개발자마다 PrimeVue 사용 방식이 다름 + +최종 원칙: + +> Vertical Slice는 업무를 구현하고, KBX는 UX를 구현한다. + +--- + +# 2. 기술 계층 + +```text +Vue 3 / TypeScript + │ + ▼ +KBX Screen Templates + │ + ▼ +KBX Business Components + │ + ▼ +KBX Primitives + │ + ├──────── PrimeVue + │ + └──────── AG Grid +``` + +Vertical Slice에서 PrimeVue 및 AG Grid를 직접 사용하는 것은 예외로 취급한다. + +--- + +# 3. 패키지 구조 + +권장: + +```text +src/ + └─ shared/ + └─ kbx/ + ├─ tokens/ + ├─ primitives/ + ├─ business/ + ├─ grid/ + ├─ forms/ + ├─ lookup/ + ├─ excel/ + ├─ feedback/ + ├─ ai/ + ├─ templates/ + ├─ composables/ + ├─ directives/ + ├─ schemas/ + └─ testing/ +``` + +업무 모듈에서는: + +```text +modules/ + ├─ oms/ + ├─ wms/ + └─ erp/ +``` + +형태로 KBX를 소비한다. + +--- + +# 4. Component 계층 규칙 + +## Level 1 — Primitive + +업무 의미를 모른다. + +```text +KbxButton +KbxInput +KbxNumberInput +KbxDatePicker +KbxSelect +KbxCheckbox +KbxRadio +KbxTextarea +KbxDialog +KbxDrawer +KbxTabs +KbxBadge +KbxTooltip +``` + +--- + +## Level 2 — Business Component + +업무용 UX 규칙을 포함한다. + +```text +KbxLookup +KbxSearchPanel +KbxCommandBar +KbxDataGrid +KbxMoneyField +KbxQuantityField +KbxBarcodeField +KbxStatus +KbxAuditTrail +KbxExcelImport +KbxBulkActionBar +KbxJobProgress +KbxHelpPanel +KbxAiPanel +KbxProposalPanel +``` + +--- + +## Level 3 — Screen Template + +업무 화면 골격을 책임진다. + +```text +KbxListPage +KbxMasterPage +KbxTransactionPage +KbxFastEntryPage +KbxMasterDetailPage +KbxQueuePage +KbxReconcilePage +KbxImportPage +KbxWmsMobilePage +``` + +--- + +# 5. 핵심 금지 규칙 + +Vertical Slice에서 다음과 같은 구현을 반복하지 않는다. + +```vue + +