refactor: Field 컴포넌트에서 labelText와 id를 분리하여 명확히 정의

- `label` prop을 `labelText`로 변경
- `Field` 컴포넌트에서 `labelText`와 `id`를 명시적으로 받아서 `label`과 `Input`의 `id`에 적용하도록 수정
-`InputHTMLAttributes<HTMLInputElement>`를 상속받아 추가적인 `input` 속성을 직접 전달할 수 있도록 개선

frontend/src/components/_common/Field/Field.stories.tsx

@@ -6,12 +6,9 @@ const meta: Meta<typeof Field> = {
   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<typeof meta>;
 
 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: '검색어를 입력하세요.',
   },
 };

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<HTMLInputElement> {
+  labelText: string;
   description?: string;
-  inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 
-export default function Field({ label, description = '', inputProps }: FieldProps) {
+export default function Field({ labelText, id, description = '', ...props }: FieldProps) {
   return (
     <div css={s_field}>
-      <label css={s_label} htmlFor={label}>
-        {label}
+      <label css={s_label} htmlFor={id}>
+        {labelText}
       </label>
       {description && <div css={s_description}>{description}</div>}
-      <Input id={label} {...inputProps} />
+      <Input id={id} {...props} />
     </div>
   );
 }