[Feat] 공용 컴포넌트 Input 제작 #40

yoorli · 2025-12-03T05:21:03Z

📝 변경 사항

Input 컴포넌트 제작

src/components/ui/input/index.tsx : Input 컴포넌트
src/components/ui/input/index.stories.tsx : story 파일

form input 컴포넌트 제작

src/components/ui/hint/index.tsx : Hint 컴포넌트 (error message)
src/components/ui/label/index.tsx : Label컴포넌트 (form input과 연결용)
src/components/shared/form-input/index.tsx : FormInput 컴포넌트
src/components/shared/form-input/index.stories.tsx : FormInput story 파일

search bar 컴포넌트 제작

src/components/shared/search-bar/index.tsx : SearchBar컴포넌트
src/components/shared/fsearch-bar/index.stories.tsx : SearchBar story 파일

Input 컴포넌트

최하단 컴포넌트
form input이나 search bar와 같은 컴포넌트 이외의 input을 custom 하고 싶을 때 사용
기본적인 사용법은 index.stories.tsx 를 참고해주세요.

FormInput 컴포넌트

사용 예시

<FormInput labelName="이름" placeholder="이름을 입력하세요" />

<FormInput
  labelName="이메일"
  id="email"
  type="email"
  required
  placeholder="name@example.com"
  hintMessage="로그인 및 알림 수신에 사용되는 이메일입니다."
/>

<FormInput
  labelName="비밀번호"
  id="password"
  type="password"
  required
  placeholder="비밀번호를 입력하세요"
  hintMessage="영문, 숫자, 특수문자를 포함해 8자 이상 입력하세요."
/>

<FormInput
  labelName="닉네임"
  id="nickname"
  placeholder="닉네임을 입력하세요"
  hintMessage="다른 사용자에게 공개되는 이름입니다."
  className="max-w-[440px]"
/>

<FormInput
  labelName="비밀번호 확인"
  id="confirm-password"
  type="password"
  required
  placeholder="비밀번호를 한 번 더 입력하세요"
  autoComplete="new-password"
/>

SearchBar 컴포넌트

사용 예시

<SearchBar placeholder="검색어를 입력하세요" />

<SearchBar
  placeholder="닉네임 검색"
  onSearch={(keyword) => {
    console.log('검색 실행:', keyword);
  }}
/>

<SearchBar
  className="w-full max-w-[480px]"
  placeholder="게시글, 사용자, 태그 검색"
/>

<SearchBar
  defaultValue="초기 검색어"
  onSearch={(keyword) => {
    // 라우팅 예시
    // router.push(`/search?keyword=${encodeURIComponent(keyword)}`);
  }}
/>

🔗 관련 이슈

Closes #31

🧪 테스트 방법

수동 테스트 검증(로컬 환경)
유닛 테스트 검증
통합 테스트 검증

📸 스크린샷 (선택)

📋 체크리스트

관련 문서를 업데이트했습니다 (필요한 경우)
테스트를 추가/수정했습니다 (필요한 경우)
Breaking change가 있다면 명시했습니다

💬 추가 코멘트

CodeRabbit Review는 자동으로 실행되지 않습니다.

Review를 실행하려면 comment에 아래와 같이 작성해주세요

@coderabbitai review

Summary by CodeRabbit

New Features
- Added FormInput component with password visibility toggle and optional hint text.
- Added SearchBar component with search icon interaction.
- Added Hint component for displaying help and error messages.
Documentation
- Added Storybook stories for FormInput, SearchBar, and Input components with multiple configuration examples.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-12-03T05:21:09Z

Caution

Review failed

The pull request is closed.

Walkthrough

This change introduces a new suite of form-related UI components and composite components. It adds Input, Label, and Hint components to the UI layer, creates FormInput and SearchBar composite components in shared, includes comprehensive Storybook stories for all new components, and updates import paths for the Icon component across the codebase.

Changes

Cohort / File(s)	Summary
FormInput Component `src/components/shared/form-input/index.tsx`, `src/components/shared/form-input/index.stories.tsx`	New FormInput component with label, input field, optional hint, and password visibility toggle; includes 4 Storybook stories (Default, WithHint, Password, ErrorState) demonstrating various configurations.
SearchBar Component `src/components/shared/search-bar/index.tsx`, `src/components/shared/search-bar/index.stories.tsx`	New SearchBar component with integrated search icon button and configurable input props; includes 3 Storybook stories (Default, FullWidth, WithLongPlaceholder) for different layouts and placeholders.
Base UI Components `src/components/ui/input/index.tsx`, `src/components/ui/label/index.tsx`, `src/components/ui/hint/index.tsx`	Three foundational UI components: Input (forwardRef with optional icon button), Label (with optional required asterisk), and Hint (aria-live message display).
UI Component Stories `src/components/ui/input/index.stories.tsx`	Storybook story file for Input component with 4 stories (Default, Password, WithSearchIcon, Disabled) demonstrating various input configurations and optional icon integration.
Module Exports `src/components/ui/index.ts`, `src/components/shared/index.ts`	New UI barrel export centralizing Button, Hint, Input, Label, and modal components; updated shared exports to add FormInput and SearchBar while removing Icon.
Import Path Updates `src/components/layout/gnb/index.tsx`, `src/components/ui/modal/index.tsx`	Updated Icon component import paths from `@/components/shared` to `@/components/icon` in two files.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

FormInput and SearchBar implementations: Review component logic, prop handling, accessibility attributes (aria-label, htmlFor associations), and state management for password visibility and search handlers.
Base UI components (Input, Label, Hint): Verify forwardRef implementation in Input, required asterisk rendering logic in Label, and aria-live usage in Hint.
Storybook story configurations: Ensure story args, metadata, and layout settings are correct and comprehensive for each component variant.
Module export changes: Confirm all exports are properly re-exported in barrel files and no unintended exports are removed.

Poem

🐰 New components sprout with care and grace,
Input, Label, Hint—a form's embrace!
FormInput bundles joy with password's dance,
SearchBar finds treasures at a glance,
Stories bloom to show each elegant face! ✨

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch yoolri-feat/input

📜 Recent review details

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d9170bc and 3d4bfa4.

📒 Files selected for processing (12)

src/components/layout/gnb/index.tsx (1 hunks)
src/components/shared/form-input/index.stories.tsx (1 hunks)
src/components/shared/form-input/index.tsx (1 hunks)
src/components/shared/index.ts (1 hunks)
src/components/shared/search-bar/index.stories.tsx (1 hunks)
src/components/shared/search-bar/index.tsx (1 hunks)
src/components/ui/hint/index.tsx (1 hunks)
src/components/ui/index.ts (1 hunks)
src/components/ui/input/index.stories.tsx (1 hunks)
src/components/ui/input/index.tsx (1 hunks)
src/components/ui/label/index.tsx (1 hunks)
src/components/ui/modal/index.tsx (1 hunks)

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

github-actions · 2025-12-03T05:21:40Z

📊 Coverage Report

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2025-12-03 08:40:24

📉 #40을 main에 병합하면 coverage가 8.29% 감소합니다.

Coverage 요약

@@             Coverage Diff             @@
##             main      #40       +/-   ##
===========================================
- Coverage   42.71%   34.42%    -8.29%     
===========================================
  Files          30       36        +6     
  Lines         817     1011      +194     
  Branches       75       82        +7     
===========================================
- Hits          349      348        -1     
+ Misses        468      663      +195

영향받은 파일

파일	Coverage 변화
`/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/icon/index.tsx`	`100.00% (+100.00%)` ⬆️
`/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/shared/index.ts`	`0.00% (-100.00%)` ⬇️

github-actions · 2025-12-03T05:21:45Z

🚀 PR Preview Report

✨ Build가 성공적으로 완료되었습니다.

Preview에서 변경사항을 확인하세요.

Status	Preview	Build Log	Updated (UTC)
✅ Ready	Visit Preview	View Logs	2025-12-03 08:41:27

github-actions · 2025-12-03T05:24:03Z

🎨 Storybook Report

✨ Story가 변경되었습니다

Chromatic에서 비주얼 변경사항을 확인하세요.

Status	Storybook	Build Log	Updated (UTC)
✅ Ready	View Storybook	View Build	2025-12-03 08:40:47

- restructure Input to use iconButton - unify password input into FormInput - adjust SearchBar to use new Input

Chiman2937

수고하셨습니다!

Chiman2937 · 2025-12-03T07:46:06Z

src/components/shared/form-input/index.tsx

+  const passwordIconButton = isPasswordField ? (
+    <button
+      className='absolute top-4 right-5 h-6 w-6'
+      aria-label={isVisible ? '비밀번호 숨기기' : '비밀번호 보기'}
+      type='button'
+      onClick={handleToggle}
+    >
+      <Icon id={isVisible ? 'visibility-true' : 'visibility-false'} className='text-gray-600' />
+    </button>
+  ) : null;


현재 passwordIconButton이 FormInput 내부에 선언되어있는데 안티패턴이라서 지양하는 게 좋을 것 같아요!

현재는 함수컴포넌트로 되어있게 아니라 JSX 변수를 저장한 형태라 큰 문제를 일으키진 않지만 만약 passwordIconButton이 함수형 컴포넌트였다면 FormInput이 리렌더링 될 때마다 passwordIconButton 함수가 매번 재생성되면서 React가 이를 완전히 다른 컴포넌트로 인식해서 state 초기화, focus 손실 같은 버그가 발생할 수 있어요.

그렇네요. input 쪼개기에 급급해서 생각을 못했어요.
다른 리뷰들하고 같이 수정해서 다음 작업에 다른 방식을 적용시켜 볼게요!

Chiman2937 · 2025-12-03T07:48:50Z

src/components/shared/search-bar/index.tsx

나중에 Enter로 검색하는 기능도 추가되면 좋겠네요!

Chiman2937 · 2025-12-03T07:50:06Z

src/components/ui/hint/index.tsx

+    <p
+      {...props}
+      className={cn('text-error-500 text-text-sm-medium w-full px-2', className)}
+      aria-live='polite'


aria-live는 처음 알았네요 👍

치영님 코드 보고 찾아보다가 알아냈어요.
스크린 리더가 동적으로 변경된 콘텐츠를 자동으로 읽어주도록 설정 하는 역할을 한다고 합니다.

Chiman2937 · 2025-12-03T07:52:22Z

src/components/ui/label/index.tsx

+export const Label = ({ children, className, required, ...props }: LabelProps) => {
+  return (
+    <label {...props} className={cn('text-text-sm-medium flex items-center px-2', className)}>


label에 required가 적용이 안되고 있는것 같아요!

Chiman2937 · 2025-12-03T08:02:19Z

src/components/shared/form-input/index.tsx

+interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  labelName?: string;
+  hintMessage?: string;
+}


현재 FormInputProps가 Input type을 extend 해오고 있는데 FormInput은 div를 반환하고 있기 때문에 타입과 실제 구조가 일치하지 않아 혼란을 일으킬 수 있을 것 같아요

사실 지금상태는 큰 문제를 일으킬 것 같지는 않고 interface를 최대한 간소화시키기 위한 작업이라고 생각돼서 괜찮을 것 같긴 하네요 :)

yoorli · 2025-12-11T07:09:19Z

@coderabbitai review

coderabbitai · 2025-12-11T07:09:26Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

yoorli added 6 commits December 2, 2025 15:35

Merge remote-tracking branch 'origin/main' into yoolri-feat/input

7b485c1

feat: label 컴포넌트 제작

f931d51

feat: Input 컴포넌트 제작

568c0f8

feat: Hint 컴포넌트 제작

3289bdc

feat: Form Input 컴포넌트 제작

467736a

feat: SearchBar 컴포넌트 제작

ff04712

github-actions bot requested a review from Chiman2937 December 3, 2025 05:21

yoorli added 2 commits December 3, 2025 14:30

Merge remote-tracking branch 'origin/main' into yoolri-feat/input

af1cd5b

refactor: refine components

dde96fa

yoorli force-pushed the yoolri-feat/input branch from 17a2995 to dde96fa Compare December 3, 2025 05:35

yoorli changed the title ~~Yoolri feat/input~~ [Feat] 공용 컴포넌트 Input 제작 Dec 3, 2025

refactor: restructure Input, FormInput and SearchBar responsibilities

dba8d57

- restructure Input to use iconButton - unify password input into FormInput - adjust SearchBar to use new Input

yoorli added the Ready For Review! 리뷰 받을 준비가 되었습니다. label Dec 3, 2025

refactor: expose modal utilities in ui barrel

088bced

Chiman2937 approved these changes Dec 3, 2025

View reviewed changes

yoorli added 2 commits December 3, 2025 17:26

refactor: resolve barrel circular dependency by moving icon module

50c94d2

fix: update remaining icon import paths after folder move

3d4bfa4

yoorli merged commit 5797f1b into main Dec 3, 2025
5 of 6 checks passed

yoorli deleted the yoolri-feat/input branch December 3, 2025 10:55

yoorli mentioned this pull request Dec 3, 2025

[컴포넌트] Input-form 컴포넌트 #43

Closed

3 tasks

claudia99503 assigned yoorli Dec 4, 2025

This was referenced Dec 21, 2025

[Feat] 마이페이지 - 프로필 수정 Form 유효성 검사 추가 #216

Merged

[Refactor] form 구조 변경, 로그인 오류 처리 추가 #233

Merged

[Feat] 공용 컴포넌트 Input 제작 #40

[Feat] 공용 컴포넌트 Input 제작 #40

Uh oh!

Conversation

yoorli commented Dec 3, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 변경 사항

Input 컴포넌트 제작

form input 컴포넌트 제작

search bar 컴포넌트 제작

Input 컴포넌트

FormInput 컴포넌트

SearchBar 컴포넌트

🔗 관련 이슈

🧪 테스트 방법

📸 스크린샷 (선택)

📋 체크리스트

💬 추가 코멘트

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

github-actions bot commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Coverage Report

Coverage 요약

영향받은 파일

Uh oh!

github-actions bot commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 PR Preview Report

Uh oh!

github-actions bot commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 Storybook Report

Uh oh!

Chiman2937 left a comment

Choose a reason for hiding this comment

Uh oh!

Chiman2937 Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

yoorli Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Chiman2937 Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Chiman2937 Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

yoorli Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Chiman2937 Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Chiman2937 Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

yoorli commented Dec 11, 2025

Uh oh!

coderabbitai bot commented Dec 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yoorli commented Dec 3, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 3, 2025 •

edited

Loading

github-actions bot commented Dec 3, 2025 •

edited

Loading

github-actions bot commented Dec 3, 2025 •

edited

Loading

github-actions bot commented Dec 3, 2025 •

edited

Loading