회로 설정 수정

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

@@ -1,13 +1,10 @@
-import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
 import { canvasState } from '@/store/canvasAtom'
-import { modelState, pcsCheckState } from '@/store/circuitTrestleAtom'
+import { pcsCheckState } from '@/store/circuitTrestleAtom'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
-import { useContext, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
-import { canvasPopupStatusStore } from '@/store/canvasPopupStatusAtom'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { v4 as uuidv4 } from 'uuid'
 import { globalLocaleStore } from '@/store/localeAtom'
@@ -15,7 +12,6 @@ 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 {
@@ -109,7 +105,7 @@ export default function StepUp(props) {
           /** 캔버스에 회로 정보 적용 */
           // 병설일때 pcs 있으면 setSubOpsions, 없으면 setMainOptions
           console.log('stepUpListData', stepUpListData)
-          let mChk = 0;
+          let mChk = 0
           stepUpListData[0].pcsItemList.forEach((pcsItem, index) => {
             const optionList = formatOptionCodes(pcsItem.optionList)
             if (isMultiOptions()) {
@@ -166,7 +162,7 @@ export default function StepUp(props) {
                     targetModule.circuitNumber = module.circuit
                     canvas.add(moduleCircuitText)
                   } else {
-                    mChk++;
+                    mChk++
                   }
                 })
               })
@@ -399,10 +395,14 @@ export default function StepUp(props) {
     }))
   }
 
+  const handleChangeApplyParalQty = (mainIdx, subIdx, applyParalQty) => {
+    handleRowClick(mainIdx, subIdx, applyParalQty)
+  }
+
   /**
    * 행 선택 핸들러 함수 추가
    */
-  const handleRowClick = (mainIdx, subIdx) => {
+  const handleRowClick = (mainIdx, subIdx, applyParalQty = null) => {
     /** 자동 승압 설정인 경우만 실행 */
     if (allocationType !== 'auto') return
 
@@ -434,7 +434,13 @@ export default function StepUp(props) {
 
           /** 선택된 serQty 찾기 */
           const selectedSerQty = matchingPcsItem?.serQtyList.find((serQty) => serQty.selected)?.serQty || 0
-
+          if (index === 0) {
+            return {
+              ...pcsItem,
+              applySerQty: selectedSerQty,
+              applyParalQty: +applyParalQty,
+            }
+          }
           return {
             ...pcsItem,
             applySerQty: selectedSerQty,
@@ -474,7 +480,7 @@ export default function StepUp(props) {
         module.pcsItemId = null
       })
 
-      /** 선택된 모듈 목록 추가 */
+    /** 선택된 모듈 목록 추가 */
     selectedData.roofSurfaceList.forEach((roofSurface) => {
       const targetSurface = canvas.getObjects().filter((obj) => obj.id === roofSurface.roofSurfaceId)[0]
       const moduleIds = targetSurface.modules.map((module) => {
@@ -523,7 +529,7 @@ export default function StepUp(props) {
 
     canvas.renderAll()
     setModuleStatisticsData()
-    }
+  }
 
   /**
    * 현재 선택된 값들을 가져오는 함수 추가
@@ -645,15 +651,39 @@ export default function StepUp(props) {
                                 <tr
                                   key={`row-${serQtyIdx}`}
                                   className={`${item.selected ? 'on' : ''}`}
-                                  onClick={() => handleRowClick(idx, serQtyIdx)}
+                                  onClick={() => {
+                                    if (idx === 0) return
+                                    handleRowClick(idx, serQtyIdx)
+                                  }}
                                   style={{ cursor: allocationType === 'auto' ? 'pointer' : 'default' }}
                                 >
                                   <td className="al-r">{item.serQty}</td>
                                   <td className="al-r">
                                     {/* 2025.12.04 select 추가 */}
-                                    <select className="select-light dark table-select" name="" id="">
-                                      <option value="">{item.paralQty}</option>
-                                    </select>
+                                    {idx === 0 ? (
+                                      <select
+                                        className="select-light dark table-select"
+                                        defaultValue={item.paralQty}
+                                        name=""
+                                        id=""
+                                        onChange={(e) => {
+                                          handleChangeApplyParalQty(idx, serQtyIdx, e.target.value)
+                                        }}
+                                      >
+                                        {item.paralQty === 0 && (
+                                          <option key="0" value="0">
+                                            0
+                                          </option>
+                                        )}
+                                        {Array.from({ length: item.paralQty }, (_, i) => i + 1).map((num) => (
+                                          <option key={num} value={num}>
+                                            {num}
+                                          </option>
+                                        ))}
+                                      </select>
+                                    ) : (
+                                      <>{item.paralQty}</>
+                                    )}
                                   </td>
                                   {/* <td className="al-r">{item.paralQty}</td> */}
                                 </tr>

src/hooks/useCanvasEvent.js

@@ -50,6 +50,10 @@ export function useCanvasEvent() {
 
       if (target) {
         // settleDown(target)
+        // roof 이동 후 좌표 재계산
+        if (target.name === POLYGON_TYPE.ROOF && target.type === 'QPolygon') {
+          target.fire('polygonMoved')
+        }
       }
     },
     addEvent: (e) => {