feat: 커스텀 Input 컴포넌트 생성 및 Storybook 스토리 작성

src/components/Input/Input.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Input from './Input';
+
+const meta = {
+  title: 'Component/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['default', 'small', 'large'],
+    },
+    placeholder: { control: 'text' },
+    disabled: { control: 'boolean' },
+    error: { control: 'boolean' },
+    errorMessage: { control: 'text' },
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+    size: 'default',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    placeholder: 'Small input...',
+    size: 'small',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    placeholder: 'Large input...',
+    size: 'large',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Disabled input...',
+    disabled: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    placeholder: 'Input with error...',
+    error: true,
+    errorMessage: 'This field is required.',
+  },
+};

src/components/Input/Input.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Input as ShadcnInput } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+
+interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  size?: 'default' | 'small' | 'large';
+  error?: boolean;
+  errorMessage?: string;
+}
+
+const sizeClasses = {
+  default: 'h-10 px-4 py-2 text-base',
+  small: 'h-8 px-3 py-1 text-sm',
+  large: 'h-12 px-5 py-3 text-lg',
+};
+
+function Input({
+  size = 'default',
+  error,
+  errorMessage,
+  className,
+  ...props
+}: InputProps) {
+  return (
+    <div className="flex flex-col space-y-1">
+      <ShadcnInput
+        className={cn(
+          'border rounded-md ',
+          sizeClasses[size],
+          error
+            ? 'border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-500 ring-red-500'
+            : 'border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 ring-blue-500',
+          className,
+        )}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+      />
+      {error && errorMessage && (
+        <p className="text-sm text-red-500 mt-1">{errorMessage}</p>
+      )}
+    </div>
+  );
+}
+
+export default Input;