[Feature] SearchBar 컴포넌트 구현

.changeset/lazy-radios-battle.md

@@ -0,0 +1,6 @@
+---
+"wowds-icons": patch
+"wowds-ui": patch
+---
+
+SearchBar 컴포넌트를 구현합니다

packages/wow-icons/src/component/RightArrow.tsx

@@ -17,7 +17,7 @@ const RightArrow = forwardRef<SVGSVGElement, IconProps>(
   ) => {
     return (
       <svg
-        aria-label="rightArrow icon"
+        aria-label="right-arrow icon"
         className={className}
         fill="none"
         height={height}

packages/wow-icons/src/component/Search.tsx

@@ -0,0 +1,47 @@
+import { forwardRef } from "react";
+import { color } from "wowds-tokens";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const Search = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "24",
+      height = "24",
+      viewBox = "0 0 24 24",
+      stroke = "white",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="search icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <path
+          d="M18 10C18 13.866 14.866 17 11 17C7.13401 17 4 13.866 4 10C4 6.13401 7.13401 3 11 3C14.866 3 18 6.13401 18 10Z"
+          stroke={color[stroke]}
+          strokeWidth="1.4"
+        />
+        <path
+          d="M15 16L19 21.5"
+          stroke={color[stroke]}
+          strokeLinejoin="bevel"
+          strokeWidth="1.4"
+        />
+      </svg>
+    );
+  }
+);
+
+Search.displayName = "Search";
+export default Search;

packages/wow-icons/src/component/index.ts

@@ -3,4 +3,5 @@ export { default as Close } from "./Close.tsx";
 export { default as DownArrow } from "./DownArrow.tsx";
 export { default as Help } from "./Help.tsx";
 export { default as RightArrow } from "./RightArrow.tsx";
+export { default as Search } from "./Search.tsx";
 export { default as Warn } from "./Warn.tsx";

packages/wow-ui/package.json

@@ -40,6 +40,11 @@
       "require": "./dist/Stepper.cjs",
       "import": "./dist/Stepper.js"
     },
+    "./SearchBar": {
+      "types": "./dist/components/SearchBar/index.d.ts",
+      "require": "./dist/SearchBar.cjs",
+      "import": "./dist/SearchBar.js"
+    },
     "./RadioButton": {
       "types": "./dist/components/RadioGroup/RadioButton.d.ts",
       "require": "./dist/RadioButton.cjs",

packages/wow-ui/rollup.config.js

@@ -24,6 +24,7 @@ export default {
     TextButton: "./src/components/TextButton",
     Switch: "./src/components/Switch",
     Stepper: "./src/components/Stepper",
+    SearchBar: "./src/components/SearchBar",
     RadioButton: "./src/components/RadioGroup/RadioButton",
     RadioGroup: "./src/components/RadioGroup/RadioGroup",
     MultiGroup: "./src/components/MultiGroup",

packages/wow-ui/src/components/SearchBar/SearchBar.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+import SearchBar from "@/components/SearchBar";
+
+const meta: Meta<typeof SearchBar> = {
+  title: "UI/SearchBar",
+  component: SearchBar,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "서치바 컴포넌트",
+    a11y: {
+      config: {
+        rules: [{ id: "color-contrast", enabled: false }],
+      },
+    },
+  },
+  argTypes: {
+    placeholder: {
+      description: "서치바의 플레이스홀더 텍스트.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: { type: "text" },
+    },
+    defaultValue: {
+      description: "서치바의 기본 값.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: { type: "text" },
+    },
+    value: {
+      description: "외부에서 제어하는 서치바의 값.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: { type: "text" },
+    },
+    maxLength: {
+      description: "서치바의 최대 입력 길이.",
+      table: {
+        type: { summary: "number" },
+      },
+      control: { type: "number" },
+    },
+    onChange: {
+      description: "값이 변경될 때 호출되는 콜백 함수.",
+      table: {
+        type: { summary: "(value: string) => void" },
+      },
+      action: "changed",
+    },
+    onBlur: {
+      description: "서치바가 포커스를 잃을 때 호출되는 콜백 함수.",
+      table: {
+        type: { summary: "() => void" },
+      },
+      action: "blurred",
+    },
+    onFocus: {
+      description: "서치바가 포커스될 때 호출되는 콜백 함수.",
+      table: {
+        type: { summary: "() => void" },
+      },
+      action: "focused",
+    },
+    disabled: {
+      description: "서치바를 비활성화합니다.",
+      table: {
+        type: { summary: "boolean" },
+      },
+      control: { type: "boolean" },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    placeholder: "검색어를 입력하세요",
+    defaultValue: "",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "기본 서치바.",
+      },
+    },
+  },
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    placeholder: "검색어를 입력하세요",
+    defaultValue: "안녕하세요!",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "기본 값이 설정된 서치바.",
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "검색어를 입력하세요",
+    defaultValue: "",
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "비활성화된 서치바.",
+      },
+    },
+  },
+};
+
+const ControlledSearchBar = () => {
+  const [value, setValue] = useState<string>("");
+
+  const handleChange = (value: string) => {
+    setValue(value);
+  };
+
+  return (
+    <SearchBar
+      placeholder="제어된 검색어를 입력하세요"
+      value={value}
+      onChange={handleChange}
+    />
+  );
+};
+
+export const ControlledValue: Story = {
+  render: () => <ControlledSearchBar />,
+  parameters: {
+    docs: {
+      description: {
+        story: "외부에서 값이 제어되는 서치바.",
+      },
+    },
+  },
+};
+
+export const WithMaxLength: Story = {
+  args: {
+    placeholder: "검색어를 입력하세요",
+    maxLength: 10,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "최대 입력 길이가 설정된 서치바.",
+      },
+    },
+  },
+};