[Feat] TextField 컴포넌트 제작 by YeBeenChoi · Pull Request #21 · Leets-Official/LOOPIT-FE

YeBeenChoi · 2026-01-14T12:20:12Z

✨ 주요 변경사항

TextField 컴포넌트 (Char / TextArea / Price) 구현
Playground 예시 페이지에 TextField 상태별 (Default / Error / Disabled) 예제 추가

📝 작업 상세 내용

Price Field 숫자 입력 제한 및 포맷 (천 단위 콤마, 원 suffix) 적용
TextArea Field 최대 10줄까지 자동 확장, 이후 스크롤 처리

✅ 체크리스트

PR 본문에 Close #번호 추가
불필요한 주석, 디버깅 코드 제거
기능 테스트 및 정상 동작 확인
커밋컨벤션 / 코드컨벤션 준수

📸 스크린샷 (선택)

🔍 기타 참고사항

Price Field에서 텍스트와 원 suffix와의 간격은 임의로 30픽셀로 지정해 놓았습니다!

🔗 관련 이슈

Close [Feat] #14 - TextField 컴포넌트 제작 #14

github-actions · 2026-01-14T12:21:18Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

github-actions · 2026-01-14T12:33:41Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

KyeongJooni

고생하셨습니다! :) 코멘트 남겼으니까 확인해주시면 좋을 것 같아요 👍

KyeongJooni · 2026-01-14T13:50:49Z

+      // 표시값(1,000) -> 숫자만(1000)
+      next = next.replace(/\D/g, '');
+      // consumer가 e.target.value 읽는 경우를 위해 숫자로 맞춰줌


주석을 정리해서 달아주시거나 불필요한 주석은 삭제해도 좋을 것 같아요!

삭제했습니다!

KyeongJooni · 2026-01-14T13:53:31Z

+          <textarea
+            ref={textareaRef}
+            value={digitsValue}


digitsValue 라는 변수명이 살짝 모호한거 같아요

const normalizedValue = isPrice ? rawValue.replace(/\D/g, '') : rawValue;

이런식으로 수정하셔도 좋을 것 같습니다!

넵 수정했습니다!

KyeongJooni · 2026-01-14T13:55:25Z

+  const styles = textFieldVariants({
+    error,
+    disabled,
+    filled,
+    price: isPrice,
+  });


현재 variant에 적용되어있는 char는 정의하고 사용은 안하는 걸까요?

다시 확인해 보니까 현재 UI에서는 counter가 header 영역에 있어 char variant가 사용되지 않네요...!! 필요하지 않을 것 같아 제거하였습니다!

KyeongJooni · 2026-01-14T13:56:29Z

+      'resize-none',
+      'text-[16px] leading-[24px] font-medium',
+      'placeholder:text-[var(--color-gray-300)]',
+      'hover:border-[var(--color-green-700)]',
+      'focus:border-[var(--color-green-700)]',
+      'focus:outline-none',
+      'transition-colors',
+      'resize-none',


중복 정의하신 이유가 있을까요? 없다면 삭제하는게 좋을 것 같습니다!

리뷰해 주신 대로 input / textarea에 중복되던 스타일을 fieldBase로 공통화하고, resize-none, text / placeholder / borer / transition 등은 중복 정의 제거하였습니다!

KyeongJooni · 2026-01-14T14:01:57Z

+        <div className={styles.labelRow()}>
+          {label && <label className={styles.label()}>{label}</label>}
+          {showCounterInHeader && (
+            <span className={styles.counter()}>
+              {currentLength}/{maxLen}
+            </span>
+          )}
+        </div>


char를 정의하고 사용하려고 해도 char가 counter를 absolute로 만드는 속성을 가진 것 같은데 fieldWrapper랑 counter 가 분리가 되어 있는거 같아서 혹시 작동하는 확인 부탁드립니다! 😄

위의 답변과 마찬가지로 char variant를 제거하였습니다!

KyeongJooni · 2026-01-14T14:07:00Z

+    if (!isControlled) {
+      setUncontrolledValue(next);
+    }
+    onChange?.(e as React.ChangeEvent<HTMLInputElement>);


이미 타입을 정의할 때 유니온을 받아서 assertion이 필요가 없을 것 같습니다!

Suggested change

onChange?.(e as React.ChangeEvent<HTMLInputElement>);

onChange?.(e);

수정했습니다!!

KyeongJooni · 2026-01-14T14:08:34Z

@@ -0,0 +1,149 @@
+import { textFieldVariants } from '@shared/ui/TextField/TextField.variants';
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import type { TextFieldProps } from '@shared/ui/TextField/TextField.types';


TextFieldType 은 정의하고 사용 안하고 있는 것 같습니다! 확인해보시면 좋을 것 같아요

TextFieldType은 TextFieldProps의 type에 사용 중이라 내부 정의만 유지하고, 외부 사용처가 없어 export만 제거했습니다!

KyeongJooni · 2026-01-14T14:09:41Z

+  (ControlledTextFieldProps | UncontrolledTextFieldProps) &
+  Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'value' | 'defaultValue' | 'onChange'> &
+  Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'defaultValue' | 'onChange'> & {
+    onChange?: (e: CommonChangeEvent) => void;


여기도 ChangeEventHandler 사용해서 타입 정의하는건 어떨까요?

넵 수정했습니다!

KyeongJooni · 2026-01-14T14:11:51Z

+export { TextField } from './TextField';
+export type { TextFieldProps } from './TextField.types';


타입 임포트가 누락된거 가타요!

Suggested change

export { TextField } from './TextField';

export type { TextFieldProps } from './TextField.types';

export { TextField } from './TextField';

export type { TextFieldProps, TextFieldType } from './TextField.types';

헉 추가했습니다!!!!

KyeongJooni · 2026-01-14T14:14:02Z

현재 모든 텍스트 필드를 한 파일이 담당하고 있어 덩어리가 큰 것 같습니다 기본 래퍼는 거의 동일해서

TextField/ ├── TextField.tsx # 공통 로직 ├── CharField.tsx # type="char" 전용 ├── TextAreaField.tsx # type="textarea" 전용 ├── TextField.types.ts # 타입정의 ├── TextField.variants.ts #베리언트 파일 ├── PriceField.tsx # type="price" 전용 └── index.ts # 통합 export

이런식으로도 분리 고려해볼 수도 있을 것 같습니다!

말씀해 주신 구조로 CharField / TextAreaField / PriceField 래퍼를 분리해서 적용했습니다! 공통 로직은 TextField.tsx에 유지했습니다 추후에 전용 로직이 커지면 더 세분화하겠습니다!

jwj0620gcu · 2026-01-14T14:21:21Z

예빈님 textfield 구현 힘드실텐데 수고하셨습니다!
전 Controlled / Uncontrolled를 타입으로 분리해 충돌 막은 게 인상적이었습니다~!

github-actions · 2026-01-14T18:44:42Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

github-actions · 2026-01-14T18:56:52Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
❌ Prettier: 포맷 필요
❌ Test: 실패
❌ Build: 실패

github-actions · 2026-01-14T19:17:30Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

KyeongJooni

수정사항 반영된거 확인했고 추가로 코멘트 좀 더 달았습니다 확인부탁드려요! :)

KyeongJooni · 2026-01-15T01:06:41Z

+              type="text"
+              value={displayValue}
+              disabled={disabled}
+              maxLength={maxLen}


maxLen이 콤마도 포함해서 displayValue에 적용될 것 같은데

<input maxLength={isPrice ? undefined : maxLen} // ... />

이런식으로 수정하시면 더 좋을 것 같습니다!
아니면 handleChange에서 숫자 길이 제한하는 방법도 있을 것 같습니다!

말씀해 주신 대로 price 입력은 콤마 포함 길이로 제한되지 않도록 숫자만 추출한 값에 maxLength를 적용하도록 수정했습니다!

KyeongJooni · 2026-01-15T01:24:46Z

+  const maxLen = isChar
+    ? CHAR_MAX_LENGTH
+    : (maxLength ?? (isTextarea ? TEXTAREA_MAX_LENGTH : undefined));


중첩 삼항 연산자때문에 가독성이 쪼금 떨어지는 것 같아요 객체매핑을 통해 정의하거나 함수로 분리 고려해보시면 좋을 것 같습니다!

중첩 삼항 대신 getMaxLength 함수로 분리했습니다!

vercel · 2026-01-15T17:20:30Z

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

Project	Deployment	Review	Updated (UTC)
loopit	Ready	Preview, Comment	Jan 16, 2026 0:46am

github-actions · 2026-01-15T17:21:26Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 측정 불가

github-actions · 2026-01-16T00:46:38Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 측정 불가

KyeongJooni

LGTM 🥇

github-actions · 2026-01-16T07:58:11Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

YeBeenChoi added 14 commits January 14, 2026 20:55

feat: TextField 컴포넌트 기본 로직 구현

27b3cb5

feat: TextField props 타입 정의

326fa12

feat: TextField 스타일 variants 구성

649827c

docs: TextField 스토리북 스토리 추가

66dd3e7

test: TextField 기본 동작 테스트 추가

d97ecb9

chore: TextField export 추가

d5ad675

feat: TextField 컴포넌트 예제 추가

69399ff

feat: price 스타일 추가

7cc1637

feat: TextField 컴포넌트 로직 수정

50098ef

feat: Disabled인 경우 hover / focus 차단

3e30a16

chore: Playground 예제 수정

9bcc70c

chore: Playground 예제 픽셀값 수정

ea5fcc5

fix: Playground 충돌 해결

afe210f

docs: 불필요한 주석 제거

b2661ab

github-actions Bot assigned YeBeenChoi Jan 14, 2026

github-actions Bot requested a review from jwj0620gcu January 14, 2026 12:20

github-actions Bot added the ✨Feature 새로운 기능 label Jan 14, 2026

YeBeenChoi requested a review from KyeongJooni January 14, 2026 12:20

docs: 스토리북 수정

f470e00

KyeongJooni reviewed Jan 14, 2026

View reviewed changes

YeBeenChoi added 7 commits January 14, 2026 23:39

chore: 누락된 타입 임포트 추가

a1bdd06

refactor: 중복 정의된 스타일 값 수정

357654d

refactor: 스타일 구조 수정

6094651

refactor: TextField 값 정규화/상수화 및 onChange 타입 정리

cdb0ae5

refactor: TextField onChange 타입 통일

5fc7f49

feat: CharField 래퍼 추가

d8f5104

feat: TextAreaField 래퍼 추가

21e6728

YeBeenChoi added 4 commits January 15, 2026 03:42

feat: PriceField 래퍼 추가

dd3d6cf

refactor: TextField 타입 분리/정리

e9b4afb

refactor: TextField export 정리

86b3829

refactor: TextField 내부 로직 정리

e2d3275

refactor: 하드코딩된 상수 값 분리

023e7cf

refactor: TextField 상수 분리 및 포맷 정리

c90dd30

KyeongJooni reviewed Jan 15, 2026

View reviewed changes

YeBeenChoi added 2 commits January 16, 2026 02:15

fix: Price TextField 숫자 기준 maxLength 적용하도록 수정

84cbfac

refactor: TextField maxLength 계산 로직 함수로 분리

f8bcd4a

vercel Bot had a problem deploying to Preview January 15, 2026 17:21 Failure

Merge branch 'main' into 14-feat/TextField-컴포넌트-제작

4b088d4

vercel Bot deployed to Preview January 16, 2026 00:46 View deployment

KyeongJooni approved these changes Jan 16, 2026

View reviewed changes

Merge branch 'main' into 14-feat/TextField-컴포넌트-제작

b112e0b

vercel Bot deployed to Preview January 16, 2026 07:57 View deployment

YeBeenChoi merged commit 51e4027 into main Jan 16, 2026
5 checks passed

	onChange?.(e as React.ChangeEvent<HTMLInputElement>);
	onChange?.(e);

		export { TextField } from './TextField';
		export type { TextFieldProps } from './TextField.types';

Uh oh!

Hidden character warning

Conversation

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

Uh oh!

✨ 주요 변경사항

📝 작업 상세 내용

✅ 체크리스트

📸 스크린샷 (선택)

🔍 기타 참고사항

🔗 관련 이슈

Uh oh!

github-actions Bot commented Jan 14, 2026

PR 검증 결과

Uh oh!

github-actions Bot commented Jan 14, 2026

PR 검증 결과

Uh oh!

KyeongJooni left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jwj0620gcu commented Jan 14, 2026

Uh oh!

github-actions Bot commented Jan 14, 2026

PR 검증 결과

Uh oh!

github-actions Bot commented Jan 14, 2026

PR 검증 결과

Uh oh!

github-actions Bot commented Jan 14, 2026

PR 검증 결과

Uh oh!

KyeongJooni left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

YeBeenChoi commented Jan 14, 2026 •

edited

Loading

vercel Bot commented Jan 15, 2026 •

edited

Loading