[♻️ Refactor/#45] 폼 필드 불필요 코드 정리

[Lseojeong]

#️⃣연관된 이슈

• close [♻️ Refactor] Input/TextArea 공통 폼 컴포넌트 코드 정리 #45

체크 사항

• UI 동작 및 레이아웃 확인
• 불필요한 console 제거
• 기능 정상 동작
• 팀 컨벤션에 맞게 구현했는지
• 관련 문서 또는 주석을 갱신했는지

📝작업 내용

Input/TextArea ARIA 속성 정리

• 네이티브 required 속성과 중복되는 aria-required를 제거했습니다.
• Input.ErrorMessage 주석에서 현재 구현과 맞지 않는 aria-describedby 설명을 제거했습니다.
• 에러 메시지는 실제 구현 기준으로 aria-errormessage와 연결되도록 설명을 정리했습니다.

TextArea Field 코드 정리

• TextArea.Field에서 한 번만 사용되는 describedBy 중간 변수를 제거했습니다.
• 글자 수 카운터가 표시될 때만 aria-describedby가 연결되도록 기존 동작은 유지했습니다.

Props 타입 정리

• Input.Field에서 readOnly prop을 사용할 수 있도록 타입 제한을 정리했습니다.
• TextArea.Label, TextArea.ErrorMessage props 타입을 프로젝트 컨벤션에 맞게 interface로 변경했습니다.

스크린샷 (선택)

UI 변경 없음

추가한 라이브러리 (선택)

없음

💬리뷰 요구사항(선택)

없음

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • Input 컴포넌트에서 readOnly 속성을 전달할 수 있도록 개선

• Documentation

  • 입력 필드의 필수 상태 및 오류 메시지 접근성 설명 업데이트

• Refactor

  • TextArea 타입 정의 구조를 개선하여 코드 일관성 강화

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
rewrite	Ready	Preview, Comment	Jun 23, 2026 4:13am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8ee6b757-4830-4ae9-b077-9afc8582dcd3

📥 Commits

Reviewing files that changed from the base of the PR and between 5838ca7 and bb24531.

📒 Files selected for processing (7)

• src/shared/ui/form-control/FormControlLabel.tsx
• src/shared/ui/input/Input.types.ts
• src/shared/ui/input/InputErrorMessage.tsx
• src/shared/ui/input/InputField.tsx
• src/shared/ui/input/InputLabel.tsx
• src/shared/ui/textarea/TextArea.types.ts
• src/shared/ui/textarea/TextAreaField.tsx

💤 Files with no reviewable changes (1)

• src/shared/ui/input/InputField.tsx

---

Walkthrough

Input, TextArea, FormControl 공통 폼 컴포넌트에서 중복된 aria-required 속성을 제거하고, InputFieldProps의 readOnly 타입 제한을 해제했습니다. TextAreaLabelProps와 TextAreaErrorMessageProps는 interface 선언으로 전환되었으며, describedBy 중간 변수 제거 및 관련 JSDoc 문구가 수정되었습니다.

Changes

Input/TextArea 공통 폼 컴포넌트 접근성 속성 및 타입 정리

Layer / File(s)	Summary
InputField · TextAreaField에서 aria-required 제거 src/shared/ui/input/InputField.tsx, src/shared/ui/textarea/TextAreaField.tsx	InputField의 <input>에서 aria-required={required || undefined} 제거. TextAreaField의 <textarea>에서도 동일하게 aria-required 제거 및 describedBy 중간 변수를 showCount ? countId : undefined로 인라인 처리.
InputFieldProps readOnly 타입 제한 해제 src/shared/ui/input/Input.types.ts	Omit<ComponentPropsWithRef<'input'>, ...> 제외 키 목록에서 'readOnly'를 삭제하여 외부에서 readOnly prop을 전달할 수 있도록 변경.
TextArea 타입 interface 전환 src/shared/ui/textarea/TextArea.types.ts	TextAreaLabelProps와 TextAreaErrorMessageProps를 교차 타입(type = Omit<...> & {...})에서 interface ... extends Omit<...> 형태로 변경. children 필수/선택 여부는 유지.
JSDoc aria-required · aria-describedby 문구 정리 src/shared/ui/form-control/FormControlLabel.tsx, src/shared/ui/input/InputLabel.tsx, src/shared/ui/input/InputErrorMessage.tsx	각 컴포넌트의 JSDoc에서 aria-required 및 aria-describedby 언급을 제거하고, 실제 동작(네이티브 required 전달, role="alert" 및 aria-errormessage 자동 연결)에 맞게 문구 수정.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• Rewrite-Team/Rewrite-FE#44: TextAreaField.tsx의 aria-describedby 배선(describedBy → countId 직접 참조) 및 TextArea.types.ts 타입 선언이 해당 PR에서 추가된 TextArea 공통 컴포넌트 구현을 직접 기반으로 합니다.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 폼 필드의 불필요한 코드 정리(ARIA 속성 정리, 타입 정의 개선 등)라는 핵심 변경사항을 정확히 요약하고 있습니다.
Linked Issues check	✅ Passed	PR의 모든 변경사항이 #45 이슈의 6가지 구현 목록을 완벽히 충족합니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 #45 이슈 범위 내에 있으며, 불필요한 코드 제거와 문서 업데이트만 포함되어 있습니다.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/#45

---

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🧪 테스트 결과

항목	결과
✅ Jest 테스트	success

[github-actions]

🚦 CI 검증 결과

항목	결과
🧠 TypeScript 타입 체크	success
🧹 ESLint 검사	success
🎨 Prettier 검사	success
🏗️ Build 검증	success