[WIP] SearchInput 컴포넌트 구현

public/icons/Image.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable @next/next/no-img-element */
+import React from "react";
+
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+    src: string;
+    alt: string;
+};
+
+/**
+ * 테스트용 Image 컴포넌트
+ * - src는 필수
+ * - alt 기본값은 빈 문자열
+ */
+export default function Image({ src, alt = "", ...rest }: ImageProps) {
+    return <img src={src} alt={alt} {...rest} />;
+}

src/components/wrappers/SearchInput/SearchInput.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import IconButton from '@/components/basics/IconButton/IconButton';
+import clsx from 'clsx';
+import React from 'react';
+
+import CustomImage from '../../Icons/CustomImage';
+
+interface SearchInputProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onSubmit: (e: React.FormEvent) => void;
+  placeholder?: string;
+  size?: 'md' | 'lg';
+}
+
+export default function SearchInput({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = '검색하세요',
+  size = 'md',
+}: SearchInputProps) {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmit(e);
+  };
+
+  const baseStyle =
+    'flex justify-between pl-4 h-10 text-gray-800 bg-white placeholder-gray-400 rounded-full';
+  const sizes = {
+    md: 'w-70',
+    lg: 'w-full',
+  };
+  const classes = clsx(baseStyle, sizes[size]);
+
+  return (
+    <form onSubmit={handleSubmit} className={classes}>
+      <CustomImage src="file.svg" alt="img" />
+      <input
+        type="text"
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        className="ml-1 flex-1 bg-transparent outline-none"
+      />
+      <IconButton icon="IC_Chat" ariaLabel="search button" />
+    </form>
+  );
+}

src/stories/SearchInput.stories.tsx

@@ -0,0 +1,45 @@
+// SearchInput.stories.tsx
+import SearchInput from '@/components/wrappers/SearchInput/SearchInput';
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+const meta = {
+  title: 'Components/SearchInput',
+  component: SearchInput,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['md', 'lg'],
+    },
+  },
+} satisfies Meta<typeof SearchInput>;
+
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+
+function ControlledSearchInput(
+  args: typeof SearchInput extends React.ComponentType<infer P> ? P : never
+) {
+  const [value, setValue] = useState('');
+
+  return (
+    <SearchInput
+      {...args}
+      value={value}
+      onChange={e => setValue(e.target.value)}
+      onSubmit={e => {
+        e.preventDefault();
+        console.log('Submit:', value);
+      }}
+    />
+  );
+}
+
+export const Default: Story = {
+  render: args => <ControlledSearchInput {...args} />,
+  args: {
+    placeholder: '검색하세요',
+    size: 'md',
+  },
+};