[Refactor] DropDownOption 에 대해서 context 로 분리

.changeset/lazy-radios-battle.md

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

apps/wow-docs/app/page.tsx

@@ -18,8 +18,8 @@ const Home = () => {
         <RadioButton label="2학년" value="2학년" />
       </RadioGroup>
       <DropDown placeholder="목록을 입력하세요">
-        <DropDownOption text="option 1" value="option 1" />
-        <DropDownOption text="option 1" value="option 2" />
+        <DropDownOption text="옵 1" value="option 1" />
+        <DropDownOption text="옵 2" value="option 2" />
       </DropDown>
       <MultiGroup variant="checkbox">
         <Checkbox label="checkbox1" value="checkbox1" />

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/DropDown/DropDownOption.tsx

@@ -1,8 +1,12 @@
+"use client";
+
 import { cva } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
 import type { ReactNode } from "react";
 import { forwardRef } from "react";
 
+import { useDropDownContext } from "@/components/DropDown/context/DropDownContext";
+
 /**
  * @description 드롭다운 옵션의 props입니다.
  *
@@ -21,16 +25,26 @@ export interface DropDownOptionProps {
 }
 
 const DropDownOption = forwardRef<HTMLDivElement, DropDownOptionProps>(
-  function Option({ value, onClick, focused, text, selected }, ref) {
+  function Option({ value, onClick, text }, ref) {
+    const { focusedValue, selectedValue, handleSelect } = useDropDownContext();
+    const isSelected = selectedValue === value;
+    const isFocused = focusedValue !== null && focusedValue === value;
+
+    const handleOptionClick = (value: string, onClick?: () => void) => {
+      if (onClick) onClick();
+      handleSelect(value);
+    };
     return (
       <styled.div
         id={`dropdown-option-${value}`}
         ref={ref}
         tabIndex={-1}
         className={optionStyle({
-          type: selected ? "selected" : focused ? "focused" : "default",
+          type: isSelected ? "selected" : isFocused ? "focused" : "default",
         })}
-        onClick={onClick}
+        onClick={() => {
+          handleOptionClick(value, onClick);
+        }}
       >
         {text}
       </styled.div>

packages/wow-ui/src/components/DropDown/context/DropDownContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from "react";
+
+import type useDropDownState from "@/hooks/useDropDownState";
+import useSafeContext from "@/hooks/useSafeContext";
+
+export const DropDownContext = createContext<ReturnType<
+  typeof useDropDownState
+> | null>(null);
+
+export const useDropDownContext = () => {
+  const context = useSafeContext(DropDownContext);
+  return context;
+};

packages/wow-ui/src/components/DropDown/index.tsx

@@ -8,10 +8,10 @@ import type {
   ReactElement,
   ReactNode,
 } from "react";
-import { cloneElement, isValidElement, useRef } from "react";
+import { cloneElement, useId, useRef } from "react";
 import { DownArrow } from "wowds-icons";
 
-import DropDownOption from "@/components/DropDown/DropDownOption";
+import { DropDownContext } from "@/components/DropDown/context/DropDownContext";
 import useClickOutside from "@/hooks/useClickOutside";
 import useDropDownState from "@/hooks/useDropDownState";
 import useFlattenChildren from "@/hooks/useFlattenChildren";
@@ -53,8 +53,9 @@ export interface DropDownWithoutTriggerProps extends PropsWithChildren {
 }
 
 /**
- * @description 사용자가 외부 트리거 컴포넌트 나 내부 요소를 통해서 선택 옵션 리스트 중에 아이템을 선택할 수 있는 드롭다운 컴포넌트 입니다.
+ * @description 사용자가 외부 트리거 컴포넌트나 내부 요소를 통해서 선택 옵션 리스트 중에 아이템을 선택할 수 있는 드롭다운 컴포넌트 입니다.
  *
+ * @param {string} [id] 드롭다운 id 입니다.
  * @param {ReactElement} [trigger] 드롭다운을 열기 위한 외부 트리거 요소입니다.
  * @param {ReactNode} [label] 외부 트리거를 사용하지 않는 경우 레이블을 사용할 수 있습니다.
  * @param {string} [placeholder] 외부 트리거를 사용하지 않는 경우 선택되지 않았을 때 표시되는 플레이스홀더입니다.
@@ -68,6 +69,7 @@ export type DropDownProps = (
   | DropDownWithTriggerProps
   | DropDownWithoutTriggerProps
 ) & {
+  id?: string;
   value?: string;
   defaultValue?: string;
   onChange?: (value: {
@@ -79,6 +81,7 @@ export type DropDownProps = (
 };
 
 const DropDown = ({
+  id,
   children,
   trigger,
   label,
@@ -89,62 +92,65 @@ const DropDown = ({
   ...rest
 }: DropDownProps) => {
   const flattenedChildren = useFlattenChildren(children);
+  const dropdownState = useDropDownState({
+    value,
+    defaultValue,
+    children: flattenedChildren,
+    onChange,
+  });
+
   const {
     selectedValue,
     selectedText,
     open,
+    setFocusedValue,
     setOpen,
-    focusedIndex,
-    setFocusedIndex,
-    handleSelect,
     handleKeyDown,
-  } = useDropDownState({
-    value,
-    defaultValue,
-    children: flattenedChildren,
-    onChange,
-  });
+  } = dropdownState;
 
+  const defaultId = useId();
+  const dropdownId = id ?? `dropdown-${defaultId}`;
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const optionsRef = useRef<(HTMLDivElement | null)[]>([]);
 
   useClickOutside(dropdownRef, () => setOpen(false));
 
   const toggleDropdown = () => {
     setOpen((prevOpen) => {
-      if (!prevOpen) setFocusedIndex(null);
+      if (!prevOpen) setFocusedValue(null);
       return !prevOpen;
     });
   };
 
-  const handleOptionClick = (value: string, onClick?: () => void) => () => {
-    if (onClick) onClick();
-    handleSelect(value);
-  };
-
-  const setOptionRef = (index: number) => (el: HTMLDivElement | null) => {
-    optionsRef.current[index] = el;
-  };
-
-  const renderTrigger = (trigger: ReactElement) => (
+  const renderCustomTrigger = (trigger: ReactElement) => (
     <>
       {cloneElement(trigger, {
         onClick: toggleDropdown,
+        "aria-expanded": open,
+        "aria-haspopup": "true",
+        id: `${dropdownId}-trigger`,
+        "aria-controls": `${dropdownId}`,
       })}
     </>
   );
 
-  const renderLabel = () => (
+  const renderDefaultTrigger = () => (
     <>
       <styled.span
         color={open ? "primary" : selectedValue ? "textBlack" : "sub"}
         textStyle="label2"
       >
         {label}
       </styled.span>
-      <Flex
+      <styled.button
         alignItems="center"
+        aria-controls={dropdownId}
+        aria-expanded={open}
+        aria-haspopup={true}
+        cursor="pointer"
+        display="flex"
+        id={`${dropdownId}-trigger`}
         justifyContent="space-between"
+        outline="none"
         className={dropdownStyle({
           type: open ? "focused" : selectedValue ? "selected" : "default",
         })}
@@ -165,43 +171,41 @@ const DropDown = ({
             if (e.key === "Enter") toggleDropdown();
           }}
         />
-      </Flex>
+      </styled.button>
     </>
   );
 
   const renderOptions = () => (
-    <Flex className={dropdownContentStyle()} direction="column">
-      {flattenedChildren.map((child, index) => {
-        if (isValidElement(child) && child.type === DropDownOption) {
-          return cloneElement(child as ReactElement, {
-            key: child.props.value,
-            ref: setOptionRef(index),
-            onClick: handleOptionClick(child.props.value, child.props.onClick),
-            focused: focusedIndex === index,
-            selected: selectedValue === child.props.value,
-          });
-        }
-        return child;
+    <Flex
+      direction="column"
+      className={dropdownContentStyle({
+        type: trigger ? "custom" : "default",
       })}
+    >
+      {children}
     </Flex>
   );
 
   return (
-    <Flex
-      cursor="pointer"
-      direction="column"
-      gap="xs"
-      outline="none"
-      position="relative"
-      ref={dropdownRef}
-      tabIndex={0}
-      width={trigger ? "fit-content" : "auto"}
-      onKeyDown={handleKeyDown}
-      {...rest}
-    >
-      {trigger ? renderTrigger(trigger) : renderLabel()}
-      {open && renderOptions()}
-    </Flex>
+    <DropDownContext.Provider value={dropdownState}>
+      <Flex
+        aria-labelledby={`${dropdownId}-trigger`}
+        cursor="pointer"
+        direction="column"
+        gap="xs"
+        id={dropdownId}
+        outline="none"
+        position="relative"
+        ref={dropdownRef}
+        tabIndex={0}
+        width={trigger ? "fit-content" : "auto"}
+        onKeyDown={handleKeyDown}
+        {...rest}
+      >
+        {trigger ? renderCustomTrigger(trigger) : renderDefaultTrigger()}
+        {open && renderOptions()}
+      </Flex>
+    </DropDownContext.Provider>
   );
 };
 
@@ -295,6 +299,15 @@ const dropdownContentStyle = cva({
       marginBottom: "2px",
     },
   },
+  variants: {
+    type: {
+      custom: {
+        width: "100%",
+      },
+      default: {},
+    },
+  },
+  defaultVariants: { type: "default" },
 });
 
 const placeholderStyle = cva({