From a4af0dc006962c549763560e91b750dcfd51c616 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Tue, 17 Dec 2024 18:04:37 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=8Cfix:=20QSelectBox=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=8B=AB=EA=B8=B0=20=EC=9D=B4?=
 =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 아웃사이드 클릭시 handleClose 함수 실행하게 코드 수정
---
 package.json                                |  7 ++++---
 src/components/common/select/QSelectBox.jsx | 12 ++++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 1f272ce1..1677b398 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "ag-grid-react": "^32.0.2",
     "axios": "^1.7.8",
     "chart.js": "^4.4.6",
+    "dayjs": "^1.11.13",
     "fabric": "^5.3.0",
     "framer-motion": "^11.2.13",
     "fs": "^0.0.1-security",
@@ -32,12 +33,12 @@
     "react-icons": "^5.3.0",
     "react-loading-skeleton": "^3.5.0",
     "react-responsive-modal": "^6.4.2",
+    "react-select": "^5.8.1",
     "recoil": "^0.7.7",
     "sweetalert2": "^11.14.1",
     "sweetalert2-react-content": "^5.0.7",
-    "uuid": "^10.0.0",
-    "dayjs": "^1.11.13",
-    "react-select": "^5.8.1"
+    "usehooks-ts": "^3.1.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@turf/turf": "^7.0.0",
diff --git a/src/components/common/select/QSelectBox.jsx b/src/components/common/select/QSelectBox.jsx
index 3da9f30b..b2381c00 100644
--- a/src/components/common/select/QSelectBox.jsx
+++ b/src/components/common/select/QSelectBox.jsx
@@ -1,21 +1,29 @@
 'use client'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { useOnClickOutside } from 'usehooks-ts'
 
 export default function QSelectBox({ title = '', options, onChange, value, disabled = false, params = {} }) {
   const [openSelect, setOpenSelect] = useState(false)
   const [selected, setSelected] = useState(title === '' ? options[0].name : title)
+  const ref = useRef(null)
 
   const handleClickSelectOption = (option) => {
     setSelected(option.name)
     onChange?.(option, params)
   }
 
+  const handleClose = () => {
+    setOpenSelect(false)
+  }
+
   useEffect(() => {
     value && handleClickSelectOption(value)
   }, [value])
 
+  useOnClickOutside(ref, handleClose)
+
   return (
-    <div className={`sort-select ${openSelect ? 'active' : ''}`} onClick={disabled ? () => {} : () => setOpenSelect(!openSelect)}>
+    <div className={`sort-select ${openSelect ? 'active' : ''}`} ref={ref} onClick={disabled ? () => {} : () => setOpenSelect(!openSelect)}>
       <p>{selected}</p>
       <ul className="select-item-wrap">
         {options?.map((option, index) => (