Conversation
Input과 TextArea가 라벨, 오류 상태, 필드 스타일을 공유할 수 있도록 FormControl 기반을 분리했습니다. Input.Control은 역할이 드러나는 Input.FieldGroup으로 정리했습니다.
긴 텍스트 입력에서 라벨, 오류, 비활성 상태와 글자 수 표시를 일관되게 사용할 수 있는 Compound TextArea를 추가했습니다. 권장 길이와 최대 길이를 타입으로 구분하고 최대 입력을 보장합니다.
TextArea의 스크롤바와 크기 조절 아이콘을 디자인 토큰에 맞게 정리했습니다. 하단 카운터에 배경 영역을 제공해 긴 입력 내용과 겹치지 않도록 개선했습니다.
FormField의 React Hook Form 상태와 TextArea의 길이 기준 타입을 명확히 이해할 수 있도록 역할과 사용 조건을 문서화했습니다.
10 tasks
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
WalkthroughInput 컴포넌트의 Context/Label/ErrorMessage 로직을 ChangesFormControl 공통화 및 TextArea 신규 구현
Sequence Diagram(s)sequenceDiagram
rect rgba(99, 132, 199, 0.5)
Note over TextArea,FormControlProvider: Root 초기화
TextArea->>FormControlProvider: disabled, invalid, required, fieldId, errorMessageId 제공
end
rect rgba(75, 192, 120, 0.5)
Note over FormControlProvider,TextAreaField: 필드 렌더링
TextAreaField->>FormControlProvider: useFormControlContext()로 상태 읽기
TextAreaField->>TextAreaField: aria-errormessage, aria-invalid, id 설정
TextAreaField->>TextAreaField: onChange에서 maxLength 초과 시 값 잘라 재설정
TextAreaField->>TextAreaField: showCount 시 currentLength/limitValue 계산 및 표시
end
rect rgba(255, 160, 86, 0.5)
Note over FormControlProvider,TextAreaErrorMessage: 레이블/에러 렌더링
TextAreaLabel->>FormControlProvider: FormControlLabel 통해 fieldId/required 읽기
TextAreaErrorMessage->>FormControlProvider: FormControlErrorMessage 통해 invalid/errorMessageId 읽기
TextAreaErrorMessage->>FormControlProvider: registerErrorMessage() 호출 시 errorMessageCount 증가
TextAreaErrorMessage->>TextAreaErrorMessage: invalid && children 존재 시 role="alert" p 렌더링
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~55 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
🧪 테스트 결과
|
🚦 CI 검증 결과
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/shared/ui/form-control/FormControlErrorMessage.tsx`:
- Around line 43-45: The FormControlErrorMessage component currently returns
null when invalid is false or children is empty, but this causes a mismatch with
ARIA attributes in parent components (InputField and TextAreaField) that
reference the errorMessageId. When the error message node is not rendered due to
empty children, the aria-errormessage and aria-describedby attributes pointing
to the non-existent errorMessageId become invalid. Either prevent empty children
from being passed to this component entirely, or ensure that the parent field
components (InputField and TextAreaField) do not set aria-errormessage and
aria-describedby attributes when there is no error message to display.
In `@src/shared/ui/input/Input.tsx`:
- Around line 115-118: The removal of the `Control` static member from the
Object.assign statement for the Input component will break the public API for
existing code using `<Input.Control>`. To maintain backward compatibility, add
`Control: InputFieldGroup` as an alias alongside the new `FieldGroup:
InputFieldGroup` property in the Object.assign block. This allows users to
gradually migrate from the old `Input.Control` syntax to the new
`Input.FieldGroup` while maintaining existing functionality during the
transition period.
In `@src/shared/ui/textarea/TextArea.types.ts`:
- Around line 12-23: The TextAreaFieldBaseProps interface currently allows the
children prop to be passed through from ComponentPropsWithRef<'textarea'>, which
can lead to misuse of the component (e.g.,
<TextArea.Field>...</TextArea.Field>). Add 'children' to the Omit list alongside
the other restricted props like 'aria-describedby', 'aria-errormessage',
'aria-invalid', 'disabled', 'id', 'maxLength', and 'required' to ensure the
component only operates with value/defaultValue-based control.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 0e6a6c2c-e210-4c4a-a541-b7247283ca97
📒 Files selected for processing (22)
src/shared/styles/base/scroll.csssrc/shared/styles/globals.csssrc/shared/ui/form-control/FormControl.types.tssrc/shared/ui/form-control/FormControlContext.tssrc/shared/ui/form-control/FormControlErrorMessage.tsxsrc/shared/ui/form-control/FormControlLabel.tsxsrc/shared/ui/form-control/formControlStyles.tssrc/shared/ui/input/Input.stories.tsxsrc/shared/ui/input/Input.tsxsrc/shared/ui/input/Input.types.tssrc/shared/ui/input/InputContext.tssrc/shared/ui/input/InputErrorMessage.tsxsrc/shared/ui/input/InputField.tsxsrc/shared/ui/input/InputFieldGroup.tsxsrc/shared/ui/input/InputLabel.tsxsrc/shared/ui/textarea/TextArea.stories.tsxsrc/shared/ui/textarea/TextArea.tsxsrc/shared/ui/textarea/TextArea.types.tssrc/shared/ui/textarea/TextAreaErrorMessage.tsxsrc/shared/ui/textarea/TextAreaField.tsxsrc/shared/ui/textarea/TextAreaLabel.tsxsrc/shared/ui/textarea/index.ts
💤 Files with no reviewable changes (1)
- src/shared/ui/input/InputContext.ts
실제 ErrorMessage 노드가 렌더링된 경우에만 필드가 오류 id를 참조하도록 등록 상태를 추가했습니다. Context와 상태를 관리하는 Provider도 분리해 각 파일의 책임을 명확히 했습니다.
보조 설명은 aria-describedby로, 오류 메시지는 aria-errormessage로 연결하도록 역할을 분리했습니다. Input에는 불필요한 설명 참조를 제거하고 TextArea는 글자 수 안내만 설명으로 유지했습니다.
TextArea.Field가 네이티브 textarea의 children을 상속하지 않도록 제외해 value와 defaultValue 기반 입력 계약을 보장했습니다.
This was referenced Jun 23, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#️⃣연관된 이슈
체크 사항
📝작업 내용
TextArea 공통 컴포넌트 구현
TextArea.Root,TextArea.Label,TextArea.Field,TextArea.ErrorMessage로 구성된 Compound Component를 추가했습니다.placeholder,value,defaultValue,onChange,onBlur,ref등네이티브 textarea props를 지원합니다.
field객체를 실제 textarea에 전달할 수 있도록props 타입을 구성했습니다.
글자 수 기준 및 입력 제한
recommendedLength는 초과 입력을 허용하는 권장 길이로 처리했습니다.maxLength는 설정한 길이까지만 입력할 수 있는 최대 길이로 처리했습니다.권장 길이를 초과하면 빨간색으로 표시합니다.
접근성 연결
htmlFor와 textarea의id에 연결했습니다.aria-invalid,aria-describedby,aria-errormessage를 적용했습니다.textarea에 연결했습니다.
required와aria-required로 전달했습니다.FormControl 공통 기반 분리
공유할 수 있도록
form-control기반을 추가했습니다.내부 구현을 변경했습니다.
Input.Control을 역할이 명확한Input.FieldGroup으로 변경했습니다.TSDoc을 추가했습니다.
TextArea 스크롤 영역 개선
대각선 형태의 resize 아이콘을 적용했습니다.
않도록 개선했습니다.
스크린샷 (선택)
추가한 라이브러리 (선택)
💬리뷰 요구사항(선택)
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선사항
Control중심에서FieldGroup중심으로 정리되었습니다(버튼 포함 레이아웃 포함).문서/스토리
스타일