From 73a8ac6175890468ac8d117149e063dcc685903d Mon Sep 17 00:00:00 2001
From: Sungu Kim <108677235+haegu97@users.noreply.github.com>
Date: Tue, 10 Dec 2024 18:38:24 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8[Feat]=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=EC=B0=BD=20=EA=B5=AC=ED=98=84=20#120?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/icons/SearchIcon.tsx             | 28 ++++++++++++++++++++++
 src/components/search-box/SearchBox.tsx | 31 +++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 public/icons/SearchIcon.tsx
 create mode 100644 src/components/search-box/SearchBox.tsx

diff --git a/public/icons/SearchIcon.tsx b/public/icons/SearchIcon.tsx
new file mode 100644
index 00000000..7a45570d
--- /dev/null
+++ b/public/icons/SearchIcon.tsx
@@ -0,0 +1,28 @@
+import { SVGProps } from 'react';
+
+interface SearchIconProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+}
+
+function SearchIcon({ ...props }: SearchIconProps) {
+  return (
+    <svg
+      width={12}
+      height={12}
+      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;
diff --git a/src/components/search-box/SearchBox.tsx b/src/components/search-box/SearchBox.tsx
new file mode 100644
index 00000000..93a3b78e
--- /dev/null
+++ b/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;

From 87be77fcee79647c1f17ae06d1993696cf7e9565 Mon Sep 17 00:00:00 2001
From: Sungu Kim <108677235+haegu97@users.noreply.github.com>
Date: Tue, 10 Dec 2024 18:39:11 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=85[Test]=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=EC=B0=BD=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1,=20storybook=20=EC=83=9D=EC=84=B1=20#120?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../search-box/SearchBox.stories.tsx          | 22 ++++++++++
 src/components/search-box/SearchBox.test.tsx  | 44 +++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 src/components/search-box/SearchBox.stories.tsx
 create mode 100644 src/components/search-box/SearchBox.test.tsx

diff --git a/src/components/search-box/SearchBox.stories.tsx b/src/components/search-box/SearchBox.stories.tsx
new file mode 100644
index 00000000..d4a9446c
--- /dev/null
+++ b/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: '검색어를 입력해주세요',
+  },
+};
diff --git a/src/components/search-box/SearchBox.test.tsx b/src/components/search-box/SearchBox.test.tsx
new file mode 100644
index 00000000..5e990f2b
--- /dev/null
+++ b/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);
+  });
+});

From 1eab06e6ee81e17b59a95c47f121053b1d1630a6 Mon Sep 17 00:00:00 2001
From: Sungu Kim <108677235+haegu97@users.noreply.github.com>
Date: Tue, 10 Dec 2024 18:48:39 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F[Refactor]=20width,=20hei?=
 =?UTF-8?q?ght=20prop=20=EC=A0=9C=EA=B1=B0=20#120?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/icons/SearchIcon.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/public/icons/SearchIcon.tsx b/public/icons/SearchIcon.tsx
index 7a45570d..e2612080 100644
--- a/public/icons/SearchIcon.tsx
+++ b/public/icons/SearchIcon.tsx
@@ -1,11 +1,6 @@
 import { SVGProps } from 'react';
 
-interface SearchIconProps extends SVGProps<SVGSVGElement> {
-  width?: number;
-  height?: number;
-}
-
-function SearchIcon({ ...props }: SearchIconProps) {
+function SearchIcon({ ...props }: SVGProps<SVGSVGElement>) {
   return (
     <svg
       width={12}

From b2cce570547b756c2dd04132242242b6ba1dc6bc Mon Sep 17 00:00:00 2001
From: Sungu Kim <108677235+haegu97@users.noreply.github.com>
Date: Wed, 11 Dec 2024 10:43:06 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F[Refactor]=20=EB=8F=8B?=
 =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EC=95=84=EC=9D=B4=EC=BD=98=20width,=20hei?=
 =?UTF-8?q?ght=20prop=EC=9C=BC=EB=A1=9C=20=EC=B6=94=EA=B0=80=20#120?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/icons/SearchIcon.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/public/icons/SearchIcon.tsx b/public/icons/SearchIcon.tsx
index e2612080..81a0d250 100644
--- a/public/icons/SearchIcon.tsx
+++ b/public/icons/SearchIcon.tsx
@@ -1,10 +1,15 @@
 import { SVGProps } from 'react';
 
-function SearchIcon({ ...props }: SVGProps<SVGSVGElement>) {
+interface SearchIconProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+}
+
+function SearchIcon({ width = 12, height = 12, ...props }: SearchIconProps) {
   return (
     <svg
-      width={12}
-      height={12}
+      width={width}
+      height={height}
       viewBox="0 0 14 14"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"