자동 회로할당 개발중

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

@@ -6,14 +6,12 @@ import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp'
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
 import PassivityCircuitAllocation from './step/type/PassivityCircuitAllocation'
-import { useAxios } from '@/hooks/useAxios'
 import { useMasterController } from '@/hooks/common/useMasterController'
-import { get } from 'react-hook-form'
 import { correntObjectNoState } from '@/store/settingAtom'
 import { useRecoilValue } from 'recoil'
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { useRecoilState } from 'recoil'
-import { modelState, pcsCheckState, powerConditionalState } from '@/store/circuitTrestleAtom'
+import { makersState, modelsState, modelState, pcsCheckState, selectedMakerState, seriesState } from '@/store/circuitTrestleAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { useSwal } from '@/hooks/useSwal'
 import { canvasState } from '@/store/canvasAtom'
@@ -27,30 +25,31 @@ const ALLOCATION_TYPE = {
 export default function CircuitTrestleSetting({ id }) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
-  // 탭 번호 1: 파워 컨디셔너 선택(+수동 설정)
-  // 탭 번호 2: 회로 할당
-  const [tabNum, setTabNum] = useState(1)
-  const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
-
-  const [makers, setMakers] = useState([])
-  const [series, setSeries] = useState([])
-  const [model, setModel] = useRecoilState(modelState)
-  const [selectedModels, setSelectedModels] = useState(model.selectedModels)
-  const [models, setModels] = useState(model.models)
-  const [selectedMaker, setSelectedMaker] = useState(null)
-  const [selectedSeries, setSelectedSeries] = useState(null)
-  const correntObjectNo = useRecoilValue(correntObjectNoState)
-  const { getPcsMakerList } = useMasterController()
-  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
-  const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
-  const canvas = useRecoilValue(canvasState)
   const { apply } = useTrestle()
   const { swalFire } = useSwal()
+  const canvas = useRecoilValue(canvasState)
+
+  const [makers, setMakers] = useRecoilState(makersState)
+  const [selectedMaker, setSelectedMaker] = useRecoilState(selectedMakerState)
+  const [series, setSeries] = useRecoilState(seriesState)
+  const [models, setModels] = useRecoilState(modelsState)
+  const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
+
+  const [tabNum, setTabNum] = useState(1)
+  const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
   const [circuitAllocationType, setCircuitAllocationType] = useState(1)
 
   const powerConditionalSelectProps = {
     tabNum,
     setTabNum,
+    makers,
+    setMakers,
+    selectedMaker,
+    setSelectedMaker,
+    series,
+    setSeries,
+    models,
+    setModels,
   }
   const circuitProps = {
     tabNum,
@@ -59,11 +58,6 @@ export default function CircuitTrestleSetting({ id }) {
     setCircuitAllocationType,
   }
 
-  useEffect(() => {
-    console.log('🚀 ~ CircuitTrestleSetting ~ model:', model)
-    setSelectedModels(model.selectedModels)
-  }, [model])
-
   const onAutoAllocation = () => {
     let moduleStdQty = 0
     let moduleMaxQty = 0
@@ -100,14 +94,16 @@ export default function CircuitTrestleSetting({ id }) {
   }
 
   const onPassivityAllocation = () => {
-    console.log('🚀 ~ onPassivityAllocation ~ selectedModels:', model)
+    console.log('🚀 ~ onPassivityAllocation ~ selectedModels:', models)
-    if (selectedModels.length === 0) {
+
+    if (models.filter((m) => m.selected).length === 0) {
       swalFire({
         title: '파워 컨디셔너를 추가해 주세요.',
         type: 'alert',
       })
       return
     } else if (pcsCheck.max) {
+      const selectedModels = models.filter((m) => m.selected)
       const moduleStdQty = selectedModels.reduce((acc, model) => {
         return acc + parseInt(model.moduleStdQty)
       }, 0)

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

@@ -1,28 +1,18 @@
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMasterController } from '@/hooks/common/useMasterController'
-import { useEvent } from '@/hooks/useEvent'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
-import { makerState, modelState, pcsCheckState, seriesState } from '@/store/circuitTrestleAtom'
+import { pcsCheckState } from '@/store/circuitTrestleAtom'
 import { globalLocaleStore } from '@/store/localeAtom'
-import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { useContext, useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 
 export default function PowerConditionalSelect(props) {
-  let { tabNum, setTabNum } = props
+  let { tabNum, setTabNum, makers, setMakers, selectedMaker, setSelectedMaker, series, setSeries, models, setModels } = props
-  const [makerData, setMakerData] = useRecoilState(makerState)
-  const [makers, setMakers] = useState(makerData.makers)
-  const [selectedMaker, setSelectedMaker] = useState(makerData.selectedMaker)
-  const [series, setSeries] = useRecoilState(seriesState)
-  const [seriesList, setSeriesList] = useState(series.series)
-  const [selectedSeries, setSelectedSeries] = useState(series.selectedSeries)
-  const [model, setModel] = useRecoilState(modelState)
-  const [models, setModels] = useState(model.models)
-  const [selectedModels, setSelectedModels] = useState(model.selectedModels)
   const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
   const { getMessage } = useMessage()
@@ -69,20 +59,20 @@ export default function PowerConditionalSelect(props) {
     //   console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res)
     //   // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량)
     // })
-    return () => {
+    // return () => {
-      setMakerData({ makers, selectedMaker })
+    //   console.log('🚀 ~ useEffect ~ PowerConditionalSelect unmount:', makers, selectedMaker)
-      setSeries({ series: seriesList, selectedSeries })
+    //   setMakerData({ makers, selectedMaker })
-      setModel({ models, selectedModels })
+    //   setSeries({ series: seriesList, selectedSeries })
-    }
+    //   setModels({ models, selectedModels })
+    // }
   }, [])
 
   useEffect(() => {
     console.log('🚀 ~ PowerConditionalSelect ~ selectedMaker:', selectedMaker)
     if (selectedMaker) {
-      setSelectedModels([])
+      setModels(null)
-      setModels([])
       getPcsMakerList(selectedMaker).then((res) => {
-        setSeriesList(
+        setSeries(
           res.data.map((series) => {
             return { ...series, selected: false }
           }),
@@ -92,9 +82,9 @@ export default function PowerConditionalSelect(props) {
   }, [selectedMaker])
 
   useEffect(() => {
-    if (seriesList.filter((series) => series.selected).length === 0) return
+    if (series.filter((s) => s.selected).length === 0) return
-    const pcsMkrCd = seriesList.filter((series) => series.selected)[0]?.pcsMkrCd
+    const pcsMkrCd = series.filter((s) => s.selected)[0]?.pcsMkrCd
-    const pcsSerList = seriesList
+    const pcsSerList = series
       .filter((series) => series.selected)
       .map((series) => {
         return { pcsSerCd: series.pcsSerCd }
@@ -106,7 +96,7 @@ export default function PowerConditionalSelect(props) {
       }
     })
     getPcsModelList({ pcsMkrCd, pcsSerList, moduleItemList }).then((res) => {
-      if (res?.result.code === 200) {
+      if (res?.result.code === 200 && res?.data) {
         console.log('🚀 ~ useEffect ~ res:', res.data)
         setModels(
           res.data.map((model) => {
@@ -121,23 +111,15 @@ export default function PowerConditionalSelect(props) {
         )
       }
     })
-  }, [seriesList])
+  }, [series])
-
-  useEffect(() => {
-    console.log('🚀 ~ useEffect ~ models:', models)
-  }, [models])
-
-  useEffect(() => {
-    console.log('🚀 ~ useEffect ~ pcsCheck:', pcsCheck)
-  }, [pcsCheck])
 
   const onCheckSeries = (series) => {
-    setSeriesList((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
+    setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
   }
 
   const onAddSelectedModel = () => {
     if (selectedRow === null) return
-    if (selectedModels.length === 3) {
+    if (models.filter((m) => m.selected).length === 3) {
       swalFire({
         title: '최대 3개까지 선택할 수 있습니다.',
         icon: 'warning',
@@ -145,28 +127,41 @@ export default function PowerConditionalSelect(props) {
 
       return
     }
-    setSelectedModels([...selectedModels, selectedRow])
+    setModels(
+      models.map((model) => {
+        if (model.code === selectedRow.code) {
+          return {
+            ...model,
+            selected: true,
+          }
+        }
+        return {
+          ...model,
+        }
+      }),
+    )
     setSelectedRow(null)
   }
 
   const onRemoveSelectedModel = (model) => {
-    setSelectedModels(selectedModels.filter((m) => m.code !== model.code))
+    // setSelectedModels(selectedModels.filter((m) => m.code !== model.code))
+    setModels(models.map((m) => ({ ...m, selected: m.code !== model.code ? m.selected : false })))
   }
 
-  useEffect(() => {
+  // useEffect(() => {
-    console.log('🚀 ~ useEffect ~ selectedModels:', selectedModels)
+  //   console.log('🚀 ~ useEffect ~ selectedModels:', selectedModels)
-    const selectedModelsIds = selectedModels.map((model) => model.code)
+  //   const selectedModelsIds = selectedModels.map((model) => model.code)
 
-    setModels(
+  //   setModels(
-      models.map((model) => {
+  //     models.map((model) => {
-        return {
+  //       return {
-          ...model,
+  //         ...model,
-          selected: selectedModelsIds.includes(model.code),
+  //         selected: selectedModelsIds.includes(model.code),
-        }
+  //       }
-      }),
+  //     }),
-    )
+  //   )
-    setModel({ ...model, selectedModels: selectedModels })
+  //   setModel({ ...model, selectedModels: selectedModels })
-  }, [selectedModels])
+  // }, [selectedModels])
   return (
     <>
       <div className="outline-form mb15">
@@ -191,7 +186,7 @@ export default function PowerConditionalSelect(props) {
       <div className="module-table-box mb10">
         <div className="module-table-inner">
           <div className="circuit-check-inner overflow">
-            {seriesList?.map((series, index) => (
+            {series?.map((series, index) => (
               <div className="d-check-box pop sel">
                 <input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} checked={series.selected} />
                 <label htmlFor={`"ch0"${index}`}>{globalLocale === 'ko' ? series.pcsSerNm : series.pcsSerNmJp}</label>
@@ -234,11 +229,13 @@ export default function PowerConditionalSelect(props) {
             </button>
           </div>
           <div className="circuit-data-form">
-            {selectedModels?.map((model) => (
+            {models
-              <span className="normal-font">
+              ?.filter((m) => m.selected)
-                {model.itemNm} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button>
+              ?.map((model) => (
-              </span>
+                <span className="normal-font">
-            ))}
+                  {model.itemNm} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button>
+                </span>
+              ))}
           </div>
         </div>
       </div>

src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx

@@ -2,7 +2,7 @@ import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { POLYGON_TYPE } from '@/common/common'
 import { useMessage } from '@/hooks/useMessage'
 import { canvasState } from '@/store/canvasAtom'
-import { modelState, moduleStatisticsState } from '@/store/circuitTrestleAtom'
+import { modelState } from '@/store/circuitTrestleAtom'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { useContext, useEffect, useState } from 'react'
 import { useRecoilValue } from 'recoil'
@@ -19,16 +19,15 @@ export default function PassivityCircuitAllocation() {
   const canvas = useRecoilValue(canvasState)
   const selectedModules = useRecoilValue(selectedModuleState)
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
-  const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
   const [moduleData, setModuleData] = useState({
-    header: header,
+    header: [],
-    rows: rows,
+    rows: [],
-    footer: footer,
   })
   const model = useRecoilValue(modelState)
   const [selectedModels, setSelectedModels] = useState(model.selectedModels)
   const [selectedPcs, setSelectedPcs] = useState(selectedModels[0])
   const [totalWpout, setTotalWpout] = useState(0)
+
   useEffect(() => {
     setSurfaceInfo()
     if (!managementState) {

src/hooks/common/useMasterController.js

@@ -147,7 +147,7 @@ export function useMasterController() {
       ],
     }
 
-    return await post({ url: '/api/v1/master/getPcsSeriesItemList', data: test }).then((res) => {
+    return await post({ url: '/api/v1/master/getPcsSeriesItemList', data: params }).then((res) => {
       return res
     })
   }

src/store/circuitTrestleAtom.js

@@ -1,20 +1,30 @@
 import { useMessage } from '@/hooks/useMessage'
 import { atom } from 'recoil'
 
-export const makerState = atom({
+export const makersState = atom({
-  key: 'makerState',
+  key: 'makersState',
-  default: { makers: [], selectedMaker: null },
+  default: [],
   dangerouslyAllowMutability: true,
 })
 
+export const selectedMakerState = atom({
+  key: 'selectedMakerState',
+  default: null,
+})
+
 export const seriesState = atom({
   key: 'seriesState',
-  default: { series: [], selectedSeries: [] },
+  default: [],
 })
 
-export const modelState = atom({
+export const selectedSeriesState = atom({
+  key: 'selectedSeriesState',
+  default: null,
+})
+
+export const modelsState = atom({
   key: 'modelState',
-  default: { models: [], selectedModels: [] },
+  default: [],
 })
 
 export const pcsCheckState = atom({