Option 구조 변경

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -51,7 +51,8 @@ export default function CircuitTrestleSetting({ id }) {
   // const { trigger: setCircuitData } = useCanvasPopupStatusController(4)
   // const [stepUpListData, setStepUpListData] = useRecoilState(stepUpListDataState)
   const [stepUpListData, setStepUpListData] = useState([])
-  const [seletedOption, setSeletedOption] = useState(null)
+  const [seletedMainOption, setSeletedMainOption] = useState(null)
+  const [seletedSubOption, setSeletedSubOption] = useState(null)
   const { setModuleStatisticsData } = useCircuitTrestle()
   const { handleCanvasToPng } = useImgLoader()
 
@@ -453,6 +454,7 @@ export default function CircuitTrestleSetting({ id }) {
     allocationType,
     circuitAllocationType,
     setCircuitAllocationType,
+    selectedMaker,
     selectedModels,
     setSelectedModels,
     getSelectedPcsItemList,
@@ -463,8 +465,10 @@ export default function CircuitTrestleSetting({ id }) {
     onValuesSelected: handleStepUpValuesSelected, // 선택된 값들을 처리하는 함수
     stepUpListData,
     setStepUpListData,
-    seletedOption,
+    seletedMainOption,
-    setSeletedOption,
+    setSeletedMainOption,
+    seletedSubOption,
+    setSeletedSubOption,
     getModuleList,
     setModuleStatisticsData,
   }
@@ -474,12 +478,12 @@ export default function CircuitTrestleSetting({ id }) {
     return stepUpListData[0].pcsItemList.map((item) => {
       return item.serQtyList
         .filter((serQty) => serQty.selected)
-        .map((serQty) => {
+        .map((serQty, index) => {
           return {
             pcsMkrCd: item.pcsMkrCd,
             pcsSerCd: item.pcsSerCd,
             pcsItemId: item.itemId,
-            pscOptCd: seletedOption.code,
+            pscOptCd: index === 0 ? seletedMainOption.code : seletedSubOption.code,
             paralQty: serQty.paralQty,
             connections: item.connList?.length
               ? [
@@ -489,7 +493,7 @@ export default function CircuitTrestleSetting({ id }) {
                 ]
               : [],
           }
-        })[0]
+        })
     })
   }
 

src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx

@@ -13,7 +13,7 @@ import { useRecoilState } from 'recoil'
 import { useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 
-const PCS_MKR_MULTI_TYPE = {
+export const PCS_MKR_MULTI_TYPE = {
   MULTI: 'MULTI',
   SINGLE_P: 'SINGLE-P',
   SINGLE_N: 'SINGLE-N',

src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx

@@ -15,6 +15,7 @@ import { POLYGON_TYPE } from '@/common/common'
 import { useSwal } from '@/hooks/useSwal'
 import { circuitNumDisplaySelector } from '@/store/settingAtom'
 import { fontSelector } from '@/store/fontAtom'
+import { PCS_MKR_MULTI_TYPE } from './PowerConditionalSelect'
 
 export default function StepUp(props) {
   const {
@@ -22,8 +23,11 @@ export default function StepUp(props) {
     allocationType,
     stepUpListData,
     setStepUpListData,
-    seletedOption,
+    seletedMainOption,
-    setSeletedOption,
+    setSeletedMainOption,
+    seletedSubOption,
+    setSeletedSubOption,
+    selectedMaker,
     selectedModels,
     setSelectedModels,
     getSelectedPcsItemList,
@@ -42,17 +46,14 @@ export default function StepUp(props) {
   const canvas = useRecoilValue(canvasState)
   const selectedModules = useRecoilValue(selectedModuleState)
   const [optCodes, setOptCodes] = useState([])
+  const [mainOptions, setMainOptions] = useState([])
+  const [subOptions, setSubOptions] = useState([])
 
   const [selectedRows, setSelectedRows] = useState({})
   const [isManualSelection, setIsManualSelection] = useState({})
 
   const isDisplayCircuitNumber = useRecoilValue(circuitNumDisplaySelector)
   const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
-  // useCanvasPopupStatusController(6)
-  // const canvasPopupStatusState = useRecoilValue(canvasPopupStatusStore)
-  // if (Object.keys(canvasPopupStatusState[6]).length !== 0) {
-  //   console.log('🚀 ~ useEffect ~ canvasPopupStatusState :', canvasPopupStatusState)
-  // }
 
   useEffect(() => {
     if (allocationType === 'auto') {
@@ -79,6 +80,11 @@ export default function StepUp(props) {
   /**
    * PCS 자동 승압설정 정보 조회
    */
+
+  const isMultiOptions = () => {
+    return selectedModels.some((model) => model.pcsSerParallelYn === 'Y')
+  }
+
   const fetchAutoStepUpData = async () => {
     try {
       const params = {
@@ -87,7 +93,6 @@ export default function StepUp(props) {
         roofSurfaceList: props.getRoofSurfaceList() /** 지붕면 목록 */,
         pcsItemList: props.getSelectedPcsItemList() /** PCS 아이템 목록 */,
       }
-
       /** 회로 구성 가능 여부 체크 통과 시 승압설정 정보 조회 */
       getPcsVoltageStepUpList(params).then((res) => {
         if (res?.result.resultCode === 'S' && res?.data) {
@@ -98,12 +103,29 @@ export default function StepUp(props) {
           setStepUpListData(stepUpListData)
 
           /** PCS 옵션 조회 */
-          const formattedOptCodes = formatOptionCodes(res.data.optionList)
+          // const formattedOptCodes = formatOptionCodes(res.data.optionList)
-          setOptCodes(formattedOptCodes)
+          // setOptCodes(formattedOptCodes)
-          setSeletedOption(formattedOptCodes[0])
+          // setSeletedOption(formattedOptCodes[0])
 
           /** 캔버스에 회로 정보 적용 */
-          stepUpListData[0].pcsItemList.forEach((pcsItem) => {
+          // 병설일때 pcs 있으면 setSubOpsions, 없으면 setMainOptions
+          console.log('stepUpListData', stepUpListData)
+          stepUpListData[0].pcsItemList.forEach((pcsItem, index) => {
+            const optionList = formatOptionCodes(pcsItem.optionList)
+            if (isMultiOptions()) {
+              if (index === 0) {
+                setMainOptions(optionList)
+                setSeletedMainOption(optionList[0])
+              } else {
+                setSubOptions(optionList)
+                setSeletedSubOption(optionList[0])
+              }
+            } else {
+              if (index === 0) {
+                setMainOptions(optionList)
+                setSeletedMainOption(optionList[0])
+              }
+            }
             const selectedSerQty = pcsItem.serQtyList.find((serQty) => serQty.selected)
             if (selectedSerQty) {
               selectedSerQty.roofSurfaceList.forEach((roofSurface) => {
@@ -165,12 +187,6 @@ export default function StepUp(props) {
    */
   const fetchPassiStepUpData = async () => {
     try {
-      // 1-1 2-2
-      // canvas
-      //   .getObjects()
-      //   .filter((obj) => obj.name === POLYGON_TYPE.MODULE && obj.circuit)
-      //   .map((module) => module.circuitNumber)
-
       /** 모듈 데이터 가져오기 */
       const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
 
@@ -208,6 +224,21 @@ export default function StepUp(props) {
           const pcsItemListWithSerQty = res.data.pcsItemList.map((pcsItem, index) => {
             const pcsData = pcsSummary[selectedModels[index].id] || { circuits: {}, totalModules: 0 }
             const circuitCounts = Object.values(pcsData.circuits)
+            const optionList = formatOptionCodes(pcsItem.optionList)
+            if (isMultiOptions()) {
+              if (index === 0) {
+                setMainOptions(optionList)
+                setSeletedMainOption(optionList[0])
+              } else {
+                setSubOptions(optionList)
+                setSeletedSubOption(optionList[0])
+              }
+            } else {
+              if (index === 0) {
+                setMainOptions(optionList)
+                setSeletedMainOption(optionList[0])
+              }
+            }
             return {
               ...pcsItem,
               serQtyList: [
@@ -234,9 +265,9 @@ export default function StepUp(props) {
           setStepUpListData(stepUpListData)
 
           /** PCS 옵션 조회 */
-          const formattedOptCodes = formatOptionCodes(res.data.optionList)
+          // const formattedOptCodes = formatOptionCodes(res.data.optionList)
-          setOptCodes(formattedOptCodes)
+          // setOptCodes(formattedOptCodes)
-          setSeletedOption(formattedOptCodes[0])
+          // setSeletedOption(formattedOptCodes[0])
         }
       })
     } catch (error) {
@@ -249,9 +280,9 @@ export default function StepUp(props) {
    */
   const formatOptionCodes = (optionList = []) => {
     return optionList?.map((opt) => ({
-      code: opt.pcsOptCd ? opt.pcsOptCd : '',
+      code: opt.pcsOptCd ?? '',
-      name: opt.pcsOptNm ? opt.pcsOptNm : '',
+      name: opt.pcsOptNm ?? '',
-      nameJp: opt.pcsOptNmJp ? opt.pcsOptNmJp : '',
+      nameJp: opt.pcsOptNmJp ?? '',
     }))
   }
 
@@ -274,9 +305,9 @@ export default function StepUp(props) {
    */
   const formatOptionList = (optionList = []) => {
     return optionList?.map((option) => ({
-      pcsOptCd: option.pcsOptCd ? option.pcsOptCd : '',
+      pcsOptCd: option.pcsOptCd ?? '',
-      pcsOptNm: option.pcsOptNm ? option.pcsOptNm : '',
+      pcsOptNm: option.pcsOptNm ?? '',
-      pcsOptNmJp: option.pcsOptNmJp ? option.pcsOptNmJp : '',
+      pcsOptNmJp: option.pcsOptNmJp ?? '',
     }))
   }
 
@@ -293,6 +324,7 @@ export default function StepUp(props) {
       uniqueIndex: `${item.itemId}_${index}`, // 고유 식별자 추가(동일한 PCS를 구분)
       connList: formatConnList(item.connList),
       serQtyList: formatSerQtyList(item.serQtyList),
+      optionList: item.optionList ?? [],
     }))
   }
 
@@ -303,12 +335,12 @@ export default function StepUp(props) {
     if (!connList) return [] // null인 경우 빈 배열 반환
 
     return connList?.map((conn) => ({
-      connAllowCur: conn.connAllowCur ? conn.connAllowCur : 0,
+      connAllowCur: conn.connAllowCur ?? 0,
-      connMaxParalCnt: conn.connMaxParalCnt ? conn.connMaxParalCnt : 0,
+      connMaxParalCnt: conn.connMaxParalCnt ?? 0,
-      goodsNo: conn.goodsNo ? conn.goodsNo : '',
+      goodsNo: conn.goodsNo ?? '',
-      itemId: conn.itemId ? conn.itemId : '',
+      itemId: conn.itemId ?? '',
-      itemNm: conn.itemNm ? conn.itemNm : '',
+      itemNm: conn.itemNm ?? '',
-      vstuParalCnt: conn.vstuParalCnt ? conn.vstuParalCnt : 0,
+      vstuParalCnt: conn.vstuParalCnt ?? 0,
     }))
   }
 
@@ -318,10 +350,10 @@ export default function StepUp(props) {
   const formatSerQtyList = (serQtyList = []) => {
     return serQtyList?.map((qty) => ({
       code: uuidv4(),
-      serQty: qty.serQty ? qty.serQty : 0,
+      serQty: qty.serQty ?? 0,
-      paralQty: qty.paralQty ? qty.paralQty : 0,
+      paralQty: qty.paralQty ?? 0,
-      rmdYn: qty.rmdYn ? qty.rmdYn : 'N',
+      rmdYn: qty.rmdYn ?? 'N',
-      usePossYn: qty.usePossYn ? qty.usePossYn : 'Y',
+      usePossYn: qty.usePossYn ?? 'Y',
       roofSurfaceList: formatRoofSurfaceList(qty.roofSurfaceList),
       selected: qty.rmdYn === 'Y',
     }))
@@ -333,8 +365,8 @@ export default function StepUp(props) {
   const formatRoofSurfaceList = (roofSurfaceList = []) => {
     return roofSurfaceList?.map((rsf) => ({
       moduleList: formatModuleList(rsf.moduleList),
-      roofSurface: rsf.roofSurface ? rsf.roofSurface : '',
+      roofSurface: rsf.roofSurface ?? '',
-      roofSurfaceId: rsf.roofSurfaceId ? rsf.roofSurfaceId : '',
+      roofSurfaceId: rsf.roofSurfaceId ?? '',
       roofSurfaceIncl: rsf.roofSurfaceIncl ? +rsf.roofSurfaceIncl : '',
     }))
   }
@@ -344,10 +376,10 @@ export default function StepUp(props) {
    */
   const formatModuleList = (moduleList = []) => {
     return moduleList?.map((module) => ({
-      circuit: module.circuit ? module.circuit : '',
+      circuit: module.circuit ?? '',
-      itemId: module.itemId ? module.itemId : '',
+      itemId: module.itemId ?? '',
-      pcsItemId: module.pcsItemId ? module.pcsItemId : '',
+      pcsItemId: module.pcsItemId ?? '',
-      uniqueId: module.uniqueId ? module.uniqueId : '',
+      uniqueId: module.uniqueId ?? '',
     }))
   }
 
@@ -416,9 +448,9 @@ export default function StepUp(props) {
             setStepUpListData(stepUpListData)
 
             /** PCS 옵션 조회 */
-            const formattedOptCodes = formatOptionCodes(res.data.optionList)
+            // const formattedOptCodes = formatOptionCodes(res.data.optionList)
-            setOptCodes(formattedOptCodes)
+            // setOptCodes(formattedOptCodes)
-            setSeletedOption(formattedOptCodes[0])
+            // setSeletedOption(formattedOptCodes[0])
           } else {
             swalFire({ text: getMessage('common.message.send.error') })
           }
@@ -532,7 +564,37 @@ export default function StepUp(props) {
     <>
       <div className="properties-setting-wrap outer">
         <div className="circuit-title-sel">
-          <div className="outline-form">
+          <p className="circuit-title">{getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}</p>
+          <div className="circuit-sel-wrap">
+            <div className="grid-select mr10">
+              {mainOptions.length > 0 && (
+                <QSelectBox
+                  options={mainOptions}
+                  value={seletedMainOption}
+                  sourceKey="code"
+                  targetKey="code"
+                  showKey="name"
+                  onChange={(e) => setSeletedMainOption(e)}
+                />
+              )}
+            </div>
+            {isMultiOptions() && selectedModels.length === 2 && (
+              <div className="grid-select ">
+                {subOptions.length > 0 && (
+                  <QSelectBox
+                    options={subOptions}
+                    value={seletedSubOption}
+                    sourceKey="code"
+                    targetKey="code"
+                    showKey="name"
+                    onChange={(e) => setSeletedSubOption(e)}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* <div className="outline-form">
             <span className="mr10" style={{ width: 'auto' }}>
               {getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
             </span>
@@ -551,7 +613,7 @@ export default function StepUp(props) {
                 />
               </div>
             )}
-          </div>
+          </div> */}
         </div>
 
         <div className="slope-wrap">