diff --git a/frontend/src/components/_common/Field/Field.stories.tsx b/frontend/src/components/_common/Field/Field.stories.tsx index 3c896a2f8..84b3898b4 100644 --- a/frontend/src/components/_common/Field/Field.stories.tsx +++ b/frontend/src/components/_common/Field/Field.stories.tsx @@ -6,12 +6,9 @@ const meta: Meta = { title: 'Components/Field', component: Field, argTypes: { - label: { control: 'text' }, + labelText: { control: 'text' }, description: { control: 'text' }, - inputProps: { - control: 'object', - description: 'Input 컴포넌트에 전달할 속성들', - }, + id: { control: 'text' }, }, }; @@ -21,43 +18,39 @@ type Story = StoryObj; export const Default: Story = { args: { - label: '사용자 이름', + labelText: '사용자 이름', description: '사용자 이름을 입력하세요.', - inputProps: { - type: 'text', - placeholder: '사용자 이름을 입력하세요.', - }, + type: 'text', + id: 'userName', + placeholder: '사용자 이름을 입력하세요.', }, }; export const WithDescription: Story = { args: { - label: '이메일', + labelText: '이메일', description: '이메일 주소를 입력해 주세요.', - inputProps: { - type: 'email', - placeholder: '이메일을 입력하세요.', - }, + type: 'email', + id: 'email', + placeholder: '이메일을 입력하세요.', }, }; export const WithLongDescription: Story = { args: { - label: '비밀번호', + labelText: '비밀번호', description: '비밀번호는 최소 8자 이상이어야 하며, 문자와 숫자를 혼합하여 입력해 주세요.', - inputProps: { - type: 'password', - placeholder: '비밀번호를 입력하세요.', - }, + type: 'password', + id: 'password', + placeholder: '비밀번호를 입력하세요.', }, }; export const WithoutDescription: Story = { args: { - label: '검색', - inputProps: { - type: 'text', - placeholder: '검색어를 입력하세요.', - }, + labelText: '검색', + type: 'text', + id: 'search', + placeholder: '검색어를 입력하세요.', }, }; diff --git a/frontend/src/components/_common/Field/index.tsx b/frontend/src/components/_common/Field/index.tsx index 5b4054358..3f5ccd7c8 100644 --- a/frontend/src/components/_common/Field/index.tsx +++ b/frontend/src/components/_common/Field/index.tsx @@ -3,20 +3,19 @@ import type { InputHTMLAttributes } from 'react'; import Input from '../Input'; import { s_description, s_field, s_label } from './Field.styles'; -interface FieldProps { - label: string; +interface FieldProps extends InputHTMLAttributes { + labelText: string; description?: string; - inputProps?: InputHTMLAttributes; } -export default function Field({ label, description = '', inputProps }: FieldProps) { +export default function Field({ labelText, id, description = '', ...props }: FieldProps) { return (
-
); }