Merge branch 'dev' into dev-yj

# Conflicts:
#	src/locales/ko.json

src/app/GlobalLoadingProvider.js

@@ -0,0 +1,11 @@
+'use client'
+
+import { useContext } from 'react'
+import { QcastContext } from './QcastProvider'
+import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
+
+export default function GlobalLoadingProvider() {
+  const { isGlobalLoading } = useContext(QcastContext)
+
+  return <>{isGlobalLoading && <GlobalSpinner />}</>
+}

src/app/QcastProvider.js

@@ -6,7 +6,6 @@ import { useCommonCode } from '@/hooks/common/useCommonCode'
 import ServerError from './error'
 
 import '@/styles/common.scss'
-import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
 
 export const QcastContext = createContext({
   qcastState: {},
@@ -17,7 +16,7 @@ export const QcastContext = createContext({
 
 export const QcastProvider = ({ children }) => {
   const [planSave, setPlanSave] = useState(false)
-  const [isGlobalLoading, setIsGlobalLoading] = useState(false)
+  const [isGlobalLoading, setIsGlobalLoading] = useState(true)
   const { commonCode, findCommonCode } = useCommonCode()
 
   const [qcastState, setQcastState] = useState({
@@ -35,11 +34,6 @@ export const QcastProvider = ({ children }) => {
 
   return (
     <>
-      {isGlobalLoading && (
-        <div className="fixed inset-0 bg-white z-50 flex items-center justify-center">
-          <GlobalSpinner />
-        </div>
-      )}
       <QcastContext.Provider value={{ qcastState, setQcastState, isGlobalLoading, setIsGlobalLoading }}>
         <ErrorBoundary fallback={<ServerError />}>{children}</ErrorBoundary>
       </QcastContext.Provider>

src/app/floor-plan/FloorPlanProvider.js

@@ -47,14 +47,22 @@ const FloorPlanProvider = ({ children }) => {
   const searchParams = useSearchParams()
   const objectNo = searchParams.get('objectNo')
   const pid = searchParams.get('pid')
+  useEffect(() => {
+    if (pathname === '/floor-plan') {
+      if (pid === undefined || pid === '' || pid === null || objectNo === undefined || objectNo === '' || objectNo === null) {
+        notFound()
+      }
+      setCurrentObjectNo(objectNo)
+    }
+  }, [pathname])
 
   //useEffect(() => { // 오류 발생으로 useEffect 사용
-  if (pathname === '/floor-plan') {
-    if (pid === undefined || pid === '' || pid === null || objectNo === undefined || objectNo === '' || objectNo === null) {
-      notFound()
-    }
-    setCurrentObjectNo(objectNo)
-  }
+  // if (pathname === '/floor-plan') {
+  //   if (pid === undefined || pid === '' || pid === null || objectNo === undefined || objectNo === '' || objectNo === null) {
+  //     notFound()
+  //   }
+  //   setCurrentObjectNo(objectNo)
+  // }
   //}, [pid, objectNo])
 
   const [floorPlanState, setFloorPlanState] = useState({

src/app/floor-plan/layout.js

@@ -1,31 +1,22 @@
 'use client'
 
-import { usePathname } from 'next/navigation'
 import FloorPlanProvider from './FloorPlanProvider'
 import FloorPlan from '@/components/floor-plan/FloorPlan'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
-import { Suspense } from 'react'
-import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
 
 export default function FloorPlanLayout({ children }) {
-  console.log('🚀 ~ FloorPlanLayout ~ FloorPlanLayout:')
-  const pathname = usePathname()
-  console.log('🚀 ~ FloorPlanLayout ~ pathname:', pathname)
-
   return (
     <>
-      <Suspense fallback={<GlobalSpinner />}>
-        <FloorPlanProvider>
-          <FloorPlan>
-            {/* {pathname.includes('estimate') || pathname.includes('simulator') ? (
+      <FloorPlanProvider>
+        <FloorPlan>
+          {/* {pathname.includes('estimate') || pathname.includes('simulator') ? (
             <div className="canvas-layout">{children}</div>
           ) : (
             <CanvasLayout>{children}</CanvasLayout>
           )} */}
-            <CanvasLayout>{children}</CanvasLayout>
-          </FloorPlan>
-        </FloorPlanProvider>
-      </Suspense>
+          <CanvasLayout>{children}</CanvasLayout>
+        </FloorPlan>
+      </FloorPlanProvider>
     </>
   )
 }

src/app/layout.js

@@ -8,15 +8,13 @@ import SessionProvider from './SessionProvider'
 import GlobalDataProvider from './GlobalDataProvider'
 import Header from '@/components/header/Header'
 import QModal from '@/components/common/modal/QModal'
-import Dimmed from '@/components/ui/Dimmed'
 import PopupManager from '@/components/common/popupManager/PopupManager'
 
 import './globals.css'
 import '../styles/style.scss'
 import '../styles/contents.scss'
 import Footer from '@/components/footer/Footer'
-import { Suspense } from 'react'
-import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
+import GlobalLoadingProvider from './GlobalLoadingProvider'
 
 export const metadata = {
   title: 'Create Next App',
@@ -70,10 +68,10 @@ export default async function RootLayout({ children }) {
               <QcastProvider>{children}</QcastProvider>
             ) : (
               <QcastProvider>
+                <GlobalLoadingProvider />
                 <div className="wrap">
                   <Header userSession={sessionProps} />
                   <div className="content">
-                    <Dimmed />
                     <SessionProvider useSession={sessionProps}>{children}</SessionProvider>
                   </div>
                   <Footer />

src/components/common/select/QSelectBox.jsx

@@ -75,7 +75,11 @@ export default function QSelectBox({
   useOnClickOutside(ref, handleClose)
 
   return (
-    <div className={`sort-select ${openSelect ? 'active' : ''}`} ref={ref} onClick={disabled ? () => {} : () => setOpenSelect(!openSelect)}>
+    <div
+      className={`sort-select ${openSelect ? 'active' : ''} ${disabled ? 'disabled' : ''}`}
+      ref={ref}
+      onClick={disabled ? () => {} : () => setOpenSelect(!openSelect)}
+    >
       <p>{selected}</p>
       <ul className="select-item-wrap">
         {options?.length > 0 &&

src/components/floor-plan/CanvasFrame.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 
 import { useRecoilValue } from 'recoil'
 
@@ -14,20 +14,24 @@ import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitial
 import { currentMenuState } from '@/store/canvasAtom'
 import { totalDisplaySelector } from '@/store/settingAtom'
 import { MENU } from '@/common/common'
+import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
+import { QcastContext } from '@/app/QcastProvider'
 
 export default function CanvasFrame() {
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')
   const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
   const currentMenu = useRecoilValue(currentMenuState)
+  const { floorPlanState } = useContext(FloorPlanContext)
   const { contextMenu, handleClick } = useContextMenu()
   const { selectedPlan } = usePlan()
   const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부
+  const { setIsGlobalLoading } = useContext(QcastContext)
 
   const loadCanvas = () => {
     if (canvas) {
       canvas?.clear() // 캔버스를 초기화합니다.
-      if (selectedPlan?.canvasStatus) {
+      if (selectedPlan?.canvasStatus && floorPlanState.objectNo === selectedPlan.objectNo) {
         canvas?.loadFromJSON(JSON.parse(selectedPlan.canvasStatus), function () {
           canvasLoadInit() //config된 상태로 캔버스 객체를 그린다
           canvas?.renderAll() // 캔버스를 다시 그립니다.
@@ -41,6 +45,10 @@ export default function CanvasFrame() {
     loadCanvas()
   }, [selectedPlan, canvas])
 
+  useEffect(() => {
+    setIsGlobalLoading(false)
+  }, [])
+
   return (
     <div className="canvas-frame">
       <canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>

src/components/floor-plan/CanvasMenu.jsx

@@ -168,7 +168,7 @@ export default function CanvasMenu(props) {
         break
       case 4:
         if (!checkMenuAndCanvasState()) {
-          swalFire({ text: getMessage('estimate.menu.move.valid1') })
+          swalFire({ text: getMessage('menu.validation.canvas.roof') })
           return
         } else {
           setType('module')
@@ -245,6 +245,20 @@ export default function CanvasMenu(props) {
     await saveCanvas()
   }
 
+  // 나가기 버튼 클릭
+  const handleLeaveCanvas = () => {
+    swalFire({
+      text: getMessage('plan.message.leave'),
+      type: 'confirm',
+      confirmButtonText: getMessage('plan.message.corfirm.yes'),
+      cancelButtonText: getMessage('plan.message.confirm.no'),
+      confirmFn: async () => {
+        await handleSaveCanvas()
+        router.push(`/management/stuff`)
+      },
+    })
+  }
+
   const [placementInitialId, setPlacementInitialId] = useState(uuidv4())
   const placementInitialProps = {
     id: placementInitialId,
@@ -531,7 +545,7 @@ export default function CanvasMenu(props) {
               </div>
               <div className="btn-from">
                 <button className="btn08" onClick={handleSaveCanvas}></button>
-                <button className="btn09"></button>
+                <button className="btn09" onClick={handleLeaveCanvas}></button>
               </div>
             </>
           )}

src/components/floor-plan/FloorPlan.jsx

@@ -1,18 +1,30 @@
 'use client'
 
 import { useEffect } from 'react'
-//import { useRecoilState } from 'recoil'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { usePopup } from '@/hooks/usePopup'
-//import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
-//import { correntObjectNoState } from '@/store/settingAtom'
 import '@/styles/contents.scss'
+import { notFound, usePathname, useSearchParams } from 'next/navigation'
+import { useSetRecoilState } from 'recoil'
+import { correntObjectNoState } from '@/store/settingAtom'
 
 export default function FloorPlan({ children }) {
-  //const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
-  //const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState)
+  // const pathname = usePathname()
+  // const setCurrentObjectNo = useSetRecoilState(correntObjectNoState)
+  // const searchParams = useSearchParams()
+  // const objectNo = searchParams.get('objectNo')
+  // const pid = searchParams.get('pid')
+  // useEffect(() => {
+  //   if (pathname === '/floor-plan') {
+  //     if (pid === undefined || pid === '' || pid === null || objectNo === undefined || objectNo === '' || objectNo === null) {
+  //       notFound()
+  //     }
+  //     setCurrentObjectNo(objectNo)
+  //   }
+  // }, [pathname])
+
   const { closeAll } = usePopup()
   const { menuNumber, setMenuNumber } = useCanvasMenu()
   const { fetchSettings, fetchBasicSettings } = useCanvasSetting()

src/components/floor-plan/modal/basic/step/Orientation.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, useContext, useImperativeHandle, useState } from 'react'
+import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useOrientation } from '@/hooks/module/useOrientation'
 import { getDegreeInOrientation } from '@/util/canvas-util'
@@ -8,6 +8,8 @@ import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupSta
 export const Orientation = forwardRef(({ tabNum }, ref) => {
   const { getMessage } = useMessage()
 
+  const { trigger: canvasPopupStatusTrigger } = useCanvasPopupStatusController(1)
+
   const { nextStep, compasDeg, setCompasDeg } = useOrientation()
 
   const [hasAnglePassivity, setHasAnglePassivity] = useState(false)
@@ -21,6 +23,10 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
     canvasPopupStatusTrigger(compasDeg)
   }
 
+  useEffect(() => {
+    checkDegree(compasDeg)
+  }, [compasDeg])
+
   const checkDegree = (e) => {
     if (numberCheck(Number(e)) && Number(e) >= -180 && Number(e) <= 180) {
       setCompasDeg(Number(e))
@@ -29,12 +35,9 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
     }
   }
 
-  const { trigger: canvasPopupStatusTrigger } = useCanvasPopupStatusController(1)
-
   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">
@@ -68,7 +71,7 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
           </div>
           <div className="center-wrap">
             <div className="d-check-box pop">
-              <input type="checkbox" id="ch99" checked={!hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
+              <input type="checkbox" id="ch99" checked={hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
               <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}（-180 〜 180）</label>
             </div>
             <div className="outline-form">
@@ -77,7 +80,7 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
                   type="text"
                   className="input-origin block"
                   value={compasDeg}
-                  readOnly={hasAnglePassivity}
+                  readOnly={!hasAnglePassivity}
                   placeholder={0}
                   onChange={
                     (e) => checkDegree(e.target.value)

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,46 +25,52 @@ 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 = {
+
+  const passivityProps = {
     tabNum,
     setTabNum,
+    models,
+    setModels,
+  }
+  const stepUpProps = {
+    tabNum,
+    setTabNum,
+    models,
+    setModels,
     circuitAllocationType,
     setCircuitAllocationType,
   }
 
-  useEffect(() => {
-    console.log('🚀 ~ CircuitTrestleSetting ~ model:', model)
-    setSelectedModels(model.selectedModels)
-  }, [model])
-
   const onAutoAllocation = () => {
     let moduleStdQty = 0
     let moduleMaxQty = 0
+    const selectedModels = models.filter((m) => m.selected)
 
     if (selectedModels.length === 0) {
       moduleStdQty = models.reduce((acc, model) => {
@@ -100,14 +104,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)
@@ -148,8 +154,8 @@ export default function CircuitTrestleSetting({ id }) {
             </div>
           </div>
           {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
-          {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && <PassivityCircuitAllocation {...powerConditionalSelectProps} />}
-          {tabNum === 2 && <StepUp />}
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && <PassivityCircuitAllocation {...passivityProps} />}
+          {tabNum === 2 && <StepUp {...stepUpProps} />}
           {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
             <div className="grid-btn-wrap">
               <button className="btn-frame modal mr5" onClick={() => onAutoAllocation()}>

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

@@ -1,28 +1,19 @@
 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 { isNullOrUndefined } from '@/util/common-utils'
 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()
@@ -56,6 +47,8 @@ export default function PowerConditionalSelect(props) {
   ]
 
   useEffect(() => {
+    console.log('series', series)
+    console.log('models', models)
     if (makers.length === 0) {
       getPcsMakerList().then((res) => {
         setMakers(res.data)
@@ -69,32 +62,35 @@ 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([])
-      getPcsMakerList(selectedMaker).then((res) => {
-        setSeriesList(
-          res.data.map((series) => {
-            return { ...series, selected: false }
-          }),
-        )
-      })
+      setModels(null)
+      if (series.length === 0)
+        getPcsMakerList(selectedMaker).then((res) => {
+          setSeries(
+            res.data.map((series) => {
+              // return { ...series, selected: isNullOrUndefined(series.selected) ? false : series.selected }
+              return { ...series, selected: false }
+            }),
+          )
+        })
     }
   }, [selectedMaker])
 
   useEffect(() => {
-    if (seriesList.filter((series) => series.selected).length === 0) return
-    const pcsMkrCd = seriesList.filter((series) => series.selected)[0]?.pcsMkrCd
-    const pcsSerList = seriesList
+    console.log('🚀 ~ useEffect ~ series:', series)
+    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 +102,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 +117,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 +133,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 +192,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 +235,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>

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

@@ -10,16 +10,18 @@ import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupSta
 import { canvasPopupStatusStore } from '@/store/canvasPopupStatusAtom'
 import { useMasterController } from '@/hooks/common/useMasterController'
 
-export default function StepUp({}) {
+export default function StepUp(props) {
   const { getMessage } = useMessage()
   const [moduleTab, setModuleTab] = useState(1)
   const [arrayLength, setArrayLength] = useState(3) //module-table-inner의 반복 개수
   const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
-  const model = useRecoilValue(modelState)
-  const { getPcsAutoRecommendList } = useMasterController()
+  const { models } = props
+  const { getPcsVoltageStepUpList, getPcsAutoRecommendList } = useMasterController()
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
   const canvas = useRecoilValue(canvasState)
   const selectedModules = useRecoilValue(selectedModuleState)
+  const [stepUpListData, setStepUpListData] = useState([])
+  const [optCodes, setOptCodes] = useState([])
 
   useEffect(() => {
     if (!managementState) {
@@ -27,9 +29,11 @@ export default function StepUp({}) {
       setManagementState(managementStateLoaded)
     }
 
-    const useModuleItemList = model.selectedModels.map((model) => {
-      return { itemId: model.itemId, mixMatlNo: model.mixMatlNo }
-    })
+    const useModuleItemList = models
+      .filter((m) => m.selected)
+      .map((model) => {
+        return { itemId: model.itemId, mixMatlNo: model.mixMatlNo }
+      })
     // [{ roofSurfaceId: '', roofSurface: '', roofSurfaceIncl: '', moduleList: [{ itemId: '' }] }],
     const roofSurfaceList = canvas
       .getObjects()
@@ -48,13 +52,15 @@ export default function StepUp({}) {
         }
       })
     // [{ itemId: '', pcsMkrCd: '', pcsSerCd: '' }],
-    const pscItemList = model.selectedModels.map((model) => {
-      return {
-        itemId: model.itemId,
-        pcsMkrCd: model.pcsMkrCd,
-        pcsSerCd: model.pcsSerCd,
-      }
-    })
+    const pscItemList = models
+      .filter((m) => m.selected)
+      .map((model) => {
+        return {
+          itemId: model.itemId,
+          pcsMkrCd: model.pcsMkrCd,
+          pcsSerCd: model.pcsSerCd,
+        }
+      })
 
     const params = {
       maxConnYn: pcsCheck.max,
@@ -64,7 +70,44 @@ export default function StepUp({}) {
       roofSurfaceList: roofSurfaceList,
       pscItemList: pscItemList,
     }
-    getPcsAutoRecommendList(params)
+    //getPcsVoltageStepUpList(null)
+
+    getPcsVoltageStepUpList().then((res) => {
+      if (res?.result.code === 200 && res?.data) {
+        const dataArray = Array.isArray(res.data) ? res.data : [res.data]
+        const stepUpListData = dataArray.map((stepUps) => ({
+          ...stepUps,
+          optionList: (stepUps.optionList || []).map((option) => ({
+            pcsOptCd: option.pcsOptCd,
+            pcsOptNm: option.pcsOptNm,
+            pcsOptNmJp: option.pcsOptNmJp,
+          })),
+          pcsItemList: (stepUps.pcsItemList || []).map((item) => ({
+            goodsNo: item.goodsNo,
+            itemId: item.itemId,
+            itemNm: item.itemNm,
+            pcsMkrCd: item.pcsMkrCd,
+            pcsSerCd: item.pcsSerCd,
+            connList: (item.connList || []).map((conn) => ({
+              connAllowCur: conn.connAllowCur,
+              connMaxParalCnt: conn.connMaxParalCnt,
+              goodsNo: conn.goodsNo,
+              itemId: conn.itemId,
+              itemNm: conn.itemNm,
+              vstuParalCnt: conn.vstuParalCnt,
+            })),
+            serQtyList: (item.serQtyList || []).map((qty) => ({
+              serQty: qty.serQty,
+              paralQty: qty.paralQty,
+            })),
+          })),
+        }))
+        console.log('🚀 ~ useEffect ~ getPcsVoltageStepUpList ~ stepUpListData:', stepUpListData)
+        setStepUpListData(stepUpListData)
+      }
+    })
+
+    //setOptCodes(stepUpListData.optionList.map((opt) => ({ ...opt, code: opt.pcsOptCd, name: opt.pcsOptNm, nameJp: opt.pcsOptNmJp })))
   }, [])
 
   useCanvasPopupStatusController(6)
@@ -77,112 +120,101 @@ export default function StepUp({}) {
       <div className="properties-setting-wrap outer">
         <div className="circuit-overflow">
           {/* 3개일때 className = by-max */}
-          <div className={`module-table-box ${arrayLength === 3 ? 'by-max' : ''}`}>
-            {Array.from({ length: arrayLength }).map((_, idx) => (
-              <div key={idx} className="module-table-inner">
-                <div className="mb-box">
-                  <div className="circuit-table-tit">HQJP-KA55-5</div>
-                  <div className="roof-module-table overflow-y min">
-                    <table>
-                      <thead>
-                        <tr>
-                          <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.serial.amount')}</th>
-                          <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.total.amount')}</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr className="on">
-                          <td className="al-r">10</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-r">10</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-r">10</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-r">10</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-r">10</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-r">10</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                      </tbody>
-                    </table>
+          {stepUpListData.map((stepUp, index) => (
+            <div key={index} className={`module-table-box ${stepUp.pcsItemList.length === 3 ? 'by-max' : ''}`}>
+              {Array.from({ length: stepUp.pcsItemList.length }).map((_, idx) => (
+                <div key={idx} className="module-table-inner">
+                  <div className="mb-box">
+                    <div className="circuit-table-tit">{stepUp.pcsItemList[idx].goodsNo}</div>
+                    <div className="roof-module-table overflow-y min">
+                      <table>
+                        <thead>
+                          <tr>
+                            <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.serial.amount')}</th>
+                            <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.total.amount')}</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {stepUp.pcsItemList[idx].serQtyList.map((item) => {
+                            return (
+                              <tr className="on">
+                                <td className="al-r">{item.serQty}</td>
+                                <td className="al-r">{item.paralQty}</td>
+                              </tr>
+                            )
+                          })}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                  <div className="module-box-tab mb10">
+                    <button className={`module-btn ${moduleTab === 1 ? 'act' : ''}`} onClick={() => setModuleTab(1)}>
+                      {getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}
+                    </button>
+                    <button className={`module-btn ${moduleTab === 2 ? 'act' : ''}`} onClick={() => setModuleTab(2)}>
+                      {getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}
+                    </button>
+                  </div>
+                  <div className="circuit-table-flx-wrap">
+                    {moduleTab === 1 && (
+                      <div className="circuit-table-flx-box">
+                        <div className="roof-module-table min mb10">
+                          <table>
+                            <thead>
+                              <tr>
+                                <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
+                                <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}</th>
+                                <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td className="al-c">{stepUp.pcsItemList[idx].connList[0].goodsNo}</td>
+                                <td className="al-r">{stepUp.pcsItemList[idx].connList[0].connMaxParalCnt}</td>
+                                <td className="al-r">{stepUp.pcsItemList[idx].connList[0].vstuParalCnt}</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    )}
+                    {moduleTab === 2 && (
+                      <div className="circuit-table-flx-box">
+                        <div className="roof-module-table min mb10">
+                          <table>
+                            <thead>
+                              <tr>
+                                <th>名称</th>
+                                <th>昇圧回路数</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td className="al-c">-</td>
+                                <td className="al-c">-</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    )}
                   </div>
                 </div>
-                <div className="module-box-tab mb10">
-                  <button className={`module-btn ${moduleTab === 1 ? 'act' : ''}`} onClick={() => setModuleTab(1)}>
-                    {getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}
-                  </button>
-                  <button className={`module-btn ${moduleTab === 2 ? 'act' : ''}`} onClick={() => setModuleTab(2)}>
-                    {getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}
-                  </button>
-                </div>
-                <div className="circuit-table-flx-wrap">
-                  {moduleTab === 1 && (
-                    <div className="circuit-table-flx-box">
-                      <div className="roof-module-table min mb10">
-                        <table>
-                          <thead>
-                            <tr>
-                              <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
-                              <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}</th>
-                              <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            <tr>
-                              <td className="al-c">KTN-CBD4C</td>
-                              <td className="al-r">4</td>
-                              <td className="al-r">0</td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                  )}
-                  {moduleTab === 2 && (
-                    <div className="circuit-table-flx-box">
-                      <div className="roof-module-table min mb10">
-                        <table>
-                          <thead>
-                            <tr>
-                              <th>名称</th>
-                              <th>昇圧回路数</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            <tr>
-                              <td className="al-c">-</td>
-                              <td className="al-c">-</td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
+              ))}
+            </div>
+          ))}
         </div>
         <div className="slope-wrap">
           <div className="outline-form">
             <span className="mr10" style={{ width: 'auto' }}>
               {getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
             </span>
-            <div className="grid-select mr10">
-              <QSelectBox title={'電力検出ユニット (モニター付き)'} />
-            </div>
+            {optCodes.length > 0 && (
+              <div className="grid-select mr10">
+                <QSelectBox title={'電力検出ユニット (モニター付き)'} />
+                {/* <QSelectBox options={optCodes} value={optCodes.name} sourceKey="code" targetKey="code" showKey="name" /> */}
+              </div>
+            )}
           </div>
         </div>
       </div>

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

@@ -2,31 +2,24 @@ import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { POLYGON_TYPE } from '@/common/common'
 import { useMessage } from '@/hooks/useMessage'
 import { canvasState } from '@/store/canvasAtom'
-import { modelState } from '@/store/circuitTrestleAtom'
+import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { useContext, useEffect, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 
-const DIRECTION = {
-  north: '北',
-  south: '南',
-  west: '西',
-  east: '東',
-}
-
-export default function PassivityCircuitAllocation() {
+export default function PassivityCircuitAllocation(props) {
+  const { tabNum, setTabNum, models, setModels } = props
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
-  const selectedModules = useRecoilValue(selectedModuleState)
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
-  const [moduleData, setModuleData] = useState({
-    header: [],
-    rows: [],
-  })
-  const model = useRecoilValue(modelState)
-  const [selectedModels, setSelectedModels] = useState(model.selectedModels)
-  const [selectedPcs, setSelectedPcs] = useState(selectedModels[0])
-  const [totalWpout, setTotalWpout] = useState(0)
+  const selectedModules = useRecoilValue(selectedModuleState)
+  const moduleStatistics = useRecoilValue(moduleStatisticsState)
+  // const [totalWpout, setTotalWpout] = useState(0)
+  const [selectedPcs, setSelectedPcs] = useState(models.filter((model) => model.selected)[0])
+  const { header, rows: row } = moduleStatistics
+  const [headers, setHeaders] = useState(header)
+  const [rows, setRows] = useState(row)
+  const [footer, setFooter] = useState(['합계'])
 
   useEffect(() => {
     setSurfaceInfo()
@@ -35,48 +28,90 @@ export default function PassivityCircuitAllocation() {
     }
   }, [])
 
+  useEffect(() => {
+    console.log('🚀 ~ useEffect ~ headers:', headers)
+  }, [headers])
+
+  useEffect(() => {
+    console.log('🚀 ~ useEffect ~ rows:', rows)
+  }, [rows])
+
   const setSurfaceInfo = () => {
+    console.log('🚀 ~ setSurfaceInfo ~ headers:', headers)
+    console.log('🚀 ~ setSurfaceInfo ~ rows:', rows)
+    // console.log('🚀 ~ setSurfaceInfo ~ surfaces:', surfaces)
     const surfaces = canvas.getObjects().filter((obj) => POLYGON_TYPE.MODULE_SETUP_SURFACE === obj.name)
-    let totalWpout = 0
-    const rows = surfaces.map((surface) => {
-      let wpOut = 0
-      let moduleInfo = {}
-      surface.modules.forEach((module) => {
-        wpOut += +module.moduleInfo.wpOut
-        if (!moduleInfo[module.moduleInfo.itemId]) moduleInfo[module.moduleInfo.itemId] = 0
-        moduleInfo[module.moduleInfo.itemId]++
-      })
-      totalWpout += wpOut
-      console.log('🚀 ~ moduleData.rows=surfaces.map ~ module:', module)
-      return {
-        roofShape: DIRECTION[surface.direction],
-        powerGeneration: wpOut.toLocaleString('ko-KR', { maximumFractionDigits: 4 }),
-        ...moduleInfo,
+    setHeaders([header[0], { name: '회로', prop: 'circuit' }, ...header.slice(1)])
+    setRows(
+      rows.map((row) => {
+        return {
+          ...row,
+          circuit: '',
+        }
+      }),
+    )
+    let totals = {}
+
+    rows.forEach((row) => {
+      if (header.length === 4) {
+        if (!totals[header[2].prop]) totals[header[2].prop] = 0
+        totals[header[2].prop] += +row[header[2].prop]
+      } else if (header.length === 5) {
+        if (!totals[header[2].prop]) totals[header[2].prop] = 0
+        totals[header[2].prop] += +row[header[2].prop]
+        if (!totals[header[3].prop]) totals[header[3].prop] = 0
+        totals[header[3]] += +row[header[3]]
       }
     })
+    console.log(totals)
+    setFooter([
+      ...['합계', ''],
+      ...Object.keys(totals).map((key) => {
+        return totals[key]
+      }),
+      Object.keys(totals).reduce((acc, key) => {
+        return acc + totals[key]
+      }, 0),
+    ])
+    // let totalWpout = 0
+    // const rows = surfaces.map((surface) => {
+    //   let wpOut = 0
+    //   let moduleInfo = {}
+    //   surface.modules.forEach((module) => {
+    //     wpOut += +module.moduleInfo.wpOut
+    //     if (!moduleInfo[module.moduleInfo.itemId]) moduleInfo[module.moduleInfo.itemId] = 0
+    //     moduleInfo[module.moduleInfo.itemId]++
+    //   })
+    //   totalWpout += wpOut
+    //   console.log('🚀 ~ moduleData.rows=surfaces.map ~ module:', module)
+    //   return {
+    //     roofShape: DIRECTION[surface.direction],
+    //     powerGeneration: wpOut.toLocaleString('ko-KR', { maximumFractionDigits: 4 }),
+    //     ...moduleInfo,
+    //   }
+    // })
 
-    setTotalWpout(totalWpout)
+    // setTotalWpout(totalWpout)
     // 지붕면 리스트 -> 지붕면에 있는 모듈 리스트 -> 발전량 총합 계산
     // wpOut
-    console.log('🚀 ~ setSurfaceInfo ~ modules:', rows)
-    console.log('🚀 ~ setSurfaceInfo ~ surfaces:', surfaces)
-    setModuleData({
-      header: [
-        { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'roofShape' },
-        { name: getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit'), prop: 'circuit' },
-        ...selectedModules.itemList.map((module) => {
-          return {
-            name: module.itemNm,
-            prop: module.itemId,
-          }
-        }),
-        {
-          name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`,
-          prop: 'powerGeneration',
-        },
-      ],
-      rows: rows,
-    })
+
+    // setModuleData({
+    //   header: [
+    //     { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'roofShape' },
+    //     { name: getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit'), prop: 'circuit' },
+    //     ...selectedModules.itemList.map((module) => {
+    //       return {
+    //         name: module.itemNm,
+    //         prop: module.itemId,
+    //       }
+    //     }),
+    //     {
+    //       name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`,
+    //       prop: 'powerGeneration',
+    //     },
+    //   ],
+    //   rows: rows,
+    // })
   }
   return (
     <>
@@ -87,32 +122,27 @@ export default function PassivityCircuitAllocation() {
             <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}</div>
             <div className="normal-font mb15">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.info')}</div>
             <div className="roof-module-table overflow-y">
-              {moduleData.header && (
+              {header && (
                 <table>
                   <thead>
                     <tr>
-                      {moduleData.header.map((header) => (
-                        <th key={header.prop}>{header.name}</th>
+                      {headers.map((header) => (
+                        <th key={'header' + header.prop}>{header.name}</th>
                       ))}
                     </tr>
                   </thead>
                   <tbody>
-                    {moduleData.rows.map((row, index) => (
-                      <tr key={index} className="wrong">
-                        {moduleData.header.map((header) => (
-                          <td className="al-c" key={header.prop}>
-                            {row[header.prop]}
-                          </td>
+                    {rows.map((row, index) => (
+                      <tr key={'row' + index}>
+                        {headers.map((header) => (
+                          <td className="al-c">{row[header.prop]}</td>
                         ))}
                       </tr>
                     ))}
-                    <tr className="wrong">
-                      <td className="al-c">총합</td>
-                      {Array.from({ length: moduleData.header.length - 3 }).map((_, index) => {
-                        return <td key={index} className="al-c"></td>
-                      })}
-                      <td className="al-c">{totalWpout.toLocaleString('ko-KR', { maximumFractionDigits: 4 })}</td>
-                      <td className="al-c">{totalWpout.toLocaleString('ko-KR', { maximumFractionDigits: 4 })}</td>
+                    <tr>
+                      {footer.map((footer) => (
+                        <td className="al-c">{footer}</td>
+                      ))}
                     </tr>
                   </tbody>
                 </table>
@@ -127,25 +157,27 @@ export default function PassivityCircuitAllocation() {
                 <div className="bold-font">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}</div>
               </div>
               <div className="hexagonal-item">
-                {selectedModels.map((model, index) => (
-                  <div className="d-check-radio pop mb10">
-                    <input
-                      type="radio"
-                      name="radio01"
-                      id={`ra0${index + 1}`}
-                      checked={selectedPcs === model}
-                      onChange={() => setSelectedPcs(model)}
-                    />
-                    <label htmlFor="ra01">
-                      {model.itemNm} (
-                      {getMessage(
-                        'modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info',
-                        managementState?.coldRegionFlg === '1' ? [model.serMinQty, model.serColdZoneMaxQty] : [model.serMinQty, model.serMaxQty],
-                      )}
-                      )
-                    </label>
-                  </div>
-                ))}
+                {models
+                  .filter((model) => model.selected)
+                  .map((model, index) => (
+                    <div className="d-check-radio pop mb10" key={'model' + index}>
+                      <input
+                        type="radio"
+                        name="radio01"
+                        id={`ra0${index + 1}`}
+                        checked={selectedPcs === model}
+                        onChange={() => setSelectedPcs(model)}
+                      />
+                      <label htmlFor="ra01">
+                        {model.itemNm} (
+                        {getMessage(
+                          'modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info',
+                          managementState?.coldRegionFlg === '1' ? [model.serMinQty, model.serColdZoneMaxQty] : [model.serMinQty, model.serMaxQty],
+                        )}
+                        )
+                      </label>
+                    </div>
+                  ))}
                 {/* <div className="d-check-radio pop mb10">
                   <input type="radio" name="radio01" id="ra01" />
                   <label htmlFor="ra01">HQJP-KA55-5 (標準回路2枚～10枚)</label>

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,24 @@ 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) => (
-                    // <td>{item.prop === 'name' ? item.name : item.prop === 'powerGeneration' ? item.powerGeneration : item.amount}</td>
-                    <td>{row[item.prop]}</td>
+              {rows.map((row, index) => (
+                <tr key={index}>
+                  {header.map((item, i) => (
+                    <td key={index}>
+                      {typeof row[item.prop] === 'number' ? row[item.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 }) : 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>

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/components/header/Header.jsx

@@ -221,7 +221,7 @@ export default function Header(props) {
 
   return (
     <>
-      {!isGlobalLoading && !(pathName.includes('login') || pathName.includes('join') || sessionState.pwdInitYn === 'N') && (
+      {!(pathName.includes('login') || pathName.includes('join') || sessionState.pwdInitYn === 'N') && (
         <header className={isDimmed}>
           <div className="header-inner">
             <div className="header-right">

src/components/main/MainContents.jsx

@@ -15,6 +15,7 @@ import { QcastContext } from '@/app/QcastProvider'
 import { useSwal } from '@/hooks/useSwal'
 
 import BoardDetailModal from '../community/modal/BoardDetailModal'
+import { handleFileDown } from '@/util/board-utils'
 
 export default function MainContents() {
   const { swalFire } = useSwal()
@@ -22,8 +23,7 @@ export default function MainContents() {
   const { getMessage } = useMessage()
   const router = useRouter()
   const globalLocaleState = useRecoilValue(globalLocaleStore)
-  const { promiseGet } = useAxios(globalLocaleState)
-
+  const { promiseGet, get } = useAxios(globalLocaleState)
   //공지사항
   const [recentNoticeList, setRecentNoticeList] = useState([])
 
@@ -33,15 +33,42 @@ export default function MainContents() {
   const { qcastState, setIsGlobalLoading } = useContext(QcastContext)
   const { fetchObjectList, initObjectList } = useMainContentsController()
 
+  //첨부파일
+  const [boardList, setBoardList] = useState([])
   useEffect(() => {
     fetchObjectList()
     fetchNoticeList()
     fetchFaqList()
+    //첨부파일 목록 호출
+    fetchArchiveList()
     return () => {
       initObjectList()
     }
   }, [])
 
+  //첨부파일 목록 호출
+  const fetchArchiveList = async () => {
+    const url = `/api/board/list`
+
+    const params = new URLSearchParams({
+      schNoticeTpCd: 'QC',
+      schNoticeClsCd: 'DOWN',
+      startRow: 1,
+      endRow: 2,
+    })
+
+    const apiUrl = `${url}?${params.toString()}`
+    const resultData = await get({ url: apiUrl })
+
+    if (resultData) {
+      if (resultData.result.code === 200) {
+        setBoardList(resultData.data)
+      } else {
+        alert(resultData.result.message)
+      }
+    }
+  }
+
   //공지사항 호출
   const fetchNoticeList = async () => {
     try {
@@ -114,7 +141,7 @@ export default function MainContents() {
                   >
                     <div className="item-inner">
                       <span className="time">{dayjs(row.lastEditDatetime).format('YYYY.MM.DD HH:mm:ss')}</span>
-                      <span>{row.tempFlg === '0' ? row.objectNo : getMessage('stuff.gridData.tempObjectNo')}</span>
+                      <span className="product">{row.tempFlg === '0' ? row.objectNo : getMessage('stuff.gridData.tempObjectNo')}</span>
                       <span>{row.objectName ? row.objectName : '-'}</span>
                       <span>{row.saleStoreName}</span>
                     </div>
@@ -183,14 +210,19 @@ export default function MainContents() {
           )}
         </ProductItem>
         <ProductItem num={4} name={'Data Download'}>
-          <div className="data-download-wrap">
-            <button className="data-down" type="button" onClick={() => swalFire({ text: getMessage('main.content.alert.noFile'), type: 'alert' })}>
-              <span>{getMessage('main.content.download1')}</span>
-            </button>
-            <button className="data-down" type="button" onClick={() => swalFire({ text: getMessage('main.content.alert.noFile'), type: 'alert' })}>
-              <span>{getMessage('main.content.download2')}</span>
-            </button>
-          </div>
+          {boardList.length > 0 ? (
+            <div className="data-download-wrap">
+              {boardList?.map((board) => (
+                <button type="button" className="data-down" onClick={() => handleFileDown(board.noticeNo, 'Y')}>
+                  <span>{board.title}</span>
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="file-down-nodata">
+              <h3>{getMessage('common.message.no.data')}</h3>
+            </div>
+          )}
         </ProductItem>
         <ProductItem num={5} name={'Sales Contact info'}>
           <ul className="contact-info-list">

src/components/management/Stuff.jsx

@@ -222,7 +222,6 @@ export default function Stuff() {
       if (!params.saleStoreId) {
         params.saleStoreId = session.storeId
       }
-
       async function fetchData() {
         const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
         await get({
@@ -278,6 +277,13 @@ export default function Stuff() {
       if (!stuffSearchParams.saleStoreId) {
         stuffSearchParams.saleStoreId = session.storeId
       }
+      if (stuffSearchParams.schMyDataCheck) {
+        if (session.storeLvl === '1') {
+          //schOtherSelSaleStoreId 초기화 schSelSaleStoreId 에 saleStoreId 담아서 보내기
+          stuffSearchParams.schOtherSelSaleStoreId = ''
+          stuffSearchParams.schSelSaleStoreId = session.storeId
+        }
+      }
 
       async function fetchData() {
         const apiUrl = `/api/object/list?${queryStringFormatter(stuffSearchParams)}`
@@ -312,6 +318,12 @@ export default function Stuff() {
       if (!params.saleStoreId) {
         stuffSearchParams.saleStoreId = session.storeId
       }
+      if (stuffSearchParams.schMyDataCheck) {
+        //schOtherSelSaleStoreId 초기화 schSelSaleStoreId 에 saleStoreId 담아서 보내기
+        stuffSearchParams.schOtherSelSaleStoreId = ''
+        stuffSearchParams.schSelSaleStoreId = session.storeId
+      }
+
       async function fetchData() {
         const apiUrl = `/api/object/list?${queryStringFormatter(stuffSearchParams)}`
         await get({ url: apiUrl }).then((res) => {
@@ -347,6 +359,7 @@ export default function Stuff() {
         code: 'S',
         pageNo: 1,
         pageSize: 100,
+        schMyDataCheck: false,
       }
 
       setStuffSearch({

src/components/management/StuffDetail.jsx

@@ -4,7 +4,6 @@ import { useState, useEffect, useRef, useContext } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { Button } from '@nextui-org/react'
 import Select, { components } from 'react-select'
-import Link from 'next/link'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { isEmptyArray, isNotEmptyArray, isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils'
@@ -289,10 +288,12 @@ export default function StuffDetail() {
               display: 'none',
             }
           }
-          // if (managementState?.createUser === 'T01' && session?.userId !== 'T01') {
-          //createUser가 T01인데 로그인사용자가 T01이 아니면 버튼숨기기 적용할지 미정!!!!!!!!
-          //buttonStyle = { display: 'none' }
-          // }
+          if (managementState?.createUser === 'T01') {
+            if (session.userId !== 'T01') {
+              // #474
+              buttonStyle = { display: 'none' }
+            }
+          }
           return (
             <>
               <div className="grid-cell-btn">
@@ -301,7 +302,6 @@ export default function StuffDetail() {
                   type="button"
                   className="grid-btn"
                   onClick={() => {
-                    //mid:5(견적서), /pid:플랜번호
                     setFloorPlanObjectNo({ floorPlanObjectNo: params.data.objectNo })
                     setIsGlobalLoading(true)
                     setMenuNumber(5)
@@ -1025,6 +1025,8 @@ export default function StuffDetail() {
   const _objectNameOmit = watch('objectNameOmit')
   // saleStoreId: '', //1차 판매점ID
   const _saleStoreId = watch('saleStoreId')
+  // 2차 판매점명
+  const _otherSaleStoreId = watch('otherSaleStoreId')
   // zipNo: '', //우편번호
   const _zipNo = watch('zipNo')
   // prefId: '', //도도부현
@@ -1043,6 +1045,7 @@ export default function StuffDetail() {
   useEffect(() => {
     if (editMode === 'NEW') {
       const formData = form.getValues()
+
       let errors = {}
       if (!formData.receiveUser || formData.receiveUser.trim().length === 0) {
         errors.receiveUser = true
@@ -1057,6 +1060,12 @@ export default function StuffDetail() {
         errors.saleStoreId = true
       }
 
+      if (session?.storeLvl === '2') {
+        if (!formData.otherSaleStoreId) {
+          errors.otherSaleStoreId = true
+        }
+      }
+
       if (!formData.zipNo) {
         errors.zipNo = true
       }
@@ -1099,6 +1108,12 @@ export default function StuffDetail() {
         errors.saleStoreId = true
       }
 
+      if (session?.storeLvl === '2') {
+        if (!formData.otherSaleStoreId) {
+          errors.otherSaleStoreId = true
+        }
+      }
+
       if (!formData.zipNo) {
         errors.zipNo = true
       }
@@ -1130,6 +1145,7 @@ export default function StuffDetail() {
     _objectName,
     _objectNameOmit,
     _saleStoreId,
+    _otherSaleStoreId,
     _zipNo,
     _prefId,
     _address,
@@ -1368,13 +1384,12 @@ export default function StuffDetail() {
           setIsGlobalLoading(true)
           //상세화면으로 전환
           if (res.status === 201) {
+            setIsGlobalLoading(false)
             setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
             swalFire({
               text: getMessage('stuff.detail.save'),
               type: 'alert',
               confirmFn: () => {
-                setIsGlobalLoading(false)
-
                 router.push(`/management/stuff/detail?objectNo=${res.data.objectNo.toString()}`, { scroll: false })
               },
             })
@@ -1391,12 +1406,12 @@ export default function StuffDetail() {
           setIsGlobalLoading(true)
 
           if (res.status === 201) {
+            setIsGlobalLoading(false)
             setFloorPlanObjectNo({ floorPlanObjectNo: res.data.objectNo })
             swalFire({
               text: getMessage('stuff.detail.save'),
               type: 'alert',
               confirmFn: () => {
-                setIsGlobalLoading(false)
                 router.push(`/management/stuff/detail?objectNo=${res.data.objectNo.toString()}`, { scroll: false })
               },
             })
@@ -1468,11 +1483,11 @@ export default function StuffDetail() {
         .then((res) => {
           setIsGlobalLoading(true)
           if (res.status === 201) {
+            setIsGlobalLoading(false)
             swalFire({
               text: getMessage('stuff.detail.tempSave.message1'),
               type: 'alert',
               confirmFn: () => {
-                setIsGlobalLoading(false)
                 router.push(`/management/stuff/tempdetail?objectNo=${res.data.objectNo.toString()}`, { scroll: false })
               },
             })
@@ -1487,11 +1502,11 @@ export default function StuffDetail() {
         .then((res) => {
           setIsGlobalLoading(true)
           if (res.status === 201) {
+            setIsGlobalLoading(false)
             swalFire({
               text: getMessage('stuff.detail.tempSave.message1'),
               type: 'alert',
               confirmFn: () => {
-                setIsGlobalLoading(false)
                 router.push(`/management/stuff/tempdetail?objectNo=${res.data.objectNo.toString()}`, { scroll: false })
               },
             })
@@ -1519,7 +1534,7 @@ export default function StuffDetail() {
         confirmFn: () => {
           setFloorPlanObjectNo({ floorPlanObjectNo: '' })
           del({ url: `/api/object/${objectNo}?${queryStringFormatter(delParams)}` })
-            .then((res) => {
+            .then(() => {
               setIsGlobalLoading(true)
               setFloorPlanObjectNo({ floorPlanObjectNo: '' })
               if (session.storeId === 'T01') {
@@ -1595,6 +1610,13 @@ export default function StuffDetail() {
 
   // 그리드 더블 클릭 해당플랜의 도면작성 화면으로 이동
   const getCellDoubleClicked = (params) => {
+    //#474정책
+    if (managementState.createUser === 'T01') {
+      if (session.userId !== 'T01') {
+        return false
+      }
+    }
+
     if (params?.column?.colId !== 'estimateDate') {
       if (params?.data?.planNo && params?.data?.objectNo) {
         let objectNo = params?.data?.objectNo
@@ -2462,6 +2484,7 @@ export default function StuffDetail() {
                         <td>
                           <div className="flx-box">
                             <div className="select-wrap mr5" style={{ width: '567px' }}>
+                              상세
                               <Select
                                 id="long-value-select2"
                                 instanceId="long-value-select2"
@@ -2473,16 +2496,18 @@ export default function StuffDetail() {
                                 onChange={onSelectionChange2}
                                 getOptionLabel={(x) => x.saleStoreName}
                                 getOptionValue={(x) => x.saleStoreId}
-                                // isDisabled={
-                                //   managementState?.tempFlg === '0'
-                                //     ? true
-                                //     : session?.storeLvl === '1' && form.watch('saleStoreId') != ''
-                                //       ? false
-                                //       : false
-                                // }
-                                isDisabled={managementState?.tempFlg === '0' ? true : false}
+                                isDisabled={
+                                  managementState?.tempFlg === '0'
+                                    ? true
+                                    : session?.storeLvl === '1'
+                                      ? otherSaleStoreList.length > 0
+                                        ? false
+                                        : true
+                                      : otherSaleStoreList.length === 1
+                                        ? true
+                                        : false
+                                }
                                 isClearable={managementState?.tempFlg === '0' ? false : true}
-                                // isClearable={managementState?.tempFlg === '0' ? false : session?.storeLvl === '1' ? true : true}
                                 value={otherSaleStoreList.filter(function (option) {
                                   return option.saleStoreId === otherSelOptions
                                 })}

src/components/management/StuffSearchCondition.jsx

@@ -343,7 +343,7 @@ export default function StuffSearchCondition() {
       })
     } else {
       if (session?.storeLvl === '2') {
-        if (otherSaleStoreList.length > 1) {
+        if (otherSaleStoreList.length === 1) {
           setOtherSaleStoreId(session.storeId)
           stuffSearch.schOtherSelSaleStoreId = session.storeId
           stuffSearch.schObjectNo = ''
@@ -356,6 +356,24 @@ export default function StuffSearchCondition() {
           stuffSearch.schTempFlg = ''
           stuffSearch.schMyDataCheck = false
 
+          stuffSearch.startRow = 1
+          stuffSearch.endRow = 100
+          stuffSearch.schSortType = 'U'
+          stuffSearch.pageNo = 1
+          stuffSearch.pageSize = 100
+        } else if (otherSaleStoreList.length > 1) {
+          setOtherSaleStoreId('')
+          stuffSearch.schOtherSelSaleStoreId = session.storeId
+          stuffSearch.schObjectNo = ''
+          stuffSearch.schAddress = ''
+          stuffSearch.schObjectName = ''
+          stuffSearch.schSaleStoreName = ''
+          stuffSearch.schReceiveUser = ''
+          stuffSearch.schDispCompanyName = ''
+          stuffSearch.schDateType = 'U'
+          stuffSearch.schTempFlg = ''
+          stuffSearch.schMyDataCheck = false
+
           stuffSearch.startRow = 1
           stuffSearch.endRow = 100
           stuffSearch.schSortType = 'U'
@@ -504,13 +522,23 @@ export default function StuffSearchCondition() {
                 })
               } else {
                 if (stuffSearch.code === 'S') {
-                  setOtherSaleStoreId(session?.storeId)
-                  setStuffSearch({
-                    ...stuffSearch,
-                    code: 'S',
-                    schSelSaleStoreId: res[0].saleStoreId,
-                    schOtherSelSaleStoreId: otherList[0].saleStoreId,
-                  })
+                  if (otherList.length === 1) {
+                    setOtherSaleStoreId(session?.storeId)
+                    setStuffSearch({
+                      ...stuffSearch,
+                      code: 'S',
+                      schSelSaleStoreId: res[0].saleStoreId,
+                      schOtherSelSaleStoreId: otherList[0].saleStoreId,
+                    })
+                  } else {
+                    setOtherSaleStoreId('')
+                    setStuffSearch({
+                      ...stuffSearch,
+                      code: 'S',
+                      schSelSaleStoreId: res[0].saleStoreId,
+                      schOtherSelSaleStoreId: '',
+                    })
+                  }
                 } else {
                   setOtherSaleStoreId(stuffSearch?.schOtherSelSaleStoreId)
                   setStuffSearch({
@@ -561,7 +589,6 @@ export default function StuffSearchCondition() {
       setOtherSaleStoreId('')
       setSchSelSaleStoreId(key.saleStoreId)
       stuffSearch.schSelSaleStoreId = key.saleStoreId
-      //T01아닌 1차점은 본인으로 디폴트셋팅이고 수정할수없어서 여기안옴
       //고른 1차점의 saleStoreId로 2차점 API호출하기
       let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
       let otherList
@@ -720,19 +747,61 @@ export default function StuffSearchCondition() {
         setMyDataCheck(stuffSearch.schMyDataCheck)
       }
     } else {
-      setStartDate(stuffSearch?.schFromDt ? stuffSearch.schFromDt : dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
-      setEndDate(stuffSearch?.schToDt ? stuffSearch.schToDt : dayjs(new Date()).format('YYYY-MM-DD'))
-      setObjectNo(stuffSearch.schObjectNo ? stuffSearch.schObjectNo : objectNo)
-      setSaleStoreName(stuffSearch.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName)
-      setAddress(stuffSearch.schAddress ? stuffSearch.schAddress : address)
-      setobjectName(stuffSearch.schObjectName ? stuffSearch.schObjectName : objectName)
-      setDispCompanyName(stuffSearch.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName)
-      setReceiveUser(stuffSearch.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser)
-      setDateType(stuffSearch.schDateType ? stuffSearch.schDateType : dateType)
-      setTempFlg(stuffSearch.schTempFlg ? stuffSearch.schTempFlg : tempFlg)
-      setMyDataCheck(stuffSearch.schMyDataCheck)
-      if (session.storeLvl !== '1') {
-        stuffSearch.schSelSaleStoreId = ''
+      if (stuffSearch.code === 'DELETE') {
+        //1차점인경우
+        if (session.storeLvl === '1') {
+          stuffSearch.schOtherSelSaleStoreId = ''
+          setOtherSaleStoreId('')
+        } else {
+          //2차점 본인하나인경우
+          //34있는경우
+          stuffSearch.schOtherSelSaleStoreId = ''
+          setOtherSaleStoreId('')
+        }
+
+        setObjectNo('')
+        setSaleStoreName('')
+        setAddress('')
+        setobjectName('')
+        setDispCompanyName('')
+        setReceiveUser('')
+        objectNoRef.current.value = ''
+        saleStoreNameRef.current.value = ''
+        addressRef.current.value = ''
+        objectNameRef.current.value = ''
+        dispCompanyNameRef.current.value = ''
+        receiveUserRef.current.value = ''
+        stuffSearch.schObjectNo = ''
+        stuffSearch.schAddress = ''
+        stuffSearch.schObjectName = ''
+        stuffSearch.schSaleStoreName = ''
+        stuffSearch.schReceiveUser = ''
+        stuffSearch.schDispCompanyName = ''
+        stuffSearch.schDateType = 'U'
+        stuffSearch.schTempFlg = ''
+        stuffSearch.schMyDataCheck = false
+        stuffSearch.schFromDt = dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD')
+        stuffSearch.schToDt = dayjs(new Date()).format('YYYY-MM-DD')
+        stuffSearch.startRow = 1
+        stuffSearch.endRow = 100
+        stuffSearch.schSortType = 'U'
+        stuffSearch.pageNo = 1
+        stuffSearch.pageSize = 100
+      } else {
+        setStartDate(stuffSearch?.schFromDt ? stuffSearch.schFromDt : dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
+        setEndDate(stuffSearch?.schToDt ? stuffSearch.schToDt : dayjs(new Date()).format('YYYY-MM-DD'))
+        setObjectNo(stuffSearch.schObjectNo ? stuffSearch.schObjectNo : objectNo)
+        setSaleStoreName(stuffSearch.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName)
+        setAddress(stuffSearch.schAddress ? stuffSearch.schAddress : address)
+        setobjectName(stuffSearch.schObjectName ? stuffSearch.schObjectName : objectName)
+        setDispCompanyName(stuffSearch.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName)
+        setReceiveUser(stuffSearch.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser)
+        setDateType(stuffSearch.schDateType ? stuffSearch.schDateType : dateType)
+        setTempFlg(stuffSearch.schTempFlg ? stuffSearch.schTempFlg : tempFlg)
+        setMyDataCheck(stuffSearch.schMyDataCheck)
+        if (session.storeLvl !== '1') {
+          stuffSearch.schSelSaleStoreId = ''
+        }
       }
     }
 
@@ -802,10 +871,12 @@ export default function StuffSearchCondition() {
       if (e.target.checked) {
         stuffSearch.schMyDataCheck = e.target.value
         setMyDataCheck(true)
-
         if (otherSaleStoreList.length > 1) {
-          stuffSearch.schSelSaleStoreId = otherSaleStoreId
-          stuffSearch.schOtherSelSaleStoreId = ''
+          stuffSearch.schOtherSelSaleStoreId = session.storeId
+          setOtherSaleStoreId(session.storeId)
+        } else {
+          stuffSearch.schSelSaleStoreId = ''
+          stuffSearch.schOtherSelSaleStoreId = session.storeId
         }
       } else {
         setMyDataCheck(false)

src/components/management/StuffSubHeader.jsx

@@ -66,87 +66,85 @@ export default function StuffSubHeader({ type }) {
   }
 
   return (
-    !isGlobalLoading && (
-      <>
-        <div className="sub-header">
-          <div className="sub-header-inner">
-            {type === 'list' && (
-              <>
-                <Link href={'#'}>
-                  <h1 className="sub-header-title">{getMessage('header.menus.management')}</h1>
-                </Link>
-                <ul className="sub-header-location">
-                  <li className="location-item">
-                    <span className="home">
-                      <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
-                    </span>
-                  </li>
-                  <li className="location-item">
-                    <span>{getMessage('header.menus.management')}</span>
-                  </li>
-                  <li className="location-item">
-                    <span>{getMessage('header.menus.management.stuffList')}</span>
-                  </li>
-                </ul>
-              </>
-            )}
-            {type === 'temp' && (
-              <>
-                <ul className="sub-header-title-wrap">
-                  <li className="title-item">
-                    <Link className="sub-header-title" href={'#'}>
-                      {getMessage('stuff.temp.subTitle')}
-                    </Link>
-                  </li>
-                </ul>
-                <ul className="sub-header-location">
-                  <li className="location-item">
-                    <span className="home">
-                      <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
-                    </span>
-                  </li>
-                  <li className="location-item">
-                    <span>{getMessage('header.menus.management')}</span>
-                  </li>
-                  <li className="location-item">
-                    <span>{getMessage('header.menus.management.newStuff')}</span>
-                  </li>
-                </ul>
-              </>
-            )}
-            {type === 'detail' && (
-              <>
-                <ul className="sub-header-title-wrap">
-                  <li className="title-item">
-                    <Link className="sub-header-title" href={'#'}>
-                      {getMessage('stuff.temp.subTitle')}
-                    </Link>
-                  </li>
-                  <li className="title-item" style={{ display: buttonStyle }}>
-                    <a className="sub-header-title" onClick={moveFloorPlan}>
-                      <span className="icon drawing"></span>
-                      {getMessage('stuff.temp.subTitle2')}
-                    </a>
-                  </li>
-                </ul>
-                <ul className="sub-header-location">
-                  <li className="location-item">
-                    <span className="home">
-                      <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
-                    </span>
-                  </li>
-                  <li className="location-item">
-                    <span>{getMessage('header.menus.management')}</span>
-                  </li>
-                  <li className="location-item">
-                    <span>{getMessage('header.menus.management.detail')}</span>
-                  </li>
-                </ul>
-              </>
-            )}
-          </div>
+    <>
+      <div className="sub-header">
+        <div className="sub-header-inner">
+          {type === 'list' && (
+            <>
+              <Link href={'#'}>
+                <h1 className="sub-header-title">{getMessage('header.menus.management')}</h1>
+              </Link>
+              <ul className="sub-header-location">
+                <li className="location-item">
+                  <span className="home">
+                    <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
+                  </span>
+                </li>
+                <li className="location-item">
+                  <span>{getMessage('header.menus.management')}</span>
+                </li>
+                <li className="location-item">
+                  <span>{getMessage('header.menus.management.stuffList')}</span>
+                </li>
+              </ul>
+            </>
+          )}
+          {type === 'temp' && (
+            <>
+              <ul className="sub-header-title-wrap">
+                <li className="title-item">
+                  <Link className="sub-header-title" href={'#'}>
+                    {getMessage('stuff.temp.subTitle')}
+                  </Link>
+                </li>
+              </ul>
+              <ul className="sub-header-location">
+                <li className="location-item">
+                  <span className="home">
+                    <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
+                  </span>
+                </li>
+                <li className="location-item">
+                  <span>{getMessage('header.menus.management')}</span>
+                </li>
+                <li className="location-item">
+                  <span>{getMessage('header.menus.management.newStuff')}</span>
+                </li>
+              </ul>
+            </>
+          )}
+          {type === 'detail' && (
+            <>
+              <ul className="sub-header-title-wrap">
+                <li className="title-item">
+                  <Link className="sub-header-title" href={'#'}>
+                    {getMessage('stuff.temp.subTitle')}
+                  </Link>
+                </li>
+                <li className="title-item" style={{ display: buttonStyle }}>
+                  <a className="sub-header-title" onClick={moveFloorPlan}>
+                    <span className="icon drawing"></span>
+                    {getMessage('stuff.temp.subTitle2')}
+                  </a>
+                </li>
+              </ul>
+              <ul className="sub-header-location">
+                <li className="location-item">
+                  <span className="home">
+                    <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
+                  </span>
+                </li>
+                <li className="location-item">
+                  <span>{getMessage('header.menus.management')}</span>
+                </li>
+                <li className="location-item">
+                  <span>{getMessage('header.menus.management.detail')}</span>
+                </li>
+              </ul>
+            </>
+          )}
         </div>
-      </>
-    )
+      </div>
+    </>
   )
 }

src/hooks/common/useCanvasPopupStatusController.js

@@ -43,6 +43,10 @@ export function useCanvasPopupStatusController(param = 1) {
           break
         case 4:
           break
+        case 5:
+          break
+        case 6:
+          break
         default:
       }
     } else {
@@ -56,6 +60,15 @@ export function useCanvasPopupStatusController(param = 1) {
             roofConstructions: [],
           })
           break
+        case 3:
+          break
+        case 4:
+          break
+        case 5:
+          break
+        case 6:
+          break
+        default:
       }
     }
   }, [popupStatus])

src/hooks/common/useMasterController.js

@@ -169,6 +169,82 @@ export function useMasterController() {
     })
   }
 
+  /**
+   * PCS 승압설정 정보 조회
+   * @param {Max접속(과적)여부}      maxConnYn
+   * @param {동일회로도여부}         smpCirYn
+   * @param {한랭지여부}             coldZoneYn
+   * @param {사용된 모듈아이템 목록}  useModuleItemList
+   * @param {지붕면 목록}            roofSurfaceList
+   * @param {PCS 아이템 목록}        pcsItemList
+
+   * @returns
+   */
+  const getPcsVoltageStepUpList = async (params2 = null) => {
+    const params = {
+      maxConnYn: 'N',
+      smpCirYn: 'Y',
+      coldZoneYn: 'N',
+      useModuleItemList: [{ itemId: '107077', mixMatlNo: '0' }],
+      roofSurfaceList: [
+        {
+          roofSurfaceId: '1',
+          roofSurface: '남서',
+          roofSurfaceIncl: '5',
+          moduleList: [
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+          ],
+        },
+        {
+          roofSurfaceId: '2',
+          roofSurface: '남서',
+          roofSurfaceIncl: '5',
+          moduleList: [
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+          ],
+        },
+        {
+          roofSurfaceId: '3',
+          roofSurface: '남',
+          roofSurfaceIncl: '3',
+          moduleList: [
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+            { itemId: '107077' },
+          ],
+        },
+      ],
+      pcsItemList: [
+        { itemId: '106857', pcsMkrCd: 'MKR001', pcsSerCd: 'SER001' },
+        { itemId: '106856', pcsMkrCd: 'MKR001', pcsSerCd: 'SER001' },
+      ],
+    }
+
+    return await post({ url: '/api/v1/master/getPcsVoltageStepUpList', data: params }).then((res) => {
+      console.log('🚀🚀 ~ getPcsVoltageStepUpList ~ res:', res)
+      return res
+    })
+  }
+
   return {
     getRoofMaterialList,
     getModuleTypeItemList,
@@ -178,5 +254,6 @@ export function useMasterController() {
     getPcsMakerList,
     getPcsModelList,
     getPcsAutoRecommendList,
+    getPcsVoltageStepUpList,
   }
 }

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)
@@ -512,6 +512,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') })
               }
@@ -1871,6 +1872,8 @@ export function useModuleBasicSetting() {
         }
       })
     }
+
+    getModuleStatistics()
   }
 
   const autoFlatroofModuleSetup = (placementFlatRef) => {
@@ -2261,7 +2264,7 @@ export function useModuleBasicSetting() {
       })
 
       moduleSetupSurface.set({ modules: setupedModules })
-
+      getModuleStatistics()
       // console.log('moduleSetupSurface', moduleSetupSurface)
       // console.log('setupedModules', setupedModules)
 
@@ -2333,12 +2336,14 @@ export function useModuleBasicSetting() {
       })
       return {
         ...rowObject, // 총 발전량 = 발전량 * 모듈 개수
+        ...surface,
         name: canvas.getObjects().filter((obj) => obj.id === surface.parentId)[0].directionText, // 지붕면
         // powerGeneration: wpOut.toLocaleString('ko-KR', { maximumFractionDigits: 4 }),
         wpOut: wpOut,
       }
     })
 
+    console.log('🚀 ~ getModuleStatistics ~ rows:', rows)
     console.log('🚀 ~ getModuleStatistics ~ moduleInfo:', moduleInfo)
     const header = [
       { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'name' },
@@ -2359,15 +2364,7 @@ export function useModuleBasicSetting() {
       footer.push(footerData[key])
     })
     footer.push(totalWpout)
-    // const footer = [
-    //   '합계',
-    //   ...Object.keys(moduleInfo).map((key) => {
-    //     return { name: moduleInfo[key].name, prop: moduleInfo[key] }
-    //   }),
-    //   totalWpout,
-    // ]
-    // const footer = []
-    console.log('@@@@@@@@@@', header, rows, footer)
+    console.log({ header: header, rows, footer: footer })
     setModuleStatistics({ header: header, rows, footer: footer })
   }
 

src/hooks/module/useModulePlace.js

@@ -51,6 +51,7 @@ export function useModulePlace() {
 
   useEffect(() => {
     //지붕을 가져옴
+    console.log('🚀 ~ trestleDetailList.forEach ~ trestleDetailList:', trestleDetailList)
     canvas
       .getObjects()
       .filter((roof) => roof.name === 'roof')

src/hooks/option/useCanvasSetting.js

@@ -316,7 +316,7 @@ export function useCanvasSetting() {
           roofsArray = res.map((item) => {
             return {
               roofApply: item.roofApply,
-              roofSeq: 0,
+              roofSeq: item.roofSeq,
               roofMatlCd: item.roofMatlCd,
               roofWidth: item.roofWidth,
               roofHeight: item.roofHeight,
@@ -381,16 +381,16 @@ export function useCanvasSetting() {
           roofSizeSet: roofsRow[0].roofSizeSet,
           roofAngleSet: roofsRow[0].roofAngleSet,
           roofsData: roofsArray,
-          selectedRoofMaterial: addRoofs[0],
+          selectedRoofMaterial: addRoofs.find((roof) => roof.selected),
         })
       })
     } catch (error) {
       console.error('Data fetching error:', error)
     }
 
-    if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
-      setBasicSettings({ ...canvasSetting })
-    }
+    // if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
+    //   setBasicSettings({ ...canvasSetting })
+    // }
     setCanvasSetting({ ...basicSetting })
   }
 

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -169,6 +169,7 @@ export function useRoofAllocationSetting(id) {
           roofSizeSet: res[0].roofSizeSet,
           roofAngleSet: res[0].roofAngleSet,
           roofsData: roofsArray,
+          selectedRoofMaterial: selectRoofs.find((roof) => roof.selected),
         })
         setBasicInfo({
           roofSizeSet: '' + res[0].roofSizeSet,
@@ -188,7 +189,7 @@ export function useRoofAllocationSetting(id) {
         roofSizeSet: Number(basicSetting.roofSizeSet),
         roofAngleSet: basicSetting.roofAngleSet,
         roofAllocationList: currentRoofList.map((item, index) => ({
-          roofApply: item.selected === null || item.selected === undefined ? 'true' : item.selected,
+          roofApply: item.selected,
           roofSeq: index,
           roofMatlCd: item.roofMatlCd === null || item.roofMatlCd === undefined ? 'ROOF_ID_WA_53A' : item.roofMatlCd,
           roofWidth: item.width === null || item.width === undefined ? 0 : Number(item.width),

src/hooks/usePlan.js

@@ -181,6 +181,7 @@ export function usePlan(params = {}) {
           setPlans((plans) => [...plans, { id: res.data, objectNo: objectNo, planNo: planNo, userId: userId, canvasStatus: canvasStatus }])
         }
         updateCurrentPlan(res.data)
+        swalFire({ text: getMessage('plan.message.save') })
       })
       .catch((error) => {
         swalFire({ text: error.message, icon: 'error' })
@@ -200,6 +201,7 @@ export function usePlan(params = {}) {
     await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
       .then((res) => {
         setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)))
+        swalFire({ text: getMessage('plan.message.save') })
       })
       .catch((error) => {
         swalFire({ text: error.message, icon: 'error' })

src/locales/ja.json

@@ -281,6 +281,12 @@
   "modal.object.setting.direction.select": "方向の選択",
   "modal.placement.surface.setting.info": "ⓘ ①の長さ入力後に対角線の長さを入力すると、②の長さを自動計算します。",
   "modal.placement.surface.setting.diagonal.length": "斜めの長さ",
+  "modal.placement.surface.drawing.straight.line": "직선(JA)",
+  "modal.placement.surface.drawing.right.angle": "직각(JA)",
+  "modal.placement.surface.drawing.double.pitch": "이구배(JA)",
+  "modal.placement.surface.drawing.angle": "각도(JA)",
+  "modal.placement.surface.drawing.diagonal": "대각선(JA)",
+  "modal.placement.surface.drawing.fix": "배치면 확정(JA)",
   "modal.color.picker.title": "色の設定",
   "modal.color.picker.default.color": "基本色",
   "modal.size.setting": "サイズ変更",
@@ -305,6 +311,9 @@
   "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",
   "plan.message.save": "저장되었습니다.",
   "plan.message.delete": "삭제되었습니다.",
+  "plan.message.leave": "물건현황(목록)으로 이동하시겠습니까? [예]를 선택한 경우, 저장하고 이동합니다.",
+  "plan.message.confirm.yes": "예",
+  "plan.message.confirm.no": "아니오",
   "setting": "設定",
   "delete": "삭제(JA)",
   "delete.all": "전체 삭제(JA)",
@@ -970,5 +979,6 @@
   "can.not.copy.module": "모듈을 복사할 수 없습니다.(JA)",
   "can.not.remove.module": "모듈을 삭제할 수 없습니다.(JA)",
   "can.not.insert.module": "모듈을 삽입할 수 없습니다.(JA)",
-  "can.not.align.module": "모듈을 정렬할 수 없습니다.(JA)"
+  "can.not.align.module": "모듈을 정렬할 수 없습니다.(JA)",
+  "menu.validation.canvas.roof": "패널을 배치하려면 지붕면을 입력해야 합니다."
 }

src/locales/ko.json

@@ -80,6 +80,7 @@
   "modal.placement.surface.drawing.double.pitch": "이구배",
   "modal.placement.surface.drawing.angle": "각도",
   "modal.placement.surface.drawing.diagonal": "대각선",
+  "modal.placement.surface.drawing.fix": "배치면 확정",
   "plan.menu.placement.surface.arrangement": "면형상 배치",
   "plan.menu.placement.surface.object": "오브젝트 배치",
   "plan.menu.placement.surface.all.remove": "배치면 전체 삭제",
@@ -311,6 +312,9 @@
   "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",
   "plan.message.save": "저장되었습니다.",
   "plan.message.delete": "삭제되었습니다.",
+  "plan.message.leave": "물건현황(목록)으로 이동하시겠습니까? [예]를 선택한 경우, 저장하고 이동합니다.",
+  "plan.message.corfirm.yes": "예",
+  "plan.message.confirm.no": "아니오",
   "setting": "설정",
   "delete": "삭제",
   "delete.all": "전체 삭제",
@@ -990,5 +994,6 @@
   "module.place.select.one.module": "모듈은 하나만 선택해주세요.",
   "batch.canvas.delete.all": "배치면 내용을 전부 삭제하시겠습니까?",
   "module.not.found": "설치 모듈을 선택하세요.",
-  "construction.length.difference": "지붕면 공법을 전부 선택해주세요."
+  "construction.length.difference": "지붕면 공법을 전부 선택해주세요.",
+  "menu.validation.canvas.roof": "패널을 배치하려면 지붕면을 입력해야 합니다."
 }

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

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;

src/util/common-utils.js

@@ -149,3 +149,7 @@ export const unescapeString = (str) => {
     return str.replace(regex, (matched) => chars[matched] || matched)
   }
 }
+
+export const isNullOrUndefined = (value) => {
+  return value === null || value === undefined
+}