스토리 파일 추가

src/components/input/CardNumberInput.stories.ts

@@ -2,15 +2,20 @@ import { Meta, StoryObj } from '@storybook/react';
 import CardNumberInput from './CardNumberInput';
 
 const meta = {
-  title: 'Input/CardNumberInput',
+  title: 'Components/Input/CardNumberInput',
   component: CardNumberInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
 } satisfies Meta<typeof CardNumberInput>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    onChange: () => {},
+    placeholder: '카드 번호를 입력해주세요',
+    onChange: (value) => console.log('Changed value:', value),
   },
 };

src/components/input/CvcInput.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CvcInput from './CvcInput';
+
+const meta = {
+  title: 'Components/Input/CvcInput',
+  component: CvcInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CvcInput>;
+
+export default meta;
+type Story = StoryObj<typeof CvcInput>;
+
+export const Default: Story = {
+  args: {
+    onChange: (value: string) => console.log('CVC value:', value),
+  },
+};
+
+export const WithInitialValue: Story = {
+  args: {
+    onChange: (value: string) => console.log('CVC value:', value),
+  },
+};

src/components/input/ExpireDateInput.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ExpireDateInput from './ExpireDateInput';
+
+const meta = {
+  title: 'Components/Input/ExpireDateInput',
+  component: ExpireDateInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ExpireDateInput>;
+
+export default meta;
+type Story = StoryObj<typeof ExpireDateInput>;
+
+export const Default: Story = {
+  args: {
+    onChange: (value) => console.log('Changed:', value),
+    onFull: (e) => console.log('Full:', e),
+  },
+};
+
+export const WithInitialValue: Story = {
+  args: {
+    ...Default.args,
+    defaultValue: '12',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};

src/components/input/Input.stories.ts

@@ -2,8 +2,12 @@ import { Meta, StoryObj } from '@storybook/react';
 import Input from './Input';
 
 const meta = {
-  title: 'Input/Input',
+  title: 'Components/Input/Input',
   component: Input,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
 } satisfies Meta<typeof Input>;
 
 export default meta;

src/components/input/InputBox.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import InputBox from './InputBox';
+
+const meta = {
+  title: 'Components/Input/InputBox',
+  component: InputBox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof InputBox>;
+
+export default meta;
+type Story = StoryObj<typeof InputBox>;
+
+export const Default: Story = {
+  args: {
+    children: 'Input Box Content',
+    className: 'p-4',
+  },
+};
+
+export const WithCustomStyle: Story = {
+  args: {
+    children: 'Custom Styled Input Box',
+    className: 'p-6 bg-red-300',
+  },
+};
+
+export const WithNestedContent: Story = {
+  args: {
+    children: (
+      <div>
+        <h3 className="font-bold">Nested Content</h3>
+        <p>This is nested content inside InputBox</p>
+      </div>
+    ),
+    className: 'p-4',
+  },
+};

src/components/input/NameInput.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NameInput from './NameInput';
+
+const meta = {
+  title: 'Components/Input/NameInput',
+  component: NameInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof NameInput>;
+
+export default meta;
+type Story = StoryObj<typeof NameInput>;
+
+export const Default: Story = {
+  args: {
+    onChange: (value) => console.log('Name changed:', value),
+    maxLength: 30,
+  },
+};
+
+export const CustomMaxLength: Story = {
+  args: {
+    onChange: (value) => console.log('Name changed:', value),
+    maxLength: 10,
+  },
+};

src/components/input/NameInput.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import Input from './Input';
 import InputBox from './InputBox';
 import React from 'react';
@@ -9,16 +8,18 @@ interface NameInputProps {
 }
 const NameInput = ({ onChange, maxLength = 30 }: NameInputProps) => {
   const [value, setValue] = React.useState('');
-  useEffect(() => {
-    onChange?.(value);
-  }, [value]);
+
+  const handleChange = (v: string) => {
+    setValue(v);
+    onChange?.(v);
+  };
   return (
     <InputBox>
       <Input
         type="text"
         placeholder="카드 소유자"
         value={value}
-        onChange={(v) => setValue(v.target.value)}
+        onChange={(e) => handleChange(e.target.value)}
         maxLength={maxLength}
       />
     </InputBox>

src/components/input/PasswordInput.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PasswordInput from './PasswordInput';
+
+const meta = {
+  title: 'Components/Input/PasswordInput',
+  component: PasswordInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof PasswordInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    onChange: (value: string) => {
+      console.log('Password value:', value);
+    },
+  },
+};