From 2929c0cb03b01324448119d3ad77c33368b5cf4b Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Tue, 7 Jan 2025 16:14:01 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=8Cfix:=20QSelectBox=20=EB=82=B4?=
 =?UTF-8?q?=EB=B6=80=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Playground.jsx               | 32 +++++++++++++++++++++
 src/components/common/select/QSelectBox.jsx | 15 +++++++---
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index 1d5820ff..d84f99c5 100644
--- a/src/components/Playground.jsx
+++ b/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>
diff --git a/src/components/common/select/QSelectBox.jsx b/src/components/common/select/QSelectBox.jsx
index bc5dbe16..d7c15028 100644
--- a/src/components/common/select/QSelectBox.jsx
+++ b/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 : '선택하세요.'