📌fix: QSelectBox 내부 로직 수정

src/components/Playground.jsx

@@ -226,6 +226,32 @@ export default function Playground() {
     setMyData({ ...myData, raftBaseCd: 'HEI_500' })
   }
 
+  const [myData2, setMyData2] = useState({})
+
+  const handleChangeMyData2 = () => {
+    setMyData2({
+      roofMatlCd: 'ROOF_ID_WA_53A',
+      roofMatlNm: '화와 A',
+      roofMatlNmJp: '和瓦A',
+      widAuth: 'R',
+      widBase: '265.000',
+      lenAuth: 'R',
+      lenBase: '235.000',
+      roofPchAuth: null,
+      roofPchBase: null,
+      raftAuth: 'C',
+      raftBaseCd: 'HEI_455',
+      id: 'ROOF_ID_WA_53A',
+      name: '화와 A',
+      selected: true,
+      nameJp: '和瓦A',
+      length: 235,
+      width: 265,
+      layout: 'P',
+      hajebichi: null,
+    })
+  }
+
   return (
     <>
       <div className="container mx-auto p-4 m-4 border">
@@ -504,6 +530,12 @@ export default function Playground() {
         <div className="my-2">
           <Button onClick={handleChangeMyData}>QSelectBox value change!!</Button>
         </div>
+        <div className="my-2">
+          <QSelectBox options={codes} value={myData2} sourceKey="id" targetKey="raftBaseCd" showKey="clCodeNm" />
+        </div>
+        <div className="my-2">
+          <Button onClick={handleChangeMyData2}>QSelectBox dynamic data bind change!!</Button>
+        </div>
         <div className="my-2">
           <SampleReducer />
         </div>

src/components/common/select/QSelectBox.jsx

@@ -1,6 +1,7 @@
 'use client'
 import { useEffect, useRef, useState } from 'react'
 import { useOnClickOutside } from 'usehooks-ts'
+import { isObjectNotEmpty } from '@/util/common-utils'
 
 /**
  *
@@ -32,13 +33,19 @@ export default function QSelectBox({
    * @returns {string} 초기 상태
    */
   const handleInitState = () => {
-    if (showKey !== '' && !value) {
+    if (showKey !== '' && isObjectNotEmpty(value)) {
       //value가 없으면 showKey가 있으면 우선 보여준다
       return options[0][showKey]
-    } else if (showKey !== '' && value) {
+    } else if (showKey !== '' && !isObjectNotEmpty(value)) {
       //value가 있으면 sourceKey와 targetKey를 비교하여 보여준다
-      const option = options.find((option) => option[sourceKey] === value[targetKey])
-      return option[showKey]
+      const option = options.find((option) => {
+        return option[sourceKey] === value[targetKey]
+      })
+      if (!option) {
+        return title !== '' ? title : '선택하세요.'
+      } else {
+        return option[showKey]
+      }
     } else {
       //일치하는 조건이 없으면 기본값을 보여준다.
       return title !== '' ? title : '선택하세요.'