fix: dropdownId context로 전달, option에도 유니크하게 적용

GDSC-Hongik · Aug 22, 2024 · 66c0d39 · 66c0d39
1 parent cfc0db3
commit 66c0d39
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 17 deletions.
diff --git a/packages/wow-ui/src/components/DropDown/DropDownOption.tsx b/packages/wow-ui/src/components/DropDown/DropDownOption.tsx
@@ -24,7 +24,8 @@ export interface DropDownOptionProps {
 
 const DropDownOption = forwardRef<HTMLLIElement, DropDownOptionProps>(
   function Option({ value, onClick, text }, ref) {
-    const { focusedValue, selectedValue, handleSelect } = useDropDownContext();
+    const { focusedValue, selectedValue, handleSelect, dropdownId } =
+      useDropDownContext();
     const isSelected = selectedValue === value;
     const isFocused = focusedValue !== null && focusedValue === value;
 
@@ -47,7 +48,7 @@ const DropDownOption = forwardRef<HTMLLIElement, DropDownOptionProps>(
 
     return (
       <styled.li
-        id={`dropdown-option-${value}`}
+        id={`${dropdownId}-option-${value}`}
         ref={ref}
         role="option"
         tabIndex={isSelected ? 0 : -1}

diff --git a/packages/wow-ui/src/components/DropDown/DropDownTrigger.tsx b/packages/wow-ui/src/components/DropDown/DropDownTrigger.tsx
@@ -15,17 +15,15 @@ interface DropDownTriggerProps {
   placeholder?: DropDownProps["placeholder"];
   label?: DropDownProps["label"];
   trigger?: DropDownProps["trigger"];
-  dropdownId: string;
 }
 
 const DropDownTrigger = ({
   placeholder,
   label,
   trigger,
-  dropdownId,
 }: DropDownTriggerProps) => {
   const itemMap = useCollection();
-  const { open, selectedValue, setOpen, setFocusedValue } =
+  const { open, selectedValue, setOpen, setFocusedValue, dropdownId } =
     useDropDownContext();
 
   const selectedText = itemMap.get(selectedValue);

diff --git a/packages/wow-ui/src/components/DropDown/DropDownWrapper.tsx b/packages/wow-ui/src/components/DropDown/DropDownWrapper.tsx
@@ -7,18 +7,16 @@ import useClickOutside from "@/hooks/useClickOutside";
 import { useDropDownContext } from "./context/DropDownContext";
 
 interface DropDownWrapperProps extends PropsWithChildren {
-  dropdownId: string;
   style?: DropDownProps["style"];
   className?: DropDownProps["className"];
   hasCustomTrigger?: boolean;
 }
 export const DropDownWrapper = ({
   children,
-  dropdownId,
   hasCustomTrigger,
   ...rest
 }: DropDownWrapperProps) => {
-  const { setOpen } = useDropDownContext();
+  const { setOpen, dropdownId } = useDropDownContext();
 
   const dropdownRef = useRef<HTMLDivElement>(null);
 

diff --git a/packages/wow-ui/src/components/DropDown/index.tsx b/packages/wow-ui/src/components/DropDown/index.tsx
@@ -90,25 +90,21 @@ const DropDown = ({
   onChange,
   ...rest
 }: DropDownProps) => {
+  const defaultId = useId();
+  const dropdownId = id ?? `dropdown-${defaultId}`;
+
   const dropdownState = useDropDownState({
     value,
     defaultValue,
     onChange,
+    dropdownId,
   });
 
-  const defaultId = useId();
-  const dropdownId = id ?? `dropdown-${defaultId}`;
-
   return (
     <DropDownContext.Provider value={dropdownState}>
       <CollectionProvider>
-        <DropDownWrapper
-          dropdownId={dropdownId}
-          hasCustomTrigger={!!trigger}
-          {...rest}
-        >
+        <DropDownWrapper hasCustomTrigger={!!trigger} {...rest}>
           <DropDownTrigger
-            dropdownId={dropdownId}
             label={label}
             placeholder={placeholder}
             trigger={trigger}

diff --git a/packages/wow-ui/src/hooks/useDropDownState.ts b/packages/wow-ui/src/hooks/useDropDownState.ts
@@ -8,12 +8,14 @@ interface DropDownStateProps {
     selectedValue: string;
     selectedText: ReactNode;
   }) => void;
+  dropdownId?: string;
 }
 
 const useDropDownState = ({
   value,
   defaultValue,
   onChange,
+  dropdownId,
 }: DropDownStateProps) => {
   const [selectedValue, setSelectedValue] = useState("");
   const [open, setOpen] = useState(false);
@@ -45,6 +47,7 @@ const useDropDownState = ({
     focusedValue,
     setFocusedValue,
     handleSelect,
+    dropdownId,
   };
 };