From e55fe74aa1e7178de8aedc23cb0c9621bb5a0829 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Tue, 24 Dec 2024 18:37:33 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8fix:=20QSelectBox=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=83=81=EC=84=B8=20=EC=88=98=EC=A0=95=20=EB=B0=8F?=
 =?UTF-8?q?=20=EC=83=98=ED=94=8C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Playground.jsx               | 12 +++---
 src/components/common/select/QSelectBox.jsx | 47 +++++++++++++++++++--
 2 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index 519b23df..3cf07af8 100644
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@@ -245,8 +245,8 @@ export default function Playground() {
           </button>{' '}
           <button
             className="btn-frame deepgray"
-            onClick={() => { 
-              getTrestleList({moduleTpCd: '', roofMatlCd: '', raftBaseCd: '', trestleMkrCd: '', constMthdCd: '', roofBaseCd: '',}) //임시 데이터
+            onClick={() => {
+              getTrestleList({ moduleTpCd: '', roofMatlCd: '', raftBaseCd: '', trestleMkrCd: '', constMthdCd: '', roofBaseCd: '' }) //임시 데이터
             }}
           >
             가대 목록 조회 API 호출
@@ -254,7 +254,8 @@ export default function Playground() {
           <button
             className="btn-frame deepgray"
             onClick={() => {
-              getConstructionList({ //임시 데이터
+              getConstructionList({
+                //임시 데이터
                 moduleTpCd: 'testData_1',
                 roofMatlCd: 'testData_2',
                 trestleMkrCd: 'testData_3',
@@ -275,7 +276,8 @@ export default function Playground() {
           <button
             className="btn-frame deepgray"
             onClick={() => {
-              getTrestleDetailList({ //임시 데이터
+              getTrestleDetailList({
+                //임시 데이터
                 moduleTpCd: 'testData_1',
                 roofMatlCd: 'testData_2',
                 trestleMkrCd: 'testData_3',
@@ -493,7 +495,7 @@ export default function Playground() {
           </Button>
         </div>
         <div className="my-2">
-          <QSelectBox options={codes} value={myData} showKey="clCodeNm" />
+          <QSelectBox options={codes} value={myData} sourceKey="id" targetKey="raftBaseCd" showKey="clCodeNm" />
         </div>
       </div>
     </>
diff --git a/src/components/common/select/QSelectBox.jsx b/src/components/common/select/QSelectBox.jsx
index e3bdeaa6..4239940a 100644
--- a/src/components/common/select/QSelectBox.jsx
+++ b/src/components/common/select/QSelectBox.jsx
@@ -1,10 +1,51 @@
 'use client'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { useOnClickOutside } from 'usehooks-ts'
 
-export default function QSelectBox({ title = '', options, onChange, value, disabled = false, showKey = '', params = {} }) {
+/**
+ *
+ * @param {string} title - 선택 제목
+ * @param {array} options - 선택 옵션
+ * @param {function} onChange - 선택 변경 함수
+ * @param {object} value - 선택 값
+ * @param {boolean} disabled - 선택 비활성화 여부
+ * @param {string} sourceKey - options에 있는 키
+ * @param {string} targetKey - value에 있는 키
+ * @param {string} showKey - options 있는 키중 보여줄 키
+ * @param {object} params - 추가 파라미터
+ * @returns
+ */
+export default function QSelectBox({
+  title = '',
+  options,
+  onChange,
+  value,
+  disabled = false,
+  sourceKey = '',
+  targetKey = '',
+  showKey = '',
+  params = {},
+}) {
+  const handleInitState = () => {
+    //title이 있으면 우선 보여준다(다른 키들 무시)
+    if (title !== '') {
+      return title
+    }
+
+    //value가 없으면 showKey가 있으면 우선 보여준다
+    if (showKey !== '' && !value) {
+      return options[0][showKey]
+    }
+
+    //value가 있으면 sourceKey와 targetKey를 비교하여 보여준다
+    if (showKey !== '' && value) {
+      const option = options.find((option) => option[sourceKey] === value[targetKey])
+      return option[showKey]
+    }
+  }
+
   const [openSelect, setOpenSelect] = useState(false)
-  const [selected, setSelected] = useState(title === '' ? options[0][showKey] : title)
+  const [selected, setSelected] = useState(handleInitState())
   const ref = useRef(null)
 
   const handleClickSelectOption = (option) => {