From 38a65702aaa0aca51782c54c77b6c43aef9cf675 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?=
 <43837214+Minsiki@users.noreply.github.com>
Date: Fri, 14 Mar 2025 15:14:26 +0900
Subject: [PATCH 1/9] =?UTF-8?q?=ED=9A=8C=EB=A1=9C=ED=95=A0=EB=8B=B9=20?=
 =?UTF-8?q?=ED=9B=84=20modal=20=EB=8B=AB=EC=95=98=EC=9D=84=EB=95=8C=20?=
 =?UTF-8?q?=EC=A7=91=EA=B3=84=ED=91=9C=20=EC=B4=88=EA=B8=B0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/circuitTrestle/CircuitTrestleSetting.jsx        | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
index 53461f77..bc31465a 100644
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@@ -78,6 +78,7 @@ export default function CircuitTrestleSetting({ id }) {
     getRoofSurfaceList,
     getModuleList,
     removeNotAllocationModules,
+    resetCircuits,
   } = useCircuitTrestle()
   // const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
   useEffect(() => {
@@ -92,6 +93,13 @@ 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()
+      }
+    }
   }, [])
 
   // 수동할당 시 모듈 삭제

From 222dca6d14a4347ea7348c289196cd9c6d272931 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Fri, 14 Mar 2025 18:21:00 +0900
Subject: [PATCH 2/9] =?UTF-8?q?=EB=A7=A5=EC=8A=A4=2010=EB=A7=8C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
index 10f9adc1..629b45d0 100644
--- a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
@@ -46,6 +46,10 @@ export default function PlanSizeSetting(props) {
   const changeInput = (value, e) => {
     const { name } = e.target
 
+    if (Number(value) > 100000) {
+      value = 100000
+    }
+
     setPlanSizeSettingMode((prev) => {
       return {
         ...prev,

From a18ae6518d178d0bb176ca26bb28c85417dcf0e5 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Mon, 17 Mar 2025 10:30:38 +0900
Subject: [PATCH 3/9] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=20=EC=83=81=EC=84=B8=20&?=
 =?UTF-8?q?=20=EA=B2=AC=EC=A0=81=EC=84=9C=20=EC=83=81=EC=84=B8=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=EB=AA=85=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasMenu.jsx  | 59 ++++++++++++-----------
 src/components/management/StuffDetail.jsx | 16 +++---
 2 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index e10d9ebc..0d9ddc0a 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -89,11 +89,11 @@ export default function CanvasMenu(props) {
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
 
   //견적서버튼 노출용
-  const [buttonStyle1, setButtonStyle1] = useState('') //문서 다운로드 버튼
-  const [buttonStyle2, setButtonStyle2] = useState('') //저장 버튼
-  const [buttonStyle3, setButtonStyle3] = useState('') //초기화 버튼
-  const [buttonStyle4, setButtonStyle4] = useState('') //견적서 복사 버튼
-  const [buttonStyle5, setButtonStyle5] = useState('') //잠금 버튼
+  const [docDownButtonStyle, setDocDownButtonStyle] = useState('') //문서 다운로드 버튼
+  const [saveButtonStyle, setSaveButtonStyle] = useState('') //저장 버튼
+  const [resetButtonStyle, setResetButtonStyle] = useState('') //초기화 버튼
+  const [copyButtonStyle, setCopyButtonStyle] = useState('') //견적서 복사 버튼
+  const [lockButtonStyle, setLockButtonStyle] = 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) => {
-    setButtonStyle1(style)
-    setButtonStyle2(style)
-    setButtonStyle3(style)
-    setButtonStyle4(style)
-    setButtonStyle5(style)
+    setDocDownButtonStyle(style)
+    setSaveButtonStyle(style)
+    setResetButtonStyle(style)
+    setCopyButtonStyle(style)
+    setLockButtonStyle(style)
   }
 
   const handleButtonStyles = (tempFlg, lockFlg, docNo) => {
     if (tempFlg === '1') {
       setAllButtonStyles('none')
-      setButtonStyle2('')
+      setSaveButtonStyle('')
     } else if (tempFlg === '0' && lockFlg === '0') {
       setAllButtonStyles('')
     } else {
-      setButtonStyle1('')
-      setButtonStyle2('none')
-      setButtonStyle3('none')
-      setButtonStyle4('')
-      setButtonStyle5('')
+      setDocDownButtonStyle('')
+      setSaveButtonStyle('none')
+      setResetButtonStyle('none')
+      setCopyButtonStyle('')
+      setLockButtonStyle('')
     }
     if (!docNo) {
-      setButtonStyle1('none')
+      setDocDownButtonStyle('none')
     }
   }
 
@@ -513,11 +513,11 @@ export default function CanvasMenu(props) {
 
   // 문서다운로드 팝업에서 다운로드 하면 문서 잠금
   const docDownPopLockFlg = () => {
-    setButtonStyle1('')
-    setButtonStyle2('none')
-    setButtonStyle3('none')
-    setButtonStyle4('')
-    setButtonStyle5('')
+    setDocDownButtonStyle('')
+    setSaveButtonStyle('none')
+    setResetButtonStyle('none')
+    setCopyButtonStyle('')
+    setLockButtonStyle('')
   }
 
   return (
@@ -627,17 +627,22 @@ export default function CanvasMenu(props) {
                 >
                   <span className="name">{getMessage('stuff.search.btn.register')}</span>
                 </button>
-                <button type="button" style={{ display: buttonStyle1 }} className="btn-frame gray ico-flx" onClick={() => setEstimatePopupOpen(true)}>
+                <button
+                  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: buttonStyle2 }} className="btn-frame gray ico-flx" onClick={handleEstimateSubmit}>
+                <button type="button" style={{ display: saveButtonStyle }} 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: buttonStyle3 }}
+                  style={{ display: resetButtonStyle }}
                   className="btn-frame gray ico-flx"
                   onClick={() => {
                     handleEstimateReset()
@@ -650,7 +655,7 @@ export default function CanvasMenu(props) {
                 {estimateRecoilState?.docNo !== null && (sessionState.storeId === 'T01' || sessionState.storeLvl === '1') && (
                   <button
                     type="button"
-                    style={{ display: buttonStyle4 }}
+                    style={{ display: copyButtonStyle }}
                     className="btn-frame gray ico-flx"
                     onClick={() => {
                       setEstimateCopyPopupOpen(true)
@@ -662,7 +667,7 @@ export default function CanvasMenu(props) {
                 )}
                 <button
                   type="button"
-                  style={{ display: buttonStyle5 }}
+                  style={{ display: lockButtonStyle }}
                   className="btn-frame gray ico-flx"
                   onClick={() => {
                     handleEstimateLockController(estimateRecoilState)
diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index b5020d5b..9f9dfdbf 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@@ -283,17 +283,17 @@ export default function StuffDetail() {
         autoHeight: true,
         cellStyle: { justifyContent: 'center' },
         cellRenderer: (params) => {
-          let buttonStyle = ''
-          let buttonStyle2 = ''
+          let estimateDetailButtonStyle = ''
+          let docDownButtonStyle = ''
           if (params.value == null) {
-            buttonStyle = 'none'
-            buttonStyle2 = 'none'
+            estimateDetailButtonStyle = 'none'
+            docDownButtonStyle = 'none'
           } else {
             if (params?.data?.createSaleStoreId === 'T01' && session?.storeId !== 'T01') {
-              buttonStyle = 'none'
+              estimateDetailButtonStyle = 'none'
             }
             if (params?.data?.tempFlg === '1' || !params?.data?.docNo) {
-              buttonStyle2 = 'none'
+              docDownButtonStyle = 'none'
             }
           }
 
@@ -301,7 +301,7 @@ export default function StuffDetail() {
             <>
               <div className="grid-cell-btn">
                 <button
-                  style={{ display: buttonStyle }}
+                  style={{ display: estimateDetailButtonStyle }}
                   type="button"
                   className="grid-btn"
                   onClick={() => {
@@ -315,7 +315,7 @@ export default function StuffDetail() {
                   {getMessage('stuff.detail.planGrid.btn1')}
                 </button>
                 <button
-                  style={{ display: buttonStyle2 }}
+                  style={{ display: docDownButtonStyle }}
                   type="button"
                   className="grid-btn"
                   onClick={() => {

From ac1aa0378ce3645971015be6dd88d2416e05b7d6 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Mon, 17 Mar 2025 10:45:29 +0900
Subject: [PATCH 4/9] =?UTF-8?q?fix:=20popup=20spinner=20=EC=8B=AC=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/draggable/WithDraggable.jsx        |  5 ++
 src/components/footer/PromisePopup.jsx        | 71 +++++++++++++++++++
 src/store/popupAtom.js                        | 12 ++++
 3 files changed, 88 insertions(+)
 create mode 100644 src/components/footer/PromisePopup.jsx

diff --git a/src/components/common/draggable/WithDraggable.jsx b/src/components/common/draggable/WithDraggable.jsx
index 49552eac..9a51358c 100644
--- a/src/components/common/draggable/WithDraggable.jsx
+++ b/src/components/common/draggable/WithDraggable.jsx
@@ -2,9 +2,13 @@
 
 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()
@@ -25,6 +29,7 @@ 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>
       )}
diff --git a/src/components/footer/PromisePopup.jsx b/src/components/footer/PromisePopup.jsx
new file mode 100644
index 00000000..feb400e1
--- /dev/null
+++ b/src/components/footer/PromisePopup.jsx
@@ -0,0 +1,71 @@
+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>
+  )
+}
diff --git a/src/store/popupAtom.js b/src/store/popupAtom.js
index 8cba0bdc..72acaee5 100644
--- a/src/store/popupAtom.js
+++ b/src/store/popupAtom.js
@@ -27,3 +27,15 @@ export const contextPopupPositionState = atom({
   },
   dangerouslyAllowMutability: true,
 })
+
+/** 팝업 스피너 상태 */
+export const popSpinnerState = atom({
+  key: 'popSpinnerStore',
+  default: false,
+})
+
+/** 프로미스 팝업 상태 - 테스트용(삭제 예정) */
+export const promisePopupState = atom({
+  key: 'promisePopupStore',
+  default: false,
+})

From 4d19788c52e6a2bd45e76c3424c05d5de1af11eb Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Mon, 17 Mar 2025 11:10:13 +0900
Subject: [PATCH 5/9] =?UTF-8?q?#909=20-=20=EA=B0=80=EB=8C=80=20=EC=84=A4?=
 =?UTF-8?q?=EC=B9=98=20=ED=9B=84=20=EA=B2=AC=EC=A0=81=EC=84=9C=20=EB=B0=94?=
 =?UTF-8?q?=EB=A1=9C=EA=B0=80=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useEstimate.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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

From ec483a8bb8705bd364d1124efe4f03e016d71934 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?=
 <43837214+Minsiki@users.noreply.github.com>
Date: Mon, 17 Mar 2025 14:11:19 +0900
Subject: [PATCH 6/9] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/_modal.scss | 4305 +++++++++++++++++++---------------------
 1 file changed, 1998 insertions(+), 2307 deletions(-)

diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 58c6bc87..65b104b7 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,550 +4,531 @@ $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-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;
-  }
-  .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 {
-  position: relative;
-  padding: 24px;
-  .left-bar {
-    position: absolute;
+.modal-pop-wrap{
+    position: fixed;
     top: 0;
     left: 0;
-    width: 5px;
-    height: 100%;
-    background-color: #000;
-    cursor: pointer;
-  }
-  .right-bar {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 5px;
-    height: 100%;
-    background-color: #000;
-    cursor: pointer;
-  }
-  .modal-btn-wrap {
+    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 .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;
-    gap: 5px;
-    button {
-      flex: 1;
+    padding: 10px 24px;
+    background-color: #000;
+    // overflow: hidden;
+    cursor: pointer;
+    h1.title{
+        font-size: 13px;
+        color: $pop-color;
+        font-weight: 700;
     }
-    &.sub {
-      button {
-        flex: 1 1 auto;
-        padding: 0;
-      }
-      margin-bottom: 14px;
+    .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-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-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;
 }
 
-.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 {
+.modal-body{
+    position: relative;
+    padding: 24px;
+    .left-bar{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 5px;
+        height: 100%;
+        background-color: #000;
+        cursor: pointer;
+    }
+    .right-bar{
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 5px;
+        height: 100%;
+        background-color: #000;
+        cursor: pointer;
+    }
+    .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-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;
+}
+
+.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-check-form-block {
-  display: block;
-  > div {
-    margin-bottom: 10px;
-  }
-}
-.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;
     }
-    &:last-child {
-      margin-bottom: 0;
+}
+.grid-check-form-block{
+    display: block;
+    > div{
+        margin-bottom: 10px;
     }
-  }
-  .grid-option-block-form {
-    flex: 1;
-    .flex-ment {
-      position: relative;
-      padding-right: 70px;
-      flex: 1 1 auto;
-      span {
-        width: 70px;
-        &.absol {
-          width: fit-content;
-          position: absolute;
-          top: 50%;
-          right: 0;
-          transform: translateY(-50%);
+}
+.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%;
+                }
+            }
         }
-      }
-      .input-grid {
+        &:last-child{
+            margin-bottom: 0;
+        }
+    }
+    .grid-option-block-form{
         flex: 1;
-      }
+        .flex-ment{
+            position: relative;
+            padding-right: 70px;
+            flex: 1 1 auto;
+            span{
+                width: 70px;
+                &.absol{
+                    width: fit-content;
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    
+                }
+            }
+            .input-grid{
+                flex: 1;
+            }
+        }
     }
-  }
 }
-.select-form {
-  .sort-select {
-    width: 100%;
-  }
+.select-form{
+    .sort-select{width: 100%;}
 }
-.grid-select {
-  flex: 1;
-  height: 30px;
-  &.no-flx {
-    flex: unset;
-  }
-  .sort-select {
-    width: 100%;
-    background-color: #313131;
-    min-width: auto;
-    font-size: 12px;
-    border: none;
-    p {
-      font-size: 12px;
+.grid-select{
+    flex: 1;
+    height: 30px;
+    &.no-flx{
+        flex: unset;
     }
-    > ul {
-      border: none;
+    .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;
+    &.right{
+        p{
+            text-align: right;
+        }
+        ul{
+            li{
+                justify-content: flex-end;
+            }
+        }
     }
-    ul {
-      li {
-        justify-content: flex-end;
-      }
-    }
-  }
 }
-.grid-btn-wrap {
-  padding-top: 15px;
-  text-align: right;
-  button {
-    padding: 0 10px;
-  }
+.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
@@ -558,1984 +539,1694 @@ $alert-color: #101010;
 //     max-width: 250px;
 // }
 
-.pop-form-radio {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  &.place {
-    gap: 33px;
-    .outline-form {
-      span {
-        width: fit-content;
-      }
-      .input-grid {
-        width: 80px;
-      }
-    }
-  }
-}
-.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;
+    gap: 10px;
+    &.place{
+        gap: 33px;
+        .outline-form{
+            span{
+                width: fit-content;
+            }
+            .input-grid{
+                width: 80px;
+            }
+        }
     }
-    &:hover {
-      background-color: #ebebeb;
-    }
-  }
 }
-.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;
-        }
-      }
-      &.gray {
-        background-color: #535353;
-        border: 1px solid #9e9e9e;
-        &:hover {
-          background-color: #6b6b6b;
-        }
-      }
+.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;
+                }
+            }
+            &.gray{
+                background-color: #535353;
+                border: 1px solid #9e9e9e;
+                &:hover{
+                    background-color: #6b6b6b;
+                }
+            }
+        }
     }
-  }
 }
 
 // 지붕형상 설정
-.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;
-    justify-content: center;
-    width: 100%;
-    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;
-    transition: background-color 0.13s ease-in-out;
-    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;
-    }
-    &:hover {
-      background-color: #464545;
-    }
-  }
-}
-
-.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);
-        }
-      }
-    }
-    &:disabled {
-      color: $pop-color;
-      border: 1px solid #646464;
-      background-color: transparent;
-      opacity: 0.5;
-      &.act,
-      &:hover {
-        color: $pop-color;
-        border: 1px solid #646464;
-        background-color: transparent;
-        i {
-          &.allocation01 {
-            background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
-          }
-          &.allocation02 {
-            background-image: url(../../public/static/images/canvas/allocation_icon02_white.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;
-  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;
+            }
+        }
     }
-  }
-  .object-size-input {
-    margin-left: auto;
-    .eaves-keraba-th {
-      position: relative;
-      .object-input-num {
-        position: absolute;
-        top: 7px;
-        left: -20px;
-        font-size: 13px;
-      }
+}
+.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;
+        justify-content: center;
+        width: 100%;
+        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;
+        transition: background-color .13s ease-in-out;
+        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;
+        }
+        &:hover{
+            background-color: #464545;
+        }
+    }
 }
 
-// 각 변 속성 변경
-.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);
+                }
+            }
+        }
+        &:disabled{
+            color: $pop-color;
+            border: 1px solid #646464;
+            background-color: transparent;
+            opacity: 0.5;
+            &.act,
+            &:hover{
+                color: $pop-color;
+                border: 1px solid #646464;
+                background-color: transparent;
+                i{
+                    &.allocation01{
+                        background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
+                    }
+                    &.allocation02{
+                        background-image: url(../../public/static/images/canvas/allocation_icon02_white.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;
+    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%);
+        }
+    }
+    .object-size-input{
+        margin-left: auto;
+        .eaves-keraba-th{
+            position: relative;
+            .object-input-num{
+                position: absolute;
+                top: 7px;
+                left: -20px;
+                font-size: 13px;
+            }
+        }
+    }
+}
+
+// 표시변경
+.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;
-  &::-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;
-    }
-  }
-}
-.circuit-title-sel {
-  padding-bottom: 14px;
-  .outline-form {
-    span {
-      color: #62c207;
-    }
-    .grid-select {
-      .sort-select {
-        border: 1px solid #4e9e04;
-        background-color: #1a3104;
-        p {
-          line-height: 27px;
-        }
-        .select-item-wrap {
-          background-color: #1a3104;
-          border: 1px solid #4e9e04;
-          .select-item:hover {
-            background-color: #294e07;
-          }
-          &::-webkit-scrollbar {
-            width: 2px;
-            background-color: transparent;
-          }
-          &::-webkit-scrollbar-thumb {
-            background-color: #fff;
-            border-radius: 10px;
-          }
-          &::-webkit-scrollbar-track {
-            background-color: transparent;
-          }
-        }
-      }
-    }
-  }
+    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;
+    &::-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-title-sel{
+    padding-bottom: 14px;
+    .circuit-title{
+        font-size: 12px;
+        color: #62C207;
+        margin-bottom: 5px;
+    }
+    .circuit-sel-wrap{
+        display: flex;
+        align-items: center;
+        .grid-select{
+            .sort-select{
+                border: 1px solid #4E9E04;
+                background-color: #1A3104;
+                p{
+                    line-height: 27px;
+                }
+                .select-item-wrap{
+                    background-color: #1A3104;
+                    border: 1px solid #4E9E04;
+                    .select-item:hover{
+                        background-color: #294e07;
+                    }
+                    &::-webkit-scrollbar {
+                        width: 2px;
+                        background-color: transparent;
+                        
+                    }
+                    &::-webkit-scrollbar-thumb {
+                        background-color: #fff;
+                        border-radius: 10px;
+                    }
+                    &::-webkit-scrollbar-track {
+                        background-color: transparent;
+                    }
+                }
+            }
+        } 
+    }
+}
+
+.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: 0;
-      }
-    }
-  }
-}
-.roof-module-tab2-overflow {
-  max-height: 650px;
-  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: 0;
+            }
         }
-      }
     }
-  }
 }
-.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: 650px;
+    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;
+        }
+    }
 }
 
-.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);
+.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;
     }
-    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);
+    .outline-form{
+        justify-content: flex-end;
     }
-    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{

From 9c6b96efa12e1a43977061b4e91eaaeeefc119b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?=
 <43837214+Minsiki@users.noreply.github.com>
Date: Mon, 17 Mar 2025 14:12:04 +0900
Subject: [PATCH 7/9] =?UTF-8?q?Option=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../circuitTrestle/CircuitTrestleSetting.jsx  |  16 +-
 .../step/PowerConditionalSelect.jsx           |   2 +-
 .../modal/circuitTrestle/step/StepUp.jsx      | 158 ++++++++++++------
 3 files changed, 121 insertions(+), 55 deletions(-)

diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
index bc31465a..00f3598f 100644
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@@ -51,7 +51,8 @@ export default function CircuitTrestleSetting({ id }) {
   // const { trigger: setCircuitData } = useCanvasPopupStatusController(4)
   // const [stepUpListData, setStepUpListData] = useRecoilState(stepUpListDataState)
   const [stepUpListData, setStepUpListData] = useState([])
-  const [seletedOption, setSeletedOption] = useState(null)
+  const [seletedMainOption, setSeletedMainOption] = useState(null)
+  const [seletedSubOption, setSeletedSubOption] = useState(null)
   const { setModuleStatisticsData } = useCircuitTrestle()
   const { handleCanvasToPng } = useImgLoader()
 
@@ -453,6 +454,7 @@ export default function CircuitTrestleSetting({ id }) {
     allocationType,
     circuitAllocationType,
     setCircuitAllocationType,
+    selectedMaker,
     selectedModels,
     setSelectedModels,
     getSelectedPcsItemList,
@@ -463,8 +465,10 @@ export default function CircuitTrestleSetting({ id }) {
     onValuesSelected: handleStepUpValuesSelected, // 선택된 값들을 처리하는 함수
     stepUpListData,
     setStepUpListData,
-    seletedOption,
-    setSeletedOption,
+    seletedMainOption,
+    setSeletedMainOption,
+    seletedSubOption,
+    setSeletedSubOption,
     getModuleList,
     setModuleStatisticsData,
   }
@@ -474,12 +478,12 @@ export default function CircuitTrestleSetting({ id }) {
     return stepUpListData[0].pcsItemList.map((item) => {
       return item.serQtyList
         .filter((serQty) => serQty.selected)
-        .map((serQty) => {
+        .map((serQty, index) => {
           return {
             pcsMkrCd: item.pcsMkrCd,
             pcsSerCd: item.pcsSerCd,
             pcsItemId: item.itemId,
-            pscOptCd: seletedOption.code,
+            pscOptCd: index === 0 ? seletedMainOption.code : seletedSubOption.code,
             paralQty: serQty.paralQty,
             connections: item.connList?.length
               ? [
@@ -489,7 +493,7 @@ export default function CircuitTrestleSetting({ id }) {
                 ]
               : [],
           }
-        })[0]
+        })
     })
   }
 
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
index b48ecffd..f8d1d530 100644
--- a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
+++ b/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'
 
-const PCS_MKR_MULTI_TYPE = {
+export const PCS_MKR_MULTI_TYPE = {
   MULTI: 'MULTI',
   SINGLE_P: 'SINGLE-P',
   SINGLE_N: 'SINGLE-N',
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
index 71691717..d776476b 100644
--- a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
@@ -15,6 +15,7 @@ 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 {
@@ -22,8 +23,11 @@ export default function StepUp(props) {
     allocationType,
     stepUpListData,
     setStepUpListData,
-    seletedOption,
-    setSeletedOption,
+    seletedMainOption,
+    setSeletedMainOption,
+    seletedSubOption,
+    setSeletedSubOption,
+    selectedMaker,
     selectedModels,
     setSelectedModels,
     getSelectedPcsItemList,
@@ -42,17 +46,14 @@ 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') {
@@ -79,6 +80,11 @@ export default function StepUp(props) {
   /**
    * PCS 자동 승압설정 정보 조회
    */
+
+  const isMultiOptions = () => {
+    return selectedModels.some((model) => model.pcsSerParallelYn === 'Y')
+  }
+
   const fetchAutoStepUpData = async () => {
     try {
       const params = {
@@ -87,7 +93,6 @@ export default function StepUp(props) {
         roofSurfaceList: props.getRoofSurfaceList() /** 지붕면 목록 */,
         pcsItemList: props.getSelectedPcsItemList() /** PCS 아이템 목록 */,
       }
-
       /** 회로 구성 가능 여부 체크 통과 시 승압설정 정보 조회 */
       getPcsVoltageStepUpList(params).then((res) => {
         if (res?.result.resultCode === 'S' && res?.data) {
@@ -98,12 +103,29 @@ export default function StepUp(props) {
           setStepUpListData(stepUpListData)
 
           /** PCS 옵션 조회 */
-          const formattedOptCodes = formatOptionCodes(res.data.optionList)
-          setOptCodes(formattedOptCodes)
-          setSeletedOption(formattedOptCodes[0])
+          // const formattedOptCodes = formatOptionCodes(res.data.optionList)
+          // setOptCodes(formattedOptCodes)
+          // setSeletedOption(formattedOptCodes[0])
 
           /** 캔버스에 회로 정보 적용 */
-          stepUpListData[0].pcsItemList.forEach((pcsItem) => {
+          // 병설일때 pcs 있으면 setSubOpsions, 없으면 setMainOptions
+          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) => {
@@ -165,12 +187,6 @@ 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)
 
@@ -208,6 +224,21 @@ 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: [
@@ -234,9 +265,9 @@ export default function StepUp(props) {
           setStepUpListData(stepUpListData)
 
           /** PCS 옵션 조회 */
-          const formattedOptCodes = formatOptionCodes(res.data.optionList)
-          setOptCodes(formattedOptCodes)
-          setSeletedOption(formattedOptCodes[0])
+          // const formattedOptCodes = formatOptionCodes(res.data.optionList)
+          // setOptCodes(formattedOptCodes)
+          // setSeletedOption(formattedOptCodes[0])
         }
       })
     } catch (error) {
@@ -249,9 +280,9 @@ export default function StepUp(props) {
    */
   const formatOptionCodes = (optionList = []) => {
     return optionList?.map((opt) => ({
-      code: opt.pcsOptCd ? opt.pcsOptCd : '',
-      name: opt.pcsOptNm ? opt.pcsOptNm : '',
-      nameJp: opt.pcsOptNmJp ? opt.pcsOptNmJp : '',
+      code: opt.pcsOptCd ?? '',
+      name: opt.pcsOptNm ?? '',
+      nameJp: opt.pcsOptNmJp ?? '',
     }))
   }
 
@@ -274,9 +305,9 @@ export default function StepUp(props) {
    */
   const formatOptionList = (optionList = []) => {
     return optionList?.map((option) => ({
-      pcsOptCd: option.pcsOptCd ? option.pcsOptCd : '',
-      pcsOptNm: option.pcsOptNm ? option.pcsOptNm : '',
-      pcsOptNmJp: option.pcsOptNmJp ? option.pcsOptNmJp : '',
+      pcsOptCd: option.pcsOptCd ?? '',
+      pcsOptNm: option.pcsOptNm ?? '',
+      pcsOptNmJp: option.pcsOptNmJp ?? '',
     }))
   }
 
@@ -293,6 +324,7 @@ export default function StepUp(props) {
       uniqueIndex: `${item.itemId}_${index}`, // 고유 식별자 추가(동일한 PCS를 구분)
       connList: formatConnList(item.connList),
       serQtyList: formatSerQtyList(item.serQtyList),
+      optionList: item.optionList ?? [],
     }))
   }
 
@@ -303,12 +335,12 @@ export default function StepUp(props) {
     if (!connList) return [] // null인 경우 빈 배열 반환
 
     return connList?.map((conn) => ({
-      connAllowCur: conn.connAllowCur ? conn.connAllowCur : 0,
-      connMaxParalCnt: conn.connMaxParalCnt ? conn.connMaxParalCnt : 0,
-      goodsNo: conn.goodsNo ? conn.goodsNo : '',
-      itemId: conn.itemId ? conn.itemId : '',
-      itemNm: conn.itemNm ? conn.itemNm : '',
-      vstuParalCnt: conn.vstuParalCnt ? conn.vstuParalCnt : 0,
+      connAllowCur: conn.connAllowCur ?? 0,
+      connMaxParalCnt: conn.connMaxParalCnt ?? 0,
+      goodsNo: conn.goodsNo ?? '',
+      itemId: conn.itemId ?? '',
+      itemNm: conn.itemNm ?? '',
+      vstuParalCnt: conn.vstuParalCnt ?? 0,
     }))
   }
 
@@ -318,10 +350,10 @@ export default function StepUp(props) {
   const formatSerQtyList = (serQtyList = []) => {
     return serQtyList?.map((qty) => ({
       code: uuidv4(),
-      serQty: qty.serQty ? qty.serQty : 0,
-      paralQty: qty.paralQty ? qty.paralQty : 0,
-      rmdYn: qty.rmdYn ? qty.rmdYn : 'N',
-      usePossYn: qty.usePossYn ? qty.usePossYn : 'Y',
+      serQty: qty.serQty ?? 0,
+      paralQty: qty.paralQty ?? 0,
+      rmdYn: qty.rmdYn ?? 'N',
+      usePossYn: qty.usePossYn ?? 'Y',
       roofSurfaceList: formatRoofSurfaceList(qty.roofSurfaceList),
       selected: qty.rmdYn === 'Y',
     }))
@@ -333,8 +365,8 @@ export default function StepUp(props) {
   const formatRoofSurfaceList = (roofSurfaceList = []) => {
     return roofSurfaceList?.map((rsf) => ({
       moduleList: formatModuleList(rsf.moduleList),
-      roofSurface: rsf.roofSurface ? rsf.roofSurface : '',
-      roofSurfaceId: rsf.roofSurfaceId ? rsf.roofSurfaceId : '',
+      roofSurface: rsf.roofSurface ?? '',
+      roofSurfaceId: rsf.roofSurfaceId ?? '',
       roofSurfaceIncl: rsf.roofSurfaceIncl ? +rsf.roofSurfaceIncl : '',
     }))
   }
@@ -344,10 +376,10 @@ export default function StepUp(props) {
    */
   const formatModuleList = (moduleList = []) => {
     return moduleList?.map((module) => ({
-      circuit: module.circuit ? module.circuit : '',
-      itemId: module.itemId ? module.itemId : '',
-      pcsItemId: module.pcsItemId ? module.pcsItemId : '',
-      uniqueId: module.uniqueId ? module.uniqueId : '',
+      circuit: module.circuit ?? '',
+      itemId: module.itemId ?? '',
+      pcsItemId: module.pcsItemId ?? '',
+      uniqueId: module.uniqueId ?? '',
     }))
   }
 
@@ -416,9 +448,9 @@ export default function StepUp(props) {
             setStepUpListData(stepUpListData)
 
             /** PCS 옵션 조회 */
-            const formattedOptCodes = formatOptionCodes(res.data.optionList)
-            setOptCodes(formattedOptCodes)
-            setSeletedOption(formattedOptCodes[0])
+            // const formattedOptCodes = formatOptionCodes(res.data.optionList)
+            // setOptCodes(formattedOptCodes)
+            // setSeletedOption(formattedOptCodes[0])
           } else {
             swalFire({ text: getMessage('common.message.send.error') })
           }
@@ -532,7 +564,37 @@ export default function StepUp(props) {
     <>
       <div className="properties-setting-wrap outer">
         <div className="circuit-title-sel">
-          <div className="outline-form">
+          <p className="circuit-title">{getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}</p>
+          <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>
@@ -551,7 +613,7 @@ export default function StepUp(props) {
                 />
               </div>
             )}
-          </div>
+          </div> */}
         </div>
 
         <div className="slope-wrap">

From 55067cb4f8a4b9144041e88099d8dcd6e6c7bcca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?=
 <43837214+Minsiki@users.noreply.github.com>
Date: Mon, 17 Mar 2025 14:38:11 +0900
Subject: [PATCH 8/9] =?UTF-8?q?Option=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../circuitTrestle/CircuitTrestleSetting.jsx  | 46 +++++++++++++++++--
 src/hooks/module/useTrestle.js                | 14 +++---
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
index 00f3598f..618a65d2 100644
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@@ -475,15 +475,17 @@ export default function CircuitTrestleSetting({ id }) {
 
   // 승압설정 목록 조회
   const getStepUpListData = () => {
-    return stepUpListData[0].pcsItemList.map((item) => {
+    const pcs = []
+    console.log(stepUpListData)
+    stepUpListData[0].pcsItemList.map((item, index) => {
       return item.serQtyList
         .filter((serQty) => serQty.selected)
-        .map((serQty, index) => {
-          return {
+        .forEach((serQty) => {
+          pcs.push({
             pcsMkrCd: item.pcsMkrCd,
             pcsSerCd: item.pcsSerCd,
             pcsItemId: item.itemId,
-            pscOptCd: index === 0 ? seletedMainOption.code : seletedSubOption.code,
+            pscOptCd: getPcsOptCd(index),
             paralQty: serQty.paralQty,
             connections: item.connList?.length
               ? [
@@ -492,9 +494,43 @@ export default function CircuitTrestleSetting({ id }) {
                   },
                 ]
               : [],
-          }
+          })
+          // 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 = () => {
diff --git a/src/hooks/module/useTrestle.js b/src/hooks/module/useTrestle.js
index 4f0bb116..48ad5913 100644
--- a/src/hooks/module/useTrestle.js
+++ b/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) => {
-      if (index !== 0) {
-        if (surface.pcses) {
-          pcses.concat(surface.pcses)
-        }
-      }
-    })
+    // surfaces.forEach((surface, index) => {
+    //   if (index !== 0) {
+    //     if (surface.pcses) {
+    //       pcses.concat(surface.pcses)
+    //     }
+    //   }
+    // })
 
     const allModules = surfaces.map((surface) => surface.modules).flat()
     // 모듈 파라미터 생성

From 100744ad9df5f5d9ac0d771c54b10d8e287b05ea Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Mon, 17 Mar 2025 15:02:58 +0900
Subject: [PATCH 9/9] =?UTF-8?q?QPOLYGON=20=EA=B7=B8=EB=A3=B9=EA=B0=9D?=
 =?UTF-8?q?=EC=B2=B4=20=EC=B9=98=EC=88=98=20=EC=82=AD=EC=A0=9C=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/fabric/QPolygon.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index 85bb03dd..f19687aa 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -136,8 +136,20 @@ 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)
+              })
+            }
+          })
+        }
       })
     })