Merge pull request #110 from COW-dev/feat/#108

[FEAT] Select 컴포넌트 외부 클릭 시 닫기 기능 구현

Author: ujinsim

src/shared/ui/Select/SelectButton.tsx

@@ -46,7 +46,7 @@ export function SelectButton({
       onClick={onClick}
       className={cn(
         sizeVariants[size],
-        'w-full border border-gray-200 bg-white font-semibold text-gray-400',
+        'w-full border border-gray-200 bg-white font-semibold whitespace-nowrap text-gray-400',
         className
       )}
       {...props}

src/shared/ui/Select/SelectMain.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode, useState } from 'react';
+import { ComponentProps, ReactNode, useState, useRef, useEffect } from 'react';
 
 import { OptionList } from './OptionList';
 import { SelectContext } from './Select.context';
@@ -30,12 +30,27 @@ type Props = {
 
 export function SelectMain({ value, onChange, size = 'lg', defaultValue, children }: Props) {
   const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
 
   const handleSelect = (option: string) => {
     setIsOpen(false);
     onChange?.(option);
   };
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
   return (
     <SelectContext.Provider
       value={{
@@ -44,7 +59,7 @@ export function SelectMain({ value, onChange, size = 'lg', defaultValue, childre
         size: size,
       }}
     >
-      <div className="relative w-full">
+      <div ref={ref} className="relative w-full">
         <SelectButton
           selected={value || defaultValue}
           onClick={() => setIsOpen(!isOpen)}