feat: InputField 컴포넌트 추가 by youngminss · Pull Request #16 · Nexters/yogieat

youngminss · 2026-01-19T15:53:23Z

🎯 PR 제목

예시 페이지 변경사항으로 인해 line 수가 길어보일 수 있어 !

feat: InputField 디자인 시스템 컴포넌트 구현

📑 작업 상세 내역

Input 컴포넌트 구현 (src/components/inputField/Input.tsx)
- left/right slot 지원 (아이콘, 커스텀 요소 삽입 가능)
- clear 버튼 내장 (입력값이 있을 때만 표시)
- controlled/uncontrolled 모드 모두 지원
- isError, disabled 상태 스타일링
- 컨테이너 클릭 시 input focus 처리
HelperText 컴포넌트 구현 (src/components/inputField/HelperText.tsx)
- helperText와 errorText 지원
- errorText 우선 표시 (에러 시 빨간색 스타일)
InputField 컴포넌트 구현 (src/components/inputField/InputField.tsx)
- Input + HelperText 조합
- react-hook-form 연동 지원
예시 페이지 구현 (app/input-field/page.tsx)
- react-hook-form을 활용한 폼 예시
- 이메일, 닉네임, 검색, 생년월일, 비활성화 필드 예시
- 생년월일: yyyy.mm.dd 포맷 자동 변환, 윤년 고려 validation

🙏 리뷰 요청 사항

Input 컴포넌트의 controlled/uncontrolled 모드 처리 방식이 적절한지 확인 부탁드립니다.

📃 참고 자료

https://www.figma.com/design/KtOg9O4j3yagiGFFwB2AKz/%EB%84%A5%EC%8A%A4%ED%84%B0%EC%A6%88-28%EA%B8%B0_%EC%9A%94%EA%B8%B0%EC%9E%87?node-id=188-442&m=dev

🖼️ 작업 결과물

예시 페이지: /input-field 경로에서 확인 가능

- 입력값이 있을 때만 clear 버튼 표시 - disabled 상태에서는 clear 버튼 숨김 - controlled/uncontrolled 모드 모두 지원 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- react-hook-form을 활용한 폼 예시 구현 - 생년월일 입력 필드 추가 (yyyy.mm.dd 포맷, 윤년 고려 validation) - 각 입력 필드를 개별 컴포넌트로 분리 - required 필드 에러 메시지 개선 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

gemini-code-assist · 2026-01-19T15:53:42Z

Summary of Changes

Hello @youngminss, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 재사용 가능한 InputField 컴포넌트를 시스템에 추가합니다. 이 컴포넌트는 다양한 입력 시나리오를 처리할 수 있도록 설계되었으며, 헬퍼 텍스트, 에러 메시지 표시, 좌우 아이콘 또는 추가 요소 삽입, 그리고 입력 내용을 쉽게 지울 수 있는 기능을 포함합니다. react-hook-form과의 통합 예시를 통해 실제 애플리케이션에서의 활용성을 보여줍니다.

Highlights

새로운 InputField 컴포넌트 추가: 재사용 가능한 InputField 컴포넌트가 추가되었습니다. 이 컴포넌트는 다양한 입력 시나리오를 처리할 수 있도록 설계되었습니다.
다양한 기능 지원: InputField는 헬퍼 텍스트, 에러 텍스트, 좌우 슬롯(아이콘 등), 그리고 입력 내용을 쉽게 지울 수 있는 클리어 버튼 기능을 지원합니다.
유효성 검사 및 폼 통합: 이메일, 닉네임, 생년월일 필드에 대한 유효성 검사 로직이 포함되어 있으며, react-hook-form과의 통합 예시를 통해 컴포넌트 사용법을 보여줍니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

새로운 InputField 컴포넌트와 관련 하위 컴포넌트들(Input, HelperText)의 추가를 확인했습니다. 전반적으로 컴포넌트 분리가 잘 되어 있고, react-hook-form과의 연동을 고려한 구현이 인상적입니다. 특히 제어/비제어 컴포넌트 상태를 모두 처리하고, onClear 핸들러에서 네이티브 이벤트를 발생시켜 안정성을 높인 점이 좋습니다. 데모 페이지도 다양한 케이스를 잘 보여주고 있습니다. 한 가지 작은 개선점을 Input.tsx 파일에 제안했습니다.

gemini-code-assist · 2026-01-19T15:54:33Z

src/components/inputField/Input.tsx

+				disabled={disabled ?? false}
+				aria-invalid={isError ?? false}


Input 컴포넌트의 disabled와 isError prop은 이미 상단에서 false로 기본값이 설정되어 있습니다.

export const Input = ({ // ... isError = false, disabled = false, // ... }: InputProps) => { //... }

따라서 input 엘리먼트에 값을 전달할 때 null 병합 연산자(??)를 사용하여 다시 false를 할당할 필요가 없습니다. 코드를 좀 더 간결하게 만들기 위해 불필요한 부분을 제거하는 것을 제안합니다.

Suggested change

disabled={disabled ?? false}

aria-invalid={isError ?? false}

disabled={disabled}

aria-invalid={isError}

오 이 의견은 좋은 것 같아!

RookieAND

작업해줘서 고마워 형!
구조를 살짝 확인해봤는데, Input 과 Field 의 역할을 모두 겸하는 느낌의 코드인 것 같더라고!

나는 개인적으로는 아래와 같은 구조를 상상했는데 형의 의견이 궁금해.

Input : 사용자가 데이터를 입력하도록 텍스트, 숫자 등의 입력 필드를 제공함
Field : 폼 요소들을 감싸는 컨테이너 컴포넌트로, 라벨, 설명, 에러 메시지 등을 제공함

이렇게 되면 Input 은 말 그대로 값을 입력받는 창구로서 사용되고,
Field 는 Input 외에 다른 요소들 (Button 등..) 도 컨트롤 할 수 있는 컨테이너가 되는 거지!
다만 위 의견은 나의 개인적인 제안이라서 지금 구조로 진행해도 무방하다고 생각해!

RookieAND · 2026-01-20T02:27:18Z

src/components/inputField/HelperText.tsx

@@ -0,0 +1,36 @@
+import { cva } from 'class-variance-authority';


작은 의견인데 Helper Text 도 두 가지 경우에 따라서 목적이 상이한 경우가 있더라고!

해당 필드의 목적 등을 설명하는 요소를 렌더링함 (Description)

해당 필드의 오류 메세지 요소를 렌더링하는 경우 (Error)

현재는 HelperText 라는 이름으로 두 책임이 모두 할당되어 있는데
이를 두 가지 포인트로 분리해서 각각 관리하면 어떨까라는 의견을 주고 싶었어!

이유는 앞서 말했던 책임 분리 때문이야.
이 텍스트가 helper 인지 error 인지에 따른 분기 처리도 하지 않을 수 있고,
사용 단에서 에러 메세지인지 설명 메세지인지에 따라 다르게 쓰기만 하면 OK 니까!

RookieAND · 2026-01-20T02:28:47Z

src/components/inputField/Input.tsx

+			<svg
+				width="9"
+				height="9"
+				viewBox="0 0 9 9"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				aria-hidden="true"
+			>
+				<path
+					d="M1 1L8 8M8 1L1 8"
+					stroke="#6B7280"
+					strokeWidth="1.5"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+			</svg>


요거는 추후에 내가 추가해둔 XIcon 으로 대체할 수 있을 것 같아!

RookieAND · 2026-01-20T05:30:06Z

src/components/inputField/Input.tsx

+const inputVariants = cva([
+	'ygi:flex-1 ygi:min-w-0',
+	'ygi:bg-transparent ygi:outline-none',
+	'ygi:body-16-md ygi:text-palette-gray-900',
+	'ygi:placeholder:text-palette-gray-400',
+	'ygi:disabled:text-palette-gray-400 ygi:disabled:cursor-not-allowed',
+]);


이 경우는 cva 가 아니라 twJoin 으로도 해결할 수 있을 거 같아!

RookieAND · 2026-01-20T05:30:29Z

src/components/inputField/Input.tsx

+type ClearButtonProps = {
+	onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+};


[NIT]
MouseEvent 도 좋지만, 우리 모바일인 경우도 고려해서 PointerEvent 를 사용하는 것은 어때?

RookieAND · 2026-01-20T05:33:24Z

src/components/inputField/Input.tsx

+				disabled={disabled ?? false}
+				aria-invalid={isError ?? false}


오 이 의견은 좋은 것 같아!

RookieAND · 2026-01-20T05:34:49Z

src/components/inputField/InputField.tsx

+export const InputField = ({
+	helperText,
+	errorText,
+	containerClassName,
+	isError,
+	...inputProps
+}: InputFieldProps) => {
+	const hasError = isError || !!errorText;
+
+	return (
+		<div className={twJoin('ygi:flex ygi:flex-col ygi:gap-xs', containerClassName)}>
+			<Input {...inputProps} isError={hasError} />
+			<HelperText helperText={helperText} errorText={errorText} />
+		</div>
+	);
+};


Input 자체를 이렇게 두는 것도 좋은데, 아래처럼 한번 Compound 로 처리해보면 어떨까?

<InputField.Root> <InputField.Control /> <InputField.Error /> <InputField.Description/> </InputField.Root>

RookieAND · 2026-01-20T05:44:35Z

리뷰 후에 깨달았는데 이거 아직 In Progress 상태였구나!!!
나중에 Need Review 로 전환되면 다시 확인해볼게!

youngminss · 2026-01-22T13:37:45Z

도메인 개발할 때 합의한 구조로 리팩터링 예정

* feat: InputField HeplerText 컴포넌트 추가 * feat: Input 컴포넌트 추가 * feat: InputField 컴포넌트 추가 * feat: InputField 예시 추가 * feat: Input 컴포넌트 clear 버튼 조건부 표시 개선 - 입력값이 있을 때만 clear 버튼 표시 - disabled 상태에서는 clear 버튼 숨김 - controlled/uncontrolled 모드 모두 지원 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * feat: InputField 예시 페이지 react-hook-form 연동 - react-hook-form을 활용한 폼 예시 구현 - 생년월일 입력 필드 추가 (yyyy.mm.dd 포맷, 윤년 고려 validation) - 각 입력 필드를 개별 컴포넌트로 분리 - required 필드 에러 메시지 개선 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

## 1.0.0-beta.1 (2026-02-16) ### Features * [#70](#70) ([#72](#72)) ([b676e0e](b676e0e)) * [QA] 모임 생성 완료, 결과페이지 페이지 UI 개선 ([#66](#66)) ([f10225d](f10225d)) * [QA] 서비스 전체 배경색 및 Layout Root 그림자 효과 적용 ([#59](#59)) ([384b56f](384b56f)) * api client 모듈 생성 ([#37](#37)) ([a37b0a9](a37b0a9)), closes [#38](#38) [#39](#39) [#40](#40) [#41](#41) * Button 컴포넌트 추가 ([#11](#11)) ([83b7607](83b7607)) * Chip Component 추가 ([#9](#9)) ([e9d8b8f](e9d8b8f)) * Color theme 초기화 ([#2](#2)) ([97f1dcc](97f1dcc)) * DotsLoader 컴포넌트 추가 ([#48](#48)) ([cfe4582](cfe4582)), closes [#49](#49) * GA4 이벤트 트래킹 통합 ([#70](#70)) ([0c1b9fa](0c1b9fa)) * GTM(Google Tag Manager) 통합을 위한 Analytics 컴포넌트 추가 ([#57](#57)) ([87a6ded](87a6ded)) * IconBase 컴포넌트 및 아이콘 컴포넌트들 구축 ([#13](#13)) ([8557b75](8557b75)), closes [#FFCD00](https://github.com/Nexters/yogieat/issues/FFCD00) [#FFAD00](https://github.com/Nexters/yogieat/issues/FFAD00) [#15](#15) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c) * InputField 컴포넌트 추가 ([#16](#16)) ([99b8aa2](99b8aa2)) * Landing / Opinion Form 페이지 분리 ([#61](#61)) ([0f11e71](0f11e71)) * Layout 컴포넌트 추가 ([#10](#10)) ([9efce6f](9efce6f)) * Semantic Color Token 추가 ([#19](#19)) ([fcaedaf](fcaedaf)) * Spacing utility 클래스 초기화 ([#8](#8)) ([2e38d7a](2e38d7a)) * Tag 컴포넌트 추가 ([#20](#20)) ([f69dd05](f69dd05)) * Toast 컴포넌트 추가 ([#21](#21)) ([76e84b0](76e84b0)) * 모임 생성 퍼널 Step 1 (인원 선택) 구현 ([#23](#23)) ([7fc01a1](7fc01a1)), closes [#24](#24) [#1f2933](https://github.com/Nexters/yogieat/issues/1f2933) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c) [#25](#25) [#26](#26) [#27](#27) [#28](#28) [#29](#29) [#30](#30) [#31](#31) [#32](#32) [#34](#34) * 프로젝트 기초 세팅 진행 ([aa0ec20](aa0ec20)) * 프로젝트 폴더 구조 반영 ([e54962d](e54962d)) ### Bug Fixes * 1순위를 1개라도 선택했다면 바로 CTA 가 활성화 되도록 수정 ([#60](#60)) ([e5758b4](e5758b4)) * 1차 MVP 배포 이전 최종 QA 항목 반영 ([#58](#58)) ([6574231](6574231)) * Button/Chip type 속성 추가 및 의견 수렴 UX 개선 ([#50](#50)) ([7e86e4a](7e86e4a)), closes [#51](#51) [#52](#52) [#53](#53) [#54](#54) [#55](#55) [#56](#56) * cat 에서 echo 로 env.production 파일을 생성하도록 수정 ([f15307d](f15307d)) * CI/CD health check 타이밍 개선 및 수동 배포 기능 추가 ([54fd2b8](54fd2b8)) * Docker build-args로 환경 변수 전달 방식 변경 ([#77](#77)) ([e5fa0b9](e5fa0b9)) * Docker 이미지 강제 pull 및 컨테이너 재생성 ([#79](#79)) ([c253ec1](c253ec1)) * Health check 전략 개선 및 curl 기반으로 변경 ([765d3da](765d3da)) * nginx http2 deprecated 경고 해결 ([2fd9c75](2fd9c75)) * PendingView 내에서 ShareButton 을 렌더링 하지 않도록 수정 ([7bc3e12](7bc3e12)) * 결과 페이지 맛집 이미지 기본 placeholder, 공유하기 toast 미노출 ([#68](#68)) ([3c80844](3c80844)) * 동시 배포 방지를 위한 concurrency 설정 추가 ([e9bfd52](e9bfd52)) * 모임 생성 퍼널 필드 상태 초기화 버그 수정 ([#64](#64)) ([3934066](3934066)), closes [#65](#65) * 모임 생성 폼 필드명 변경 (meetingDate → scheduledDate, location → region) ([#35](#35)) ([e90beed](e90beed)) * 배포 워크플로우에 GA4 환경 변수 추가 ([#73](#73)) ([835ae1f](835ae1f)) * 의견 수렴 페이지 내 UI 수정 및 인터렉션 개선 ([#36](#36)) ([a74f7da](a74f7da)) * 의견 수합 Form Capacity 폴링 제거 및 ErrorCode 타입 시스템 추가 ([#67](#67)) ([d55dba1](d55dba1)) * 인원 수 선택 Grid 및 의견 수렴 QA 수정 사항 반영 ([f01626e](f01626e)) * 테스트 용으로 추가했던 페이지 제거 및 icons 폴더 추가 ([4116025](4116025)) ### Code Refactoring * Button 컴포넌트 스펙을 Figma 명세에 맞춰 수정 ([#14](#14)) ([2e27f17](2e27f17)) ### Build System * Docker 빌드 시 NEXT_PUBLIC 환경변수 주입 프로세스 추가 ([#47](#47)) ([88ba163](88ba163)) ### Documentation * 프로젝트 개발 가이드 문서 추가 ([#84](#84)) ([4313145](4313145))

## 1.0.0 (2026-02-16) ### Features * [#70](#70) ([#72](#72)) ([b676e0e](b676e0e)) * [QA] 모임 생성 완료, 결과페이지 페이지 UI 개선 ([#66](#66)) ([f10225d](f10225d)) * [QA] 서비스 전체 배경색 및 Layout Root 그림자 효과 적용 ([#59](#59)) ([384b56f](384b56f)) * analytics 개선 및 네이버 서치 어드바이저 등록 ([#88](#88)) ([4372aa5](4372aa5)) * api client 모듈 생성 ([#37](#37)) ([a37b0a9](a37b0a9)), closes [#38](#38) [#39](#39) [#40](#40) [#41](#41) * Button 컴포넌트 추가 ([#11](#11)) ([83b7607](83b7607)) * Chip Component 추가 ([#9](#9)) ([e9d8b8f](e9d8b8f)) * Color theme 초기화 ([#2](#2)) ([97f1dcc](97f1dcc)) * DotsLoader 컴포넌트 추가 ([#48](#48)) ([cfe4582](cfe4582)), closes [#49](#49) * GA4 이벤트 트래킹 통합 ([#70](#70)) ([0c1b9fa](0c1b9fa)) * GTM(Google Tag Manager) 통합을 위한 Analytics 컴포넌트 추가 ([#57](#57)) ([87a6ded](87a6ded)) * IconBase 컴포넌트 및 아이콘 컴포넌트들 구축 ([#13](#13)) ([8557b75](8557b75)), closes [#FFCD00](https://github.com/Nexters/yogieat/issues/FFCD00) [#FFAD00](https://github.com/Nexters/yogieat/issues/FFAD00) [#15](#15) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c) * InputField 컴포넌트 추가 ([#16](#16)) ([99b8aa2](99b8aa2)) * Landing / Opinion Form 페이지 분리 ([#61](#61)) ([0f11e71](0f11e71)) * Layout 컴포넌트 추가 ([#10](#10)) ([9efce6f](9efce6f)) * Semantic Color Token 추가 ([#19](#19)) ([fcaedaf](fcaedaf)) * Spacing utility 클래스 초기화 ([#8](#8)) ([2e38d7a](2e38d7a)) * Tag 컴포넌트 추가 ([#20](#20)) ([f69dd05](f69dd05)) * Toast 컴포넌트 추가 ([#21](#21)) ([76e84b0](76e84b0)) * 모임 생성 완료 페이지 UI 리뉴얼 ([#89](#89)) ([17a3fc1](17a3fc1)) * 모임 생성 퍼널 Step 1 (인원 선택) 구현 ([#23](#23)) ([7fc01a1](7fc01a1)), closes [#24](#24) [#1f2933](https://github.com/Nexters/yogieat/issues/1f2933) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c) [#25](#25) [#26](#26) [#27](#27) [#28](#28) [#29](#29) [#30](#30) [#31](#31) [#32](#32) [#34](#34) * 프로젝트 기초 세팅 진행 ([aa0ec20](aa0ec20)) * 프로젝트 폴더 구조 반영 ([e54962d](e54962d)) ### Bug Fixes * 1순위를 1개라도 선택했다면 바로 CTA 가 활성화 되도록 수정 ([#60](#60)) ([e5758b4](e5758b4)) * 1차 MVP 배포 이전 최종 QA 항목 반영 ([#58](#58)) ([6574231](6574231)) * Button/Chip type 속성 추가 및 의견 수렴 UX 개선 ([#50](#50)) ([7e86e4a](7e86e4a)), closes [#51](#51) [#52](#52) [#53](#53) [#54](#54) [#55](#55) [#56](#56) * cat 에서 echo 로 env.production 파일을 생성하도록 수정 ([f15307d](f15307d)) * CI/CD health check 타이밍 개선 및 수동 배포 기능 추가 ([54fd2b8](54fd2b8)) * Docker build-args로 환경 변수 전달 방식 변경 ([#77](#77)) ([e5fa0b9](e5fa0b9)) * Docker 이미지 강제 pull 및 컨테이너 재생성 ([#79](#79)) ([c253ec1](c253ec1)) * Health check 전략 개선 및 curl 기반으로 변경 ([765d3da](765d3da)) * nginx http2 deprecated 경고 해결 ([2fd9c75](2fd9c75)) * PendingView 내에서 ShareButton 을 렌더링 하지 않도록 수정 ([7bc3e12](7bc3e12)) * 결과 페이지 맛집 이미지 기본 placeholder, 공유하기 toast 미노출 ([#68](#68)) ([3c80844](3c80844)) * 동시 배포 방지를 위한 concurrency 설정 추가 ([e9bfd52](e9bfd52)) * 모임 생성 퍼널 필드 상태 초기화 버그 수정 ([#64](#64)) ([3934066](3934066)), closes [#65](#65) * 모임 생성 폼 필드명 변경 (meetingDate → scheduledDate, location → region) ([#35](#35)) ([e90beed](e90beed)) * 배포 워크플로우에 GA4 환경 변수 추가 ([#73](#73)) ([835ae1f](835ae1f)) * 의견 수렴 페이지 내 UI 수정 및 인터렉션 개선 ([#36](#36)) ([a74f7da](a74f7da)) * 의견 수합 Form Capacity 폴링 제거 및 ErrorCode 타입 시스템 추가 ([#67](#67)) ([d55dba1](d55dba1)) * 인원 수 선택 Grid 및 의견 수렴 QA 수정 사항 반영 ([f01626e](f01626e)) * 테스트 용으로 추가했던 페이지 제거 및 icons 폴더 추가 ([4116025](4116025)) ### Code Refactoring * Button 컴포넌트 스펙을 Figma 명세에 맞춰 수정 ([#14](#14)) ([2e27f17](2e27f17)) ### Build System * Docker 빌드 시 NEXT_PUBLIC 환경변수 주입 프로세스 추가 ([#47](#47)) ([88ba163](88ba163)) ### Documentation * 프로젝트 개발 가이드 문서 추가 ([#84](#84)) ([4313145](4313145))

youngminss and others added 6 commits January 19, 2026 23:54

feat: InputField HeplerText 컴포넌트 추가

d45a125

feat: Input 컴포넌트 추가

a2a4d15

feat: InputField 컴포넌트 추가

d6309d0

feat: InputField 예시 추가

702e27d

feat: Input 컴포넌트 clear 버튼 조건부 표시 개선

2cbf220

- 입력값이 있을 때만 clear 버튼 표시 - disabled 상태에서는 clear 버튼 숨김 - controlled/uncontrolled 모드 모두 지원 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

youngminss self-assigned this Jan 19, 2026

youngminss added the ✨ Feature 기능 개발 label Jan 19, 2026

github-actions bot added ☑️ Need Review 작업이 완료되어 리뷰를 기다리고 있는 PR 입니다 ✨ Feature 기능 개발 and removed ✨ Feature 기능 개발 labels Jan 19, 2026

gemini-code-assist bot reviewed Jan 19, 2026

View reviewed changes

github-actions bot added ✨ Feature 기능 개발 and removed ✨ Feature 기능 개발 ☑️ Need Review 작업이 완료되어 리뷰를 기다리고 있는 PR 입니다 labels Jan 19, 2026

youngminss added the 📤 In Progress 현재 작업 중인 PR 입니다. label Jan 19, 2026

RookieAND reviewed Jan 20, 2026

View reviewed changes

youngminss removed the 📤 In Progress 현재 작업 중인 PR 입니다. label Jan 22, 2026

youngminss merged commit 99b8aa2 into main Jan 22, 2026
14 of 15 checks passed

		@@ -0,0 +1,36 @@
		import { cva } from 'class-variance-authority';

Conversation

youngminss commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 PR 제목

📑 작업 상세 내역

🙏 리뷰 요청 사항

📃 참고 자료

🖼️ 작업 결과물

Uh oh!

gemini-code-assist bot commented Jan 19, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Jan 19, 2026

Choose a reason for hiding this comment

Uh oh!

RookieAND Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

RookieAND left a comment

Choose a reason for hiding this comment

Uh oh!

RookieAND Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

RookieAND Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

RookieAND Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

RookieAND Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

RookieAND Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

RookieAND Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

RookieAND commented Jan 20, 2026

Uh oh!

youngminss commented Jan 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

youngminss commented Jan 19, 2026 •

edited

Loading