Skip to content

Input 등 요소 HelpText 및 Error 구조 개선#957

Merged
hyoseong1994 merged 10 commits intomainfrom
825-inputs-helptext
Apr 22, 2026
Merged

Input 등 요소 HelpText 및 Error 구조 개선#957
hyoseong1994 merged 10 commits intomainfrom
825-inputs-helptext

Conversation

@hyoseong1994
Copy link
Copy Markdown
Contributor

@hyoseong1994 hyoseong1994 commented Apr 9, 2026

  • coverage 폴더를 linting 하고있어서 ignore추가했습니다.
  • text input icon color 관련 테스트 추가하였습니다.
  • label, helptext, errorMessage기능을 추가했습니다.
    • TextInput
    • PasswordInput
    • Select
    • RadioGroup
    • CheckboxGroup
    • Checkbox(label 제외)

테스팅

체크 리스트

  • 코드 리뷰를 요청하기 전에 반드시 CI가 통과하는지 확인해주세요.
  • 컴포넌트나 스토리 변경이 있는 경우 PR에 ui 태그를 달아주세요.
    • UI Tests를 통해 스냅샷 차이가 의도된 것인지 확인해주세요.
    • UI Review를 통해 디자이너에게 리뷰를 요청하고 승인을 받으세요.

Comment thread src/components/TextInput/TextInput.tsx Outdated
Comment thread src/components/PasswordInput/PasswordInput.tsx Outdated
Comment thread src/components/PasswordInput/PasswordInput.test.tsx
Comment thread src/components/TextInput/TextInput.tsx Outdated
@hyoseong1994 hyoseong1994 requested a review from DaleSeo April 17, 2026 07:15
Copy link
Copy Markdown
Member

@DaleSeo DaleSeo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여러 컴포넌트를 작업하시느라 고생하셨습니다! 소소한 질문만 있습니다.

Comment thread src/components/PasswordInput/PasswordInput.tsx
Comment thread src/components/TextInput/TextInput.tsx Outdated
Comment thread src/components/Select/Select.test.tsx Outdated
Comment thread src/components/Checkbox/Checkbox.stories.tsx
Copy link
Copy Markdown
Member

@SimYunSup SimYunSup left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다! 리뷰 부분은 적용하셔도 적용하지 않으셔도 좋습니다 :)

Comment thread src/components/shared/useHelperText.ts Outdated
.filter((s): s is string => Boolean(s))
.join(" ") || undefined;

return { helperTextId, bottomText, showBottomText, ariaDescribedBy, isError };
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

return 값을 적용하기 좋게 React Aria 방식처럼 fieldProps와 helpTextProps로 나누어서 전달하고 사용할 때 spread 방식으로 전달하는 것은 어떨까요?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

리뷰 감사합니다! 해당 내용 반영하여 머지하도록하겠습니다

@RiaOh
Copy link
Copy Markdown
Contributor

RiaOh commented Apr 21, 2026

보다보니 하나 발견한게 있어서요! 요 티켓과는 조금 무관한 것 같기는 한데..!
checkbox에서 invalid값이 true인 경우, label도 fg.danger컬러로 변경되는게 맞나용?
figma와는 다른 것 같아서요!
image

Copy link
Copy Markdown
Contributor

@RiaOh RiaOh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

우와 작업량이 많았네요ㅠㅠ 고생하셨습니다ㅠ!

@hyoseong1994
Copy link
Copy Markdown
Contributor Author

보다보니 하나 발견한게 있어서요! 요 티켓과는 조금 무관한 것 같기는 한데..!
checkbox에서 invalid값이 true인 경우, label도 fg.danger컬러로 변경되는게 맞나용?
figma와는 다른 것 같아서요!

아마 디자인 작업이 먼저 진행되고 개발작업이 누락된거같아요 수정작업이 크지않아서 처리했습니다

…lpTextProps for better integration in form components
@hyoseong1994 hyoseong1994 added this pull request to the merge queue Apr 22, 2026
Merged via the queue into main with commit 4d7e774 Apr 22, 2026
9 of 11 checks passed
@hyoseong1994 hyoseong1994 deleted the 825-inputs-helptext branch April 22, 2026 00:41
@github-actions github-actions Bot mentioned this pull request Apr 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ui Chromatic

Projects

None yet

Development

Successfully merging this pull request may close these issues.

FormComponent HelpText 및 Error 구조 개선

4 participants