# V13-FE-005 — KBX 폼 컴포넌트 선별 이식

| 항목 | 값 |
| --- | --- |
| Requirement / API / DB / Job / UI / Test | REQ-FE-COMP / Cross / Cross / Cross / UI-FOUND-05 / T-FE-COMP-01 |
| Dependency / Gate | V13-FE-004 (COMPLETED) / G0 |
| Artifact | `frontend/src/shared/ui/components/KsForm*.vue`, `KsValidationSummary.vue` |
| 목적 | provider-neutral form layout과 validation presentation 표준화 |

## Source / Assumption / Unknown / Decision Required

- **Source:** KBX v36의 `KbxFormGrid`, `KbxFormSection`, `KbxFormSpan`, `KbxValidationSummary`는 Vue/CSS presentation-only 구성이다.
- **Assumption:** K-ArtSell token (`--ks-*`)과 기존 `FieldShell`/Zod 경계를 유지하면 같은 layout pattern을 안전하게 재구현할 수 있다.
- **Unknown:** 각 feature의 오류를 어느 field로 focus할지와 visual/AT baseline은 화면별 evidence가 필요하다.
- **Decision Required:** 오류 클릭 시 field focus/navigation, density variant, 새로운 token은 실제 3회 이상 반복 및 ADR/QA 기준 승인 후에만 추가한다.

## 구현 경계

- `KsFormGrid`, `KsFormSection`, `KsFormSpan`, `KsValidationSummary`만 추가했다.
- KBX package, `@kbx/contracts`, provider peer dependency, router, store, permission host, 업무 규칙을 복사하지 않았다.
- validation summary는 오류를 숨기기 위한 임의 최대 개수를 두지 않고 전달받은 오류를 모두 표시한다.
- 색상/spacing은 기존 semantic token만 사용한다.

## 실제 증거

- `pnpm vitest run src/shared/ui/components/tests/KsFormLayouts.spec.ts src/shared/ui/components/tests/accessibility.contract.spec.ts`: 2 files / 6 tests passed, exit 0.
- `pnpm typecheck`: exit 0.
- 실행일: 2026-08-09.

위 증거는 component contract/typecheck에 한정된다. browser visual, AT, performance, server/API/DB/migration 통과는 주장하지 않는다.