🚨fix: QSelectBox 외부에서 값 변경 함수 추가

src/components/Playground.jsx

@@ -200,7 +200,7 @@ export default function Playground() {
     },
   ]
 
-  const myData = {
+  const [myData, setMyData] = useState({
     roofMatlCd: 'ROOF_ID_WA_53A',
     roofMatlNm: '화와 A',
     roofMatlNmJp: '和瓦A',
@@ -220,6 +220,10 @@ export default function Playground() {
     width: 265,
     layout: 'P',
     hajebichi: null,
+  })
+
+  const handleChangeMyData = () => {
+    setMyData({ ...myData, raftBaseCd: 'HEI_500' })
   }
 
   return (
@@ -497,6 +501,9 @@ export default function Playground() {
         <div className="my-2">
           <QSelectBox options={codes} value={myData} sourceKey="id" targetKey="raftBaseCd" showKey="clCodeNm" />
         </div>
+        <div className="my-2">
+          <Button onClick={handleChangeMyData}>QSelectBox value change!!</Button>
+        </div>
       </div>
     </>
   )

src/components/common/select/QSelectBox.jsx

@@ -1,5 +1,5 @@
 'use client'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useOnClickOutside } from 'usehooks-ts'
 
 /**
@@ -54,7 +54,7 @@ export default function QSelectBox({
   const ref = useRef(null)
 
   const handleClickSelectOption = (option) => {
-    setSelected(option.name)
+    setSelected(showKey !== '' ? option[showKey] : option.name)
     onChange?.(option, params)
   }
 
@@ -62,9 +62,10 @@ export default function QSelectBox({
     setOpenSelect(false)
   }
 
-  // useEffect(() => {
-  //   value && handleClickSelectOption(value)
-  // }, [value])
+  useEffect(() => {
+    // value && handleClickSelectOption(value)
+    setSelected(handleInitState())
+  }, [value])
 
   useOnClickOutside(ref, handleClose)