🚨fix: QSelectBox 코드 상세 수정 및 샘플 추가

src/components/Playground.jsx

@@ -246,7 +246,7 @@ export default function Playground() {
           <button
             className="btn-frame deepgray"
             onClick={() => {
-              getTrestleList({moduleTpCd: '', roofMatlCd: '', raftBaseCd: '', trestleMkrCd: '', constMthdCd: '', roofBaseCd: '',}) //임시 데이터
+              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>
     </>

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) => {