[FEAT] 검색 입력

src/components/common/SearchInput/SearchInput.story.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SearchInput } from "./SearchInput";
+import { IconSearch } from "@tabler/icons-react";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "SearchInput",
+  component: SearchInput,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // More on Action Args : https://storybook.js.org/docs/essentials/actions#action-args
+  args: {},
+} satisfies Meta<typeof SearchInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Usage: Story = {
+  args: {
+    placeholder: "Input here to search...",
+    leftSection: <IconSearch size={16} />,
+  },
+};

src/components/common/SearchInput/SearchInput.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from "@/utils/test-utils";
+import { SearchInput } from "./SearchInput";
+import "@testing-library/jest-dom";
+import { IconSearch } from "@tabler/icons-react";
+
+describe("SearchInput component", () => {
+  it("renders correctly with the given placeholder", () => {
+    const props = {
+      placeholder: "Input here to search...",
+      leftSection: <IconSearch size={16} />,
+    };
+
+    render(<SearchInput {...props} />);
+    // More on screen queries: https://testing-library.com/docs/queries/about
+    // More on jest expect Api: https://jestjs.io/docs/expect
+    expect(screen.getByRole("region", { name: "SearchInput" })).toBeInTheDocument();
+  });
+});

src/components/common/SearchInput/SearchInput.tsx

@@ -0,0 +1,5 @@
+import { Input, InputProps } from "@mantine/core";
+
+export function SearchInput({ placeholder, ...props }: InputProps & { placeholder?: string }) {
+  return <Input placeholder={placeholder} {...props} />;
+}

src/components/common/SearchInput/index.ts

@@ -0,0 +1 @@
+export { SearchInput } from "./SearchInput";