회로할당(승압설정) 오류 수정 및 Recoil 추가

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

@@ -20,6 +20,8 @@ import { useTrestle } from '@/hooks/module/useTrestle'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { v4 as uuidv4 } from 'uuid'
 
+import { stepUpListDataState } from '@/store/circuitTrestleAtom'
+
 const ALLOCATION_TYPE = {
   AUTO: 'auto',
   PASSIVITY: 'passivity',
@@ -45,6 +47,12 @@ export default function CircuitTrestleSetting({ id }) {
   const selectedModules = useRecoilValue(selectedModuleState)
   const { getPcsAutoRecommendList, getPcsVoltageChk } = useMasterController()
 
+  // 회로할당(승합설정)에서 선택된 값들을 저장할 상태 추가
+  const [selectedStepUpValues, setSelectedStepUpValues] = useState({})
+  const [getStepUpSelections, setGetStepUpSelections] = useState(null)
+
+  const [stepUpListData, setStepUpListData] = useRecoilState(stepUpListDataState)
+
   useEffect(() => {
     if (!managementState) {
       setManagementState(managementStateLoaded)
@@ -59,6 +67,10 @@ export default function CircuitTrestleSetting({ id }) {
     }
   }, [tabNum])
 
+  useEffect(() => {
+    console.log('stepUpListData >>> ', stepUpListData)
+  }, [stepUpListData])
+
   const onAutoRecommend = () => {
     if (series.filter((s) => s.selected).length === 0) {
       swalFire({
@@ -331,6 +343,77 @@ export default function CircuitTrestleSetting({ id }) {
     setAllocationType(ALLOCATION_TYPE.PASSIVITY)
   }
 
+  // StepUp에서 선택된 값들을 처리하는 함수 수정
+  const handleStepUpValuesSelected = (selectionData) => {
+    const { gooodsNo } = selectionData
+
+    setSelectedStepUpValues((prev) => ({
+      ...prev,
+      [gooodsNo]: selectionData,
+    }))
+  }
+
+  // StepUp 컴포넌트 초기화 핸들러
+  const handleStepUpInitialize = (getCurrentSelections) => {
+    setGetStepUpSelections(() => getCurrentSelections)
+  }
+
+  // apply 함수 수정
+  const onApply = () => {
+    // 현재 선택된 값들 가져오기
+    const currentSelections = getStepUpSelections ? getStepUpSelections() : {}
+
+    console.log('currentSelections >>> ', currentSelections)
+
+    // 실제 선택된 값이 있는지 더 정확하게 확인
+    const hasSelections = Object.values(currentSelections).some((stepUpConfig) => Object.values(stepUpConfig).length > 0)
+
+    console.log('hasSelections >>> ', hasSelections)
+
+    if (!hasSelections) {
+      swalFire({
+        title: '승압 설정값을 선택해주세요.1',
+        type: 'alert',
+      })
+      return
+    }
+
+    // 선택된 값들 로그
+    console.log('Applying StepUp configurations:', currentSelections)
+
+    // StepUp 컴포넌트로부터 stepUpListData 받아오기
+    //const stepUpData = getStepUpSelections().stepUpListData
+    //console.log('stepUpData >>> ', stepUpData)
+    // stepUpListData를 Recoil state에 저장
+    // setStepUpListData(stepUpData)
+
+    // 선택된 값들을 배열로 변환하여 처리
+    const configurations = Object.values(currentSelections)
+      .map((stepUpConfig) => {
+        const firstConfig = Object.values(stepUpConfig)[0] // 첫 번째 설정만 사용
+        return {
+          pcsInfo: firstConfig.pcsInfo,
+          allocation: firstConfig.allocation,
+        }
+      })
+      .filter((config) => config.pcsInfo && config.allocation) // 유효한 설정만 필터링
+
+    console.log('Processed configurations:', configurations)
+
+    // stepUpListData를 Recoil state에 저장
+    setStepUpListData(configurations)
+
+    // 기존 apply 로직 실행 전에 필요한 데이터가 모두 있는지 확인
+    if (configurations.length > 0) {
+      apply()
+    } else {
+      swalFire({
+        title: '승압 설정값을 선택해주세요.2',
+        type: 'alert',
+      })
+    }
+  }
+
   const onClickPrev = () => {
     setAllocationType(ALLOCATION_TYPE.AUTO)
     swalFire({
@@ -388,6 +471,7 @@ export default function CircuitTrestleSetting({ id }) {
     getUseModuleItemList, // 사용된 모듈아이템 List
     getRoofSurfaceList, // 지붕면 목록
     getPcsItemList, // PCS 아이템 목록
+    onValuesSelected: handleStepUpValuesSelected, // 선택된 값들을 처리하는 함수
   }
 
   return (
@@ -409,7 +493,7 @@ export default function CircuitTrestleSetting({ id }) {
           </div>
           {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
           {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && <PassivityCircuitAllocation {...passivityProps} />}
-          {tabNum === 2 && <StepUp {...stepUpProps} />}
+          {tabNum === 2 && <StepUp {...stepUpProps} onInitialize={handleStepUpInitialize} />}
           {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
             <div className="grid-btn-wrap">
               <button className="btn-frame modal mr5" onClick={() => onAutoAllocation()}>
@@ -435,7 +519,8 @@ export default function CircuitTrestleSetting({ id }) {
               <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>
                 {getMessage('modal.common.prev')}
               </button>
-              <button className="btn-frame modal act" onClick={() => apply()}>
+              {/* <button className="btn-frame modal act" onClick={() => apply()}> */}
+              <button className="btn-frame modal act" onClick={onApply}>
                 {getMessage('modal.common.save')}({getMessage('modal.circuit.trestle.setting.circuit.allocation')})
               </button>
             </div>

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

@@ -27,6 +27,9 @@ export default function StepUp(props) {
   const [selectedRows, setSelectedRows] = useState({})
   const [isManualSelection, setIsManualSelection] = useState({})
 
+  // 선택된 값들을 저장할 상태 추가
+  const [selectedValues, setSelectedValues] = useState({})
+
   // useCanvasPopupStatusController(6)
   // const canvasPopupStatusState = useRecoilValue(canvasPopupStatusStore)
   // if (Object.keys(canvasPopupStatusState[6]).length !== 0) {
@@ -76,14 +79,59 @@ export default function StepUp(props) {
     }))
   }
 
-  // PCS 승압설정 정보 포맷
+  // // PCS 승압설정 정보 포맷
+  // const formatStepUpListData = (dataArray = []) => {
+  //   return dataArray?.map((stepUps) => ({
+  //     ...stepUps,
+  //     optionList: formatOptionList(stepUps.optionList),
+  //     pcsItemList: formatPcsItemList(stepUps.pcsItemList),
+  //     selectedPcsItem: formatPcsItemList(stepUps.pcsItemList),
+  //   }))
+  // }
+
+  // PCS 승압설정 정보 포맷 후 추천 값 저장
   const formatStepUpListData = (dataArray = []) => {
-    return dataArray?.map((stepUps) => ({
+    const formattedData = dataArray?.map((stepUps) => ({
       ...stepUps,
       optionList: formatOptionList(stepUps.optionList),
       pcsItemList: formatPcsItemList(stepUps.pcsItemList),
       selectedPcsItem: formatPcsItemList(stepUps.pcsItemList),
     }))
+
+    // 초기 추천 값들을 selectedValues에 저장
+    const initialSelectedValues = {}
+    formattedData.forEach((stepUp) => {
+      stepUp.pcsItemList.forEach((pcsItem, pcsIdx) => {
+        const pcsKey = `${stepUp.id}_${pcsIdx}`
+
+        // 추천 값(rmdYn === 'Y') 찾기
+        const recommendedRow = pcsItem.serQtyList.find((item) => item.rmdYn === 'Y')
+        if (recommendedRow) {
+          const selectionData = {
+            stepUpId: pcsItem.goodsNo,
+            pcsInfo: {
+              itemId: pcsItem.itemId,
+              goodsNo: pcsItem.goodsNo,
+              pcsMkrCd: pcsItem.pcsMkrCd,
+              pcsSerCd: pcsItem.pcsSerCd,
+            },
+            allocation: {
+              serQty: recommendedRow.serQty,
+              paralQty: recommendedRow.paralQty,
+            },
+          }
+
+          initialSelectedValues[stepUp.id] = {
+            ...initialSelectedValues[stepUp.id],
+            [pcsKey]: selectionData,
+          }
+        }
+      })
+    })
+
+    setSelectedValues(initialSelectedValues)
+
+    return formattedData
   }
 
   // PCS 옵션 포맷
@@ -133,21 +181,60 @@ export default function StepUp(props) {
   }
 
   // 각 모듈의 탭을 변경하는 함수
-  const handleTabChange = (stepUpId, idx, tabNumber) => {
+  const handleTabChange = (goodsNo, idx, tabNumber) => {
     setModuleTabs((prev) => ({
       ...prev,
-      [`${stepUpId}_${idx}`]: tabNumber,
+      [`${goodsNo}_${idx}`]: tabNumber,
     }))
   }
 
   // 행 선택 핸들러 함수 추가
-  const handleRowClick = (stepUpId, pcsIdx, serQtyIdx) => {
+  const handleRowClick = (goodsNo, pcsIdx, serQtyIdx, serQty, paralQty) => {
-    const rowKey = `${stepUpId}_${pcsIdx}_${serQtyIdx}`
+    const rowKey = `${goodsNo}_${pcsIdx}_${serQtyIdx}`
-    const pcsKey = `${stepUpId}_${pcsIdx}`
+    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[stepUpId] || {}
+      const currentStepUpSelections = prev[goodsNo] || {}
 
       // 이미 선택된 행을 다시 클릭하는 경우, 선택을 해제하지 않음
       if (currentStepUpSelections[pcsKey] === rowKey) {
@@ -156,7 +243,7 @@ export default function StepUp(props) {
 
       return {
         ...prev,
-        [stepUpId]: {
+        [goodsNo]: {
           ...currentStepUpSelections,
           [pcsKey]: rowKey,
         },
@@ -166,13 +253,36 @@ export default function StepUp(props) {
     // 수동 선택 상태를 업데이트하되, 기존 추천 선택은 유지
     setIsManualSelection((prev) => ({
       ...prev,
-      [stepUpId]: {
+      [goodsNo]: {
-        ...prev[stepUpId],
+        ...prev[goodsNo],
         [pcsKey]: true,
       },
     }))
   }
 
+  // 현재 선택된 값들을 가져오는 함수 추가
+  const getCurrentSelections = () => {
+    return selectedValues
+  }
+
+  // props로 getCurrentSelections 함수 전달
+  useEffect(() => {
+    if (props.onInitialize) {
+      props.onInitialize(getCurrentSelections)
+    }
+  }, [])
+
+  // stepUpListData가 변경될 때마다 업데이트하는 useEffect
+  useEffect(() => {
+    if (props.onInitialize) {
+      // onInitialize를 props에서 가져옴
+      props.onInitialize(() => ({
+        ...getCurrentSelections(),
+        stepUpListData, // stepUpListData를 포함하여 반환
+      }))
+    }
+  }, [stepUpListData])
+
   return (
     <>
       <div className="properties-setting-wrap outer">
@@ -194,18 +304,18 @@ export default function StepUp(props) {
                         </thead>
                         <tbody>
                           {stepUp.pcsItemList[idx].serQtyList.map((item, serQtyIdx) => {
-                            const rowKey = `${stepUp.id}_${idx}_${serQtyIdx}`
+                            const rowKey = `${stepUp.pcsItemList[idx].goodsNo}_${idx}_${serQtyIdx}`
-                            const pcsKey = `${stepUp.id}_${idx}`
+                            const pcsKey = `${stepUp.pcsItemList[idx].goodsNo}_${idx}`
                             return (
                               <tr
                                 key={rowKey}
                                 className={`${
-                                  (!isManualSelection[stepUp.id]?.[pcsKey] && item.rmdYn === 'Y') ||
+                                  (!isManualSelection[stepUp.pcsItemList[idx].goodsNo]?.[pcsKey] && item.rmdYn === 'Y') ||
-                                  (selectedRows[stepUp.id] && selectedRows[stepUp.id][pcsKey] === rowKey)
+                                  (selectedRows[stepUp.pcsItemList[idx].goodsNo] && selectedRows[stepUp.pcsItemList[idx].goodsNo][pcsKey] === rowKey)
                                     ? 'on'
                                     : ''
                                 }`}
-                                onClick={() => handleRowClick(stepUp.id, idx, serQtyIdx)}
+                                onClick={() => handleRowClick(stepUp.pcsItemList[idx].goodsNo, idx, serQtyIdx, item.serQty, item.paralQty)}
                                 style={{ cursor: 'pointer' }}
                               >
                                 <td className="al-r">{item.serQty}</td>
@@ -219,20 +329,20 @@ export default function StepUp(props) {
                   </div>
                   <div className="module-box-tab mb10">
                     <button
-                      className={`module-btn ${(moduleTabs[`${stepUp.id}_${idx}`] || 1) === 1 ? 'act' : ''}`}
+                      className={`module-btn ${(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 1 ? 'act' : ''}`}
-                      onClick={() => handleTabChange(stepUp.id, idx, 1)}
+                      onClick={() => handleTabChange(stepUp.pcsItemList[idx].goodsNo, idx, 1)}
                     >
                       {getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}
                     </button>
                     <button
-                      className={`module-btn ${(moduleTabs[`${stepUp.id}_${idx}`] || 1) === 2 ? 'act' : ''}`}
+                      className={`module-btn ${(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 2 ? 'act' : ''}`}
-                      onClick={() => handleTabChange(stepUp.id, idx, 2)}
+                      onClick={() => handleTabChange(stepUp.pcsItemList[idx].goodsNo, idx, 2)}
                     >
                       {getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}
                     </button>
                   </div>
                   <div className="circuit-table-flx-wrap">
-                    {(moduleTabs[`${stepUp.id}_${idx}`] || 1) === 1 && (
+                    {(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 1 && (
                       <div className="circuit-table-flx-box">
                         <div className="roof-module-table min mb10">
                           <table>
@@ -262,7 +372,7 @@ export default function StepUp(props) {
                         </div>
                       </div>
                     )}
-                    {(moduleTabs[`${stepUp.id}_${idx}`] || 1) === 2 && (
+                    {(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 2 && (
                       <div className="circuit-table-flx-box">
                         <div className="roof-module-table min mb10">
                           <table>

src/store/circuitTrestleAtom.js

@@ -44,3 +44,8 @@ export const moduleStatisticsState = atom({
   },
   dangerouslyAllowMutability: true,
 })
+
+export const stepUpListDataState = atom({
+  key: 'stepUpListDataState',
+  default: [],
+})