[Feat] TextField 컴포넌트 구현 #65
Conversation
…m-1-FE into feat/#3ab275847
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
apps/web/src/app/page.tsxOops! Something went wrong! :( ESLint: 9.17.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@repo/eslint-config' imported from /eslint.config.mjs """ 워크스루이 풀 리퀘스트는 웹 애플리케이션의 폼 처리 및 UI 컴포넌트 개선에 중점을 둡니다. 변경 사항
제안된 라벨
제안된 리뷰어
관련 가능성 있는 PR
토끼의 시 🐰
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (10)
packages/ui/src/components/TextField/context.ts (1)
5-9: 타입 정의에 JSDoc 문서화 추가 필요각 속성의 용도와 사용 방법을 명확하게 이해할 수 있도록 JSDoc 문서화를 추가하는 것이 좋습니다.
+/** + * TextField 컴포넌트의 Context 값을 정의하는 인터페이스 + */ export type TextFieldContextValue = { + /** input 요소의 id 속성값 */ id?: string; + /** TextField의 변형 타입 */ variant?: TextFieldVariant; + /** 에러 상태 여부 */ isError?: boolean; };packages/ui/src/components/TextField/TextFieldLabel.tsx (1)
15-15: className 결합 방식 개선 필요템플릿 리터럴을 사용한 className 결합은 불필요한 공백을 만들 수 있습니다. clsx나 classnames 같은 유틸리티를 사용하는 것이 좋습니다.
-className={`${labelStyle({ isError })} ${className}`} +import clsx from 'clsx'; +className={clsx(labelStyle({ isError }), className)}packages/ui/src/components/TextField/TextFieldSubmit.tsx (1)
26-26: 아이콘 속성의 유연성 개선 필요아이콘의 크기와 색상이 하드코딩되어 있어 재사용성이 제한됩니다. props를 통해 설정할 수 있도록 변경하는 것이 좋습니다.
+export type TextFieldSubmitProps = Omit< + ComponentPropsWithoutRef<'button'>, + 'children' +> & { + iconSize?: number; + iconColors?: { + default: string; + error: string; + }; +}; -<Icon name="send" size={32} color={isError ? 'grey200' : 'grey950'} /> +<Icon + name="send" + size={iconSize ?? 32} + color={isError ? iconColors?.error ?? 'grey200' : iconColors?.default ?? 'grey950'} +/>packages/ui/src/components/TextField/TextFieldRoot.tsx (1)
10-34: 컴포넌트 구현이 React 모범 사례를 잘 따르고 있습니다.forwardRef를 사용하여 ref 전달을 지원하고, Context를 통해 하위 컴포넌트와 상태를 공유하는 구현이 잘 되어있습니다.
다만, 성능 최적화를 위해 다음과 같은 개선을 고려해보세요:
-export const TextFieldRoot = forwardRef<HTMLDivElement, TextFieldProps>( +export const TextFieldRoot = forwardRef<HTMLDivElement, TextFieldProps>(( + { + id, + variant = 'default', + isError = false, + children, + className = '', + ...props + }, + ref +) => { + const contextValue = useMemo( + () => ({ id, variant, isError }), + [id, variant, isError] + ); + + return ( + <TextFieldContext.Provider value={contextValue}> + <div + ref={ref} + className={`${textFieldWrapperStyle} ${className}`} + {...props} + > + {children} + </div> + </TextFieldContext.Provider> + ); +});packages/ui/src/components/TextField/TextField.tsx (2)
6-44: 문서화가 상세하고 예제가 잘 구성되어 있습니다.다양한 사용 사례를 포함한 문서화가 잘 되어 있습니다. 특히 비제어/제어 컴포넌트와 유효성 검사 예제가 실용적입니다.
추가로 고려해볼 사항:
- TypeScript 예제 추가
- 에러 메시지 표시 방법에 대한 예제 추가
45-49: 컴파운드 컴포넌트 패턴이 적절하게 구현되어 있습니다.Object.assign을 사용한 컴포넌트 구성이 깔끔합니다. 다만, 향후 확장성을 위해 다음과 같은 구조도 고려해보세요:
-export const TextField = Object.assign(TextFieldRoot, { +const TextField = Object.assign(TextFieldRoot, { Label: TextFieldLabel, Input: TextFieldInput, Submit: TextFieldSubmit, }); + +TextField.displayName = 'TextField'; + +export { TextField };packages/ui/src/components/TextField/TextField.css.ts (1)
16-17: 매직 넘버를 상수로 분리하는 것이 좋습니다.minHeight와 padding 값을 상수로 분리하여 재사용성과 일관성을 높이는 것이 좋습니다.
+const TEXT_FIELD_CONSTANTS = { + MIN_HEIGHT: '59px', + PADDING: '16px', +} as const; + base: { width: '100%', - minHeight: '59px', - padding: '16px', + minHeight: TEXT_FIELD_CONSTANTS.MIN_HEIGHT, + padding: TEXT_FIELD_CONSTANTS.PADDING,packages/ui/src/components/TextField/TextFieldInput.tsx (1)
25-48: 상수 값을 분리하고 상태 관리를 개선하면 좋을 것 같습니다.
maxLength기본값 500은 상수로 분리하는 것이 좋습니다.- 제어/비제어 상태 관리 로직을 단순화할 수 있습니다.
다음과 같이 개선해보세요:
+const DEFAULT_MAX_LENGTH = 500; + export const TextFieldInput = forwardRef< HTMLTextAreaElement, TextFieldInputProps >( ( { - maxLength = 500, + maxLength = DEFAULT_MAX_LENGTH, showCounter = true, value: controlledValue, defaultValue,apps/web/src/app/page.tsx (1)
18-34: 폼 검증 로직을 강화하면 좋을 것 같습니다.
- 성공 메시지가 너무 일반적입니다.
- 폼 검증 스키마를 별도로 분리하면 좋을 것 같습니다.
다음과 같은 개선을 제안드립니다:
// formSchema.ts import { z } from 'zod'; export const formSchema = z.object({ topic: z.string() .min(1, '주제를 입력해주세요') .max(500, '500자 이내로 입력해주세요'), aiUpgrade: z.string() .max(500, '500자 이내로 입력해주세요') }); export type FormValues = z.infer<typeof formSchema>;apps/web/package.json (1)
19-20: 의존성 버전 관리를 개선하면 좋을 것 같습니다.
react-hook-form의 버전 범위가 너무 넓습니다.- 주요 업데이트로 인한 호환성 문제가 발생할 수 있습니다.
다음과 같이 버전을 고정하는 것을 추천드립니다:
"react-dom": "^18", - "react-hook-form": "^7.54.2" + "react-hook-form": "7.54.2"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (13)
apps/web/package.json(1 hunks)apps/web/src/app/page.tsx(3 hunks)packages/ui/src/components/TextField/TextField.css.ts(1 hunks)packages/ui/src/components/TextField/TextField.tsx(1 hunks)packages/ui/src/components/TextField/TextFieldCounter.tsx(1 hunks)packages/ui/src/components/TextField/TextFieldInput.tsx(1 hunks)packages/ui/src/components/TextField/TextFieldLabel.tsx(1 hunks)packages/ui/src/components/TextField/TextFieldRoot.tsx(1 hunks)packages/ui/src/components/TextField/TextFieldSubmit.tsx(1 hunks)packages/ui/src/components/TextField/context.ts(1 hunks)packages/ui/src/components/index.ts(1 hunks)packages/ui/src/utils/index.ts(1 hunks)packages/ui/src/utils/isNill.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/ui/src/utils/index.ts
🔇 Additional comments (6)
packages/ui/src/utils/isNill.ts (1)
1-2: 구현이 깔끔하고 정확합니다!타입 서술어(type predicate)를 사용한 타입 가드 구현이 매우 적절합니다.
null과undefined를 동시에 체크하기 위해 느슨한 동등 비교(==)를 사용한 것도 좋은 선택입니다.packages/ui/src/components/TextField/TextFieldLabel.tsx (1)
8-20: props 타입 안전성 강화 필요props spreading 사용 시 예상치 못한 속성이 전달될 수 있습니다. 필요한 props만 명시적으로 전달하는 것이 좋습니다.
packages/ui/src/components/TextField/TextFieldRoot.tsx (1)
5-8: Props 타입 정의가 명확하고 잘 구성되어 있습니다.컴포넌트의 Props가 ReactNode, TextFieldContextValue, 그리고 div의 기본 속성들을 포함하여 잘 정의되어 있습니다.
packages/ui/src/components/index.ts (1)
23-30: 내보내기가 일관된 패턴을 따르고 있습니다.TextField 컴포넌트와 관련 타입들의 내보내기가 프로젝트의 기존 패턴을 잘 따르고 있습니다.
packages/ui/src/components/TextField/TextFieldInput.tsx (1)
1-23: 타입 정의가 잘 되어있습니다!타입스크립트 타입 정의가 명확하고,
Omit을 사용하여 중복되는 prop들을 적절히 제거했습니다.apps/web/src/app/page.tsx (1)
158-167:⚠️ Potential issue중복된 TextField 구현이 있습니다.
- 동일한
id를 가진 TextField가 중복 구현되어 있습니다.isErrorprop이 있지만 실제 에러 메시지를 표시하지 않습니다.중복된 TextField를 제거하고, 에러 처리를 다음과 같이 개선하세요:
- <TextField id="ai-field" variant="button" isError> - <TextField.Label>AI 업그레이드</TextField.Label> - <TextField.Input - placeholder="AI에게 요청하여 글 업그레이드하기" - maxLength={500} - showCounter - {...register('aiUpgrade')} - /> - <TextField.Submit type="submit" /> - </TextField>Likely invalid or redundant comment.
| export function isNil(value: unknown): value is null | undefined { | ||
| return value == null; | ||
| } |
There was a problem hiding this comment.
💡 Codebase verification
파일 이름 수정과 import 구문 업데이트가 필요합니다.
다음 변경이 필요합니다:
packages/ui/src/utils/isNill.ts→packages/ui/src/utils/isNil.ts파일 이름 변경packages/ui/src/utils/index.ts파일의 import 경로 수정
🔗 Analysis chain
파일 이름 오타를 수정해 주세요.
현재 파일 이름이 isNill.ts로 되어 있는데, 함수 이름인 isNil과 일치하도록 isNil.ts로 수정하는 것이 좋겠습니다. 이는 다른 개발자들의 혼란을 방지하고 일관성을 유지하는데 도움이 될 것입니다.
다음과 같이 파일 이름을 변경해 주세요:
-packages/ui/src/utils/isNill.ts
+packages/ui/src/utils/isNil.ts관련 import 구문도 함께 수정이 필요할 수 있습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Find any imports of the misspelled filename
# Search for imports of 'isNill'
rg "from ['\"].*isNill['\"]" --type ts
Length of output: 109
Script:
#!/bin/bash
# Search for any mentions of 'isNill' in all files
rg "isNill" --type-not ts
# Search for any other potential typescript imports or references we might have missed
rg "isNill" --type ts -g '!packages/ui/src/utils/index.ts'
Length of output: 84
| isError?: boolean; | ||
| }; | ||
|
|
||
| export const TextFieldContext = createContext<TextFieldContextValue>({}); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Context의 기본값 처리 개선 필요
빈 객체를 기본값으로 사용하면 Provider 없이 Context를 사용할 때 런타임 에러가 발생할 수 있습니다. 명시적인 기본값을 설정하는 것이 좋습니다.
-export const TextFieldContext = createContext<TextFieldContextValue>({});
+export const TextFieldContext = createContext<TextFieldContextValue>({
+ id: undefined,
+ variant: 'default',
+ isError: false
+});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const TextFieldContext = createContext<TextFieldContextValue>({}); | |
| export const TextFieldContext = createContext<TextFieldContextValue>({ | |
| id: undefined, | |
| variant: 'default', | |
| isError: false | |
| }); |
| >(({ current, max, className = '', ...props }, ref) => { | ||
| const { isError } = useContext(TextFieldContext); | ||
|
|
||
| return ( | ||
| <span | ||
| ref={ref} | ||
| className={`${counterStyle({ isError })} ${className}`} | ||
| {...props} | ||
| > | ||
| {current}/{max} | ||
| </span> | ||
| ); | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
접근성 및 유효성 검사 개선 필요
- 스크린 리더 사용자를 위한 aria-label 추가가 필요합니다.
- current 값이 max를 초과하는 경우에 대한 처리가 필요합니다.
return (
<span
ref={ref}
className={`${counterStyle({ isError })} ${className}`}
+ aria-label={`현재 ${current}자, 최대 ${max}자`}
+ role="status"
{...props}
>
{current}/{max}
</span>
);또한 props 타입에 유효성 검사를 추가하는 것이 좋습니다:
export type TextFieldCounterProps = {
current: number;
max: number;
onExceed?: (current: number, max: number) => void;
} & ComponentPropsWithoutRef<'span'>;| bottom: '45px', | ||
| right: vars.space[12], |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Submit 버튼의 위치 계산 방식 개선이 필요합니다.
절대 위치 지정 시 하단 여백을 고정값으로 사용하는 것은 responsive 디자인에 문제가 될 수 있습니다.
base: {
position: 'absolute',
- bottom: '45px',
+ bottom: '50%',
+ transform: 'translateY(50%)',
right: vars.space[12],📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| bottom: '45px', | |
| right: vars.space[12], | |
| bottom: '50%', | |
| transform: 'translateY(50%)', | |
| right: vars.space[12], |
| const handleResizeHeight = () => { | ||
| const textarea = textareaRef.current; | ||
| if (isNil(textarea)) return; | ||
|
|
||
| // height 초기화 | ||
| textarea.style.height = 'auto'; | ||
|
|
||
| // 스크롤 높이에 따라 높이 조절 | ||
| const newHeight = textarea.scrollHeight; | ||
| textarea.style.height = `${newHeight}px`; | ||
|
|
||
| // 한 줄 높이 = 상하패딩(32px) + 라인높이(27px) = 59px | ||
| setIsMultiline(newHeight > 59); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
높이 계산 로직을 개선할 필요가 있습니다.
- 매직 넘버 59px이 하드코딩되어 있습니다.
- 높이 계산 로직이 스타일 변경에 취약할 수 있습니다.
다음과 같이 개선해보세요:
+const LINE_HEIGHT = 27;
+const VERTICAL_PADDING = 32;
+const SINGLE_LINE_HEIGHT = LINE_HEIGHT + VERTICAL_PADDING;
+
const handleResizeHeight = () => {
const textarea = textareaRef.current;
if (isNil(textarea)) return;
// height 초기화
textarea.style.height = 'auto';
// 스크롤 높이에 따라 높이 조절
const newHeight = textarea.scrollHeight;
textarea.style.height = `${newHeight}px`;
- // 한 줄 높이 = 상하패딩(32px) + 라인높이(27px) = 59px
- setIsMultiline(newHeight > 59);
+ setIsMultiline(newHeight > SINGLE_LINE_HEIGHT);
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleResizeHeight = () => { | |
| const textarea = textareaRef.current; | |
| if (isNil(textarea)) return; | |
| // height 초기화 | |
| textarea.style.height = 'auto'; | |
| // 스크롤 높이에 따라 높이 조절 | |
| const newHeight = textarea.scrollHeight; | |
| textarea.style.height = `${newHeight}px`; | |
| // 한 줄 높이 = 상하패딩(32px) + 라인높이(27px) = 59px | |
| setIsMultiline(newHeight > 59); | |
| }; | |
| const LINE_HEIGHT = 27; | |
| const VERTICAL_PADDING = 32; | |
| const SINGLE_LINE_HEIGHT = LINE_HEIGHT + VERTICAL_PADDING; | |
| const handleResizeHeight = () => { | |
| const textarea = textareaRef.current; | |
| if (isNil(textarea)) return; | |
| // height 초기화 | |
| textarea.style.height = 'auto'; | |
| // 스크롤 높이에 따라 높이 조절 | |
| const newHeight = textarea.scrollHeight; | |
| textarea.style.height = `${newHeight}px`; | |
| setIsMultiline(newHeight > SINGLE_LINE_HEIGHT); | |
| }; |
| const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => { | ||
| if (maxLength && e.target.value.length > maxLength) return; | ||
| if (isNil(controlledValue)) { | ||
| setUncontrolledValue(e.target.value); | ||
| } | ||
| handleResizeHeight(); | ||
| onChange?.(e); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| handleResizeHeight(); | ||
| }, [value]); | ||
|
|
||
| return ( | ||
| <> | ||
| <textarea | ||
| rows={1} | ||
| id={id} | ||
| ref={mergeRefs(ref, textareaRef)} | ||
| className={`${textFieldStyle({ variant })} ${className}`} | ||
| value={value} | ||
| onChange={handleChange} | ||
| data-multiline={isMultiline} | ||
| {...props} | ||
| /> | ||
| {showCounter && ( | ||
| <TextFieldCounter current={value.length} max={maxLength} /> | ||
| )} | ||
| </> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| TextFieldInput.displayName = 'TextField.Input'; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
접근성 개선이 필요합니다.
- 텍스트 영역에
aria-label또는aria-labelledby속성이 없습니다. - 문자 수 카운터에 대한 스크린 리더 지원이 필요합니다.
다음과 같이 개선해보세요:
<textarea
rows={1}
id={id}
ref={mergeRefs(ref, textareaRef)}
className={`${textFieldStyle({ variant })} ${className}`}
value={value}
onChange={handleChange}
data-multiline={isMultiline}
+ aria-labelledby={id}
+ aria-describedby={showCounter ? `${id}-counter` : undefined}
{...props}
/>
{showCounter && (
<TextFieldCounter
+ id={`${id}-counter`}
+ aria-label="현재 글자 수"
current={value.length}
max={maxLength}
/>
)}Committable suggestion skipped: line range outside the PR's diff.
|
스크롤바 노출 관련 요구사항을 잊었네요.. 구현해두겠습니다! |
| minHeight: '59px', | ||
| padding: '16px', | ||
| borderRadius: '12px', |
There was a problem hiding this comment.
단위 rem으로 부탁드려요!!
| minHeight: '59px', | |
| padding: '16px', | |
| borderRadius: '12px', | |
| minHeight: '5.9rem', | |
| padding: '1.6rem', | |
| borderRadius: '1.2rem', |
There was a problem hiding this comment.
전부 수정했습니다~! 스크롤 스타일, rem, 디자인 요구사항 변경 모두 반영했어요!
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/ui/src/components/TextField/TextFieldInput.tsx (1)
65-72: maxLength 검증을 HTML 속성으로 개선해주세요.현재 수동으로 처리하는 maxLength 검증을 HTML의 기본 maxLength 속성을 사용하도록 변경하면 더 효율적일 것 같습니다.
<textarea rows={1} id={id} ref={mergeRefs(ref, textareaRef)} className={`${textFieldStyle({ variant })} ${className}`} value={value} + maxLength={maxLength} onChange={handleChange} data-multiline={isMultiline} {...props} />packages/ui/src/components/TextField/TextField.css.ts (1)
51-65: 스크롤바 스타일링의 브라우저 호환성을 개선해주세요.Firefox에서의 스크롤바 스타일링이 제한적입니다. 다음과 같이 개선하면 좋을 것 같습니다:
selectors: { '&::-webkit-scrollbar': { width: '0.6rem', }, '&::-webkit-scrollbar-thumb': { backgroundColor: vars.colors.grey200, borderRadius: '0.4rem', backgroundClip: 'padding-box', }, '&::-webkit-scrollbar-track': { backgroundColor: 'transparent', }, + '&::-moz-scrollbar': { + width: '0.6rem', + }, + '&::-moz-scrollbar-thumb': { + backgroundColor: vars.colors.grey200, + borderRadius: '0.4rem', + }, + '&::-moz-scrollbar-track': { + backgroundColor: 'transparent', + }, },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/web/src/app/page.tsx(3 hunks)packages/ui/src/components/TextField/TextField.css.ts(1 hunks)packages/ui/src/components/TextField/TextFieldInput.tsx(1 hunks)
🔇 Additional comments (3)
packages/ui/src/components/TextField/TextFieldInput.tsx (2)
50-63: 높이 계산 로직의 매직 넘버를 상수로 분리해주세요.이전 리뷰에서 지적된 사항이 아직 반영되지 않았습니다.
81-91: 접근성 속성이 누락되었습니다.이전 리뷰에서 제안된 aria 속성 추가가 아직 반영되지 않았습니다.
apps/web/src/app/page.tsx (1)
136-137: maxLength 값의 일관성을 확인해주세요.topic 필드는 500자로 제한되어 있지만, aiUpgrade 필드는 5000자로 설정되어 있습니다. 의도된 설정인지 확인이 필요합니다.
Also applies to: 151-152
| <TextField id="ai-field" variant="button" isError> | ||
| <TextField.Label>AI 업그레이드</TextField.Label> | ||
| <TextField.Input | ||
| placeholder="AI에게 요청하여 글 업그레이드하기" | ||
| maxLength={5000} | ||
| showCounter | ||
| {...register('aiUpgrade')} | ||
| /> | ||
| <TextField.Submit type="submit" /> | ||
| </TextField> |
There was a problem hiding this comment.
중복된 TextField를 제거해주세요.
동일한 id와 register를 사용하는 TextField가 중복 구현되어 있습니다. 이는 다음과 같은 문제를 일으킬 수 있습니다:
- id 중복으로 인한 접근성 문제
- 동일한 필드에 대한 중복 등록
| }; | ||
|
|
||
| const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => { | ||
| if (maxLength && e.target.value.length > maxLength) return; |
There was a problem hiding this comment.
…m-1-FE into feat/#3ab275847
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (1)
apps/web/src/app/page.tsx(3 hunks)
🔇 Additional comments (3)
apps/web/src/app/page.tsx (3)
3-3: 폼 설정이 잘 구현되었습니다!타입 정의와 react-hook-form 설정이 깔끔하게 구현되었습니다.
Also applies to: 19-35
164-173: 중복된 TextField를 제거해주세요.동일한 id와 register를 사용하는 TextField가 중복 구현되어 있습니다. 이는 다음과 같은 문제를 일으킬 수 있습니다:
- id 중복으로 인한 접근성 문제
- 동일한 필드에 대한 중복 등록
37-40: 🛠️ Refactor suggestion폼 제출 처리 개선이 필요합니다.
현재 구현은 다음과 같은 개선이 필요합니다:
- 폼 제출 실패 시 에러 처리가 없습니다
- 성공 메시지가 하드코딩되어 있습니다
다음과 같이 개선하는 것을 제안드립니다:
- const onSubmit = (data: FormValues) => { - console.log('Form data:', data); - notify1(); // 성공 토스트 표시 - }; + const onSubmit = async (data: FormValues) => { + try { + // API 호출 또는 데이터 처리 + await handleFormData(data); + notify1(); + } catch (error) { + notify2(); + console.error('폼 제출 실패:', error); + } + };Likely invalid or redundant comment.
| <TextField.Input | ||
| placeholder="주제를 적어주세요" | ||
| maxLength={5000} | ||
| {...register('topic', { | ||
| required: '주제를 입력해주세요', | ||
| maxLength: { | ||
| value: 500, | ||
| message: '500자 이내로 입력해주세요', | ||
| }, | ||
| })} | ||
| /> |
There was a problem hiding this comment.
문자 제한 설정이 일관되지 않습니다.
다음과 같은 문제점이 있습니다:
- maxLength prop이 5000으로 설정되어 있지만 validation은 500자로 제한되어 있습니다
- TextField 컴포넌트 간 maxLength 값이 일관되지 않습니다
다음과 같이 수정하는 것을 제안드립니다:
<TextField.Input
placeholder="주제를 적어주세요"
- maxLength={5000}
+ maxLength={500}
{...register('topic', {
required: '주제를 입력해주세요',
maxLength: {
value: 500,
message: '500자 이내로 입력해주세요',
},
})}
/>Also applies to: 155-159
* chore(apps/web): react-hook-form 설치 * feat(packages/ui): isNill 함수 추가 * chore(packages/ui): isNill export * feat(packages/ui): TextField 컴포넌트 구현 * test(apps/web): 예시 추가 * fix(packages/ui): 디자인 요구사항 수정
관련 이슈
#39
변경 사항
TextField 컴포넌트를 컴파운드하게 제공할 수 있도록 했어요. 제어 컴포넌트, 비제어 컴포넌트로 모두 활용 가능하고, 에러 상태를 context를 통해 관리할 수 있도록 설계했어요.
TextField.Label의 경우는 기존 Label 컴포넌트를 재활용했어요. TextField.Submit의 경우는 추후 IconButton이 만들어지면 교체할 예정이에요.
스크롤 및 디자인 변경사항
레퍼런스
Summary by CodeRabbit
Summary by CodeRabbit
새로운 기능
react-hook-form라이브러리 추가TextField컴포넌트 도입isNil추가로 null/undefined 체크 기능 강화버그 수정
문서화
유틸리티
mergeRefs함수의 경로 수정