package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start -p 5000",
+    "start": "next start -p 3000",
-    "start:dev": "next start -p 5010",
+    "start:dev": "next start -p 3001",
     "lint": "next lint",
     "serve": "node server.js"
   },

src/components/common/draggable/WithDraggable.jsx

@@ -2,13 +2,9 @@
 
 import { useState } from 'react'
 import Draggable from 'react-draggable'
-import PopSpinner from '../spinner/PopSpinner'
-import { popSpinnerState } from '@/store/popupAtom'
-import { useRecoilState } from 'recoil'
 
 export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handle = '', className = '', hasFooter = true, isHidden = false }) {
   const [position, setPosition] = useState(pos)
-  const [popSpinnerStore, setPopSpinnerStore] = useRecoilState(popSpinnerState)
 
   const handleOnDrag = (e, data) => {
     e.stopPropagation()
@@ -29,7 +25,6 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
           <div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
             {children}
             {hasFooter && <WithDraggableFooter />}
-            {popSpinnerStore && <PopSpinner />}
           </div>
         </Draggable>
       )}

src/components/fabric/QPolygon.js

@@ -136,20 +136,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.on('removed', () => {
       // const children = getAllRelatedObjects(this.id, this.canvas)
       const children = this.canvas.getObjects().filter((obj) => obj.parentId === this.id)
-
       children.forEach((child) => {
         this.canvas.remove(child)
-
-        //그룹일때
-        if (child.hasOwnProperty('_objects')) {
-          child._objects.forEach((obj) => {
-            if (obj.hasOwnProperty('texts')) {
-              obj.texts.forEach((text) => {
-                this.canvas?.remove(text)
-              })
-            }
-          })
-        }
       })
     })
 

src/components/floor-plan/CanvasMenu.jsx

@@ -89,11 +89,11 @@ export default function CanvasMenu(props) {
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
 
   //견적서버튼 노출용
-  const [docDownButtonStyle, setDocDownButtonStyle] = useState('') //문서 다운로드 버튼
+  const [buttonStyle1, setButtonStyle1] = useState('') //문서 다운로드 버튼
-  const [saveButtonStyle, setSaveButtonStyle] = useState('') //저장 버튼
+  const [buttonStyle2, setButtonStyle2] = useState('') //저장 버튼
-  const [resetButtonStyle, setResetButtonStyle] = useState('') //초기화 버튼
+  const [buttonStyle3, setButtonStyle3] = useState('') //초기화 버튼
-  const [copyButtonStyle, setCopyButtonStyle] = useState('') //견적서 복사 버튼
+  const [buttonStyle4, setButtonStyle4] = useState('') //견적서 복사 버튼
-  const [lockButtonStyle, setLockButtonStyle] = useState('') //잠금 버튼
+  const [buttonStyle5, setButtonStyle5] = useState('') //잠금 버튼
 
   const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState) //견적서 화면용 물건번호리코일
 
@@ -442,28 +442,28 @@ export default function CanvasMenu(props) {
   }, [estimateContextState?.createUser, estimateContextState?.tempFlg, estimateContextState?.lockFlg, estimateContextState.docNo])
 
   const setAllButtonStyles = (style) => {
-    setDocDownButtonStyle(style)
+    setButtonStyle1(style)
-    setSaveButtonStyle(style)
+    setButtonStyle2(style)
-    setResetButtonStyle(style)
+    setButtonStyle3(style)
-    setCopyButtonStyle(style)
+    setButtonStyle4(style)
-    setLockButtonStyle(style)
+    setButtonStyle5(style)
   }
 
   const handleButtonStyles = (tempFlg, lockFlg, docNo) => {
     if (tempFlg === '1') {
       setAllButtonStyles('none')
-      setSaveButtonStyle('')
+      setButtonStyle2('')
     } else if (tempFlg === '0' && lockFlg === '0') {
       setAllButtonStyles('')
     } else {
-      setDocDownButtonStyle('')
+      setButtonStyle1('')
-      setSaveButtonStyle('none')
+      setButtonStyle2('none')
-      setResetButtonStyle('none')
+      setButtonStyle3('none')
-      setCopyButtonStyle('')
+      setButtonStyle4('')
-      setLockButtonStyle('')
+      setButtonStyle5('')
     }
     if (!docNo) {
-      setDocDownButtonStyle('none')
+      setButtonStyle1('none')
     }
   }
 
@@ -513,11 +513,11 @@ export default function CanvasMenu(props) {
 
   // 문서다운로드 팝업에서 다운로드 하면 문서 잠금
   const docDownPopLockFlg = () => {
-    setDocDownButtonStyle('')
+    setButtonStyle1('')
-    setSaveButtonStyle('none')
+    setButtonStyle2('none')
-    setResetButtonStyle('none')
+    setButtonStyle3('none')
-    setCopyButtonStyle('')
+    setButtonStyle4('')
-    setLockButtonStyle('')
+    setButtonStyle5('')
   }
 
   return (
@@ -627,22 +627,17 @@ export default function CanvasMenu(props) {
                 >
                   <span className="name">{getMessage('stuff.search.btn.register')}</span>
                 </button>
-                <button
+                <button type="button" style={{ display: buttonStyle1 }} className="btn-frame gray ico-flx" onClick={() => setEstimatePopupOpen(true)}>
-                  type="button"
-                  style={{ display: docDownButtonStyle }}
-                  className="btn-frame gray ico-flx"
-                  onClick={() => setEstimatePopupOpen(true)}
-                >
                   <span className="ico ico01"></span>
                   <span className="name">{getMessage('plan.menu.estimate.docDown')}</span>
                 </button>
-                <button type="button" style={{ display: saveButtonStyle }} className="btn-frame gray ico-flx" onClick={handleEstimateSubmit}>
+                <button type="button" style={{ display: buttonStyle2 }} className="btn-frame gray ico-flx" onClick={handleEstimateSubmit}>
                   <span className="ico ico02"></span>
                   <span className="name">{getMessage('plan.menu.estimate.save')}</span>
                 </button>
                 <button
                   type="button"
-                  style={{ display: resetButtonStyle }}
+                  style={{ display: buttonStyle3 }}
                   className="btn-frame gray ico-flx"
                   onClick={() => {
                     handleEstimateReset()
@@ -655,7 +650,7 @@ export default function CanvasMenu(props) {
                 {estimateRecoilState?.docNo !== null && (sessionState.storeId === 'T01' || sessionState.storeLvl === '1') && (
                   <button
                     type="button"
-                    style={{ display: copyButtonStyle }}
+                    style={{ display: buttonStyle4 }}
                     className="btn-frame gray ico-flx"
                     onClick={() => {
                       setEstimateCopyPopupOpen(true)
@@ -667,7 +662,7 @@ export default function CanvasMenu(props) {
                 )}
                 <button
                   type="button"
-                  style={{ display: lockButtonStyle }}
+                  style={{ display: buttonStyle5 }}
                   className="btn-frame gray ico-flx"
                   onClick={() => {
                     handleEstimateLockController(estimateRecoilState)

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

@@ -51,8 +51,7 @@ export default function CircuitTrestleSetting({ id }) {
   // const { trigger: setCircuitData } = useCanvasPopupStatusController(4)
   // const [stepUpListData, setStepUpListData] = useRecoilState(stepUpListDataState)
   const [stepUpListData, setStepUpListData] = useState([])
-  const [seletedMainOption, setSeletedMainOption] = useState(null)
+  const [seletedOption, setSeletedOption] = useState(null)
-  const [seletedSubOption, setSeletedSubOption] = useState(null)
   const { setModuleStatisticsData } = useCircuitTrestle()
   const { handleCanvasToPng } = useImgLoader()
 
@@ -79,7 +78,6 @@ export default function CircuitTrestleSetting({ id }) {
     getRoofSurfaceList,
     getModuleList,
     removeNotAllocationModules,
-    resetCircuits,
   } = useCircuitTrestle()
   // const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
   useEffect(() => {
@@ -94,13 +92,6 @@ export default function CircuitTrestleSetting({ id }) {
     //   selectedModels,
     //   pcsCheck,
     // })
-
-    return () => {
-      const moduleSetupSurfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
-      if (moduleSetupSurfaces.some((surface) => !surface.isComplete)) {
-        resetCircuits()
-      }
-    }
   }, [])
 
   // 수동할당 시 모듈 삭제
@@ -454,7 +445,6 @@ export default function CircuitTrestleSetting({ id }) {
     allocationType,
     circuitAllocationType,
     setCircuitAllocationType,
-    selectedMaker,
     selectedModels,
     setSelectedModels,
     getSelectedPcsItemList,
@@ -465,27 +455,23 @@ export default function CircuitTrestleSetting({ id }) {
     onValuesSelected: handleStepUpValuesSelected, // 선택된 값들을 처리하는 함수
     stepUpListData,
     setStepUpListData,
-    seletedMainOption,
+    seletedOption,
-    setSeletedMainOption,
+    setSeletedOption,
-    seletedSubOption,
-    setSeletedSubOption,
     getModuleList,
     setModuleStatisticsData,
   }
 
   // 승압설정 목록 조회
   const getStepUpListData = () => {
-    const pcs = []
+    return stepUpListData[0].pcsItemList.map((item) => {
-    console.log(stepUpListData)
-    stepUpListData[0].pcsItemList.map((item, index) => {
       return item.serQtyList
         .filter((serQty) => serQty.selected)
-        .forEach((serQty) => {
+        .map((serQty) => {
-          pcs.push({
+          return {
             pcsMkrCd: item.pcsMkrCd,
             pcsSerCd: item.pcsSerCd,
             pcsItemId: item.itemId,
-            pscOptCd: getPcsOptCd(index),
+            pscOptCd: seletedOption.code,
             paralQty: serQty.paralQty,
             connections: item.connList?.length
               ? [
@@ -494,43 +480,9 @@ export default function CircuitTrestleSetting({ id }) {
                   },
                 ]
               : [],
+          }
+        })[0]
     })
-          // return {
-          //   pcsMkrCd: item.pcsMkrCd,
-          //   pcsSerCd: item.pcsSerCd,
-          //   pcsItemId: item.itemId,
-          //   pscOptCd: getPcsOptCd(index),
-          //   paralQty: serQty.paralQty,
-          //   connections: item.connList?.length
-          //     ? [
-          //         {
-          //           connItemId: item.connList[0].itemId,
-          //         },
-          //       ]
-          //     : [],
-          // }
-        })
-    })
-    return pcs
-  }
-
-  const getPcsOptCd = (index) => {
-    console.log(selectedModels)
-    console.log(seletedMainOption)
-    console.log(seletedSubOption)
-    if (selectedModels.some((model) => model.pcsSerParallelYn === 'Y')) {
-      if (selectedModels.length > 1) {
-        if (index === 0) {
-          return seletedMainOption.code
-        } else {
-          return seletedSubOption.code
-        }
-      } else {
-        return seletedMainOption.code
-      }
-    } else {
-      return seletedMainOption.code
-    }
   }
 
   const handleStepUp = () => {

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

@@ -13,7 +13,7 @@ import { useRecoilState } from 'recoil'
 import { useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 
-export const PCS_MKR_MULTI_TYPE = {
+const PCS_MKR_MULTI_TYPE = {
   MULTI: 'MULTI',
   SINGLE_P: 'SINGLE-P',
   SINGLE_N: 'SINGLE-N',

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

@@ -15,7 +15,6 @@ import { POLYGON_TYPE } from '@/common/common'
 import { useSwal } from '@/hooks/useSwal'
 import { circuitNumDisplaySelector } from '@/store/settingAtom'
 import { fontSelector } from '@/store/fontAtom'
-import { PCS_MKR_MULTI_TYPE } from './PowerConditionalSelect'
 
 export default function StepUp(props) {
   const {
@@ -23,11 +22,8 @@ export default function StepUp(props) {
     allocationType,
     stepUpListData,
     setStepUpListData,
-    seletedMainOption,
+    seletedOption,
-    setSeletedMainOption,
+    setSeletedOption,
-    seletedSubOption,
-    setSeletedSubOption,
-    selectedMaker,
     selectedModels,
     setSelectedModels,
     getSelectedPcsItemList,
@@ -46,14 +42,17 @@ export default function StepUp(props) {
   const canvas = useRecoilValue(canvasState)
   const selectedModules = useRecoilValue(selectedModuleState)
   const [optCodes, setOptCodes] = useState([])
-  const [mainOptions, setMainOptions] = useState([])
-  const [subOptions, setSubOptions] = useState([])
 
   const [selectedRows, setSelectedRows] = useState({})
   const [isManualSelection, setIsManualSelection] = useState({})
 
   const isDisplayCircuitNumber = useRecoilValue(circuitNumDisplaySelector)
   const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
+  // useCanvasPopupStatusController(6)
+  // const canvasPopupStatusState = useRecoilValue(canvasPopupStatusStore)
+  // if (Object.keys(canvasPopupStatusState[6]).length !== 0) {
+  //   console.log('🚀 ~ useEffect ~ canvasPopupStatusState :', canvasPopupStatusState)
+  // }
 
   useEffect(() => {
     if (allocationType === 'auto') {
@@ -80,11 +79,6 @@ export default function StepUp(props) {
   /**
    * PCS 자동 승압설정 정보 조회
    */
-
-  const isMultiOptions = () => {
-    return selectedModels.some((model) => model.pcsSerParallelYn === 'Y')
-  }
-
   const fetchAutoStepUpData = async () => {
     try {
       const params = {
@@ -93,6 +87,7 @@ export default function StepUp(props) {
         roofSurfaceList: props.getRoofSurfaceList() /** 지붕면 목록 */,
         pcsItemList: props.getSelectedPcsItemList() /** PCS 아이템 목록 */,
       }
+
       /** 회로 구성 가능 여부 체크 통과 시 승압설정 정보 조회 */
       getPcsVoltageStepUpList(params).then((res) => {
         if (res?.result.resultCode === 'S' && res?.data) {
@@ -103,29 +98,12 @@ export default function StepUp(props) {
           setStepUpListData(stepUpListData)
 
           /** PCS 옵션 조회 */
-          // const formattedOptCodes = formatOptionCodes(res.data.optionList)
+          const formattedOptCodes = formatOptionCodes(res.data.optionList)
-          // setOptCodes(formattedOptCodes)
+          setOptCodes(formattedOptCodes)
-          // setSeletedOption(formattedOptCodes[0])
+          setSeletedOption(formattedOptCodes[0])
 
           /** 캔버스에 회로 정보 적용 */
-          // 병설일때 pcs 있으면 setSubOpsions, 없으면 setMainOptions
+          stepUpListData[0].pcsItemList.forEach((pcsItem) => {
-          console.log('stepUpListData', stepUpListData)
-          stepUpListData[0].pcsItemList.forEach((pcsItem, index) => {
-            const optionList = formatOptionCodes(pcsItem.optionList)
-            if (isMultiOptions()) {
-              if (index === 0) {
-                setMainOptions(optionList)
-                setSeletedMainOption(optionList[0])
-              } else {
-                setSubOptions(optionList)
-                setSeletedSubOption(optionList[0])
-              }
-            } else {
-              if (index === 0) {
-                setMainOptions(optionList)
-                setSeletedMainOption(optionList[0])
-              }
-            }
             const selectedSerQty = pcsItem.serQtyList.find((serQty) => serQty.selected)
             if (selectedSerQty) {
               selectedSerQty.roofSurfaceList.forEach((roofSurface) => {
@@ -187,6 +165,12 @@ export default function StepUp(props) {
    */
   const fetchPassiStepUpData = async () => {
     try {
+      // 1-1 2-2
+      // canvas
+      //   .getObjects()
+      //   .filter((obj) => obj.name === POLYGON_TYPE.MODULE && obj.circuit)
+      //   .map((module) => module.circuitNumber)
+
       /** 모듈 데이터 가져오기 */
       const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
 
@@ -224,21 +208,6 @@ export default function StepUp(props) {
           const pcsItemListWithSerQty = res.data.pcsItemList.map((pcsItem, index) => {
             const pcsData = pcsSummary[selectedModels[index].id] || { circuits: {}, totalModules: 0 }
             const circuitCounts = Object.values(pcsData.circuits)
-            const optionList = formatOptionCodes(pcsItem.optionList)
-            if (isMultiOptions()) {
-              if (index === 0) {
-                setMainOptions(optionList)
-                setSeletedMainOption(optionList[0])
-              } else {
-                setSubOptions(optionList)
-                setSeletedSubOption(optionList[0])
-              }
-            } else {
-              if (index === 0) {
-                setMainOptions(optionList)
-                setSeletedMainOption(optionList[0])
-              }
-            }
             return {
               ...pcsItem,
               serQtyList: [
@@ -265,9 +234,9 @@ export default function StepUp(props) {
           setStepUpListData(stepUpListData)
 
           /** PCS 옵션 조회 */
-          // const formattedOptCodes = formatOptionCodes(res.data.optionList)
+          const formattedOptCodes = formatOptionCodes(res.data.optionList)
-          // setOptCodes(formattedOptCodes)
+          setOptCodes(formattedOptCodes)
-          // setSeletedOption(formattedOptCodes[0])
+          setSeletedOption(formattedOptCodes[0])
         }
       })
     } catch (error) {
@@ -280,9 +249,9 @@ export default function StepUp(props) {
    */
   const formatOptionCodes = (optionList = []) => {
     return optionList?.map((opt) => ({
-      code: opt.pcsOptCd ?? '',
+      code: opt.pcsOptCd ? opt.pcsOptCd : '',
-      name: opt.pcsOptNm ?? '',
+      name: opt.pcsOptNm ? opt.pcsOptNm : '',
-      nameJp: opt.pcsOptNmJp ?? '',
+      nameJp: opt.pcsOptNmJp ? opt.pcsOptNmJp : '',
     }))
   }
 
@@ -305,9 +274,9 @@ export default function StepUp(props) {
    */
   const formatOptionList = (optionList = []) => {
     return optionList?.map((option) => ({
-      pcsOptCd: option.pcsOptCd ?? '',
+      pcsOptCd: option.pcsOptCd ? option.pcsOptCd : '',
-      pcsOptNm: option.pcsOptNm ?? '',
+      pcsOptNm: option.pcsOptNm ? option.pcsOptNm : '',
-      pcsOptNmJp: option.pcsOptNmJp ?? '',
+      pcsOptNmJp: option.pcsOptNmJp ? option.pcsOptNmJp : '',
     }))
   }
 
@@ -324,7 +293,6 @@ export default function StepUp(props) {
       uniqueIndex: `${item.itemId}_${index}`, // 고유 식별자 추가(동일한 PCS를 구분)
       connList: formatConnList(item.connList),
       serQtyList: formatSerQtyList(item.serQtyList),
-      optionList: item.optionList ?? [],
     }))
   }
 
@@ -335,12 +303,12 @@ export default function StepUp(props) {
     if (!connList) return [] // null인 경우 빈 배열 반환
 
     return connList?.map((conn) => ({
-      connAllowCur: conn.connAllowCur ?? 0,
+      connAllowCur: conn.connAllowCur ? conn.connAllowCur : 0,
-      connMaxParalCnt: conn.connMaxParalCnt ?? 0,
+      connMaxParalCnt: conn.connMaxParalCnt ? conn.connMaxParalCnt : 0,
-      goodsNo: conn.goodsNo ?? '',
+      goodsNo: conn.goodsNo ? conn.goodsNo : '',
-      itemId: conn.itemId ?? '',
+      itemId: conn.itemId ? conn.itemId : '',
-      itemNm: conn.itemNm ?? '',
+      itemNm: conn.itemNm ? conn.itemNm : '',
-      vstuParalCnt: conn.vstuParalCnt ?? 0,
+      vstuParalCnt: conn.vstuParalCnt ? conn.vstuParalCnt : 0,
     }))
   }
 
@@ -350,10 +318,10 @@ export default function StepUp(props) {
   const formatSerQtyList = (serQtyList = []) => {
     return serQtyList?.map((qty) => ({
       code: uuidv4(),
-      serQty: qty.serQty ?? 0,
+      serQty: qty.serQty ? qty.serQty : 0,
-      paralQty: qty.paralQty ?? 0,
+      paralQty: qty.paralQty ? qty.paralQty : 0,
-      rmdYn: qty.rmdYn ?? 'N',
+      rmdYn: qty.rmdYn ? qty.rmdYn : 'N',
-      usePossYn: qty.usePossYn ?? 'Y',
+      usePossYn: qty.usePossYn ? qty.usePossYn : 'Y',
       roofSurfaceList: formatRoofSurfaceList(qty.roofSurfaceList),
       selected: qty.rmdYn === 'Y',
     }))
@@ -365,8 +333,8 @@ export default function StepUp(props) {
   const formatRoofSurfaceList = (roofSurfaceList = []) => {
     return roofSurfaceList?.map((rsf) => ({
       moduleList: formatModuleList(rsf.moduleList),
-      roofSurface: rsf.roofSurface ?? '',
+      roofSurface: rsf.roofSurface ? rsf.roofSurface : '',
-      roofSurfaceId: rsf.roofSurfaceId ?? '',
+      roofSurfaceId: rsf.roofSurfaceId ? rsf.roofSurfaceId : '',
       roofSurfaceIncl: rsf.roofSurfaceIncl ? +rsf.roofSurfaceIncl : '',
     }))
   }
@@ -376,10 +344,10 @@ export default function StepUp(props) {
    */
   const formatModuleList = (moduleList = []) => {
     return moduleList?.map((module) => ({
-      circuit: module.circuit ?? '',
+      circuit: module.circuit ? module.circuit : '',
-      itemId: module.itemId ?? '',
+      itemId: module.itemId ? module.itemId : '',
-      pcsItemId: module.pcsItemId ?? '',
+      pcsItemId: module.pcsItemId ? module.pcsItemId : '',
-      uniqueId: module.uniqueId ?? '',
+      uniqueId: module.uniqueId ? module.uniqueId : '',
     }))
   }
 
@@ -448,9 +416,9 @@ export default function StepUp(props) {
             setStepUpListData(stepUpListData)
 
             /** PCS 옵션 조회 */
-            // const formattedOptCodes = formatOptionCodes(res.data.optionList)
+            const formattedOptCodes = formatOptionCodes(res.data.optionList)
-            // setOptCodes(formattedOptCodes)
+            setOptCodes(formattedOptCodes)
-            // setSeletedOption(formattedOptCodes[0])
+            setSeletedOption(formattedOptCodes[0])
           } else {
             swalFire({ text: getMessage('common.message.send.error') })
           }
@@ -564,37 +532,7 @@ export default function StepUp(props) {
     <>
       <div className="properties-setting-wrap outer">
         <div className="circuit-title-sel">
-          <p className="circuit-title">{getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}</p>
+          <div className="outline-form">
-          <div className="circuit-sel-wrap">
-            <div className="grid-select mr10">
-              {mainOptions.length > 0 && (
-                <QSelectBox
-                  options={mainOptions}
-                  value={seletedMainOption}
-                  sourceKey="code"
-                  targetKey="code"
-                  showKey="name"
-                  onChange={(e) => setSeletedMainOption(e)}
-                />
-              )}
-            </div>
-            {isMultiOptions() && selectedModels.length === 2 && (
-              <div className="grid-select ">
-                {subOptions.length > 0 && (
-                  <QSelectBox
-                    options={subOptions}
-                    value={seletedSubOption}
-                    sourceKey="code"
-                    targetKey="code"
-                    showKey="name"
-                    onChange={(e) => setSeletedSubOption(e)}
-                  />
-                )}
-              </div>
-            )}
-          </div>
-
-          {/* <div className="outline-form">
             <span className="mr10" style={{ width: 'auto' }}>
               {getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
             </span>
@@ -613,7 +551,7 @@ export default function StepUp(props) {
                 />
               </div>
             )}
-          </div> */}
+          </div>
         </div>
 
         <div className="slope-wrap">

src/components/footer/PromisePopup.jsx

@@ -1,71 +0,0 @@
-import React, { useEffect } from 'react'
-import { popSpinnerState, promisePopupState } from '@/store/popupAtom'
-import { useRecoilState } from 'recoil'
-import WithDraggable from '../common/draggable/WithDraggable'
-import { useMessage } from '@/hooks/useMessage'
-
-export default function PromisePopup() {
-  const { getMessage } = useMessage()
-  const [promisePopupStore, setPromisePopupStore] = useRecoilState(promisePopupState)
-  const [popSpinnerStore, setPopSpinnerStore] = useRecoilState(popSpinnerState)
-
-  const handleSpinner = () => {
-    setPopSpinnerStore(true)
-    setTimeout(() => {
-      setPopSpinnerStore(false)
-    }, 1000)
-  }
-
-  return (
-    <WithDraggable isShow={promisePopupStore} pos={{ x: 1000, y: 200 }} className="r">
-      <WithDraggable.Header title={'popup promise test'} onClose={() => setPromisePopupStore(false)} />
-
-      <WithDraggable.Body>
-        <div className="img-flex-box">
-          <span className="normal-font mr10">{getMessage('modal.image.load.size.rotate')}</span>
-          <label className="toggle-btn">
-            <input type="checkbox" checked={true} value="1" />
-            <span className="slider"></span>
-          </label>
-        </div>
-        <div className="img-load-from">
-          <div className="img-load-item">
-            <div className="d-check-radio pop">
-              <input type="radio" name="radio03" id="ra06" value={'1'} />
-              <label htmlFor="ra06">{getMessage('common.input.file')}</label>
-            </div>
-            <div className="img-flex-box">
-              <div className="img-edit-wrap">
-                <label className="img-edit-btn" htmlFor="img_file">
-                  <span className="img-edit"></span>
-                  {getMessage('common.load')}
-                </label>
-                <input type="file" id="img_file" style={{ display: 'none' }} />
-              </div>
-              <div className="img-name-wrap">
-                <input type="text" className="input-origin al-l" value={'test'} readOnly />
-              </div>
-            </div>
-          </div>
-          <div className="img-load-item">
-            <div className="d-check-radio pop">
-              <input type="radio" name="radio03" id="ra07" value={'2'} />
-              <label htmlFor="ra07">{getMessage('common.input.address.load')}</label>
-            </div>
-            <div className="img-flex-box for-address">
-              <input type="text" className="input-origin al-l mr10" placeholder={'住所入力'} value={'test'} />
-              <div className="img-edit-wrap">
-                <button className={`img-edit-btn`}>{getMessage('common.finish')}</button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="grid-btn-wrap">
-          <button className="btn-frame modal act" onClick={handleSpinner}>
-            {getMessage('common.finish')}
-          </button>
-        </div>
-      </WithDraggable.Body>
-    </WithDraggable>
-  )
-}

src/components/management/Stuff.jsx

@@ -301,6 +301,7 @@ export default function Stuff() {
     } else if (stuffSearchParams?.code === 'E') {
       stuffSearchParams.startRow = (stuffSearch.pageNo - 1) * stuffSearchParams.pageSize + 1
       stuffSearchParams.endRow = stuffSearchParams.pageNo * stuffSearchParams.pageSize
+      stuffSearchParams.schSortType = defaultSortType
       stuffSearchParams.pageNo = stuffSearchParams.pageNo
 
       if (!stuffSearchParams.saleStoreId) {

src/components/management/StuffDetail.jsx

@@ -283,17 +283,17 @@ export default function StuffDetail() {
         autoHeight: true,
         cellStyle: { justifyContent: 'center' },
         cellRenderer: (params) => {
-          let estimateDetailButtonStyle = ''
+          let buttonStyle = ''
-          let docDownButtonStyle = ''
+          let buttonStyle2 = ''
           if (params.value == null) {
-            estimateDetailButtonStyle = 'none'
+            buttonStyle = 'none'
-            docDownButtonStyle = 'none'
+            buttonStyle2 = 'none'
           } else {
             if (params?.data?.createSaleStoreId === 'T01' && session?.storeId !== 'T01') {
-              estimateDetailButtonStyle = 'none'
+              buttonStyle = 'none'
             }
             if (params?.data?.tempFlg === '1' || !params?.data?.docNo) {
-              docDownButtonStyle = 'none'
+              buttonStyle2 = 'none'
             }
           }
 
@@ -301,7 +301,7 @@ export default function StuffDetail() {
             <>
               <div className="grid-cell-btn">
                 <button
-                  style={{ display: estimateDetailButtonStyle }}
+                  style={{ display: buttonStyle }}
                   type="button"
                   className="grid-btn"
                   onClick={() => {
@@ -315,7 +315,7 @@ export default function StuffDetail() {
                   {getMessage('stuff.detail.planGrid.btn1')}
                 </button>
                 <button
-                  style={{ display: docDownButtonStyle }}
+                  style={{ display: buttonStyle2 }}
                   type="button"
                   className="grid-btn"
                   onClick={() => {

src/hooks/module/useTrestle.js

@@ -640,13 +640,13 @@ export const useTrestle = () => {
     //surfaces.pcses들을 배열로 묶는다
     const pcses = surfaces[0].pcses.filter((pcs) => pcs !== null && pcs !== undefined)
 
-    // surfaces.forEach((surface, index) => {
+    surfaces.forEach((surface, index) => {
-    //   if (index !== 0) {
+      if (index !== 0) {
-    //     if (surface.pcses) {
+        if (surface.pcses) {
-    //       pcses.concat(surface.pcses)
+          pcses.concat(surface.pcses)
-    //     }
+        }
-    //   }
+      }
-    // })
+    })
 
     const allModules = surfaces.map((surface) => surface.modules).flat()
     // 모듈 파라미터 생성

src/hooks/useEstimate.js

@@ -64,10 +64,9 @@ export function useEstimate() {
 
         // 캔버스 저장
         await saveCanvas(false)
-        setIsGlobalLoading(false)
 
         /* 견적서 저장이 완료되면 견적서 페이지로 이동 */
-        // moveEstimate(planNo, objectNo)
+        moveEstimate(planNo, objectNo)
       })
       .catch((error) => {
         setIsGlobalLoading(false)

src/store/popupAtom.js

@@ -27,15 +27,3 @@ export const contextPopupPositionState = atom({
   },
   dangerouslyAllowMutability: true,
 })
-
-/** 팝업 스피너 상태 */
-export const popSpinnerState = atom({
-  key: 'popSpinnerStore',
-  default: false,
-})
-
-/** 프로미스 팝업 상태 - 테스트용(삭제 예정) */
-export const promisePopupState = atom({
-  key: 'promisePopupStore',
-  default: false,
-})

src/styles/_modal.scss

@@ -5,12 +5,24 @@ $pop-normal-size: 12px;
 $alert-color: #101010;
 
 @keyframes mountpop {
-    from{opacity: 0; scale: 0.95;}
+  from {
-    to{opacity: 1; scale: 1;}
+    opacity: 0;
+    scale: 0.95;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
 }
 @keyframes unmountpop {
-    from{opacity: 1; scale: 1;}
+  from {
-    to{opacity: 0; scale: 0.95;}
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
 }
 
 .normal-font {
@@ -85,10 +97,10 @@ $alert-color: #101010;
     width: 900px;
   }
   &.mount {
-        animation: mountpop .17s ease-in-out forwards;
+    animation: mountpop 0.17s ease-in-out forwards;
   }
   &.unmount {
-        animation: unmountpop .17s ease-in-out forwards;
+    animation: unmountpop 0.17s ease-in-out forwards;
   }
   &.alert {
     position: absolute;
@@ -214,7 +226,7 @@ $alert-color: #101010;
     }
   }
   .outer-line-wrap {
-        border-top: 1px solid #3C3C3C;
+    border-top: 1px solid #3c3c3c;
     margin-top: 10px;
     padding-top: 15px;
     margin-bottom: 15px;
@@ -243,7 +255,7 @@ $alert-color: #101010;
 .adsorption-point {
   display: flex;
   align-items: center;
-    background-color: #3A3A3A;
+  background-color: #3a3a3a;
   border-radius: 3px;
   padding-left: 11px;
   overflow: hidden;
@@ -264,7 +276,7 @@ $alert-color: #101010;
   &.act {
     i {
       color: $pop-color;
-            background-color: #1083E3;
+      background-color: #1083e3;
     }
   }
 }
@@ -293,7 +305,7 @@ $alert-color: #101010;
     background-color: transparent;
   }
   &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
+    background-color: #d9d9d9;
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
@@ -304,7 +316,7 @@ $alert-color: #101010;
     display: flex;
     align-items: center;
     background-color: transparent;
-        border: 1px solid #3D3D3D;
+    border: 1px solid #3d3d3d;
     border-radius: 2px;
     padding: 15px 10px;
     gap: 20px;
@@ -343,7 +355,6 @@ $alert-color: #101010;
           top: 50%;
           right: 0;
           transform: translateY(-50%);
-                    
         }
       }
       .input-grid {
@@ -353,7 +364,9 @@ $alert-color: #101010;
   }
 }
 .select-form {
-    .sort-select{width: 100%;}
+  .sort-select {
+    width: 100%;
+  }
 }
 .grid-select {
   flex: 1;
@@ -399,7 +412,6 @@ $alert-color: #101010;
   color: $pop-color;
   font-weight: $pop-normal-weight;
   padding-bottom: 15px;
-
 }
 .grid-direction {
   display: flex;
@@ -416,11 +428,17 @@ $alert-color: #101010;
   background-position: center;
   background-size: 16px 15px;
   border-radius: 50%;
-    transition: all .15s ease-in-out;
+  transition: all 0.15s ease-in-out;
   opacity: 0.6;
-    &.down{transform: rotate(180deg);}
+  &.down {
-    &.left{transform: rotate(-90deg);}
+    transform: rotate(180deg);
-    &.right{transform: rotate(90deg);}
+  }
+  &.left {
+    transform: rotate(-90deg);
+  }
+  &.right {
+    transform: rotate(90deg);
+  }
   &:hover,
   &.act {
     opacity: 1;
@@ -506,10 +524,11 @@ $alert-color: #101010;
   }
   &.light {
     padding: 0;
-        th,td{
+    th,
+    td {
       color: $alert-color;
       border-bottom: none;
-            border-top: 1px solid #EFEFEF;
+      border-top: 1px solid #efefef;
     }
     th {
       padding: 14px 0;
@@ -574,7 +593,6 @@ $alert-color: #101010;
     color: $pop-color;
     font-weight: $pop-normal-weight;
   }
-
 }
 
 .img-edit-wrap {
@@ -590,7 +608,7 @@ $alert-color: #101010;
     background-color: #fff;
     border-radius: 2px;
     cursor: pointer;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     .img-edit {
       width: 16px;
       height: 16px;
@@ -610,7 +628,6 @@ $alert-color: #101010;
   margin-left: 10px;
   input {
     flex: 1;
-
   }
   .img-check {
     flex: none;
@@ -636,8 +653,12 @@ $alert-color: #101010;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
-        &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
+    &.fail {
-        &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
+      background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+    }
+    &.success {
+      background-image: url(../../public/static/images/canvas/img_check_success.svg);
+    }
   }
 }
 
@@ -717,7 +738,7 @@ $alert-color: #101010;
     align-items: center;
     justify-content: center;
     width: 50%;
-        background-color: #3D3D3D;
+    background-color: #3d3d3d;
     border-radius: 2px;
   }
 }
@@ -725,7 +746,7 @@ $alert-color: #101010;
 // 외벽선 속성 설정
 .properties-guide {
   font-size: $pop-normal-size;
-    color: #AAA;
+  color: #aaa;
   font-weight: $pop-normal-weight;
   margin-bottom: 14px;
 }
@@ -754,17 +775,17 @@ $alert-color: #101010;
       color: #fff;
       font-weight: 700;
       border-radius: 2px;
-            transition: all .15s ease-in-out;
+      transition: all 0.15s ease-in-out;
       &.green {
         background-color: #305941;
-                border: 1px solid #45CD7D;
+        border: 1px solid #45cd7d;
         &:hover {
           background-color: #3a6b4e;
         }
       }
       &.blue {
-                background-color: #2E5360;
+        background-color: #2e5360;
-                border: 1px solid #3FBAE6;
+        border: 1px solid #3fbae6;
         &:hover {
           background-color: #365f6e;
         }
@@ -793,8 +814,8 @@ $alert-color: #101010;
     justify-content: center;
     width: 100%;
     padding: 13px;
-        background-color: #3D3D3D;
+    background-color: #3d3d3d;
-        transition: background .15s ease-in-out;
+    transition: background 0.15s ease-in-out;
     img {
       max-width: 100%;
     }
@@ -805,13 +826,17 @@ $alert-color: #101010;
     color: $pop-color;
     margin-top: 10px;
     text-align: center;
-        transition: color .15s ease-in-out;
+    transition: color 0.15s ease-in-out;
   }
   .shape-menu-box {
     &.act,
     &:hover {
-            .shape-box{background-color: #008BFF;}
+      .shape-box {
-            .shape-title{color: #008BFF;}
+        background-color: #008bff;
+      }
+      .shape-title {
+        color: #008bff;
+      }
     }
   }
 }
@@ -826,7 +851,7 @@ $alert-color: #101010;
 }
 .discrimination-box {
   padding: 16px 12px;
-    border: 1px solid #3D3D3D;
+  border: 1px solid #3d3d3d;
   border-radius: 2px;
 }
 
@@ -859,12 +884,12 @@ $alert-color: #101010;
       align-items: center;
       justify-content: center;
       padding: 5px;
-            background-color: #3D3D3D;
+      background-color: #3d3d3d;
-            border: 1px solid #3D3D3D;
+      border: 1px solid #3d3d3d;
       border-radius: 2px;
       cursor: pointer;
       &.act {
-                border: 1px solid #ED0004;
+        border: 1px solid #ed0004;
       }
     }
     &:last-child {
@@ -914,7 +939,7 @@ $alert-color: #101010;
     font-weight: $pop-normal-weight;
     border: 1px solid #484848;
     background-color: #323234;
-        transition: background-color .13s ease-in-out;
+    transition: background-color 0.13s ease-in-out;
     i {
       display: block;
       width: 12px;
@@ -969,7 +994,7 @@ $alert-color: #101010;
     border: 1px solid #646464;
     border-radius: 2px;
     padding: 0 10px;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     i {
       height: 15px;
       display: block;
@@ -977,7 +1002,7 @@ $alert-color: #101010;
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;
-            transition: all .15s ease-in-out;
+      transition: all 0.15s ease-in-out;
       &.allocation01 {
         background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
         width: 15px;
@@ -1050,7 +1075,9 @@ $alert-color: #101010;
     height: 34px;
     background-color: #373737;
     border: 1px solid #676767;
-        transition: background .15s ease-in-out, border .15s ease-in-out;
+    transition:
+      background 0.15s ease-in-out,
+      border 0.15s ease-in-out;
     .shape-box {
       display: flex;
       justify-content: center;
@@ -1062,8 +1089,8 @@ $alert-color: #101010;
     }
     &.act,
     &:hover {
-            border-color: #008BFF;
+      border-color: #008bff;
-            background-color: #008BFF;
+      background-color: #008bff;
     }
   }
 }
@@ -1078,18 +1105,27 @@ $alert-color: #101010;
   .library-btn {
     width: 100%;
     height: 34px;
-        border: 1px solid #6C6C6C;
+    border: 1px solid #6c6c6c;
     border-radius: 2px;
     background-color: #373737;
     background-repeat: no-repeat;
     background-position: center;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
-        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
+    &.ico01 {
-        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
+      background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
-        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
+      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;
+      border-color: #1083e3;
-            background-color: #1083E3;
+      background-color: #1083e3;
     }
   }
 }
@@ -1175,11 +1211,27 @@ $alert-color: #101010;
     position: absolute;
     font-size: 12px;
     font-weight: 500;
-        color: #B1B1B1;
+    color: #b1b1b1;
-        &.top{top: 0; left: 50%; transform: translateX(-50%);}
+    &.top {
-        &.right{top: 50%; right: 0; transform: translateY(-50%);}
+      top: 0;
-        &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
+      left: 50%;
-        &.left{top: 50%; left: 0; transform: translateY(-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;
@@ -1191,11 +1243,27 @@ $alert-color: #101010;
     background-repeat: no-repeat;
     background-position: center;
     border-radius: 50%;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
-        &.up{top: 22px; left: 50%; transform: translateX(-50%);}
+    &.up {
-        &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
+      top: 22px;
-        &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
+      left: 50%;
-        &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
+      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;
@@ -1272,7 +1340,7 @@ $alert-color: #101010;
 .warning {
   font-size: $pop-normal-size;
   font-weight: $pop-normal-weight;
-    color: #FFAFAF;
+  color: #ffafaf;
 }
 
 // 각 변 속성 변경
@@ -1328,37 +1396,157 @@ $alert-color: #101010;
       top: 12.5px;
       left: 50%;
       font-size: 11px;
-            color: #8B8B8B;
+      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(1) {
-        &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
+      transform: rotate(180deg) translate(-50%, -50%);
-        &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
+      i {
-        &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
+        transform: translateX(-50%) rotate(180deg);
-        &: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(2) {
-        &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
+      transform: rotate(195deg) translate(-50%, -50%);
-        &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
+      i {
-        &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
+        transform: translateX(-50%) rotate(165deg);
-        &: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(3) {
-        &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
+      transform: rotate(210deg) translate(-50%, -50%);
-        &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
+      i {
-        &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
+        transform: translateX(-50%) rotate(150deg);
-        &: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(4) {
-        &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
+      transform: rotate(225deg) translate(-50%, -50%);
-        &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
+      i {
-        &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
+        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);}}
+    }
+    &: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: '';
@@ -1412,13 +1600,13 @@ $alert-color: #101010;
     border-radius: 2px;
     background-color: transparent;
     font-size: 12px;
-        color: #AAA;
+    color: #aaa;
     text-align: center;
     cursor: default;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     &.act {
-            background-color: #1083E3;
+      background-color: #1083e3;
-            border: 1px solid #1083E3;
+      border: 1px solid #1083e3;
       color: #fff;
       font-weight: 500;
     }
@@ -1431,7 +1619,7 @@ $alert-color: #101010;
     background-position: center;
     background-size: cover;
     background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     &.act {
       background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
     }
@@ -1464,7 +1652,9 @@ $alert-color: #101010;
         top: 22px;
       }
       &.act {
-                i{color: #8B8B8B;}
+        i {
+          color: #8b8b8b;
+        }
       }
     }
   }
@@ -1496,7 +1686,7 @@ $alert-color: #101010;
     height: 30px;
     font-size: 12px;
     font-weight: 400;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     &:first-child {
       border-left: 1px solid #505050;
     }
@@ -1510,7 +1700,7 @@ $alert-color: #101010;
 
 .module-table-box {
   flex: 1;
-    background-color: #3D3D3D;
+  background-color: #3d3d3d;
   border-radius: 2px;
   .module-table-inner {
     padding: 10px;
@@ -1523,7 +1713,7 @@ $alert-color: #101010;
       padding: 10px 0;
       font-size: 12px;
       color: #fff;
-            border-bottom: 1px solid #4D4D4D;
+      border-bottom: 1px solid #4d4d4d;
     }
     .eaves-keraba-table {
       width: 100%;
@@ -1546,7 +1736,7 @@ $alert-color: #101010;
   .warning-guide {
     padding: 20px;
     .warning {
-            color: #FFCACA;
+      color: #ffcaca;
       max-height: 55px;
       overflow-y: auto;
       padding-right: 30px;
@@ -1555,7 +1745,7 @@ $alert-color: #101010;
         background-color: transparent;
       }
       &::-webkit-scrollbar-thumb {
-                background-color: #D9D9D9;
+        background-color: #d9d9d9;
       }
       &::-webkit-scrollbar-track {
         background-color: transparent;
@@ -1566,7 +1756,7 @@ $alert-color: #101010;
 
 .module-self-table {
   display: table;
-    border-top: 1px solid #4D4D4D;
+  border-top: 1px solid #4d4d4d;
   border-collapse: collapse;
   width: 100%;
   .self-table-item {
@@ -1575,7 +1765,7 @@ $alert-color: #101010;
     .self-item-th {
       display: table-cell;
       vertical-align: middle;
-            border-bottom: 1px solid #4D4D4D;
+      border-bottom: 1px solid #4d4d4d;
     }
     .self-item-th {
       width: 60px;
@@ -1603,7 +1793,7 @@ $alert-color: #101010;
 .hexagonal-wrap {
   .hexagonal-item {
     padding: 15px 0;
-        border-bottom: 1px solid #4D4D4D;
+    border-bottom: 1px solid #4d4d4d;
     &:first-child {
       padding-top: 0;
     }
@@ -1637,7 +1827,7 @@ $alert-color: #101010;
       background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-            background-color: #D9D9D9;
+      background-color: #d9d9d9;
     }
     &::-webkit-scrollbar-track {
       background-color: transparent;
@@ -1686,7 +1876,7 @@ $alert-color: #101010;
   gap: 5px;
   min-height: 60px;
   padding: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.20);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   span {
     display: inline-flex;
     align-items: center;
@@ -1717,7 +1907,7 @@ $alert-color: #101010;
     background-color: transparent;
   }
   &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
+    background-color: #d9d9d9;
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
@@ -1731,31 +1921,26 @@ $alert-color: #101010;
 }
 .circuit-title-sel {
   padding-bottom: 14px;
-    .circuit-title{
+  .outline-form {
-        font-size: 12px;
+    span {
-        color: #62C207;
+      color: #62c207;
-        margin-bottom: 5px;
     }
-    .circuit-sel-wrap{
-        display: flex;
-        align-items: center;
     .grid-select {
       .sort-select {
-                border: 1px solid #4E9E04;
+        border: 1px solid #4e9e04;
-                background-color: #1A3104;
+        background-color: #1a3104;
         p {
           line-height: 27px;
         }
         .select-item-wrap {
-                    background-color: #1A3104;
+          background-color: #1a3104;
-                    border: 1px solid #4E9E04;
+          border: 1px solid #4e9e04;
           .select-item:hover {
             background-color: #294e07;
           }
           &::-webkit-scrollbar {
             width: 2px;
             background-color: transparent;
-                        
           }
           &::-webkit-scrollbar-thumb {
             background-color: #fff;
@@ -1822,10 +2007,10 @@ $alert-color: #101010;
       height: 16px;
       &.pink {
         border: 2px solid #ce1c9c;
-                background-color: #16417D;
+        background-color: #16417d;
       }
       &.white {
-                border: 2px solid #FFF;
+        border: 2px solid #fff;
         background-color: #001027;
       }
     }
@@ -1850,7 +2035,7 @@ $alert-color: #101010;
       .react-colorful__pointer {
         width: 15px;
         height: 15px;
-                border: 4px solid #Fff;
+        border: 4px solid #fff;
       }
       .react-colorful__saturation {
         border-radius: 2px;
@@ -1940,7 +2125,6 @@ $alert-color: #101010;
     min-height: 80px;
     background-color: #fff;
   }
-    
 }
 
 // 치수선 설정
@@ -2060,10 +2244,22 @@ $alert-color: #101010;
         border-radius: 50%;
       }
     }
-        &:nth-child(1){ top: 0; left: 0; }
+    &:nth-child(1) {
-        &:nth-child(2){ top: 0; right: 0; }
+      top: 0;
-        &:nth-child(3){ bottom: 0; left: 0; }
+      left: 0;
-        &:nth-child(4){ bottom: 0; right: 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;
@@ -2156,13 +2352,13 @@ $alert-color: #101010;
   max-height: 650px;
   overflow-y: auto;
   padding-bottom: 15px;
-    border-bottom: 1px solid #4D4D4D;
+  border-bottom: 1px solid #4d4d4d;
   &::-webkit-scrollbar {
     width: 4px;
     background-color: transparent;
   }
   &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
+    background-color: #d9d9d9;
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
@@ -2172,7 +2368,6 @@ $alert-color: #101010;
   &.tab2 {
     margin-top: 10px;
     gap: 15px;
-        
   }
   .module-flex-item {
     flex: 1;
@@ -2181,7 +2376,7 @@ $alert-color: #101010;
       font-weight: 500;
       color: #fff;
       padding-bottom: 10px;
-            border-bottom: 1px solid #4D4D4D;
+      border-bottom: 1px solid #4d4d4d;
     }
     .flex-item-btn-wrap {
       display: grid;
@@ -2229,6 +2424,120 @@ $alert-color: #101010;
   }
 }
 
+.pop-spinner {
+  position: absolute;
+  bottom: 10px;
+  left: 5px;
+  width: calc(100% - 10px);
+  height: calc(100% - 49px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba($color: #101010, $alpha: 0.5);
+  z-index: 2000000;
+  .loader {
+    font-size: 10px;
+    width: 1.2em;
+    height: 1.2em;
+    border-radius: 50%;
+    position: relative;
+    text-indent: -9999em;
+    animation: mulShdSpin 1.1s infinite ease;
+    transform: translateZ(0);
+  }
+  @keyframes mulShdSpin {
+    0%,
+    100% {
+      box-shadow:
+        0em -2.6em 0em 0em #fff,
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
+    }
+    12.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
+        1.8em -1.8em 0 0em #fff,
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
+    }
+    25% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7),
+        2.5em 0em 0 0em #fff,
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    37.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.7),
+        1.75em 1.75em 0 0em #fff,
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    50% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7),
+        0em 2.5em 0 0em #fff,
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    62.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.7),
+        -1.8em 1.8em 0 0em #fff,
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    75% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7),
+        -2.6em 0em 0 0em #fff,
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    87.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7),
+        -1.8em -1.8em 0 0em #fff;
+    }
+  }
+}
+
 .pop-spinner{
     position: absolute;
     bottom: 10px;