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

# Conflicts:
#	src/store/circuitTrestleAtom.js

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">

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/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>

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} />}

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 ? (

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) => (
+                {header.map((item, index) => (
-                  <th>{item.name}</th>
+                  <th key={index}>{item.name}</th>
                 ))}
               </tr>
             </thead>
             <tbody>
-              {rows.map((row) => (
+              {rows.map((row, index) => (
-                <tr>
+                <tr key={index}>
-                  {header.map((item) => (
+                  {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) => (
+                {footer.map((item, index) => (
-                  <td>{item}</td>
+                  <td key={index}>{typeof item === 'number' ? item.toLocaleString('ko-KR', { maximumFractionDigits: 4 }) : item}</td>
                   // <td className="al-r">{item.amount}</td>
                 ))}
               </tr>

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>

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} />}

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/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)
 

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({
@@ -30,6 +40,6 @@ export const moduleStatisticsState = atom({
       { name: `발전량(kW)`, prop: 'amount' },
     ],
     rows: [],
-    footer: ['합계', 0],
+    footer: ['합계', '0'],
   },
 })

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{

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{

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;