[#8] 검색 컴포넌트 제작

src/app/example/page.tsx

@@ -9,6 +9,7 @@ import {
   TextInput,
 } from "@/components";
 import Profile from "@/components/profile/profile";
+import Searchbar from "@/components/searchbar/searchbar";
 import WineImg from "@/components/wine-img/wine-img";
 import React, { ChangeEvent } from "react";
 
@@ -110,6 +111,10 @@ const Page = () => {
         <WineImg isError={true} errorMsg="와인 사진은 필수" />
       </section>
 
+      <section>
+        <Searchbar onChange={handleChange} />
+      </section>
+
       <br />
     </div>
   );

src/components/searchbar/searchbar.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/nextjs";
+import Searchbar from "./searchbar";
+
+const meta: Meta<typeof Searchbar> = {
+  title: "Components/Searchbar",
+  component: Searchbar,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "검색창 컴포넌트 입니다.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Searchbar>;
+
+export const DefaultSearchbar: Story = {
+  args: {},
+};
+
+export const ListSearchbar: Story = {
+  render: () => {
+    return (
+      <div className="w-[800px]">
+        <Searchbar />
+      </div>
+    );
+  },
+};

src/components/searchbar/searchbar.tsx

@@ -0,0 +1,36 @@
+import { cn } from "@/lib/utils";
+import Icon from "../icon/icon";
+import { ComponentProps } from "react";
+
+/**
+ * 검색바 컴포넌트
+ * @author hwitae
+ */
+const Searchbar = ({ ...props }: ComponentProps<"input">) => {
+  return (
+    <label
+      htmlFor="searchbar"
+      className={cn(
+        "px-[14px] py-[9px]",
+        "flex items-center gap-2",
+        "rounded-[4px] border border-gray-300",
+        "pc:px-[20px] pc:py-[12px]"
+      )}
+    >
+      <Icon icon="SearchIcon" size={"sm"} className="shrink-0 text-gray-900" />
+      <input
+        id="searchbar"
+        type="text"
+        placeholder="와인을 검색해 보세요"
+        className={cn(
+          "h-5 min-w-0 flex-1 text-body-sm font-semibold tracking-[-0.02em] text-gray-900",
+          "placeholder:font-normal placeholder:text-gray-400",
+          "focus:font-normal focus:outline-none"
+        )}
+        {...props}
+      />
+    </label>
+  );
+};
+
+export default Searchbar;