🚨fix: QSelectBox 수정

src/components/Playground.jsx

@@ -24,6 +24,7 @@ import QSelect from './common/select/QSelect'
 import QPagination from './common/pagination/QPagination'
 
 import { trestleRequestModels, constructionRequestModels, trestleDetailRequestModels } from '@/models/apiModels'
+import QSelectBox from './common/select/QSelectBox'
 
 export default function Playground() {
   const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
@@ -199,6 +200,71 @@ export default function Playground() {
     console.log('users:', users)
   }, [users])
 
+  const codes = [
+    {
+      clHeadCd: '203800',
+      clCode: 'HEI_455',
+      clCodeNm: '세로　455mm이하',
+      clPriority: 1,
+      name: '세로　455mm이하',
+      id: 'HEI_455',
+    },
+    {
+      clHeadCd: '203800',
+      clCode: 'HEI_500',
+      clCodeNm: '세로　500mm이하',
+      clPriority: 2,
+      name: '세로　500mm이하',
+      id: 'HEI_500',
+    },
+    {
+      clHeadCd: '203800',
+      clCode: 'HEI_606',
+      clCodeNm: '세로　606mm이하',
+      clPriority: 3,
+      name: '세로　606mm이하',
+      id: 'HEI_606',
+    },
+    {
+      clHeadCd: '203800',
+      clCode: 'WID_606',
+      clCodeNm: '가로　606mm이하',
+      clPriority: 4,
+      name: '가로　606mm이하',
+      id: 'WID_606',
+    },
+    {
+      clHeadCd: '203800',
+      clCode: 'ETC',
+      clCodeNm: '기타',
+      clPriority: 5,
+      name: '기타',
+      id: 'ETC',
+    },
+  ]
+
+  const myData = {
+    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">
@@ -442,6 +508,9 @@ export default function Playground() {
             axios post test
           </Button>
         </div>
+        <div className="my-2">
+          <QSelectBox options={codes} value={myData} showKey="clCodeNm" />
+        </div>
       </div>
     </>
   )

src/components/common/select/QSelectBox.jsx

@@ -2,9 +2,9 @@
 import { useEffect, useRef, useState } from 'react'
 import { useOnClickOutside } from 'usehooks-ts'
 
-export default function QSelectBox({ title = '', options, onChange, value, disabled = false, params = {} }) {
+export default function QSelectBox({ title = '', options, onChange, value, disabled = false, showKey = '', params = {} }) {
   const [openSelect, setOpenSelect] = useState(false)
-  const [selected, setSelected] = useState(title === '' ? options[0].name : title)
+  const [selected, setSelected] = useState(title === '' ? options[0][showKey] : title)
   const ref = useRef(null)
 
   const handleClickSelectOption = (option) => {
@@ -16,9 +16,9 @@ export default function QSelectBox({ title = '', options, onChange, value, disab
     setOpenSelect(false)
   }
 
-  useEffect(() => {
+  // useEffect(() => {
-    value && handleClickSelectOption(value)
+  //   value && handleClickSelectOption(value)
-  }, [value])
+  // }, [value])
 
   useOnClickOutside(ref, handleClose)
 
@@ -28,7 +28,7 @@ export default function QSelectBox({ title = '', options, onChange, value, disab
       <ul className="select-item-wrap">
         {options?.map((option, index) => (
           <li key={option.id || index} className="select-item" onClick={() => handleClickSelectOption(option)}>
-            <button key={option.id + 'btn'}>{option.name}</button>
+            <button key={option.id + 'btn'}>{showKey !== '' ? option[showKey] : option.name}</button>
           </li>
         ))}
       </ul>