Merge remote-tracking branch 'origin/qcast-pub' into dev

# Conflicts: # src/store/circuitTrestleAtom.js
2025-01-21 11:08:40 +09:00 · 2025-01-21 11:08:40 +09:00 · 297f1f563b
commit 297f1f563b
parent cccb5b88ea fd8045aa8f
16 changed files with 2007 additions and 2192 deletions
--- a/src/components/floor-plan/modal/basic/step/Orientation.jsx
+++ b/src/components/floor-plan/modal/basic/step/Orientation.jsx
@ -34,7 +34,6 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
  return (
    <>
      <div className="properties-setting-wrap">
-        <div className="setting-tit">{getMessage('modal.module.basic.setting.orientation.setting')}</div>
        <div className="outline-wrap">
          <div className="guide">{getMessage('modal.module.basic.setting.orientation.setting.info')}</div>
          <div className="roof-module-compas">
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/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)
-    if (selectedModels.length === 0) {
+    console.log('🚀 ~ onPassivityAllocation ~ selectedModels:', models)
+
+    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)
--- a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
+++ b/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
-  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)
+  let { tabNum, setTabNum, makers, setMakers, selectedMaker, setSelectedMaker, series, setSeries, models, setModels } = props
  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 () => {
-      setMakerData({ makers, selectedMaker })
-      setSeries({ series: seriesList, selectedSeries })
-      setModel({ models, selectedModels })
-    }
+    // return () => {
+    //   console.log('🚀 ~ useEffect ~ PowerConditionalSelect unmount:', makers, selectedMaker)
+    //   setMakerData({ makers, selectedMaker })
+    //   setSeries({ series: seriesList, selectedSeries })
+    //   setModels({ models, selectedModels })
+    // }
  }, [])

  useEffect(() => {
    console.log('🚀 ~ PowerConditionalSelect ~ selectedMaker:', selectedMaker)
    if (selectedMaker) {
-      setSelectedModels([])
-      setModels([])
+      setModels(null)
      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
-    const pcsMkrCd = seriesList.filter((series) => series.selected)[0]?.pcsMkrCd
-    const pcsSerList = seriesList
+    if (series.filter((s) => s.selected).length === 0) return
+    const pcsMkrCd = series.filter((s) => s.selected)[0]?.pcsMkrCd
+    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])
-
-  useEffect(() => {
-    console.log('🚀 ~ useEffect ~ models:', models)
-  }, [models])
-
-  useEffect(() => {
-    console.log('🚀 ~ useEffect ~ pcsCheck:', pcsCheck)
-  }, [pcsCheck])
+  }, [series])

  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(() => {
-    console.log('🚀 ~ useEffect ~ selectedModels:', selectedModels)
-    const selectedModelsIds = selectedModels.map((model) => model.code)
+  // useEffect(() => {
+  //   console.log('🚀 ~ useEffect ~ selectedModels:', selectedModels)
+  //   const selectedModelsIds = selectedModels.map((model) => model.code)

-    setModels(
-      models.map((model) => {
-        return {
-          ...model,
-          selected: selectedModelsIds.includes(model.code),
-        }
-      }),
-    )
-    setModel({ ...model, selectedModels: selectedModels })
-  }, [selectedModels])
+  //   setModels(
+  //     models.map((model) => {
+  //       return {
+  //         ...model,
+  //         selected: selectedModelsIds.includes(model.code),
+  //       }
+  //     }),
+  //   )
+  //   setModel({ ...model, 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) => (
-              <span className="normal-font">
-                {model.itemNm} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button>
-              </span>
-            ))}
+            {models
+              ?.filter((m) => m.selected)
+              ?.map((model) => (
+                <span className="normal-font">
+                  {model.itemNm} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button>
+                </span>
+              ))}
          </div>
        </div>
      </div>
--- a/src/components/floor-plan/modal/movement/MovementSetting.jsx
+++ b/src/components/floor-plan/modal/movement/MovementSetting.jsx
@ -33,7 +33,6 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
            ))}
          </div>
          <div className="properties-setting-wrap outer">
-            <div className="setting-tit">{getMessage('setting')}</div>
            {type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />}
            {type === TYPE.UP_DOWN && <Updown {...updownProps} />}
          </div>
--- a/src/components/floor-plan/modal/object/ObjectSetting.jsx
+++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx
@ -92,7 +92,6 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
            ))}
          </div>
          <div className="properties-setting-wrap outer">
-            <div className="setting-tit">{getMessage('setting')}</div>
            {buttonAct === 1 && <OpenSpace ref={objectPlacement} />}
            {buttonAct === 2 && <Shadow ref={objectPlacement} />}
            {buttonAct === 3 && <TriangleDormer ref={dormerPlacement} />}
--- a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
@ -152,7 +152,6 @@ export default function WallLineSetting(props) {
            </button>
          </div>
          <div className="properties-setting-wrap outer">
-            <div className="setting-tit">{getMessage('modal.cover.outline.setting')}</div>
            {type === OUTER_LINE_TYPE.OUTER_LINE ? (
              <OuterLineWall props={outerLineProps} />
            ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
--- a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
+++ b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
@ -4,7 +4,7 @@ import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
-import { useRecoilValue } from 'recoil'
+import { useRecoilValue, useResetRecoilState } from 'recoil'

 export default function PanelBatchStatistics() {
  const { getMessage } = useMessage()
@ -24,23 +24,23 @@ export default function PanelBatchStatistics() {
          <table className="penal-table">
            <thead>
              <tr>
-                {header.map((item) => (
-                  <th>{item.name}</th>
+                {header.map((item, index) => (
+                  <th key={index}>{item.name}</th>
                ))}
              </tr>
            </thead>
            <tbody>
-              {rows.map((row) => (
-                <tr>
-                  {header.map((item) => (
+              {rows.map((row, index) => (
+                <tr key={index}>
+                  {header.map((item, i) => (
                    // <td>{item.prop === 'name' ? item.name : item.prop === 'powerGeneration' ? item.powerGeneration : item.amount}</td>
-                    <td>{row[item.prop]}</td>
+                    <td key={i}>{row[item.prop]}</td>
                  ))}
                </tr>
              ))}
              <tr>
-                {footer.map((item) => (
-                  <td>{item}</td>
+                {footer.map((item, index) => (
+                  <td key={index}>{typeof item === 'number' ? item.toLocaleString('ko-KR', { maximumFractionDigits: 4 }) : item}</td>
                  // <td className="al-r">{item.amount}</td>
                ))}
              </tr>
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
@ -142,7 +142,6 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
            ))}
          </div>
          <div className="properties-setting-wrap outer">
-            <div className="setting-tit">{getMessage('setting')}</div>
            {buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
            {buttonAct === 2 && <RightAngle props={rightAngleProps} />}
            {buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
@ -155,7 +154,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
              {getMessage('modal.cover.outline.rollback')}
            </button>
            <button className="btn-frame modal act" onClick={handleFix}>
-              {getMessage('modal.cover.outline.fix')}
+              {getMessage('modal.placement.surface.drawing.fix')}
            </button>
          </div>
        </div>
--- a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
@ -108,7 +108,6 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
            ))}
          </div>
          <div className="properties-setting-wrap">
-            <div className="setting-tit">{getMessage('setting')}</div>
            {shapeNum === 1 && <Ridge {...ridgeProps} />}
            {(shapeNum === 2 || shapeNum === 3) && <Pattern {...patternProps} />}
            {shapeNum === 4 && <Side {...sideProps} />}
--- a/src/hooks/common/useMasterController.js
+++ b/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
    })
  }
--- a/src/hooks/module/useModuleBasicSetting.js
+++ b/src/hooks/module/useModuleBasicSetting.js
@ -1,4 +1,4 @@
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, checkedModuleState, isManualModuleSetupState, selectedModuleState } from '@/store/canvasAtom'
 import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon } from '@/util/canvas-util'
 import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
@ -32,7 +32,7 @@ export function useModuleBasicSetting() {
  const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
  const checkedModule = useRecoilValue(checkedModuleState)
  const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
-  const [moduleStatistics, setModuleStatistics] = useRecoilState(moduleStatisticsState)
+  const setModuleStatistics = useSetRecoilState(moduleStatisticsState)

  useEffect(() => {
    // console.log('basicSetting', basicSetting)
@ -485,6 +485,7 @@ export function useModuleBasicSetting() {
                let manualModule = new QPolygon(tempModule.points, { ...moduleOptions, moduleInfo: checkedModule[0] })
                canvas?.add(manualModule)
                manualDrawModules.push(manualModule)
+                getModuleStatistics()
              } else {
                swalFire({ text: getMessage('module.place.overlab') })
              }
@ -1843,6 +1844,8 @@ export function useModuleBasicSetting() {
        }
      })
    }
+
+    getModuleStatistics()
  }

  const autoFlatroofModuleSetup = (placementFlatRef) => {
@ -2233,7 +2236,7 @@ export function useModuleBasicSetting() {
      })

      moduleSetupSurface.set({ modules: setupedModules })
-
+      getModuleStatistics()
      // console.log('moduleSetupSurface', moduleSetupSurface)
      // console.log('setupedModules', setupedModules)

--- a/src/store/circuitTrestleAtom.js
+++ b/src/store/circuitTrestleAtom.js
@ -1,20 +1,30 @@
 import { useMessage } from '@/hooks/useMessage'
 import { atom } from 'recoil'

-export const makerState = atom({
-  key: 'makerState',
-  default: { makers: [], selectedMaker: null },
+export const makersState = atom({
+  key: 'makersState',
+  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({
@ -30,6 +40,6 @@ export const moduleStatisticsState = atom({
      { name: `발전량(kW)`, prop: 'amount' },
    ],
    rows: [],
-    footer: ['합계', 0],
+    footer: ['합계', '0'],
  },
 })
--- a/src/styles/_canvasside.scss
+++ b/src/styles/_canvasside.scss
@ -37,7 +37,7 @@
        border: 1px solid #3D3D3D;
        padding: 20px;
        .penal-table{
-            table-layout: fixed;
+            table-layout: auto;
            border-collapse: collapse;
            thead{
                th{
@ -45,8 +45,11 @@
                    background-color:rgba(255, 255, 255, 0.05);
                    font-size: 12px;
                    font-weight: 500;
+                    min-width: 140px;
+                    padding: 0 15px;
                    color: #fff;
                    border: 1px solid #505050;
+                    white-space: nowrap;
                }
            }
            tbody{
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@ -414,6 +414,15 @@ button{
            transform: translateY(-50%) rotate(-180deg);
        }
    }
+    &.disabled{
+        cursor: default;
+        p{
+            color: #aaa;
+        }
+        &::after{
+            opacity: 0.7;
+        }
+    }
 }

 .select-light{
--- a/src/styles/spinner.scss
+++ b/src/styles/spinner.scss
@ -1,10 +1,14 @@
 .spinner-wrap{
+    position: fixed;
+    top: 0;
+    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
-    background-color: #fff;
+    background-color: rgba($color: #101010, $alpha: 0.2);
+    z-index: 2000000;
    .loader {
        font-size: 10px;
        width: 1.2em;