From 517eb7266ea8928b8930c25044da5179c82eea52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?=
 <43837214+Minsiki@users.noreply.github.com>
Date: Mon, 3 Feb 2025 19:25:23 +0900
Subject: [PATCH] =?UTF-8?q?=ED=95=A0=EB=8B=B9=20=ED=85=8C=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=94=20=EC=88=98=EC=A0=95,=20=EC=84=A0=ED=83=9D=EC=8B=9C?=
 =?UTF-8?q?=20=ED=9A=8C=EB=A1=9C=20=EB=B2=88=ED=98=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/circuitTrestle/step/StepUp.jsx      | 200 +++++++++++-------
 1 file changed, 122 insertions(+), 78 deletions(-)

diff --git a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
index 71dd3e30..d5b19b77 100644
--- a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
@@ -9,6 +9,7 @@ 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'
 
 export default function StepUp(props) {
   const { getMessage } = useMessage()
@@ -97,7 +98,7 @@ export default function StepUp(props) {
       pcsItemList: formatPcsItemList(stepUps.pcsItemList),
       selectedPcsItem: formatPcsItemList(stepUps.pcsItemList),
     }))
-
+    console.log('🚀 ~ formatStepUpListData ~ formattedData:', formattedData)
     // 초기 추천 값들을 selectedValues에 저장
     const initialSelectedValues = {}
     formattedData.forEach((stepUp) => {
@@ -173,11 +174,13 @@ export default function StepUp(props) {
   // PCS 시리즈 포맷
   const formatSerQtyList = (serQtyList = []) => {
     return serQtyList?.map((qty) => ({
+      code: uuidv4(),
       serQty: qty.serQty ? qty.serQty : 0,
       paralQty: qty.paralQty ? qty.paralQty : 0,
       rmdYn: qty.rmdYn ? qty.rmdYn : 'N',
       usePossYn: qty.usePossYn ? qty.usePossYn : 'Y',
       roofSurfaceList: formatRoofSurfaceList(qty.roofSurfaceList),
+      selected: qty.rmdYn === 'Y',
     }))
   }
 
@@ -209,75 +212,123 @@ export default function StepUp(props) {
   }
 
   // 행 선택 핸들러 함수 추가
-  const handleRowClick = (goodsNo, pcsIdx, serQtyIdx, serQty, paralQty) => {
-    const rowKey = `${goodsNo}_${pcsIdx}_${serQtyIdx}`
-    const pcsKey = `${goodsNo}_${pcsIdx}`
-
-    console.log('goodsNo >> ', goodsNo, serQty, paralQty)
-
-    // 현재 선택된 PCS 아이템 정보 가져오기
-    const pcsItem = stepUpListData.find((stepUp) => stepUp.pcsItemList.find((item) => item.goodsNo === goodsNo))?.pcsItemList[pcsIdx]
-
-    if (!pcsItem) {
-      console.error('PCS item not found:', { goodsNo, pcsIdx })
-      return
-    }
-
-    // 선택된 값들 업데이트 - 더 자세한 정보 포함
-    const selectionData = {
-      goodsNo: goodsNo,
-      pcsInfo: {
-        itemId: pcsItem?.itemId,
-        goodsNo: pcsItem?.goodsNo,
-        pcsMkrCd: pcsItem?.pcsMkrCd,
-        pcsSerCd: pcsItem?.pcsSerCd,
-      },
-      allocation: {
-        serQty: serQty,
-        paralQty: paralQty,
-      },
-    }
-
-    // 선택된 값들 업데이트
-    setSelectedValues((prev) => ({
-      ...prev,
-      [goodsNo]: {
-        ...prev[goodsNo],
-        [pcsKey]: selectionData,
-      },
-    }))
-
-    // 부모 컴포넌트에 선택된 값들 전달
-    if (props.onValuesSelected) {
-      props.onValuesSelected(selectionData)
-    }
-
-    setSelectedRows((prev) => {
-      // 현재 stepUpId에 대한 선택 상태가 없으면 빈 객체로 초기화
-      const currentStepUpSelections = prev[goodsNo] || {}
-
-      // 이미 선택된 행을 다시 클릭하는 경우, 선택을 해제하지 않음
-      if (currentStepUpSelections[pcsKey] === rowKey) {
-        return prev
+  // const handleRowClick = (goodsNo, pcsIdx, serQtyIdx, serQty, paralQty) => {
+  const handleRowClick = (mainIdx, subIdx) => {
+    // const rowKey = `${goodsNo}_${pcsIdx}_${serQtyIdx}`
+    // const pcsKey = `${goodsNo}_${pcsIdx}`
+    // setSelectedRow(rowKey)
+    // item.selected = !item.selected\
+    let tempStepUpListData = [...stepUpListData]
+    let selectedData = {}
+    tempStepUpListData[0].pcsItemList[mainIdx].serQtyList.forEach((item, index) => {
+      if (index === subIdx) {
+        selectedData = item
       }
+      item.selected = index === subIdx
+    })
+    setStepUpListData(tempStepUpListData)
+    console.log('🚀 ~ handleRowClick ~ tempStepUpListData:', tempStepUpListData)
+    console.log('🚀 ~ handleRowClick ~ selectedData:', selectedData)
 
-      return {
-        ...prev,
-        [goodsNo]: {
-          ...currentStepUpSelections,
-          [pcsKey]: rowKey,
-        },
-      }
+    selectedData.roofSurfaceList.forEach((roofSurface) => {
+      const targetSurface = canvas.getObjects().filter((obj) => obj.id === roofSurface.roofSurfaceId)[0]
+      const moduleIds = targetSurface.modules.map((module) => {
+        return module.id
+      })
+      console.log(moduleIds)
+      canvas
+        .getObjects()
+        .filter((obj) => moduleIds.includes(obj.parentId))
+        .map((text) => {
+          console.log('🚀 ~ handleRowClick ~ text:', text)
+          canvas.remove(text)
+        })
+
+      canvas.renderAll()
+      roofSurface.moduleList.forEach((module) => {
+        console.log('🚀 ~ handleRowClick ~ module:', module.uniqueId)
+
+        const targetModule = canvas.getObjects().filter((obj) => obj.id === module.uniqueId)[0]
+        const moduleCircuitText = new fabric.Text(module.circuit, {
+          left: targetModule.left + targetModule.width / 2,
+          top: targetModule.top + targetModule.height / 2,
+          fill: 'black',
+          fontSize: 20,
+          width: targetModule.width,
+          height: targetModule.height,
+          textAlign: 'center',
+          originX: 'center',
+          originY: 'center',
+          name: 'circuitNumber',
+          parentId: targetModule.id,
+          circuitInfo: module.pcsItemId,
+        })
+        targetModule.circuit = moduleCircuitText
+        targetModule.circuitNumber = module.circuit
+        canvas.add(moduleCircuitText)
+      })
     })
 
-    // 수동 선택 상태를 업데이트하되, 기존 추천 선택은 유지
-    setIsManualSelection((prev) => ({
-      ...prev,
-      [goodsNo]: {
-        ...prev[goodsNo],
-        [pcsKey]: true,
-      },
-    }))
+    canvas.renderAll()
+    // console.log('goodsNo >> ', goodsNo, serQty, paralQty)
+    // 현재 선택된 PCS 아이템 정보 가져오기
+    // const pcsItem = stepUpListData.find((stepUp) => stepUp.pcsItemList.find((item) => item.goodsNo === goodsNo))?.pcsItemList[pcsIdx]
+
+    // 선택된 값들 업데이트 - 더 자세한 정보 포함
+    // const selectionData = {
+    //   goodsNo: tempStepUpListData[mainIdx].pcsItemList[subIdx].goodsNo,
+    //   pcsInfo: {
+    //     itemId: tempStepUpListData[mainIdx].pcsItemList[subIdx].itemId,
+    //     goodsNo: tempStepUpListData[mainIdx].pcsItemList[subIdx].goodsNo,
+    //     pcsMkrCd: tempStepUpListData[mainIdx].pcsItemList[subIdx].pcsMkrCd,
+    //     pcsSerCd: tempStepUpListData[mainIdx].pcsItemList[subIdx].pcsSerCd,
+    //   },
+    //   allocation: {
+    //     serQty: tempStepUpListData[mainIdx].pcsItemList[subIdx].serQtyList[subIdx].serQty,
+    //     paralQty: tempStepUpListData[mainIdx].pcsItemList[subIdx].serQtyList[subIdx]. paralQty,
+    //   },
+    // }
+
+    // // 선택된 값들 업데이트
+    // setSelectedValues((prev) => ({
+    //   ...prev,
+    //   [tempStepUpListData[mainIdx].pcsItemList[subIdx].goodsNo]: {
+    //     ...prev[tempStepUpListData[mainIdx].pcsItemList[subIdx].goodsNo],
+    //     [pcsKey]: selectionData,
+    //   },
+    // }))
+
+    // // 부모 컴포넌트에 선택된 값들 전달
+    // if (props.onValuesSelected) {
+    //   props.onValuesSelected(selectionData)
+    // }
+
+    // setSelectedRows((prev) => {
+    //   // 현재 stepUpId에 대한 선택 상태가 없으면 빈 객체로 초기화
+    //   const currentStepUpSelections = prev[goodsNo] || {}
+
+    //   // 이미 선택된 행을 다시 클릭하는 경우, 선택을 해제하지 않음
+    //   if (currentStepUpSelections[pcsKey] === rowKey) {
+    //     return prev
+    //   }
+
+    //   return {
+    //     ...prev,
+    //     [goodsNo]: {
+    //       ...currentStepUpSelections,
+    //       [pcsKey]: rowKey,
+    //     },
+    //   }
+    // })
+
+    // // 수동 선택 상태를 업데이트하되, 기존 추천 선택은 유지
+    // setIsManualSelection((prev) => ({
+    //   ...prev,
+    //   [goodsNo]: {
+    //     ...prev[goodsNo],
+    //     [pcsKey]: true,
+    //   },
+    // }))
   }
 
   // 현재 선택된 값들을 가져오는 함수 추가
@@ -310,7 +361,7 @@ export default function StepUp(props) {
           {/* 3개일때 className = by-max */}
           {stepUpListData.map((stepUp, index) => (
             <div key={index} className={`module-table-box ${stepUp.pcsItemList.length === 3 ? 'by-max' : ''}`}>
-              {stepUp?.pcsItemList.map((_, idx) => (
+              {stepUp?.pcsItemList.map((pcsItem, idx) => (
                 <div key={idx} className="module-table-inner">
                   <div className="mb-box">
                     <div className="circuit-table-tit">{stepUp.pcsItemList[idx].goodsNo}</div>
@@ -323,19 +374,12 @@ export default function StepUp(props) {
                           </tr>
                         </thead>
                         <tbody>
-                          {stepUp.pcsItemList[idx].serQtyList.map((item, serQtyIdx) => {
-                            const rowKey = `${stepUp.pcsItemList[idx].goodsNo}_${idx}_${serQtyIdx}`
-                            const pcsKey = `${stepUp.pcsItemList[idx].goodsNo}_${idx}`
+                          {pcsItem.serQtyList.map((item, serQtyIdx) => {
                             return (
                               <tr
-                                key={rowKey}
-                                className={`${
-                                  (!isManualSelection[stepUp.pcsItemList[idx].goodsNo]?.[pcsKey] && item.rmdYn === 'Y') ||
-                                  (selectedRows[stepUp.pcsItemList[idx].goodsNo] && selectedRows[stepUp.pcsItemList[idx].goodsNo][pcsKey] === rowKey)
-                                    ? 'on'
-                                    : ''
-                                }`}
-                                onClick={() => handleRowClick(stepUp.pcsItemList[idx].goodsNo, idx, serQtyIdx, item.serQty, item.paralQty)}
+                                key={`row-${serQtyIdx}`}
+                                className={`${item.selected ? 'on' : ''}`}
+                                onClick={() => handleRowClick(idx, serQtyIdx)}
                                 style={{ cursor: 'pointer' }}
                               >
                                 <td className="al-r">{item.serQty}</td>