[owjs3901]

Refs #692 (UI kit). main 기준의 독립 PR이며, 다른 PR의 선행 병합이 필요하지 않습니다.

요약

Input이 readOnly를 구조 분해한 뒤 지우기 버튼 표시 여부에만 사용하고 실제 <input>에는 전달하지 않아, <Input readOnly />도 편집 가능한 문제를 수정합니다. 기존 prop 순서를 바꾸지 않고 readOnly={readOnly} 한 줄만 추가했습니다.

기준 커밋: d121976523cc8f2e9da8d0976d5aa59d30e213d8 (origin/main). 회귀 테스트 3개와 components Patch changepack을 추가했습니다. 의존성과 lockfile 변경은 없습니다.

같은 유형의 누락 감사

범위는 packages/components/src/components/*/index.tsx 9개 파일과 그 안의 하위 컴포넌트입니다. 구조 분해한 native prop 후보를 추적했으며, 확인된 누락은 Input의 readOnly 한 건입니다. 상태/이벤트를 거쳐 동등하게 전달되는 prop과 의도적인 UI kit 전용 prop은 누락으로 세지 않았습니다.

컴포넌트	확인한 prop	결과
Input	defaultValue, value, onChange, disabled, className, readOnly, id, aria-describedby	readOnly만 누락되어 수정. 초기/제어 값은 innerValue, 이벤트는 handleChange, 나머지는 native input에 전달
ClearButton	구조 분해한 native prop 없음	전체 props를 button에 spread
Textarea	disabled, className, rows, id, aria-describedby	모두 textarea에 전달. readOnly는 구조 분해하지 않아 spread로 전달
Button	type, children, className, disabled	type/className 전달, children은 내부 콘텐츠로 렌더, disabled는 loading 정책과 합성해 전달. size는 button native 속성이 아닌 UI kit 크기 옵션
Checkbox	children, disabled, checked, defaultChecked, onChange	disabled/checked 전달, defaultChecked는 초기 상태에서 최종 checked로 반영, onChange는 boolean 콜백으로 합성. children은 label에 렌더
Radio	className, disabled, children, checked, style	양쪽 variant의 input에 className/disabled/checked 전달. children/style은 표시 label 콘텐츠에 전달하는 기존 계약 유지
RadioGroup	disabled, style, value, onChange, defaultValue, name, label, className	name/disabled/className/style은 Radio로 전달, 값은 checked로 매핑, onChange 합성, label은 그룹 aria-label. div에 value/defaultValue/name을 직접 붙이는 API가 아님
Toggle	defaultValue, value, onChange, disabled, className, style, name, aria-label, aria-labelledby	boolean 값은 hidden input의 문자열 value로 변환, disabled/name도 hidden input에 전달. className/style/ARIA와 합성 이벤트는 switch에 적용
Stepper	children, defaultValue, value, min, max, type	루트는 native element가 아닌 Provider. min/max/type은 범위/표현 모드 설정이며 context로 전달; native input의 속성을 받아 누락하는 사례 아님
StepperContainer	구조 분해한 native prop 없음	div props 전체 spread
StepperDecreaseButton / StepperIncreaseButton	onClick, disabled	사용자 이벤트와 증감 동작 합성, 범위 및 사용자 disabled 합성 후 Button에 전달
StepperInput	className, onChange	input 모드에서 Input에 전달/합성. text 모드는 output에 className 및 유효한 공통 속성만 전달하는 기존 계약
Select	children, defaultValue, value, onChange, type	div 기반 합성 컨트롤: children 렌더 및 context 상태/이벤트 전달. type은 UI kit 선택 모드로 native div 속성이 아님
SelectTrigger	className, children, onClick, onKeyDown	Button 또는 asChild 요소에 className/children 전달, 사용자 핸들러 합성
SelectContainer	children	listbox div 내부 렌더. x/y는 위치 설정 옵션
SelectOption	disabled, onClick, children, value	div option에 aria-disabled/data-value, 콜백 합성 및 children 렌더. div에 disabled/value native 속성을 붙이는 API가 아님
SelectDivider	구조 분해한 native prop 없음	div props 전체 spread

동작

prop / 경우	변경 전	변경 후
<Input readOnly />	input에 readonly 속성이 없어 편집 가능	native input에 readonly 속성이 전달되어 읽기 전용
<Input defaultValue="test" readOnly />	지우기 버튼만 숨김, 필드는 편집 가능	버튼은 계속 숨기고 필드도 읽기 전용
<Input defaultValue="test" />	편집 가능, 지우기 버튼 표시	그대로 유지

새로 생기는 오류

없음. 새 의존성, 공개 API 또는 빌드 오류 종류를 추가하지 않습니다. WASM 및 루트 setup 빌드가 통과했습니다.

남는 한계

• 테스트는 저장소 기존 bun-test-env-dom 환경에서 native readonly 속성과 버튼 표시를 검증합니다. 실제 브라우저의 키 입력/시각 검증은 별도로 수행하지 않았습니다.
• 감사는 지정된 9개 index.tsx의 구조 분해 native prop 전달에 한정합니다. 스타일 API 재설계, 합성 컨트롤의 새 native API 추가, 상태 관리 변경은 하지 않습니다.
• TypeScript LSP가 설치되어 있지 않고 이전에 설치가 거절되어 LSP 진단은 실행할 수 없었습니다. 빌드, lint, 테스트, hook으로 검증했습니다.

검증

• RED: production 변경 전 bun test ./packages/components/src/components/Input/__tests__/native-props.browser.test.tsx → 2 pass / 1 fail, assertion 4개. readonly의 기대값 ""에 실제값 null로 실패했습니다. readOnly에서 버튼 숨김/일반 입력에서 버튼 표시는 이미 통과했습니다.
• 첫 RED 실행은 같은 누락을 감지했지만 jest-dom의 실패 메시지 생성에서 Expected this to be instanceof ExpectMatcherUtils가 발생했습니다. 속성을 직접 읽는 assertion으로 바꾼 뒤 production 수정 없이 위의 명확한 RED를 다시 기록했습니다.
• GREEN: 한 줄 수정 후 bun test ./packages/components/src/components/Input/__tests__/ → 39 pass / 0 fail, 파일 3개, snapshot 12개, assertion 71개.
• 스냅샷: 변경 없음, 변경된 줄 쌍 없음. snapshot 갱신 명령도 필요하지 않았습니다. 전체 테스트의 snapshot 89개도 통과했습니다.
• bun lint 1회: 기존 경고 20개, 수정 파일의 formatting/prop 정렬 오류 5개를 확인했습니다. 저장소 밖 helper의 scoped bun run lint:fix로 수정한 TSX 2개만 정리했습니다. 이후 hook 전체 lint는 0 errors / 20 existing warnings로 통과했습니다. 새 경고는 없습니다.
• 공식 Bun 1.4.4 Windows zip은 별도 임시 디렉터리에만 다운로드했습니다. 공식 SHASUMS256.txt와 대조한 SHA256: CD2C0FCCC78F3EDE1F50CA827A15F063EDA13D4D150A3D0674F4F6E323D864A5. 공유 설치는 변경하지 않았습니다.
• 루트 bun test --coverage (private 1.4.4): 6251 pass / 0 fail, 169개 파일, snapshot 89개, assertion 23213개, 302.06초, 종료 코드 0.

All files                                                                               |  100.00 |  100.00 |

• 같은 명령 (shared 1.4.3): 6251 pass / 0 fail, 169개 파일, snapshot 89개, assertion 23213개, 270.92초, 종료 코드 0.

All files                                                                               |  100.00 |  100.00 |

• 첫 commit 시도에서 pre-commit hook 통과: 962.54초. lint → cargo tarpaulin → root/Vite Bun coverage 실행. root 6251 pass / 0 fail, Vite 868 pass / 0 fail, 양쪽 함수/줄 100.00%. 로컬 Rust tarpaulin은 98.08% (24032/24503 lines), 종료 코드 0이며 100%라고 주장하지 않습니다.
• 커밋 직전 free physical memory 11,297,804 KiB: 7 GiB 기준 충족, 대기 불필요.
• install 후 bun.lock의 filtered/index blob은 모두 c41b1973ae5e7ecbc87f667f5d8bfb7e834cd6d6. stat-only 차이만 허용된 방식으로 복원했으며 커밋에 포함하지 않았습니다.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
packages/components/src/components/Input/index.tsx	100.00% <ø> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.