✨[Feat] 검색창 구현 #120

public/icons/SearchIcon.tsx

@@ -0,0 +1,28 @@
+import { SVGProps } from 'react';
+
+interface SearchIconProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+}
+
+function SearchIcon({ width = 12, height = 12, ...props }: SearchIconProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M13 13L10.1 10.1M11.6667 6.33333C11.6667 9.27885 9.27885 11.6667 6.33333 11.6667C3.38781 11.6667 1 9.27885 1 6.33333C1 3.38781 3.38781 1 6.33333 1C9.27885 1 11.6667 3.38781 11.6667 6.33333Z"
+        stroke="currentColor"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export default SearchIcon;

src/components/search-box/SearchBox.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SearchBox from './SearchBox';
+
+const meta = {
+  title: 'Components/SearchBox',
+  component: SearchBox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SearchBox>;
+
+export default meta;
+type Story = StoryObj<typeof SearchBox>;
+
+export const Default: Story = {
+  args: {
+    value: '',
+    onChange: (e) => console.log('Search value:', e.target.value),
+    placeholder: '검색어를 입력해주세요',
+  },
+};

src/components/search-box/SearchBox.test.tsx

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import SearchBox from './SearchBox';
+
+describe('SearchBox', () => {
+  const mockOnChange = jest.fn();
+  const defaultProps = {
+    value: '',
+    onChange: mockOnChange,
+  };
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  it('기본 placeholder 텍스트가 올바르게 렌더링되는지 확인', () => {
+    render(<SearchBox {...defaultProps} />);
+    expect(
+      screen.getByPlaceholderText('검색어를 입력해주세요'),
+    ).toBeInTheDocument();
+  });
+
+  it('사용자 정의 placeholder가 올바르게 렌더링되는지 확인', () => {
+    const customPlaceholder = 'placeholder 테스트';
+    render(<SearchBox {...defaultProps} placeholder={customPlaceholder} />);
+    expect(screen.getByPlaceholderText(customPlaceholder)).toBeInTheDocument();
+  });
+
+  it('입력값이 변경될 때 onChange 핸들러가 호출되는지 확인', () => {
+    render(<SearchBox {...defaultProps} />);
+    const input = screen.getByRole('textbox');
+
+    fireEvent.change(input, { target: { value: '테스트 검색어' } });
+    expect(mockOnChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('초기 value prop이 올바르게 설정되는지 확인', () => {
+    const initialValue = '초기 검색어';
+    render(<SearchBox {...defaultProps} value={initialValue} />);
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    expect(input.value).toBe(initialValue);
+  });
+});

src/components/search-box/SearchBox.tsx

@@ -0,0 +1,31 @@
+import React, { ChangeEvent } from 'react';
+import SearchIcon from '../../../public/icons/SearchIcon';
+
+interface SearchBoxProps {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+}
+
+const SearchBox = ({
+  value,
+  onChange,
+  placeholder = '검색어를 입력해주세요',
+}: SearchBoxProps) => {
+  return (
+    <div className="flex items-center gap-1 rounded-lg border border-gray-200 px-3 py-2">
+      <div className="flex h-6 w-6 items-center justify-center text-gray-400">
+        <SearchIcon />
+      </div>
+      <input
+        type="text"
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        className="w-full text-sm text-gray-darker placeholder:text-gray-normal-03"
+      />
+    </div>
+  );
+};
+
+export default SearchBox;