diff --git a/src/app/GlobalLoadingProvider.js b/src/app/GlobalLoadingProvider.js
new file mode 100644
index 00000000..92a6c65e
--- /dev/null
+++ b/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 />}</>
+}
diff --git a/src/app/QcastProvider.js b/src/app/QcastProvider.js
index 43404308..73911177 100644
--- a/src/app/QcastProvider.js
+++ b/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>
diff --git a/src/app/floor-plan/FloorPlanProvider.js b/src/app/floor-plan/FloorPlanProvider.js
index 13c3dd5a..cb47d702 100644
--- a/src/app/floor-plan/FloorPlanProvider.js
+++ b/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({
diff --git a/src/app/floor-plan/layout.js b/src/app/floor-plan/layout.js
index 74fe0632..e4ecbee3 100644
--- a/src/app/floor-plan/layout.js
+++ b/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>
     </>
   )
 }
diff --git a/src/app/layout.js b/src/app/layout.js
index fd9f08bd..1118b0d9 100644
--- a/src/app/layout.js
+++ b/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 />
diff --git a/src/components/common/select/QSelectBox.jsx b/src/components/common/select/QSelectBox.jsx
index bd888ac3..12c72b5e 100644
--- a/src/components/common/select/QSelectBox.jsx
+++ b/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 &&
diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index cf2e0d56..6722fea8 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/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>
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index bdb612a8..52afaf8e 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/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>
             </>
           )}
diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx
index a2e92bf2..8cd320f0 100644
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/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()
diff --git a/src/components/floor-plan/modal/basic/step/Orientation.jsx b/src/components/floor-plan/modal/basic/step/Orientation.jsx
index a64210f4..590c9d46 100644
--- a/src/components/floor-plan/modal/basic/step/Orientation.jsx
+++ b/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)
diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
index 450d15b9..2901f952 100644
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@@ -6,14 +6,12 @@ import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp'
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
 import PassivityCircuitAllocation from './step/type/PassivityCircuitAllocation'
-import { useAxios } from '@/hooks/useAxios'
 import { useMasterController } from '@/hooks/common/useMasterController'
-import { get } from 'react-hook-form'
 import { correntObjectNoState } from '@/store/settingAtom'
 import { useRecoilValue } from 'recoil'
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { useRecoilState } from 'recoil'
-import { modelState, pcsCheckState, powerConditionalState } from '@/store/circuitTrestleAtom'
+import { makersState, modelsState, modelState, pcsCheckState, selectedMakerState, seriesState } from '@/store/circuitTrestleAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { useSwal } from '@/hooks/useSwal'
 import { canvasState } from '@/store/canvasAtom'
@@ -27,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()}>
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
index a58abfc3..bc67679d 100644
--- a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
+++ b/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>
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
index a3f69548..d1b3d3dd 100644
--- a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
+++ b/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>
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
index e9da38b3..a1c26c6b 100644
--- a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
+++ b/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>
diff --git a/src/components/floor-plan/modal/movement/MovementSetting.jsx b/src/components/floor-plan/modal/movement/MovementSetting.jsx
index a4dcf3fc..057d7d37 100644
--- a/src/components/floor-plan/modal/movement/MovementSetting.jsx
+++ b/src/components/floor-plan/modal/movement/MovementSetting.jsx
@@ -33,7 +33,6 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
             ))}
           </div>
           <div className="properties-setting-wrap outer">
-            <div className="setting-tit">{getMessage('setting')}</div>
             {type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />}
             {type === TYPE.UP_DOWN && <Updown {...updownProps} />}
           </div>
diff --git a/src/components/floor-plan/modal/object/ObjectSetting.jsx b/src/components/floor-plan/modal/object/ObjectSetting.jsx
index 97cd02f8..69c4232c 100644
--- a/src/components/floor-plan/modal/object/ObjectSetting.jsx
+++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx
@@ -92,7 +92,6 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
             ))}
           </div>
           <div className="properties-setting-wrap outer">
-            <div className="setting-tit">{getMessage('setting')}</div>
             {buttonAct === 1 && <OpenSpace ref={objectPlacement} />}
             {buttonAct === 2 && <Shadow ref={objectPlacement} />}
             {buttonAct === 3 && <TriangleDormer ref={dormerPlacement} />}
diff --git a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
index 84107dae..c95c7c5a 100644
--- a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
@@ -152,7 +152,6 @@ export default function WallLineSetting(props) {
             </button>
           </div>
           <div className="properties-setting-wrap outer">
-            <div className="setting-tit">{getMessage('modal.cover.outline.setting')}</div>
             {type === OUTER_LINE_TYPE.OUTER_LINE ? (
               <OuterLineWall props={outerLineProps} />
             ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
diff --git a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
index fa4f82f6..2fbe78e9 100644
--- a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
+++ b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
@@ -4,7 +4,7 @@ import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
-import { useRecoilValue } from 'recoil'
+import { useRecoilValue, useResetRecoilState } from 'recoil'
 
 export default function PanelBatchStatistics() {
   const { getMessage } = useMessage()
@@ -24,23 +24,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>
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
index fd435b8b..71bed775 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
@@ -142,7 +142,6 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
             ))}
           </div>
           <div className="properties-setting-wrap outer">
-            <div className="setting-tit">{getMessage('setting')}</div>
             {buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
             {buttonAct === 2 && <RightAngle props={rightAngleProps} />}
             {buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
@@ -155,7 +154,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
               {getMessage('modal.cover.outline.rollback')}
             </button>
             <button className="btn-frame modal act" onClick={handleFix}>
-              {getMessage('modal.cover.outline.fix')}
+              {getMessage('modal.placement.surface.drawing.fix')}
             </button>
           </div>
         </div>
diff --git a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
index 1efbb767..2a59cc91 100644
--- a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
@@ -108,7 +108,6 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
             ))}
           </div>
           <div className="properties-setting-wrap">
-            <div className="setting-tit">{getMessage('setting')}</div>
             {shapeNum === 1 && <Ridge {...ridgeProps} />}
             {(shapeNum === 2 || shapeNum === 3) && <Pattern {...patternProps} />}
             {shapeNum === 4 && <Side {...sideProps} />}
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
index 1a39e9e1..ab6b74b7 100644
--- a/src/components/header/Header.jsx
+++ b/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">
diff --git a/src/components/main/MainContents.jsx b/src/components/main/MainContents.jsx
index 3c9379d8..b390adcd 100644
--- a/src/components/main/MainContents.jsx
+++ b/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">
diff --git a/src/components/management/Stuff.jsx b/src/components/management/Stuff.jsx
index 987be2f1..73c8a9b4 100644
--- a/src/components/management/Stuff.jsx
+++ b/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({
diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index 9e2f0d04..eee1a91e 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/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
                                 })}
diff --git a/src/components/management/StuffSearchCondition.jsx b/src/components/management/StuffSearchCondition.jsx
index ba16334e..92cc1e04 100644
--- a/src/components/management/StuffSearchCondition.jsx
+++ b/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)
diff --git a/src/components/management/StuffSubHeader.jsx b/src/components/management/StuffSubHeader.jsx
index 18bd5969..8e61e259 100644
--- a/src/components/management/StuffSubHeader.jsx
+++ b/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>
+    </>
   )
 }
diff --git a/src/hooks/common/useCanvasPopupStatusController.js b/src/hooks/common/useCanvasPopupStatusController.js
index 78cd4e9d..e4b2cc46 100644
--- a/src/hooks/common/useCanvasPopupStatusController.js
+++ b/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])
diff --git a/src/hooks/common/useMasterController.js b/src/hooks/common/useMasterController.js
index d9b1cec0..62558d8a 100644
--- a/src/hooks/common/useMasterController.js
+++ b/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,
   }
 }
diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js
index af187a0a..72ff90d8 100644
--- a/src/hooks/module/useModuleBasicSetting.js
+++ b/src/hooks/module/useModuleBasicSetting.js
@@ -1,4 +1,4 @@
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, checkedModuleState, isManualModuleSetupState, selectedModuleState } from '@/store/canvasAtom'
 import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon } from '@/util/canvas-util'
 import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
@@ -32,7 +32,7 @@ export function useModuleBasicSetting() {
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
   const checkedModule = useRecoilValue(checkedModuleState)
   const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
-  const [moduleStatistics, setModuleStatistics] = useRecoilState(moduleStatisticsState)
+  const setModuleStatistics = useSetRecoilState(moduleStatisticsState)
 
   useEffect(() => {
     // console.log('basicSetting', basicSetting)
@@ -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 })
   }
 
diff --git a/src/hooks/module/useModulePlace.js b/src/hooks/module/useModulePlace.js
index 1716c1c2..5a25a50a 100644
--- a/src/hooks/module/useModulePlace.js
+++ b/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')
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index cad8c57a..080c78c4 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/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 })
   }
 
diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js
index 1488fb26..824e4b4a 100644
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/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),
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index e44753d7..36d619c8 100644
--- a/src/hooks/usePlan.js
+++ b/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' })
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 72addabb..62454519 100644
--- a/src/locales/ja.json
+++ b/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": "패널을 배치하려면 지붕면을 입력해야 합니다."
 }
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 88f611c2..c5c45576 100644
--- a/src/locales/ko.json
+++ b/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": "패널을 배치하려면 지붕면을 입력해야 합니다."
 }
diff --git a/src/store/circuitTrestleAtom.js b/src/store/circuitTrestleAtom.js
index 84809e02..46f62676 100644
--- a/src/store/circuitTrestleAtom.js
+++ b/src/store/circuitTrestleAtom.js
@@ -1,20 +1,30 @@
 import { useMessage } from '@/hooks/useMessage'
 import { atom } from 'recoil'
 
-export const makerState = atom({
-  key: 'makerState',
-  default: { makers: [], selectedMaker: null },
+export const makersState = atom({
+  key: 'makersState',
+  default: [],
   dangerouslyAllowMutability: true,
 })
 
+export const selectedMakerState = atom({
+  key: 'selectedMakerState',
+  default: null,
+})
+
 export const seriesState = atom({
   key: 'seriesState',
-  default: { series: [], selectedSeries: [] },
+  default: [],
 })
 
-export const modelState = atom({
+export const selectedSeriesState = atom({
+  key: 'selectedSeriesState',
+  default: null,
+})
+
+export const modelsState = atom({
   key: 'modelState',
-  default: { models: [], selectedModels: [] },
+  default: [],
 })
 
 export const pcsCheckState = atom({
@@ -30,6 +40,7 @@ export const moduleStatisticsState = atom({
       { name: `발전량(kW)`, prop: 'amount' },
     ],
     rows: [],
-    footer: ['합계', 0],
+    footer: ['합계', '0'],
   },
+  dangerouslyAllowMutability: true,
 })
diff --git a/src/styles/_canvasside.scss b/src/styles/_canvasside.scss
index efb79f02..ca9dee61 100644
--- a/src/styles/_canvasside.scss
+++ b/src/styles/_canvasside.scss
@@ -37,7 +37,7 @@
         border: 1px solid #3D3D3D;
         padding: 20px;
         .penal-table{
-            table-layout: fixed;
+            table-layout: auto;
             border-collapse: collapse;
             thead{
                 th{
@@ -45,8 +45,11 @@
                     background-color:rgba(255, 255, 255, 0.05);
                     font-size: 12px;
                     font-weight: 500;
+                    min-width: 140px;
+                    padding: 0 15px;
                     color: #fff;
                     border: 1px solid #505050;
+                    white-space: nowrap;
                 }
             }
             tbody{
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 57ce2c5a..61f631cd 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,505 +4,485 @@ $pop-bold-weight: 500;
 $pop-normal-size: 12px;
 $alert-color: #101010;
 
-@keyframes mountpop {
-  from {
-    opacity: 0;
-    scale: 0.95;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-  }
+@keyframes mountpop{
+    from{opacity: 0; scale: 0.95;}
+    to{opacity: 1; scale: 1;}
 }
-@keyframes unmountpop {
-  from {
-    opacity: 1;
-    scale: 1;
-  }
-  to {
-    opacity: 0;
-    scale: 0.95;
-  }
+@keyframes unmountpop{
+    from{opacity: 1; scale: 1;}
+    to{opacity: 0; scale: 0.95;}
 }
 
-.normal-font {
-  font-size: 12px;
-  font-weight: 400;
-  color: #fff;
+.normal-font{
+    font-size: 12px;
+    font-weight: 400;
+    color: #fff;
 }
-.bold-font {
-  font-size: 12px;
-  font-weight: 500;
-  color: #fff;
+.bold-font{
+    font-size: 12px;
+    font-weight: 500;
+    color: #fff;
 }
 
-.modal-pop-wrap {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  border: 1px solid #000;
-  border-radius: 4px;
-  background-color: #272727;
-  z-index: 100000;
-  &.xsm {
-    width: 200px;
-  }
-  &.xxxm {
-    width: 240px;
-  }
-  &.xxm {
-    width: 270px;
-  }
-  &.xm {
-    width: 300px;
-  }
-  &.ssm {
-    width: 380px;
-  }
-  &.sm {
-    width: 580px;
-  }
-  &.r {
-    width: 400px;
-  }
-  &.lr {
-    width: 440px;
-  }
-  &.lr-2 {
-    width: 450px;
-  }
-  &.lrr {
-    width: 480px;
-  }
-  &.ml {
-    width: 530px;
-  }
-  &.l-2 {
-    width: 640px;
-  }
-  &.lx-2 {
-    width: 740px;
-  }
-  &.lx {
-    width: 770px;
-  }
-  &.l {
-    width: 800px;
-  }
-  &.ll {
-    width: 900px;
-  }
-  &.mount {
-    animation: mountpop 0.17s ease-in-out forwards;
-  }
-  &.unmount {
-    animation: unmountpop 0.17s ease-in-out forwards;
-  }
-  &.alert {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: transparent;
-    border: none;
-    .modal-head {
-      background-color: transparent;
-      padding: 0 0 8px;
-      .modal-close {
-        width: 20px;
-        height: 20px;
-        background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
-      }
+.modal-pop-wrap{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
+    border: 1px solid #000;
+    border-radius: 4px;
+    background-color: #272727;
+    z-index: 100000;
+    &.xsm{
+        width: 200px;
     }
-    .modal-body {
-      background-color: #fff;
-      padding: 22px;
-      border-radius: 4px;
-      border: 1px solid #101010;
-      color: $alert-color;
-      .alert-title {
+    &.xxxm{
+        width: 240px;
+    }
+    &.xxm{
+        width: 270px;
+    }
+    &.xm{
+        width: 300px;
+    }
+    &.ssm{
+        width: 380px;
+    }
+    &.sm{
+        width: 580px;
+    }
+    &.r{
+        width: 400px;
+    }
+    &.lr{
+        width: 440px;
+    }
+    &.lr-2{
+        width: 450px;
+    }
+    &.lrr{
+        width: 480px;
+    }
+    &.ml{
+        width: 530px;
+    }
+    &.l-2{
+        width: 640px;
+    }
+    &.lx-2{
+        width: 740px;
+    }
+    &.lx{
+        width: 770px;
+    }
+    &.l{
+        width: 800px;
+    }
+    &.ll{
+        width: 900px;
+    }
+    &.mount{
+        animation: mountpop .17s ease-in-out forwards;
+    }
+    &.unmount{
+        animation: unmountpop .17s ease-in-out forwards;
+    }
+    &.alert{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: transparent;
+        border: none;
+        .modal-head{
+            background-color: transparent;
+            padding: 0 0 8px;
+            .modal-close{
+                width: 20px;
+                height: 20px;
+                background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
+            }
+        }
+        .modal-body{
+            background-color: #fff;
+            padding: 22px;
+            border-radius: 4px;
+            border: 1px solid #101010;
+            color: $alert-color;
+            .alert-title{
+                font-size: 13px;
+                font-weight: 700;
+                color: $alert-color;
+                margin-bottom: 15px;
+            }
+        }
+    }
+}
+.modal-head{
+    display: flex;
+    align-items: center;
+    padding: 10px 24px;
+    background-color: #000;
+    // overflow: hidden;
+    cursor: pointer;
+    h1.title{
         font-size: 13px;
+        color: $pop-color;
         font-weight: 700;
-        color: $alert-color;
+    }
+    .modal-close{
+        margin-left: auto;
+        color: transparent;
+        font-size: 0;
+        width: 10px;
+        height: 10px;
+        background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
+    }
+}
+.modal-body{
+    padding: 24px;
+    .modal-btn-wrap{
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        button{
+            flex: 1;
+        }
+        &.sub{
+            button{
+                flex: 1 1 auto;
+                padding: 0;
+            }
+            margin-bottom: 14px;
+        }
+    }
+    .modal-check-btn-wrap{
+        margin-top: 15px;
+        .check-wrap-title{
+            font-size: $pop-normal-size;
+            color: $pop-color;
+            font-weight: 600;
+            &.light{
+                font-weight: $pop-normal-weight;
+            }
+        }
+        .flex-check-box{
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 15px;
+            &.for2{
+                justify-content: flex-end;
+                button{
+                    width: calc(50% - 5px);
+                }
+                &.btn{
+                    gap: 5px;
+                    button{
+                        width: calc(50% - 2.5px);
+                    }
+                }
+            }
+            &.for-line{
+                button{
+                    flex: 1;
+                }
+            }
+        }
+    }
+    .outer-line-wrap{
+        border-top: 1px solid #3C3C3C;
+        margin-top: 10px;
+        padding-top: 15px;
         margin-bottom: 15px;
-      }
+        > div{
+            margin-bottom: 15px;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
     }
-  }
-}
-.modal-head {
-  display: flex;
-  align-items: center;
-  padding: 10px 24px;
-  background-color: #000;
-  // overflow: hidden;
-  cursor: pointer;
-  h1.title {
-    font-size: 13px;
-    color: $pop-color;
-    font-weight: 700;
-  }
-  .modal-close {
-    margin-left: auto;
-    color: transparent;
-    font-size: 0;
-    width: 10px;
-    height: 10px;
-    background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
-  }
-}
-.modal-body {
-  padding: 24px;
-  .modal-btn-wrap {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    button {
-      flex: 1;
-    }
-    &.sub {
-      button {
-        flex: 1 1 auto;
-        padding: 0;
-      }
-      margin-bottom: 14px;
-    }
-  }
-  .modal-check-btn-wrap {
-    margin-top: 15px;
-    .check-wrap-title {
-      font-size: $pop-normal-size;
-      color: $pop-color;
-      font-weight: 600;
-      &.light {
+    .modal-guide{
+        display: block;
+        font-size: $pop-normal-size;
+        color: $alert-color;
         font-weight: $pop-normal-weight;
-      }
     }
-    .flex-check-box {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      margin-top: 15px;
-      &.for2 {
-        justify-content: flex-end;
-        button {
-          width: calc(50% - 5px);
-        }
-        &.btn {
-          gap: 5px;
-          button {
-            width: calc(50% - 2.5px);
-          }
-        }
-      }
-      &.for-line {
-        button {
-          flex: 1;
-        }
-      }
-    }
-  }
-  .outer-line-wrap {
-    border-top: 1px solid #3c3c3c;
-    margin-top: 10px;
-    padding-top: 15px;
-    margin-bottom: 15px;
-    > div {
-      margin-bottom: 15px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  .modal-guide {
-    display: block;
-    font-size: $pop-normal-size;
-    color: $alert-color;
-    font-weight: $pop-normal-weight;
-  }
 }
-.modal-foot {
-  display: block;
-  width: 100%;
-  padding: 5px 0;
-  background-color: #000;
-  cursor: pointer;
+.modal-foot{
+    display: block;
+    width: 100%;
+    padding: 5px 0;
+    background-color: #000;
+    cursor: pointer;
 }
 
-.adsorption-point {
-  display: flex;
-  align-items: center;
-  background-color: #3a3a3a;
-  border-radius: 3px;
-  padding-left: 11px;
-  overflow: hidden;
-  transition: all 0.17s ease-in-out;
-  span {
-    font-size: $pop-normal-size;
-    color: #898989;
-  }
-  i {
+.adsorption-point{
     display: flex;
     align-items: center;
-    padding: 0 7px;
-    margin-left: auto;
-    height: 100%;
-    font-size: 13px;
-    color: #898989;
-  }
-  &.act {
-    i {
-      color: $pop-color;
-      background-color: #1083e3;
+    background-color: #3A3A3A;
+    border-radius: 3px;
+    padding-left: 11px;
+    overflow: hidden;
+    transition: all 0.17s ease-in-out;
+    span{
+        font-size: $pop-normal-size;
+        color: #898989;
+    }
+    i{
+        display: flex;
+        align-items: center;
+        padding: 0 7px;
+        margin-left: auto;
+        height: 100%;
+        font-size: 13px;
+        color: #898989;
+    }
+    &.act{
+        i{
+            color: $pop-color;
+            background-color: #1083E3;
+        }
     }
-  }
 }
 
 // grid-option
-.grid-check-form {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  padding-bottom: 15px;
-  &.border {
-    border-bottom: 1px solid #424242;
-  }
-}
-.grid-option-overflow {
-  max-height: 350px;
-  overflow-y: auto;
-  &::-webkit-scrollbar {
-    width: 4px;
-    background-color: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-}
-.grid-option-wrap {
-  .grid-option-box {
+.grid-check-form{
     display: flex;
     align-items: center;
-    background-color: transparent;
-    border: 1px solid #3d3d3d;
-    border-radius: 2px;
-    padding: 15px 10px;
-    gap: 20px;
-    margin-bottom: 10px;
-    .grid-input-form {
-      display: flex;
-      align-items: center;
-      span {
-        flex: none;
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-bold-weight;
-      }
-      .input-grid {
-        width: 54px;
-        input {
-          width: 100%;
+    gap: 15px;
+    padding-bottom: 15px;
+    &.border{
+        border-bottom: 1px solid #424242;
+    }
+}
+.grid-option-overflow{
+    max-height: 350px;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #D9D9D9;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+}
+.grid-option-wrap{
+    .grid-option-box{
+        display: flex;
+        align-items: center;
+        background-color: transparent;
+        border: 1px solid #3D3D3D;
+        border-radius: 2px;
+        padding: 15px 10px;
+        gap: 20px;
+        margin-bottom: 10px;
+        .grid-input-form{
+            display: flex;
+            align-items: center;
+            span{
+                flex: none;
+                font-size: $pop-normal-size;
+                color: $pop-color;
+                font-weight: $pop-bold-weight;
+            }
+            .input-grid{
+                width: 54px;
+                input{
+                    width: 100%;
+                }
+            }
+        }
+        &:last-child{
+            margin-bottom: 0;
         }
-      }
     }
-    &:last-child {
-      margin-bottom: 0;
+    .grid-option-block-form{
+        flex: 1;
     }
-  }
-  .grid-option-block-form {
+}
+.select-form{
+    .sort-select{width: 100%;}
+}
+.grid-select{
     flex: 1;
-  }
+    &.no-flx{
+        flex: unset;
+    }
+    .sort-select{
+        width: 100%;
+        background-color: #313131;
+        min-width: auto;
+        font-size: 12px;
+        border: none;
+        p{
+            font-size: 12px;
+        }
+        > ul{
+            border: none;
+        }
+    }
+    &.right{
+        p{
+            text-align: right;
+        }
+        ul{
+            li{
+                justify-content: flex-end;
+            }
+        }
+    }
 }
-.select-form {
-  .sort-select {
-    width: 100%;
-  }
-}
-.grid-select {
-  flex: 1;
-  &.no-flx {
-    flex: unset;
-  }
-  .sort-select {
-    width: 100%;
-    background-color: #313131;
-    min-width: auto;
-    font-size: 12px;
-    border: none;
-    p {
-      font-size: 12px;
+.grid-btn-wrap{
+    padding-top: 15px;
+    text-align: right;
+    button{
+        padding: 0 10px;
     }
-    > ul {
-      border: none;
-    }
-  }
-  &.right {
-    p {
-      text-align: right;
-    }
-    ul {
-      li {
-        justify-content: flex-end;
-      }
-    }
-  }
-}
-.grid-btn-wrap {
-  padding-top: 15px;
-  text-align: right;
-  button {
-    padding: 0 10px;
-  }
 }
 
 // grid copy
-.grid-option-tit {
-  font-size: $pop-normal-size;
-  color: $pop-color;
-  font-weight: $pop-normal-weight;
-  padding-bottom: 15px;
+.grid-option-tit{
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-normal-weight;
+    padding-bottom: 15px;
+
 }
-.grid-direction {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  flex: 1;
+.grid-direction{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    flex: 1;
 }
-.direction {
-  width: 22px;
-  height: 22px;
-  background-color: #757575;
-  background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 16px 15px;
-  border-radius: 50%;
-  transition: all 0.15s ease-in-out;
-  opacity: 0.6;
-  &.down {
-    transform: rotate(180deg);
-  }
-  &.left {
-    transform: rotate(-90deg);
-  }
-  &.right {
-    transform: rotate(90deg);
-  }
-  &:hover,
-  &.act {
-    opacity: 1;
-  }
+.direction{
+    width: 22px;
+    height: 22px;
+    background-color: #757575;
+    background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 16px 15px;
+    border-radius: 50%;
+    transition: all .15s ease-in-out;
+    opacity: 0.6;
+    &.down{transform: rotate(180deg);}
+    &.left{transform: rotate(-90deg);}
+    &.right{transform: rotate(90deg);}
+    &:hover,
+    &.act{
+        opacity: 1;
+    }
 }
 
 // grid-move
-.move-form {
-  width: 100%;
-  p {
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-bold-weight;
-  }
-}
-.input-move-wrap {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  span {
-    color: $pop-color;
-    font-size: $pop-normal-size;
-  }
-  .input-move {
-    width: 130px;
-    input {
-      width: 100%;
-    }
-  }
-}
-.direction-move-wrap {
-  flex: none;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 5px;
-  margin-left: auto;
-}
-
-// 배치면 초기 설정
-.placement-table {
-  table {
-    table-layout: fixed;
-    tr {
-      th {
+.move-form{
+    width: 100%;
+    p{
         font-size: $pop-normal-size;
         color: $pop-color;
         font-weight: $pop-bold-weight;
-        padding: 18px 0;
-        border-bottom: 1px solid #424242;
-        vertical-align: middle;
-        .tip-wrap {
-          display: flex;
-          align-items: center;
-        }
-      }
-      td {
-        font-size: $pop-normal-size;
+    }
+}
+.input-move-wrap{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    span{
         color: $pop-color;
-        border-bottom: 1px solid #424242;
-        padding: 18px 0 18px 20px;
-        vertical-align: middle;
-        .flex-box {
-          display: flex;
-          align-items: center;
-        }
-      }
-      &:first-child {
-        td,
-        th {
-          padding-top: 0;
-        }
-      }
+        font-size: $pop-normal-size;
     }
-  }
-  .tooltip {
-    position: relative;
-    display: block;
-    width: 15px;
-    height: 15px;
-    margin-left: 5px;
-    background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center;
-    background-size: cover;
-  }
-  &.light {
-    padding: 0;
-    th,
-    td {
-      color: $alert-color;
-      border-bottom: none;
-      border-top: 1px solid #efefef;
-    }
-    th {
-      padding: 14px 0;
-    }
-    tr {
-      &:first-child {
-        td,
-        th {
-          padding-top: 14px;
+    .input-move{
+        width: 130px;
+        input{
+            width: 100%;
+        }
+    }
+}
+.direction-move-wrap{
+    flex: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 5px;
+    margin-left: auto;
+}
+
+// 배치면 초기 설정
+.placement-table{
+    table{
+        table-layout: fixed;
+        tr{
+            th{
+                font-size: $pop-normal-size;
+                color: $pop-color;
+                font-weight: $pop-bold-weight;
+                padding: 18px 0;
+                border-bottom: 1px solid #424242;
+                vertical-align: middle;
+                .tip-wrap{
+                    display: flex;
+                    align-items: center;
+                }
+            }
+            td{
+                font-size: $pop-normal-size;
+                color: $pop-color;
+                border-bottom: 1px solid #424242;
+                padding: 18px 0 18px 20px;
+                vertical-align: middle;
+                .flex-box{
+                    display: flex;
+                    align-items: center;
+                }
+            }
+            &:first-child{
+                td,
+                th{
+                    padding-top: 0;
+                }
+            }
+        }
+    }
+    .tooltip{
+        position: relative;
+        display: block;
+        width: 15px;
+        height: 15px;
+        margin-left: 5px;
+        background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
+        background-size: cover;
+    }
+    &.light{
+        padding: 0;
+        th,td{
+            color: $alert-color;
+            border-bottom: none;
+            border-top: 1px solid #EFEFEF;
+        }
+        th{
+            padding: 14px 0;
+        }
+        tr{
+            &:first-child{
+                td,
+                th{
+                    padding-top: 14px;
+                }
+            }
+            &:last-child{
+                td,
+                th{
+                    padding-bottom: 0px;
+                }
+            }
         }
-      }
-      &:last-child {
-        td,
-        th {
-          padding-bottom: 0px;
-        }
-      }
     }
-  }
 }
 
 // 2024-12-11
@@ -513,1793 +493,1612 @@ $alert-color: #101010;
 //     max-width: 250px;
 // }
 
-.pop-form-radio {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.placement-option {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-.select-wrap {
-  .sort-select {
-    width: 100%;
-  }
-}
-.flex-ment {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  span {
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-normal-weight;
-  }
-}
-
-.img-edit-wrap {
-  flex: none;
-  .img-edit-btn {
+.pop-form-radio{
     display: flex;
     align-items: center;
-    height: 30px;
-    padding: 0 10px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #101010;
-    background-color: #fff;
-    border-radius: 2px;
-    cursor: pointer;
-    transition: all 0.15s ease-in-out;
-    .img-edit {
-      width: 16px;
-      height: 16px;
-      background: url(../../public/static/images/canvas/img_edit_ico.svg) no-repeat center;
-      background-size: cover;
-      margin-right: 5px;
-    }
-    &:hover {
-      background-color: #ebebeb;
-    }
-  }
+    gap: 10px;
 }
-.img-name-wrap {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin-left: 10px;
-  input {
-    flex: 1;
-  }
-  .img-check {
-    flex: none;
-    width: 18px;
-    height: 18px;
-    margin-left: 5px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    background-image: url(../../public/static/images/canvas/img_check_fail.svg);
-  }
+.placement-option{
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+.select-wrap{
+    .sort-select{
+        width: 100%;
+    }
+}
+.flex-ment{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    span{
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-normal-weight;
+    }
+
 }
 
-.for-address {
-  input {
-    flex: 1;
-  }
-  .check-address {
+.img-edit-wrap{
     flex: none;
-    width: 18px;
-    height: 18px;
-    margin-left: 5px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    &.fail {
-      background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+    .img-edit-btn{
+        display: flex;
+        align-items: center;
+        height: 30px;
+        padding: 0 10px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #101010;
+        background-color: #fff;
+        border-radius: 2px;
+        cursor: pointer;
+        transition: all .15s ease-in-out;
+        .img-edit{
+            width: 16px;
+            height: 16px;
+            background: url(../../public/static/images/canvas/img_edit_ico.svg)no-repeat center;
+            background-size: cover;
+            margin-right: 5px;
+        }
+        &:hover{
+            background-color: #ebebeb;
+        }
     }
-    &.success {
-      background-image: url(../../public/static/images/canvas/img_check_success.svg);
+}
+.img-name-wrap{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-left: 10px;
+    input{
+        flex: 1;
+
+    }
+    .img-check{
+        flex: none;
+        width: 18px;
+        height: 18px;
+        margin-left: 5px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+    }
+}
+
+.for-address{
+    input{
+        flex: 1;
+    }
+    .check-address{
+        flex: none;
+        width: 18px;
+        height: 18px;
+        margin-left: 5px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
+        &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
     }
-  }
 }
 
 // 외벽선 그리기
-.outline-wrap {
-  padding: 24px 0;
-  border-top: 1px solid #424242;
-
-  .outline-inner {
+.outline-wrap{
+    padding: 24px 0;
+    border-top: 1px solid #424242;
+    
+    .outline-inner{
+        display: flex;
+        align-items: center;
+        margin-bottom: 14px;
+        &:last-child{
+            margin-bottom: 0;
+        }
+        .outline-form{
+            // width: 50%;
+            margin-right: 15px;
+        }
+    }
+    &:last-child{
+        border-bottom: 1px solid #424242;
+    }
+}
+.outline-form{
     display: flex;
     align-items: center;
-    margin-bottom: 14px;
-    &:last-child {
-      margin-bottom: 0;
+    
+    span{
+        width: 60px;
+        flex: none;
+        font-size: $pop-normal-size;
+        font-weight: $pop-bold-weight;
+        color: $pop-color;
+        margin-right: 10px;
+        &.thin{
+            width: auto;
+            font-weight: $pop-normal-weight;
+            margin-right: 0;
+        }
     }
-    .outline-form {
-      // width: 50%;
-      margin-right: 15px;
-    }
-  }
-  &:last-child {
-    border-bottom: 1px solid #424242;
-  }
-}
-.outline-form {
-  display: flex;
-  align-items: center;
 
-  span {
-    width: 60px;
-    flex: none;
-    font-size: $pop-normal-size;
-    font-weight: $pop-bold-weight;
-    color: $pop-color;
-    margin-right: 10px;
-    &.thin {
-      width: auto;
-      font-weight: $pop-normal-weight;
-      margin-right: 0;
+    .reset-btn{
+        flex: none;
+        width: 30px;
+        height: 30px;
+        background: transparent;
+        border: 1px solid #484848;
+        border-radius: 2px;
+        margin-left: 5px;
+        background-image: url(../../public/static/images/canvas/reset_ico.svg);
+        background-repeat: no-repeat;
+        background-size: 12px 12px;
+        background-position: center;
+    }
+    &:last-child{
+        margin-right: 0;
     }
-  }
-
-  .reset-btn {
-    flex: none;
-    width: 30px;
-    height: 30px;
-    background: transparent;
-    border: 1px solid #484848;
-    border-radius: 2px;
-    margin-left: 5px;
-    background-image: url(../../public/static/images/canvas/reset_ico.svg);
-    background-repeat: no-repeat;
-    background-size: 12px 12px;
-    background-position: center;
-  }
-  &:last-child {
-    margin-right: 0;
-  }
 }
 
-.cul-wrap {
-  display: flex;
-  .outline-box {
-    width: 50%;
-    margin-right: 15px;
-    .outline-form {
-      width: 100%;
-      margin-bottom: 14px;
-      margin-right: 0;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  .cul-box {
+.cul-wrap{
     display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 50%;
-    background-color: #3d3d3d;
-    border-radius: 2px;
-  }
+    .outline-box{
+        width: 50%;
+        margin-right: 15px;
+        .outline-form{
+            width: 100%;
+            margin-bottom: 14px;
+            margin-right: 0;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+    }
+    .cul-box{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50%;
+        background-color: #3D3D3D;
+        border-radius: 2px ;
+    }
 }
 
 // 외벽선 속성 설정
-.properties-guide {
-  font-size: $pop-normal-size;
-  color: #aaa;
-  font-weight: $pop-normal-weight;
-  margin-bottom: 14px;
+.properties-guide{
+    font-size: $pop-normal-size;
+    color: #AAA;
+    font-weight: $pop-normal-weight;
+    margin-bottom: 14px;
 }
 
-.setting-tit {
-  font-size: 13px;
-  color: $pop-color;
-  font-weight: $pop-bold-weight;
-  margin-bottom: 10px;
+.setting-tit{
+    font-size: 13px;
+    color: $pop-color;
+    font-weight: $pop-bold-weight;
+    margin-bottom: 10px;
 }
-.properties-setting-wrap {
-  &.outer {
-    margin-top: 24px;
-  }
-  .setting-btn-wrap {
-    display: flex;
-    align-items: center;
-    padding: 14px 0;
-    border-top: 1px solid #424242;
-    border-bottom: 1px solid #424242;
-    .setting-btn {
-      display: block;
-      width: 100%;
-      height: 40px;
-      font-size: 13px;
-      color: #fff;
-      font-weight: 700;
-      border-radius: 2px;
-      transition: all 0.15s ease-in-out;
-      &.green {
-        background-color: #305941;
-        border: 1px solid #45cd7d;
-        &:hover {
-          background-color: #3a6b4e;
-        }
-      }
-      &.blue {
-        background-color: #2e5360;
-        border: 1px solid #3fbae6;
-        &:hover {
-          background-color: #365f6e;
-        }
-      }
+.properties-setting-wrap{
+    &.outer{
+        margin-top: 24px;
+    }
+    .setting-btn-wrap{
+        display: flex;
+        align-items: center;
+        padding: 14px 0;
+        border-top: 1px solid #424242;
+        border-bottom: 1px solid #424242;
+        .setting-btn{
+            display: block;
+            width: 100%;
+            height: 40px;
+            font-size: 13px;
+            color: #fff;
+            font-weight: 700;
+            border-radius: 2px;
+            transition: all .15s ease-in-out;
+            &.green{
+                background-color: #305941;
+                border: 1px solid #45CD7D;
+                &:hover{
+                    background-color: #3a6b4e;
+                }
+            }
+            &.blue{
+                background-color: #2E5360;
+                border: 1px solid #3FBAE6;
+                &:hover{
+                    background-color: #365f6e;
+                }
+            }
+        }
     }
-  }
 }
 
 // 지붕형상 설정
-.roof-shape-menu {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  gap: 24px 10px;
-  margin-bottom: 24px;
-  .shape-box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    padding: 13px;
-    background-color: #3d3d3d;
-    transition: background 0.15s ease-in-out;
-    img {
-      max-width: 100%;
-    }
-  }
-  .shape-title {
-    font-size: $pop-normal-size;
-    font-weight: $pop-bold-weight;
-    color: $pop-color;
-    margin-top: 10px;
-    text-align: center;
-    transition: color 0.15s ease-in-out;
-  }
-  .shape-menu-box {
-    &.act,
-    &:hover {
-      .shape-box {
-        background-color: #008bff;
-      }
-      .shape-title {
-        color: #008bff;
-      }
-    }
-  }
-}
-
-.setting-box {
-  padding: 14px 0;
-  border-top: 1px solid #424242;
-  border-bottom: 1px solid #424242;
-}
-.padding-form {
-  padding-left: 23px;
-}
-.discrimination-box {
-  padding: 16px 12px;
-  border: 1px solid #3d3d3d;
-  border-radius: 2px;
-}
-
-.modal-bottom-border-bx {
-  margin-top: 24px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid #424242;
-}
-
-// 처마∙케라바 변경
-.eaves-keraba-table {
-  display: table;
-  border-collapse: collapse;
-  .eaves-keraba-item {
-    display: table-row;
-    .eaves-keraba-th,
-    .eaves-keraba-td {
-      font-size: $pop-normal-size;
-      color: $pop-color;
-      font-weight: $pop-normal-weight;
-      display: table-cell;
-      vertical-align: middle;
-      padding-bottom: 14px;
-    }
-    .eaves-keraba-td {
-      padding-left: 10px;
-    }
-    .eaves-keraba-ico {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 5px;
-      background-color: #3d3d3d;
-      border: 1px solid #3d3d3d;
-      border-radius: 2px;
-      cursor: pointer;
-      &.act {
-        border: 1px solid #ed0004;
-      }
-    }
-    &:last-child {
-      .eaves-keraba-th,
-      .eaves-keraba-td {
-        padding-bottom: 0;
-      }
-    }
-  }
-}
-.guide {
-  font-size: $pop-normal-size;
-  font-weight: $pop-normal-weight;
-  color: $pop-color;
-  margin-bottom: 24px;
-  &.sm {
-    margin-bottom: 15px;
-  }
-  span {
-    display: block;
-  }
-}
-
-// 지붕면 할당
-.allocation-select-wrap {
-  display: flex;
-  align-items: center;
-  padding-bottom: 14px;
-  border-bottom: 1px solid #424242;
-  margin-bottom: 14px;
-  span {
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-bold-weight;
-    margin-right: 10px;
-  }
-  .allocation-edit {
-    display: flex;
-    align-items: center;
-    height: 30px;
-    padding: 0 10px;
-    margin-left: 5px;
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-normal-weight;
-    border: 1px solid #484848;
-    background-color: #323234;
-    i {
-      display: block;
-      width: 12px;
-      height: 12px;
-      margin-right: 5px;
-      background: url(../../public/static/images/canvas/allocation_edit.svg) no-repeat center;
-      background-size: cover;
-    }
-  }
-}
-
-.block-box {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 10px;
-  .flex-ment {
-    gap: 10px;
-    .dec {
-      text-decoration: underline;
-    }
-    .delete {
-      display: block;
-      width: 15px;
-      height: 15px;
-      background: url(../../public/static/images/canvas/allocation_delete.svg) no-repeat center;
-      background-size: cover;
-    }
-  }
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.icon-btn-wrap {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 30px;
-    font-size: $pop-normal-size;
-    font-weight: $pop-normal-weight;
-    color: $pop-color;
-    border: 1px solid #646464;
-    border-radius: 2px;
-    padding: 0 10px;
-    transition: all 0.15s ease-in-out;
-    i {
-      height: 15px;
-      display: block;
-      margin-left: 10px;
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: cover;
-      transition: all 0.15s ease-in-out;
-      &.allocation01 {
-        background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
-        width: 15px;
-      }
-      &.allocation02 {
-        background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
-        width: 18px;
-      }
-    }
-    &.act,
-    &:hover {
-      color: #101010;
-      border: 1px solid #101010;
-      background-color: #fff;
-      i {
-        &.allocation01 {
-          background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
-        }
-        &.allocation02 {
-          background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
-        }
-      }
-    }
-  }
-}
-
-// 경사설정
-.slope-wrap {
-  padding-bottom: 24px;
-  border-bottom: 1px solid #424242;
-}
-
-// 면형상 배치
-.plane-frame-wrap {
-  display: flex;
-  gap: 10px;
-  .plane-shape-wrap {
-    flex: none;
-    width: 73px;
-  }
-}
-
-.plane-shape-menu {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 5px;
-  .shape-menu-box {
-    border-radius: 2px;
-    width: 34px;
-    height: 34px;
-    background-color: #373737;
-    border: 1px solid #676767;
-    transition:
-      background 0.15s ease-in-out,
-      border 0.15s ease-in-out;
-    .shape-box {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-      width: 100%;
-      height: 100%;
-      border-radius: 2px;
-    }
-    &.act,
-    &:hover {
-      border-color: #008bff;
-      background-color: #008bff;
-    }
-  }
-}
-
-.shape-library {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  padding-top: 5px;
-  .library-btn {
-    width: 100%;
-    height: 34px;
-    border: 1px solid #6c6c6c;
-    border-radius: 2px;
-    background-color: #373737;
-    background-repeat: no-repeat;
-    background-position: center;
-    transition: all 0.15s ease-in-out;
-    &.ico01 {
-      background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
-      background-size: 19px 18px;
-    }
-    &.ico02 {
-      background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
-      background-size: 15px 20px;
-    }
-    &.ico03 {
-      background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
-      background-size: 19px 16px;
-    }
-    &:hover {
-      border-color: #1083e3;
-      background-color: #1083e3;
-    }
-  }
-}
-
-.plane-detail-wrap {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.plane-shape-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  .plane-box {
-    width: 100%;
-    padding: 10px 18px;
-    border-radius: 2px;
-    background-color: #313131;
-    border: 1px solid #484848;
-    .plane-box-tit {
-      font-size: $pop-normal-size;
-      font-weight: 600;
-      color: $pop-color;
-      margin-bottom: 10px;
-    }
-    &.shape-box {
-      .shape-box-inner {
-        display: flex;
-        gap: 15px;
-        min-height: 140px;
-        .shape-img {
-          position: relative;
-          flex: none;
-          width: 150px;
-          background-color: #fff;
-          border-radius: 2px;
-          img {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-          }
-        }
-        .shape-data {
-          flex: 1;
-          .eaves-keraba-table {
-            .eaves-keraba-item {
-              .eaves-keraba-th,
-              .eaves-keraba-td {
-                padding-bottom: 10px;
-              }
-              &:last-child {
-                .eaves-keraba-th,
-                .eaves-keraba-td {
-                  padding-bottom: 0px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    &.direction-box {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      .plane-direction-box {
-        flex: 1;
+.roof-shape-menu{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 24px 10px;
+    margin-bottom: 24px;
+    .shape-box{
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
-      }
+        padding: 13px;
+        background-color: #3D3D3D;
+        transition: background .15s ease-in-out;
+        img{
+            max-width: 100%;
+        }
     }
-  }
-}
-.plane-direction {
-  width: 150px;
-  position: relative;
-  height: 120px;
-  span {
-    position: absolute;
-    font-size: 12px;
-    font-weight: 500;
-    color: #b1b1b1;
-    &.top {
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
+    .shape-title{
+        font-size: $pop-normal-size;
+        font-weight: $pop-bold-weight;
+        color: $pop-color;
+        margin-top: 10px;
+        text-align: center;
+        transition: color .15s ease-in-out;
     }
-    &.right {
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
+    .shape-menu-box{
+        &.act,
+        &:hover{
+            .shape-box{background-color: #008BFF;}
+            .shape-title{color: #008BFF;}
+        }
     }
-    &.bottom {
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    &.left {
-      top: 50%;
-      left: 0;
-      transform: translateY(-50%);
-    }
-  }
-  .plane-btn {
-    position: absolute;
-    width: 28px;
-    height: 28px;
-    background-color: #777777;
-    background-image: url(../../public/static/images/canvas/plane_arr.svg);
-    background-size: 12px 13px;
-    background-repeat: no-repeat;
-    background-position: center;
-    border-radius: 50%;
-    transition: all 0.15s ease-in-out;
-    &.up {
-      top: 22px;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    &.right {
-      top: 50%;
-      right: 32px;
-      transform: translateY(-50%) rotate(90deg);
-    }
-    &.down {
-      bottom: 22px;
-      left: 50%;
-      transform: translateX(-50%) rotate(180deg);
-    }
-    &.left {
-      top: 50%;
-      left: 32px;
-      transform: translateY(-50%) rotate(270deg);
-    }
-    &:hover,
-    &.act {
-      background-color: #fff;
-      background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
-    }
-  }
 }
 
-.plane-tab-guide {
-  font-size: $pop-normal-size;
-  font-weight: $pop-normal-weight;
-  color: $pop-color;
-  margin-top: 10px;
+.setting-box{
+    padding: 14px 0;
+    border-top: 1px solid #424242;
+    border-bottom: 1px solid #424242;
 }
-.plane-shape-btn {
-  padding-top: 10px;
-  margin-top: auto;
-  button {
-    display: block;
-    width: 100%;
-  }
+.padding-form{
+    padding-left: 23px;
+}
+.discrimination-box{
+    padding: 16px 12px;
+    border: 1px solid #3D3D3D;
+    border-radius: 2px;
 }
 
-// 오브젝트 배치
-.mb-box {
-  margin-bottom: 24px;
+.modal-bottom-border-bx{
+    margin-top: 24px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid #424242;
 }
 
-.object-direction-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.discrimination-tit {
-  font-size: 13px;
-  color: #fff;
-  font-weight: 500;
-}
-
-.object-size-wrap {
-  display: flex;
-  min-height: 206px;
-  gap: 24px;
-  margin-top: 14px;
-  .object-size-img {
-    position: relative;
-    flex: none;
-    width: 200px;
-    background-color: #fff;
-    img {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+// 처마∙케라바 변경
+.eaves-keraba-table{
+    display: table;
+    border-collapse: collapse;
+    .eaves-keraba-item{
+        display: table-row;
+        .eaves-keraba-th,
+        .eaves-keraba-td{
+            font-size: $pop-normal-size;
+            color: $pop-color;
+            font-weight: $pop-normal-weight;
+            display: table-cell;
+            vertical-align: middle;
+            padding-bottom: 14px;
+        }
+        .eaves-keraba-td{
+            padding-left: 10px;
+        }
+        .eaves-keraba-ico{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 5px;
+            background-color: #3D3D3D;
+            border: 1px solid #3D3D3D;
+            border-radius: 2px;
+            cursor: pointer;
+            &.act{
+                border: 1px solid #ED0004;
+            }
+        }
+        &:last-child{
+            .eaves-keraba-th,
+            .eaves-keraba-td{
+                padding-bottom: 0;
+            }
+        }
+    }
+}
+.guide{
+    font-size: $pop-normal-size;
+    font-weight: $pop-normal-weight;
+    color: $pop-color;
+    margin-bottom: 24px;
+    &.sm{
+        margin-bottom: 15px;
+    }
+    span{
+        display: block;
     }
-  }
 }
 
-// 표시변경
-.display-change-wrap {
-  margin: 24px 0;
-}
-.warning {
-  font-size: $pop-normal-size;
-  font-weight: $pop-normal-weight;
-  color: #ffafaf;
+// 지붕면 할당
+.allocation-select-wrap{
+    display: flex;
+    align-items: center;
+    padding-bottom: 14px;
+    border-bottom: 1px solid #424242;
+    margin-bottom: 14px;
+    span{
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-bold-weight;
+        margin-right: 10px;
+    }
+    .allocation-edit{
+        display: flex;
+        align-items: center;
+        height: 30px;
+        padding: 0 10px;
+        margin-left: 5px;
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-normal-weight;
+        border: 1px solid #484848;
+        background-color: #323234;
+        i{
+            display: block;
+            width: 12px;
+            height: 12px;
+            margin-right: 5px;
+            background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center;
+            background-size: cover;
+        }
+    }
 }
 
-// 각 변 속성 변경
-.radio-grid-wrap {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px 15px;
+.block-box{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+    .flex-ment{
+        gap: 10px;
+        .dec{
+            text-decoration: underline;
+        }
+        .delete{
+            display: block;
+            width: 15px;
+            height: 15px;
+            background: url(../../public/static/images/canvas/allocation_delete.svg)no-repeat center;
+            background-size: cover;
+        }
+    }
+    &:last-child{
+        margin-bottom: 0;
+    }
 }
 
-// 면 흐름 설정
-.drawing-flow-wrap {
-  display: flex;
-  gap: 10px;
-  .discrimination-box {
+.icon-btn-wrap{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    button{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 30px;
+        font-size: $pop-normal-size;
+        font-weight: $pop-normal-weight;
+        color: $pop-color;
+        border: 1px solid #646464;
+        border-radius: 2px;
+        padding: 0 10px;
+        transition: all .15s ease-in-out;
+        i{
+            height: 15px;
+            display: block;
+            margin-left: 10px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+            transition: all .15s ease-in-out;
+            &.allocation01{
+                background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
+                width: 15px;
+            }
+            &.allocation02{
+                background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
+                width: 18px;
+            }
+        }
+        &.act,
+        &:hover{
+            color: #101010;
+            border: 1px solid #101010;
+            background-color: #fff;
+            i{
+                &.allocation01{
+                    background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
+                }
+                &.allocation02{
+                    background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
+                }
+            }
+        }
+    }
+}
+
+// 경사설정
+.slope-wrap{
+    padding-bottom: 24px;
+    border-bottom: 1px solid #424242;
+}
+
+// 면형상 배치
+.plane-frame-wrap{
+    display: flex;
+    gap: 10px;
+    .plane-shape-wrap{
+        flex: none;
+        width: 73px;
+    }
+}
+
+.plane-shape-menu{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 5px;
+    .shape-menu-box{
+        border-radius: 2px;
+        width: 34px;
+        height: 34px;
+        background-color: #373737;
+        border: 1px solid #676767;
+        transition: background .15s ease-in-out, border .15s ease-in-out;
+        .shape-box{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            width: 100%;
+            height: 100%;
+            border-radius: 2px;
+        }
+        &.act,
+        &:hover{
+            border-color: #008BFF;
+            background-color: #008BFF;
+        }
+    }
+}
+
+.shape-library{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    padding-top: 5px;
+    .library-btn{
+        width: 100%;
+        height: 34px;
+        border: 1px solid #6C6C6C;
+        border-radius: 2px;
+        background-color: #373737;
+        background-repeat: no-repeat;
+        background-position: center;
+        transition: all .15s ease-in-out;
+        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
+        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
+        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
+        &:hover{
+            border-color: #1083E3;
+            background-color: #1083E3;
+        }
+    }
+}
+
+.plane-detail-wrap{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+.plane-shape-wrapper{
     flex: 1;
     display: flex;
     flex-direction: column;
-    .object-direction-wrap {
-      flex: 1;
+    gap: 10px;
+    .plane-box{
+        width: 100%;
+        padding: 10px 18px;
+        border-radius: 2px;
+        background-color: #313131;
+        border: 1px solid #484848;
+        .plane-box-tit{
+            font-size: $pop-normal-size;
+            font-weight: 600;
+            color: $pop-color;
+            margin-bottom: 10px;
+        }
+        &.shape-box{
+            .shape-box-inner{
+                display: flex;
+                gap:15px;
+                min-height: 140px;
+                .shape-img{
+                    position: relative;
+                    flex: none;
+                    width: 150px;
+                    background-color: #fff;
+                    border-radius: 2px;
+                    img{
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                    }
+                }
+                .shape-data{
+                    flex: 1;
+                    .eaves-keraba-table{
+                        .eaves-keraba-item{
+                            .eaves-keraba-th,
+                            .eaves-keraba-td{
+                                padding-bottom: 10px;
+                            }
+                            &:last-child{
+                                .eaves-keraba-th,
+                                .eaves-keraba-td{
+                                    padding-bottom: 0px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &.direction-box{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            .plane-direction-box{
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+            }
+        }
     }
-    &:first-child {
-      flex: none;
-      width: 195px;
+}
+.plane-direction{
+    width: 150px;
+    position: relative;
+    height: 120px;
+    span{
+        position: absolute;
+        font-size: 12px;
+        font-weight: 500;
+        color: #B1B1B1;
+        &.top{top: 0; left: 50%; transform: translateX(-50%);}
+        &.right{top: 50%; right: 0; transform: translateY(-50%);}
+        &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
+        &.left{top: 50%; left: 0; transform: translateY(-50%);}
+    }
+    .plane-btn{
+        position: absolute;
+        width: 28px;
+        height: 28px;
+        background-color: #777777;
+        background-image: url(../../public/static/images/canvas/plane_arr.svg);
+        background-size: 12px 13px;
+        background-repeat: no-repeat;
+        background-position: center;
+        border-radius: 50%;
+        transition: all .15s ease-in-out;
+        &.up{top: 22px; left: 50%; transform: translateX(-50%);}
+        &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
+        &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
+        &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
+        &:hover,
+        &.act{
+            background-color: #fff;
+            background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
+        }
     }
-  }
 }
 
-.compas-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.plane-tab-guide{
+    font-size: $pop-normal-size;
+    font-weight: $pop-normal-weight;
+    color: $pop-color;
+    margin-top: 10px;
+}
+.plane-shape-btn{
+    padding-top: 10px;
+    margin-top: auto;
+    button{
+        display: block;
+        width: 100%;
+    }
+}
+
+// 오브젝트 배치
+.mb-box{
+    margin-bottom: 24px;
+}
+
+.object-direction-wrap{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.discrimination-tit{
+    font-size: 13px;
+    color: #fff;
+    font-weight: 500;
+}
+
+.object-size-wrap{
+    display: flex;
+    min-height: 206px;
+    gap: 24px;
+    margin-top: 14px;
+    .object-size-img{
+        position: relative;
+        flex: none;
+        width: 200px;
+        background-color: #fff;
+        img{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+}
+
+// 표시변경
+.display-change-wrap{
+    margin: 24px 0;
+}
+.warning{
+    font-size: $pop-normal-size;
+    font-weight: $pop-normal-weight;
+    color: #FFAFAF;
+}
+
+// 각 변 속성 변경
+.radio-grid-wrap{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px 15px;
+}
+
+// 면 흐름 설정
+.drawing-flow-wrap{
+    display: flex;
+    gap: 10px;
+    .discrimination-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .object-direction-wrap{
+            flex: 1;
+        }
+        &:first-child{
+            flex: none;
+            width: 195px;
+        }
+    }
+}
+
+.compas-box{
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 .compas-box-inner {
-  position: relative;
-  width: 200px;
-  height: 200px;
-  border-radius: 50%;
-
-  .circle {
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    border: 1px solid #fff;
+    position: relative;
+    width: 200px;
+    height: 200px;
     border-radius: 50%;
-    top: 95%;
-    left: 50%;
-    transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
-    cursor: pointer;
-    z-index: 3;
-    /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
-    i {
-      position: absolute;
-      top: 12.5px;
-      left: 50%;
-      font-size: 11px;
-      color: #8b8b8b;
-      font-weight: 500;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-use-select: none;
-      user-select: none;
+    
+    .circle {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        top: 95%;
+        left: 50%;
+        transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
+        cursor:pointer;
+        z-index: 3;
+        /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
+        i{
+            position: absolute;
+            top: 12.5px;
+            left: 50%;
+            font-size: 11px;
+            color: #8B8B8B;
+            font-weight: 500;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-use-select: none;
+            user-select: none;
+        }
+        &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
+        &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
+        &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
+        &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
+        &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
+        &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
+        &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
+        &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
+        &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
+        &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
+        &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
+        &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
+        &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
+        &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
+        &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
+        &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
+        &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
+        &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
+        &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
+        &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
+        &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
+        &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
+        &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
+        &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
+        &.act{
+            &::after{
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 5px;
+                height: 5px;
+                background-color: #fff;
+                border-radius: 50%;
+            }
+            i{
+                color: #fff;
+            }
+        }
     }
-    &:nth-child(1) {
-      transform: rotate(180deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(180deg);
-      }
-    }
-    &:nth-child(2) {
-      transform: rotate(195deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(165deg);
-      }
-    }
-    &:nth-child(3) {
-      transform: rotate(210deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(150deg);
-      }
-    }
-    &:nth-child(4) {
-      transform: rotate(225deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(135deg);
-      }
-    }
-    &:nth-child(5) {
-      transform: rotate(240deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(120deg);
-      }
-    }
-    &:nth-child(6) {
-      transform: rotate(255deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(105deg);
-      }
-    }
-    &:nth-child(7) {
-      transform: rotate(270deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(90deg);
-      }
-    }
-    &:nth-child(8) {
-      transform: rotate(285deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(75deg);
-      }
-    }
-    &:nth-child(9) {
-      transform: rotate(300deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(60deg);
-      }
-    }
-    &:nth-child(10) {
-      transform: rotate(315deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(45deg);
-      }
-    }
-    &:nth-child(11) {
-      transform: rotate(330deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(30deg);
-      }
-    }
-    &:nth-child(12) {
-      transform: rotate(345deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(15deg);
-      }
-    }
-    &:nth-child(13) {
-      transform: rotate(0deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(0deg);
-      }
-    }
-    &:nth-child(14) {
-      transform: rotate(15deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-15deg);
-      }
-    }
-    &:nth-child(15) {
-      transform: rotate(30deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-30deg);
-      }
-    }
-    &:nth-child(16) {
-      transform: rotate(45deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-45deg);
-      }
-    }
-    &:nth-child(17) {
-      transform: rotate(60deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-60deg);
-      }
-    }
-    &:nth-child(18) {
-      transform: rotate(75deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-75deg);
-      }
-    }
-    &:nth-child(19) {
-      transform: rotate(90deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-90deg);
-      }
-    }
-    &:nth-child(20) {
-      transform: rotate(105deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-105deg);
-      }
-    }
-    &:nth-child(21) {
-      transform: rotate(120deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-120deg);
-      }
-    }
-    &:nth-child(22) {
-      transform: rotate(135deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-135deg);
-      }
-    }
-    &:nth-child(23) {
-      transform: rotate(150deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-150deg);
-      }
-    }
-    &:nth-child(24) {
-      transform: rotate(165deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-165deg);
-      }
-    }
-    &.act {
-      &::after {
-        content: '';
+    .compas{
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 5px;
-        height: 5px;
-        background-color: #fff;
+        width: 148px;
+        height: 148px;
+        border: 4px solid #fff;
         border-radius: 50%;
-      }
-      i {
-        color: #fff;
-      }
+        .compas-arr{
+            width: 100%;
+            height: 100%;
+            background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
+            background-size: 122px 122px;
+        }
     }
-  }
-  .compas {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 148px;
-    height: 148px;
-    border: 4px solid #fff;
-    border-radius: 50%;
-    .compas-arr {
-      width: 100%;
-      height: 100%;
-      background: url(../../public/static/images/canvas/compas.svg) no-repeat center;
-      background-size: 122px 122px;
-    }
-  }
 }
 
-.draw-flow-wrap {
-  margin: 10px 0;
+.draw-flow-wrap{
+    margin: 10px 0;
 }
 
 // 지붕모듈선택
-.roof-module-tab {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 14px;
-  .module-tab-bx {
-    flex: 1;
-    height: 34px;
-    line-height: 31px;
-    border: 1px solid #484848;
-    border-radius: 2px;
-    background-color: transparent;
-    font-size: 12px;
-    color: #aaa;
-    text-align: center;
-    cursor: default;
-    transition: all 0.15s ease-in-out;
-    &.act {
-      background-color: #1083e3;
-      border: 1px solid #1083e3;
-      color: #fff;
-      font-weight: 500;
-    }
-  }
-  .tab-arr {
-    display: block;
-    width: 9px;
-    height: 14px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
-    transition: all 0.15s ease-in-out;
-    &.act {
-      background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
-    }
-  }
-}
-
-.roof-module-compas {
-  margin-bottom: 24px;
-  .compas-box-inner {
-    width: 280px;
-    height: 253px;
-    .circle {
-      top: 86%;
-      // &:nth-child(1),
-      // &:nth-child(7),
-      // &:nth-child(13),
-      // &:nth-child(19){
-      //     &::before{
-      //         content: '';
-      //         position: absolute;
-      //         top: 20px;
-      //         left: 50%;
-      //         transform: translateX(-50%);
-      //         width: 1px;
-      //         height: 6px;
-      //         background-color: #8B8B8B;
-      //     }
-      // }
-      i {
-        top: 22px;
-      }
-      &.act {
-        i {
-          color: #8b8b8b;
+.roof-module-tab{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 14px;
+    .module-tab-bx{
+        flex: 1;
+        height: 34px;
+        line-height: 31px;
+        border: 1px solid #484848;
+        border-radius: 2px;
+        background-color: transparent;
+        font-size: 12px;
+        color: #AAA;
+        text-align: center;
+        cursor: default;
+        transition: all .15s ease-in-out;
+        &.act{
+            background-color: #1083E3;
+            border: 1px solid #1083E3;
+            color: #fff;
+            font-weight: 500;
+        }
+    }
+    .tab-arr{
+        display: block;
+        width: 9px;
+        height: 14px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
+        transition: all .15s ease-in-out;
+        &.act{
+            background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
         }
-      }
     }
-  }
-}
-.center-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
 }
 
-.module-table-flex-wrap {
-  display: flex;
-  gap: 10px;
-  .outline-form {
+.roof-module-compas{
+    margin-bottom: 24px;
+    .compas-box-inner{
+        width: 280px;
+        height: 253px;
+        .circle{
+            top: 86%;
+            // &:nth-child(1),
+            // &:nth-child(7),
+            // &:nth-child(13),
+            // &:nth-child(19){
+            //     &::before{
+            //         content: '';
+            //         position: absolute;
+            //         top: 20px;
+            //         left: 50%;
+            //         transform: translateX(-50%);
+            //         width: 1px;
+            //         height: 6px;
+            //         background-color: #8B8B8B;
+            //     }
+            // }
+            i{
+                top: 22px;
+            }
+            &.act{
+                i{color: #8B8B8B;}
+            }
+        }
+    }
+}
+.center-wrap{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.module-table-flex-wrap{
+    display: flex;
+    gap: 10px;
+    .outline-form{
+        flex: 1;
+    }
+}
+
+.module-box-tab{
+    display: flex;
+    .module-btn{
+        flex: 1;
+        border-top: 1px solid #505050;
+        border-bottom: 1px solid #505050;
+        border-right: 1px solid #505050;
+        background-color: #454545;
+        color: #fff;
+        height: 30px;
+        font-size: 12px;
+        font-weight: 400;
+        transition: all .15s ease-in-out;
+        &:first-child{
+            border-left: 1px solid #505050;
+        }
+        &.act{
+            border-color: #fff;
+            background-color: #fff;
+            color: #101010;
+        }
+    }
+}
+
+.module-table-box{
     flex: 1;
-  }
+    background-color: #3D3D3D;
+    border-radius: 2px;
+    .module-table-inner{
+        padding: 10px;
+        .outline-form{
+            span{
+                width: auto;
+            }
+        }
+        .module-table-tit{
+            padding: 10px 0;
+            font-size: 12px;
+            color: #fff;
+            border-bottom: 1px solid #4D4D4D;
+        }
+        .eaves-keraba-table{
+            width: 100%;
+            margin-top: 15px;
+            .eaves-keraba-th{
+                width: 72px;
+            }
+            .eaves-keraba-th,
+            .eaves-keraba-td{
+                padding-bottom: 5px;
+            }
+        }
+        .self-table-tit{
+            font-size: 12px;
+            font-weight: 500;
+            color: #fff;
+            padding-bottom: 15px;
+        }
+    }
+    .warning-guide{
+        padding: 20px;
+        .warning{
+            color: #FFCACA;
+            max-height: 55px;
+            overflow-y: auto;
+            padding-right: 30px;
+            &::-webkit-scrollbar {
+                width: 4px;
+                background-color: transparent;
+            }
+            &::-webkit-scrollbar-thumb {
+                background-color: #D9D9D9;
+            }
+            &::-webkit-scrollbar-track {
+                background-color: transparent;
+            }
+        }
+    }
 }
 
-.module-box-tab {
-  display: flex;
-  .module-btn {
-    flex: 1;
-    border-top: 1px solid #505050;
-    border-bottom: 1px solid #505050;
-    border-right: 1px solid #505050;
-    background-color: #454545;
-    color: #fff;
-    height: 30px;
-    font-size: 12px;
-    font-weight: 400;
-    transition: all 0.15s ease-in-out;
-    &:first-child {
-      border-left: 1px solid #505050;
+.module-self-table{
+    display: table;
+    border-top: 1px solid #4D4D4D;
+    border-collapse: collapse;
+    width: 100%;
+    .self-table-item{
+        display: table-row;
+        .self-item-td,
+        .self-item-th{
+            display: table-cell;
+            vertical-align: middle;
+            border-bottom: 1px solid #4D4D4D;
+        }
+        .self-item-th{
+            width: 60px;
+            font-size: 12px;
+            font-weight: 500;
+            color: #fff;
+        }
+        .self-item-td{
+            font-size: 12px;
+            font-weight: 400;
+            color: #fff;
+            padding: 15px 20px;
+        }
     }
-    &.act {
-      border-color: #fff;
-      background-color: #fff;
-      color: #101010;
-    }
-  }
 }
 
-.module-table-box {
-  flex: 1;
-  background-color: #3d3d3d;
-  border-radius: 2px;
-  .module-table-inner {
-    padding: 10px;
-    .outline-form {
-      span {
-        width: auto;
-      }
-    }
-    .module-table-tit {
-      padding: 10px 0;
-      font-size: 12px;
-      color: #fff;
-      border-bottom: 1px solid #4d4d4d;
-    }
-    .eaves-keraba-table {
-      width: 100%;
-      margin-top: 15px;
-      .eaves-keraba-th {
-        width: 72px;
-      }
-      .eaves-keraba-th,
-      .eaves-keraba-td {
-        padding-bottom: 5px;
-      }
-    }
-    .self-table-tit {
-      font-size: 12px;
-      font-weight: 500;
-      color: #fff;
-      padding-bottom: 15px;
-    }
-  }
-  .warning-guide {
-    padding: 20px;
-    .warning {
-      color: #ffcaca;
-      max-height: 55px;
-      overflow-y: auto;
-      padding-right: 30px;
-      &::-webkit-scrollbar {
-        width: 4px;
-        background-color: transparent;
-      }
-      &::-webkit-scrollbar-thumb {
-        background-color: #d9d9d9;
-      }
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
-    }
-  }
-}
-
-.module-self-table {
-  display: table;
-  border-top: 1px solid #4d4d4d;
-  border-collapse: collapse;
-  width: 100%;
-  .self-table-item {
-    display: table-row;
-    .self-item-td,
-    .self-item-th {
-      display: table-cell;
-      vertical-align: middle;
-      border-bottom: 1px solid #4d4d4d;
-    }
-    .self-item-th {
-      width: 60px;
-      font-size: 12px;
-      font-weight: 500;
-      color: #fff;
-    }
-    .self-item-td {
-      font-size: 12px;
-      font-weight: 400;
-      color: #fff;
-      padding: 15px 20px;
-    }
-  }
-}
-
-.self-table-flx {
-  display: flex;
-  align-items: center;
-  margin-top: 15px;
-  button {
-    margin-left: auto;
-  }
-}
-.hexagonal-wrap {
-  .hexagonal-item {
-    padding: 15px 0;
-    border-bottom: 1px solid #4d4d4d;
-    &:first-child {
-      padding-top: 0;
-    }
-    &:last-child {
-      padding-bottom: 0;
-      border: none;
-    }
-    .hexagonal-flx-auto {
-      display: flex;
-      justify-content: space-between;
-    }
-    .hexagonal-flx {
-      display: flex;
-      align-items: center;
-      button {
+.self-table-flx{
+    display: flex;
+    align-items: center;
+    margin-top: 15px;
+    button{
         margin-left: auto;
-      }
     }
-  }
+}
+.hexagonal-wrap{
+    .hexagonal-item{
+        padding: 15px 0;
+        border-bottom: 1px solid #4D4D4D;
+        &:first-child{
+            padding-top: 0;
+        }
+        &:last-child{
+            padding-bottom: 0;
+            border: none;
+        }
+        .hexagonal-flx-auto{
+            display: flex;
+            justify-content: space-between;
+        }
+        .hexagonal-flx{
+            display: flex;
+            align-items: center;
+            button{
+                margin-left: auto;
+            }
+        }
+    }
 }
 
 // 회로 및 가대설정
-.circuit-check-inner {
-  padding: 5px 0;
-  &.overflow {
-    overflow-y: auto;
-    max-height: 100px;
-    min-height: 60px;
+.circuit-check-inner{
+    padding: 5px 0;
+    &.overflow{
+        overflow-y: auto;
+        max-height: 100px;
+        min-height: 60px;
+        &::-webkit-scrollbar {
+            width: 4px;
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: #D9D9D9;
+        }
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+    }
+    .d-check-box{
+        margin-bottom: 15px;
+        &:last-child{
+            margin-bottom: 0;
+        }
+    }
+}
+
+.x-scroll-table{
+    overflow: auto;
+    padding-bottom: 5px;
+    background-color: transparent;
+    max-height: 170px;
+    .roof-module-table{
+        min-width: 1200px;
+    }
     &::-webkit-scrollbar {
-      width: 4px;
-      background-color: transparent;
+        width: 4px;
+        height: 4px;
+        background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-      background-color: #d9d9d9;
+        background-color: #b4b4b4;
     }
     &::-webkit-scrollbar-track {
-      background-color: transparent;
+        background-color: transparent;
     }
-  }
-  .d-check-box {
-    margin-bottom: 15px;
-    &:last-child {
-      margin-bottom: 0;
+    &::-webkit-scrollbar-corner{
+        background-color: transparent;
     }
-  }
 }
 
-.x-scroll-table {
-  overflow: auto;
-  padding-bottom: 5px;
-  background-color: transparent;
-  max-height: 170px;
-  .roof-module-table {
-    min-width: 1200px;
-  }
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-    background-color: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #b4b4b4;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-  &::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-}
-
-.circuit-right-wrap {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.circuit-data-form {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  min-height: 60px;
-  padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  span {
-    display: inline-flex;
-    align-items: center;
-    .del {
-      display: block;
-      margin-left: 10px;
-      width: 15px;
-      height: 15px;
-      background: url(../../public/static/images/canvas/circuit_del.svg) no-repeat center;
-      background-size: cover;
-    }
-  }
-}
-.circuit-table-tit {
-  color: #fff;
-  font-size: 12px;
-  font-weight: 600;
-  padding: 11px 10px;
-  background-color: #474747;
-  border: 1px solid #505050;
-  border-bottom: none;
-}
-
-.circuit-overflow {
-  overflow-x: auto;
-  margin-bottom: 25px;
-  &::-webkit-scrollbar {
-    height: 4px;
-    background-color: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-  .module-table-box {
+.circuit-right-wrap{
     display: flex;
-    &.by-max {
-      min-width: 886px;
-    }
-  }
+    justify-content: flex-end;
 }
 
-.circuit-table-flx-wrap {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 10px;
-  .circuit-table-flx-box {
-    flex: 1;
+.circuit-data-form{
     display: flex;
     flex-direction: column;
-    .bottom-wrap {
-      margin-top: auto;
+    gap: 5px;
+    min-height: 60px;
+    padding: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    span{
+        display: inline-flex;
+        align-items: center;
+        .del{
+            display: block;
+            margin-left: 10px;
+            width: 15px;
+            height: 15px;
+            background: url(../../public/static/images/canvas/circuit_del.svg)no-repeat center;
+            background-size: cover;
+        }
     }
-    .roof-module-table {
-      table {
-        table-layout: fixed;
-      }
-    }
-  }
+}
+.circuit-table-tit{
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 11px 10px;
+    background-color: #474747;
+    border: 1px solid #505050;
+    border-bottom: none;
 }
 
-.circuit-count-input {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.circuit-overflow{
+    overflow-x: auto;
+    margin-bottom: 25px;
+    &::-webkit-scrollbar {
+        height: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #D9D9D9;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+    .module-table-box{
+        display: flex;
+        &.by-max{
+            min-width: 886px;
+        }
+    }
+}
+
+.circuit-table-flx-wrap{
+    display: flex;
+    gap: 10px;
+    margin-bottom: 10px;
+    .circuit-table-flx-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .bottom-wrap{
+            margin-top: auto;
+        }
+        .roof-module-table{
+            table{
+                table-layout: fixed;
+            }
+        }
+    }
+}
+
+.circuit-count-input{
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
 // 모듈부가기능
-.additional-radio-wrap {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 15px 0;
-  margin-bottom: 24px;
+.additional-radio-wrap{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px 0;
+    margin-bottom: 24px;
 }
-.additional-wrap {
-  padding: 24px 0;
-  border-top: 1px solid #424242;
+.additional-wrap{
+    padding: 24px 0;
+    border-top: 1px solid #424242;
 }
 
-.additional-color-wrap {
-  display: flex;
-  align-items: center;
-  padding: 5px 0;
-  gap: 15px;
-  .additional-color-box {
+.additional-color-wrap{
     display: flex;
     align-items: center;
-    gap: 8px;
-    .additional-color {
-      display: block;
-      width: 16px;
-      height: 16px;
-      &.pink {
-        border: 2px solid #ce1c9c;
-        background-color: #16417d;
-      }
-      &.white {
-        border: 2px solid #fff;
-        background-color: #001027;
-      }
+    padding: 5px 0;
+    gap: 15px;
+    .additional-color-box{
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        .additional-color{
+            display: block;
+            width: 16px;
+            height: 16px;
+            &.pink{
+                border: 2px solid #ce1c9c;
+                background-color: #16417D;
+            }
+            &.white{
+                border: 2px solid #FFF;
+                background-color: #001027;
+            }
+        }
     }
-  }
 }
 
 // color setting
-.color-setting-wrap {
-  padding-bottom: 15px;
-  border-bottom: 1px solid #424242;
-  .color-tit {
-    font-size: 13px;
-    font-weight: 500;
-    color: #ffffff;
-    margin-bottom: 10px;
-  }
-  .color-picker {
-    .react-colorful {
-      width: 100%;
-      height: auto;
-      gap: 20px;
-      .react-colorful__pointer {
-        width: 15px;
-        height: 15px;
-        border: 4px solid #fff;
-      }
-      .react-colorful__saturation {
-        border-radius: 2px;
-        height: 200px;
-        border-bottom: 5px solid #000;
-      }
-      .react-colorful__last-control {
-        border-radius: 2px;
-        height: 10px;
-      }
-    }
-    .hex-color-box {
-      display: flex;
-      align-items: center;
-      margin-top: 15px;
-      .color-box-tit {
-        font-size: 12px;
-        color: #fff;
+.color-setting-wrap{
+    padding-bottom: 15px;
+    border-bottom: 1px solid #424242;
+    .color-tit{
+        font-size: 13px;
         font-weight: 500;
-        margin-right: 10px;
-      }
-      .color-hex-input {
-        width: 150px;
-        margin-right: 5px;
-        input {
-          width: 100%;
-        }
-      }
-      .color-box {
-        display: block;
-        width: 30px;
-        height: 30px;
-        border-radius: 4px;
-      }
+        color: #ffffff;
+        margin-bottom: 10px;
     }
-    .default-color-wrap {
-      margin-top: 25px;
-      .default-tit {
+    .color-picker{
+        .react-colorful{
+            width: 100%;
+            height: auto;
+            gap: 20px;
+            .react-colorful__pointer{
+                width: 15px;
+                height: 15px;
+                border: 4px solid #Fff;
+            }
+            .react-colorful__saturation{
+                border-radius: 2px;
+                height: 200px;
+                border-bottom: 5px solid #000;
+            }
+            .react-colorful__last-control{
+                border-radius: 2px;
+                height: 10px;
+            }
+        }
+        .hex-color-box{
+            display: flex;
+            align-items: center;
+            margin-top: 15px;
+            .color-box-tit{
+                font-size: 12px;
+                color: #fff;
+                font-weight: 500;
+                margin-right: 10px;
+            }
+            .color-hex-input{
+                width: 150px;
+                margin-right: 5px;
+                input{
+                    width: 100%;
+                }
+            }
+            .color-box{
+                display: block;
+                width: 30px;
+                height: 30px;
+                border-radius: 4px;
+            }
+        }
+        .default-color-wrap{
+            margin-top: 25px;
+            .default-tit{
+                font-size: 12px;
+                font-weight: 500;
+                color: #fff;
+                margin-bottom: 10px;
+            }
+            .color-button-wrap{
+                display: grid;
+                grid-template-columns: repeat(8, 1fr);
+                gap: 21px;
+                .default-color{
+                    display: block;
+                    width: 100%;
+                    height: 30px;
+                    border-radius: 4px;
+                }
+            }
+        }
+    }
+}
+
+// 글꼴 설정 팝업
+.font-option-warp{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px 5px;
+    margin-bottom: 15px;
+    .font-option-item{
+        .option-item-tit{
+            font-size: 12px;
+            font-weight: 500;
+            color: #fff;
+            margin-bottom: 10px;
+        }
+    }
+}
+.font-ex-wrap{
+    margin-bottom: 15px;
+    .font-ex-tit{
         font-size: 12px;
         font-weight: 500;
         color: #fff;
         margin-bottom: 10px;
-      }
-      .color-button-wrap {
-        display: grid;
-        grid-template-columns: repeat(8, 1fr);
-        gap: 21px;
-        .default-color {
-          display: block;
-          width: 100%;
-          height: 30px;
-          border-radius: 4px;
-        }
-      }
     }
-  }
-}
-
-// 글꼴 설정 팝업
-.font-option-warp {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 15px 5px;
-  margin-bottom: 15px;
-  .font-option-item {
-    .option-item-tit {
-      font-size: 12px;
-      font-weight: 500;
-      color: #fff;
-      margin-bottom: 10px;
+    .font-ex-box{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-height: 80px;
+        background-color: #fff;
     }
-  }
-}
-.font-ex-wrap {
-  margin-bottom: 15px;
-  .font-ex-tit {
-    font-size: 12px;
-    font-weight: 500;
-    color: #fff;
-    margin-bottom: 10px;
-  }
-  .font-ex-box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    min-height: 80px;
-    background-color: #fff;
-  }
+    
 }
 
 // 치수선 설정
-.font-btn-wrap {
-  margin-bottom: 15px;
-  button {
-    width: 100%;
-    height: 30px;
-    line-height: 28px;
-  }
-}
-
-.line-color-wrap {
-  margin-bottom: 15px;
-  .color-btn {
-    display: block;
-    width: 100%;
-    height: 30px;
-    border-radius: 2px;
-  }
-}
-
-.form-box {
-  width: 100%;
-  background-color: #fff;
-  padding: 10px 15px 20px;
-  .line-form {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    min-width: 102px;
-    min-height: 40px;
-    margin: 0 auto;
-
-    &::before {
-      content: '';
-      position: absolute;
-      bottom: 0px;
-      left: 0;
-      width: 100%;
-      height: 40px;
-      border-left: 1px dashed #101010;
-      border-right: 1px dashed #101010;
+.font-btn-wrap{
+    margin-bottom: 15px;
+    button{
+        width: 100%;
+        height: 30px;
+        line-height: 28px;
     }
-    .line-font-box {
-      .font {
-        display: block;
-        padding-bottom: 15px;
-        color: #101010;
-        text-align: center;
-        line-height: 1;
-      }
-      .line {
-        position: relative;
+}
+
+.line-color-wrap{
+    margin-bottom: 15px;
+    .color-btn{
         display: block;
         width: 100%;
-        height: 1px;
-        border-radius: 30px;
-        &::before {
-          content: '';
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%) rotate(45deg);
-          left: 1px;
-          width: 9px;
-          height: +9px;
-          border: 1px solid;
-          border-color: inherit;
-          border-top: none;
-          border-right: none;
-        }
-        &::after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%) rotate(45deg);
-          right: 1px;
-          width: 9px;
-          height: 9px;
-          border: 1px solid;
-          border-color: inherit;
-          border-bottom: none;
-          border-left: none;
-        }
-      }
+        height: 30px;
+        border-radius: 2px;
+    }
+}
+
+.form-box{
+    width: 100%;
+    background-color: #fff;
+    padding: 10px 15px 20px;
+    .line-form{
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        min-width: 102px;
+        min-height: 40px;
+        margin: 0 auto;
+
+        &::before{
+            content: '';
+            position: absolute;
+            bottom: 0px;
+            left: 0;
+            width: 100%;
+            height: 40px;
+            border-left: 1px dashed #101010;
+            border-right: 1px dashed #101010;
+        }
+        .line-font-box{
+            .font{
+                display: block;
+                padding-bottom: 15px;
+                color: #101010;
+                text-align: center;
+                line-height: 1;
+            }
+            .line{
+                position: relative;
+                display: block;
+                width: 100%;
+                height: 1px;
+                border-radius: 30px;
+                &::before{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%) rotate(45deg);
+                    left: 1px;
+                    width: 9px;
+                    height:+ 9px;
+                    border: 1px solid;
+                    border-color: inherit;
+                    border-top: none;
+                    border-right: none;
+                }
+                &::after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%) rotate(45deg);
+                    right: 1px;
+                    width: 9px;
+                    height: 9px;
+                    border: 1px solid;
+                    border-color: inherit;
+                    border-bottom: none;
+                    border-left: none;
+                }
+            }
+        }
     }
-  }
 }
 
 // 사이즈 변경
-.size-inner-warp {
-  position: relative;
+.size-inner-warp{
+    position: relative;
 }
-.size-check-wrap {
-  position: relative;
-  display: block;
-  width: 132px;
-  height: 132px;
-  margin: 0 auto;
-  .size-btn {
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    border: 1px solid #fff;
-    border-radius: 50%;
-    &.act {
-      &::after {
-        content: '';
+.size-check-wrap{
+    position: relative;
+    display: block;
+    width: 132px;
+    height: 132px;
+    margin: 0 auto;
+    .size-btn{
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        &.act{
+            &::after{
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 8px;
+                height: 8px;
+                background-color: #fff;
+                border-radius: 50%;
+            }
+        }
+        &:nth-child(1){ top: 0; left: 0; }
+        &:nth-child(2){ top: 0; right: 0; }
+        &:nth-child(3){ bottom: 0; left: 0; }
+        &:nth-child(4){ bottom: 0; right: 0; }
+    }
+    .size-box{
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 8px;
-        height: 8px;
+        width: 100px;
+        height: 100px;
         background-color: #fff;
-        border-radius: 50%;
-      }
     }
-    &:nth-child(1) {
-      top: 0;
-      left: 0;
-    }
-    &:nth-child(2) {
-      top: 0;
-      right: 0;
-    }
-    &:nth-child(3) {
-      bottom: 0;
-      left: 0;
-    }
-    &:nth-child(4) {
-      bottom: 0;
-      right: 0;
-    }
-  }
-  .size-box {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100px;
-    height: 100px;
-    background-color: #fff;
-  }
 }
 
-.size-option-top {
-  margin-bottom: 15px;
+.size-option-top{
+    margin-bottom: 15px;
 }
-.size-option-side {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
+.size-option-side{
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
 }
-.size-option-wrap {
-  width: 88px;
-  margin: 0 auto;
-  .size-option {
-    display: flex;
-    align-items: center;
-    input {
-      width: 100%;
-      flex: 1;
+.size-option-wrap{
+    width: 88px;
+    margin: 0 auto;
+    .size-option{
+        display: flex;
+        align-items: center;
+        input{
+            width: 100%;
+            flex: 1;
+        }
+        span{
+            flex: none;
+        }
     }
-    span {
-      flex: none;
-    }
-  }
 }
 
 //이미지 크기 설정
-.range-wrap {
-  display: flex;
-  align-items: center;
-  input {
-    flex: 1;
-    margin-right: 10px;
-  }
-  label {
-    flex: none;
-    text-align: right;
-    width: 38px;
-    font-size: 13px;
-    color: #fff;
-    font-weight: 500;
-  }
+.range-wrap{
+    display: flex;
+    align-items: center;
+    input{
+        flex: 1;
+        margin-right: 10px;
+    }
+    label{
+        flex: none;
+        text-align: right;
+        width: 38px;
+        font-size: 13px;
+        color: #fff;
+        font-weight: 500;
+    }
 }
 
 // 이미지 불러오기
-.img-flex-box {
-  display: flex;
-  align-items: center;
+.img-flex-box{
+    display: flex;
+    align-items: center;
 }
-.img-load-from {
-  margin-top: 20px;
-  .img-load-item {
-    border-top: 1px solid #424242;
-    padding: 18px 0;
-    .d-check-radio {
-      margin-bottom: 20px;
+.img-load-from{
+    margin-top: 20px;
+    .img-load-item{
+        border-top: 1px solid #424242;
+        padding: 18px 0;
+        .d-check-radio{
+            margin-bottom: 20px;
+        }
     }
-  }
-  border-bottom: 1px solid #424242;
+    border-bottom: 1px solid #424242;
 }
 
 // 지붕모듈선택 변경
-.module-table-box {
-  &.none-flex {
-    flex: none;
-    width: 230px;
-    .outline-form {
-      .grid-select {
+.module-table-box{
+    &.none-flex{
         flex: none;
-        width: 95.77px;
-      }
-      .thin {
-        margin-left: auto;
-      }
-    }
-  }
-}
-.roof-module-tab2-overflow {
-  max-height: 500px;
-  overflow-y: auto;
-  padding-bottom: 15px;
-  border-bottom: 1px solid #4d4d4d;
-  &::-webkit-scrollbar {
-    width: 4px;
-    background-color: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-}
-.module-table-flex-wrap {
-  &.tab2 {
-    margin-top: 10px;
-    gap: 15px;
-  }
-  .module-flex-item {
-    flex: 1;
-    .module-flex-item-tit {
-      font-size: 12px;
-      font-weight: 500;
-      color: #fff;
-      padding-bottom: 10px;
-      border-bottom: 1px solid #4d4d4d;
-    }
-    .flex-item-btn-wrap {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 8px;
-      margin-bottom: 24px;
-    }
-    &.non-flex {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      flex: none;
-      padding-top: 27.5px;
-      width: 260px;
-    }
-  }
-}
-
-.module-table-box {
-  .module-table-inner {
-    .module-table-flex-wrap {
-      &.tab2 {
-        .eaves-keraba-table {
-          .eaves-keraba-th {
-            width: 90px;
-          }
-          .eaves-keraba-td {
-            padding-left: 0;
-            padding-bottom: 5px;
-          }
+        width: 230px;
+        .outline-form{
+            .grid-select{
+                flex: none;
+                width: 95.77px;
+            }
+            .thin{
+                margin-left: auto;
+            }
         }
-      }
     }
-  }
 }
-.keraba-flex {
-  display: flex;
-  align-items: center;
-  .grid-select {
-    flex: none;
-    width: 110px;
-  }
-  .outline-form {
-    justify-content: flex-end;
-  }
+.roof-module-tab2-overflow{
+    max-height: 500px;
+    overflow-y: auto;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #4D4D4D;
+    &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #D9D9D9;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+}
+.module-table-flex-wrap{
+    &.tab2{
+        margin-top: 10px;
+        gap: 15px;
+        
+    }
+    .module-flex-item{
+        flex: 1;
+        .module-flex-item-tit{
+            font-size: 12px;
+            font-weight: 500;
+            color: #fff;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #4D4D4D;
+        }
+        .flex-item-btn-wrap{
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 8px;
+            margin-bottom: 24px;
+        }
+        &.non-flex{
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            flex: none;
+            padding-top: 27.5px;
+            width: 260px;
+        }
+    }
 }
 
-.reset-word-wrap {
-  display: flex;
-  align-items: center;
-  .grid-btn-wrap {
-    margin-left: auto;
-  }
+.module-table-box{
+    .module-table-inner{
+        .module-table-flex-wrap{
+            &.tab2{
+                .eaves-keraba-table{
+                    .eaves-keraba-th{
+                        width: 90px;
+                    }
+                    .eaves-keraba-td{
+                        padding-left: 0;
+                        padding-bottom: 5px;
+                    }
+                } 
+            }
+        } 
+    } 
+} 
+.keraba-flex{
+    display: flex;
+    align-items: center;
+    .grid-select{
+        flex: none;
+        width: 110px;
+    }
+    .outline-form{
+        justify-content: flex-end;
+    }
 }
-.reset-word {
-  font-size: 12px;
-  color: #ffcaca;
-  font-weight: 400;
-  margin-top: 10px;
+
+.reset-word-wrap{
+    display: flex;
+    align-items: center;
+    .grid-btn-wrap{
+        margin-left: auto;
+    }
 }
+.reset-word{
+    font-size: 12px;
+    color: #FFCACA;
+    font-weight: 400;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index ceb5aff3..a77b35e2 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -414,6 +414,15 @@ button{
             transform: translateY(-50%) rotate(-180deg);
         }
     }
+    &.disabled{
+        cursor: default;
+        p{
+            color: #aaa;
+        }
+        &::after{
+            opacity: 0.7;
+        }
+    }
 }
 
 .select-light{
diff --git a/src/styles/spinner.scss b/src/styles/spinner.scss
index b6398e94..45e124ae 100644
--- a/src/styles/spinner.scss
+++ b/src/styles/spinner.scss
@@ -1,10 +1,14 @@
 .spinner-wrap{
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #fff;
+    background-color: rgba($color: #101010, $alpha: 0.2);
+    z-index: 2000000;
     .loader {
         font-size: 10px;
         width: 1.2em;
diff --git a/src/util/common-utils.js b/src/util/common-utils.js
index b77cf62d..bb875e5b 100644
--- a/src/util/common-utils.js
+++ b/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
+}