From 352980870bfd99416b31571a786dfb3d2fb1c731 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Fri, 17 Jan 2025 13:33:11 +0900
Subject: [PATCH 1/7] feat: Add modal footer handle

---
 .../common/color-picker/ColorPickerModal.jsx  |    5 +-
 .../common/draggable/WithDraggable.jsx        |    2 +-
 src/components/common/font/FontSetting.jsx    |    5 +-
 src/components/floor-plan/modal/Slope.jsx     |    3 +-
 .../modal/auxiliary/AuxiliaryDrawing.jsx      |    3 +-
 .../modal/auxiliary/AuxiliaryEdit.jsx         |    3 +-
 .../modal/auxiliary/AuxiliarySize.jsx         |    3 +-
 .../floor-plan/modal/basic/BasicSetting.jsx   |    3 +-
 .../circuitTrestle/CircuitTrestleSetting.jsx  |    3 +-
 .../dimensionLine/DimensionLineSetting.jsx    |    3 +-
 .../floor-plan/modal/distance/Distance.jsx    |    3 +-
 .../modal/eavesGable/EavesGableEdit.jsx       |    3 +-
 .../flowDirection/FlowDirectionSetting.jsx    |    3 +-
 .../floor-plan/modal/grid/DotLineGrid.jsx     |    3 +-
 .../floor-plan/modal/grid/GridCopy.jsx        |    3 +-
 .../floor-plan/modal/grid/GridMove.jsx        |    3 +-
 .../lineProperty/LinePropertySetting.jsx      |    3 +-
 .../modal/module/CircuitNumberEdit.jsx        |    3 +-
 .../floor-plan/modal/module/PanelEdit.jsx     |    3 +-
 .../modal/module/column/ColumnInsert.jsx      |    3 +-
 .../modal/module/column/ColumnRemove.jsx      |    3 +-
 .../floor-plan/modal/module/row/RowInsert.jsx |    3 +-
 .../floor-plan/modal/module/row/RowRemove.jsx |    3 +-
 .../modal/movement/MovementSetting.jsx        |    3 +-
 .../floor-plan/modal/object/DormerOffset.jsx  |    3 +-
 .../floor-plan/modal/object/ObjectSetting.jsx |    3 +-
 .../modal/object/RoofMaterialSetting.jsx      |    3 +-
 .../floor-plan/modal/object/SizeSetting.jsx   |    3 +-
 .../outerlinesetting/PropertiesSetting.jsx    |    3 +-
 .../outerlinesetting/WallLineSetting.jsx      |    3 +-
 .../placementShape/PlacementShapeDrawing.jsx  |    3 +-
 .../placementShape/PlacementShapeSetting.jsx  |   17 +-
 .../PlacementSurfaceSetting.jsx               |    3 +-
 .../roofAllocation/ActualSizeSetting.jsx      |    3 +-
 .../ContextRoofAllocationSetting.jsx          |    3 +-
 .../roofAllocation/RoofAllocationSetting.jsx  |    3 +-
 .../roofShape/RoofShapePassivitySetting.jsx   |    3 +-
 .../modal/roofShape/RoofShapeSetting.jsx      |    3 +-
 .../modal/setting01/SettingModal01.jsx        |    3 +-
 .../dimensionLine/DimensionLineSetting.jsx    |    3 +-
 .../setting01/planSize/PlanSizeSetting.jsx    |    3 +-
 .../wallLineOffset/WallLineOffsetSetting.jsx  |    3 +-
 src/hooks/useAxios.js                         |    4 +-
 src/styles/_modal.scss                        | 4081 +++++++++--------
 src/util/common-utils.js                      |   15 +
 45 files changed, 2253 insertions(+), 1990 deletions(-)

diff --git a/src/components/common/color-picker/ColorPickerModal.jsx b/src/components/common/color-picker/ColorPickerModal.jsx
index 66c0e0b7..0f3b1b99 100644
--- a/src/components/common/color-picker/ColorPickerModal.jsx
+++ b/src/components/common/color-picker/ColorPickerModal.jsx
@@ -33,9 +33,9 @@ export default function ColorPickerModal(props) {
   }, [isShow])
 
   return (
-    <WithDraggable isShow={true} pos={pos ?? ''}>
+    <WithDraggable isShow={true} pos={pos ?? ''} handle=".modal-handle">
       <div className={`modal-pop-wrap lr mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.color.picker.title')}</h1>
           <button
             className="modal-close"
@@ -78,6 +78,7 @@ export default function ColorPickerModal(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/common/draggable/WithDraggable.jsx b/src/components/common/draggable/WithDraggable.jsx
index 76656837..732d8ff7 100644
--- a/src/components/common/draggable/WithDraggable.jsx
+++ b/src/components/common/draggable/WithDraggable.jsx
@@ -20,7 +20,7 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
         <Draggable
           position={{ x: position.x, y: position.y }}
           onDrag={(e, data) => handleOnDrag(e, data)}
-          handle={handle === '' ? '.modal-head' : handle}
+          handle={handle === '' ? '.modal-handle' : handle}
         >
           {children}
         </Draggable>
diff --git a/src/components/common/font/FontSetting.jsx b/src/components/common/font/FontSetting.jsx
index 15f1146a..26d07ea7 100644
--- a/src/components/common/font/FontSetting.jsx
+++ b/src/components/common/font/FontSetting.jsx
@@ -67,9 +67,9 @@ export default function FontSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos} handle=".modal-handle">
       <div className={`modal-pop-wrap lrr mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.font')}</h1>
           <button
             className="modal-close"
@@ -133,6 +133,7 @@ export default function FontSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/Slope.jsx b/src/components/floor-plan/modal/Slope.jsx
index 42b8be64..58ccec4d 100644
--- a/src/components/floor-plan/modal/Slope.jsx
+++ b/src/components/floor-plan/modal/Slope.jsx
@@ -15,7 +15,7 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -45,6 +45,7 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
index 609ff975..b85d76c6 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
@@ -126,7 +126,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -160,6 +160,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
index 07fc9e46..e0f3522b 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
@@ -46,7 +46,7 @@ export default function AuxiliaryEdit(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -111,6 +111,7 @@ export default function AuxiliaryEdit(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
index e984be57..1afdd7ec 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
@@ -14,7 +14,7 @@ export default function AuxiliarySize(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -63,6 +63,7 @@ export default function AuxiliarySize(props) {
             <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx
index 392c1eda..49aabd0d 100644
--- a/src/components/floor-plan/modal/basic/BasicSetting.jsx
+++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx
@@ -51,7 +51,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lx-2`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -115,6 +115,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
             )}
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
index 38ae2e89..a30e506b 100644
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@@ -83,7 +83,7 @@ export default function CircuitTrestleSetting({ id }) {
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap l-2`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -131,6 +131,7 @@ export default function CircuitTrestleSetting({ id }) {
             </div>
           )}
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
index 59c0ead4..1ec3684e 100644
--- a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
@@ -85,7 +85,7 @@ export default function DimensionLineSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('contextmenu.display.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -141,6 +141,7 @@ export default function DimensionLineSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/distance/Distance.jsx b/src/components/floor-plan/modal/distance/Distance.jsx
index ac65c1e5..d37302b6 100644
--- a/src/components/floor-plan/modal/distance/Distance.jsx
+++ b/src/components/floor-plan/modal/distance/Distance.jsx
@@ -18,7 +18,7 @@ export default function Distance(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.distance')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -68,6 +68,7 @@ export default function Distance(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
index 2b5a7079..56e88ba8 100644
--- a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
+++ b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
@@ -40,7 +40,7 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -62,6 +62,7 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
             {type === TYPES.SHED && <Shed {...shedProps} />}
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
index 18eef849..14c40310 100644
--- a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
+++ b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
@@ -65,7 +65,7 @@ export default function FlowDirectionSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ml mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -176,6 +176,7 @@ export default function FlowDirectionSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
index da41fdcf..c19f4c26 100644
--- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx
+++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
@@ -179,7 +179,7 @@ export default function DotLineGrid(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ssm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
           <button
             className="modal-close"
@@ -293,6 +293,7 @@ export default function DotLineGrid(props) {
           </div>
         </div>
       </div>
+      <div className="modal-foot modal-handle"></div>
     </WithDraggable>
   )
 }
diff --git a/src/components/floor-plan/modal/grid/GridCopy.jsx b/src/components/floor-plan/modal/grid/GridCopy.jsx
index 2f768406..0d34b3d4 100644
--- a/src/components/floor-plan/modal/grid/GridCopy.jsx
+++ b/src/components/floor-plan/modal/grid/GridCopy.jsx
@@ -22,7 +22,7 @@ export default function GridCopy(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.grid.copy')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -77,6 +77,7 @@ export default function GridCopy(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/grid/GridMove.jsx b/src/components/floor-plan/modal/grid/GridMove.jsx
index f853f135..e28d8564 100644
--- a/src/components/floor-plan/modal/grid/GridMove.jsx
+++ b/src/components/floor-plan/modal/grid/GridMove.jsx
@@ -75,7 +75,7 @@ export default function GridMove(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.grid.move')} </h1>
           <button className="modal-close" onClick={handleClose}>
             닫기
@@ -156,6 +156,7 @@ export default function GridMove(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
index 13a00b06..1ad351eb 100644
--- a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
+++ b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
@@ -52,7 +52,7 @@ export default function LinePropertySetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('contextmenu.line.property.edit')} </h1>
           <button className="modal-close" onClick={() => handleClosePopup()}>
             닫기
@@ -91,6 +91,7 @@ export default function LinePropertySetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
index 3157fe51..62a0baaf 100644
--- a/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
+++ b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
@@ -16,7 +16,7 @@ export default function CircuitNumberEdit(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -42,6 +42,7 @@ export default function CircuitNumberEdit(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/module/PanelEdit.jsx b/src/components/floor-plan/modal/module/PanelEdit.jsx
index a6d1d4f9..8e1f9fac 100644
--- a/src/components/floor-plan/modal/module/PanelEdit.jsx
+++ b/src/components/floor-plan/modal/module/PanelEdit.jsx
@@ -84,7 +84,7 @@ export default function PanelEdit(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">
             {getMessage([PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) ? 'modal.move.setting' : 'modal.copy.setting')}{' '}
           </h1>
@@ -139,6 +139,7 @@ export default function PanelEdit(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
index 56f9a66c..03b5b4e0 100644
--- a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
+++ b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
@@ -26,7 +26,7 @@ export default function ColumnInsert(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -105,6 +105,7 @@ export default function ColumnInsert(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/module/column/ColumnRemove.jsx b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx
index a18d7982..95cdd942 100644
--- a/src/components/floor-plan/modal/module/column/ColumnRemove.jsx
+++ b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx
@@ -29,7 +29,7 @@ export default function ColumnRemove(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -115,6 +115,7 @@ export default function ColumnRemove(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/module/row/RowInsert.jsx b/src/components/floor-plan/modal/module/row/RowInsert.jsx
index 613fb180..fa3c2fff 100644
--- a/src/components/floor-plan/modal/module/row/RowInsert.jsx
+++ b/src/components/floor-plan/modal/module/row/RowInsert.jsx
@@ -26,7 +26,7 @@ export default function RowInsert(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.row.insert')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -105,6 +105,7 @@ export default function RowInsert(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/module/row/RowRemove.jsx b/src/components/floor-plan/modal/module/row/RowRemove.jsx
index bb1f41cf..70c57c24 100644
--- a/src/components/floor-plan/modal/module/row/RowRemove.jsx
+++ b/src/components/floor-plan/modal/module/row/RowRemove.jsx
@@ -29,7 +29,7 @@ export default function RowRemove(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.row.remove')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -115,6 +115,7 @@ export default function RowRemove(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/movement/MovementSetting.jsx b/src/components/floor-plan/modal/movement/MovementSetting.jsx
index 416afba8..a4dcf3fc 100644
--- a/src/components/floor-plan/modal/movement/MovementSetting.jsx
+++ b/src/components/floor-plan/modal/movement/MovementSetting.jsx
@@ -18,7 +18,7 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -43,6 +43,7 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/object/DormerOffset.jsx b/src/components/floor-plan/modal/object/DormerOffset.jsx
index 191a94ea..a1534891 100644
--- a/src/components/floor-plan/modal/object/DormerOffset.jsx
+++ b/src/components/floor-plan/modal/object/DormerOffset.jsx
@@ -42,7 +42,7 @@ export default function DormerOffset(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{title}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -103,6 +103,7 @@ export default function DormerOffset(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/object/ObjectSetting.jsx b/src/components/floor-plan/modal/object/ObjectSetting.jsx
index ee6ab256..97cd02f8 100644
--- a/src/components/floor-plan/modal/object/ObjectSetting.jsx
+++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx
@@ -77,7 +77,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -109,6 +109,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx b/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx
index 015ace3e..815175ce 100644
--- a/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx
+++ b/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx
@@ -23,7 +23,7 @@ export default function RoofMaterialSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.roof.material.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -39,6 +39,7 @@ export default function RoofMaterialSetting(props) {
             <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/object/SizeSetting.jsx b/src/components/floor-plan/modal/object/SizeSetting.jsx
index 3466e2ed..ebb925a6 100644
--- a/src/components/floor-plan/modal/object/SizeSetting.jsx
+++ b/src/components/floor-plan/modal/object/SizeSetting.jsx
@@ -47,7 +47,7 @@ export default function SizeSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ssm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.size.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -95,6 +95,7 @@ export default function SizeSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
index 6c2c8d3f..86724267 100644
--- a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
@@ -10,7 +10,7 @@ export default function PropertiesSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ssm`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
           <button className="modal-close" onClick={() => closeModal(id)}>
             닫기
@@ -38,6 +38,7 @@ export default function PropertiesSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
index 70ff2150..84107dae 100644
--- a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
@@ -116,7 +116,7 @@ export default function WallLineSetting(props) {
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap r mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}></button>
         </div>
@@ -184,6 +184,7 @@ export default function WallLineSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
index 304d0169..fd435b8b 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
@@ -123,7 +123,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -159,6 +159,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 66fa021e..844cb87e 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -56,25 +56,24 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   ]
 
   // 데이터를 최초 한 번만 조회
-  // useEffect(() => {    
+  // useEffect(() => {
   //   if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return
-  //   const raftCodeList = findCommonCode('203800')    
+  //   const raftCodeList = findCommonCode('203800')
   //   setRaftCodes(raftCodeList)
   //   console.log('🚀 ~ useEffect ~ >>>>>>>>>>>>> raftCodeList 11 :', raftCodeList)
-        
-    
+
   //   if (addedRoofs[0].roofAngleSet && addedRoofs[0].roofAngleSet?.length > 0) {
   //     setCurrentRoof({ ...currentRoof, roofSizeSet: String(addedRoofs[0].roofSizeSet), roofAngleSet: addedRoofs[0].roofAngleSet })
   //   } else if (basicSetting.roofAngleSet && basicSetting.roofAngleSet?.length > 0) {
   //     setCurrentRoof({ ...currentRoof, roofSizeSet: String(basicSetting.roofSizeSet), roofAngleSet: basicSetting.roofAngleSet })
-  //   }    
+  //   }
   // }, [])
 
   useEffect(() => {
     if (addedRoofs.length > 0) {
       const raftCodeList = findCommonCode('203800')
       setRaftCodes(raftCodeList)
-      
+
       setCurrentRoof({ ...addedRoofs[0] })
     }
   }, [addedRoofs])
@@ -182,7 +181,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ll mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -349,7 +348,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                                 options={raftCodes}
                                 ref={roofRef.rafter}
                                 title={
-                                  raftCodes?.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft)).clCodeNm
+                                  raftCodes?.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft))
+                                    .clCodeNm
                                 }
                                 value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft}
                                 onChange={(e) => handleRafterChange(e.clCode)}
@@ -423,6 +423,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
         </div>
         {showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}
         {showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />}
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
index 431e0f85..7fc56d57 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
@@ -242,7 +242,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lr-2`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -290,6 +290,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
             </div>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx
index edca1208..d9456bbd 100644
--- a/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx
@@ -63,7 +63,7 @@ export default function ActualSizeSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ssm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.actual.size.setting')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -116,6 +116,7 @@ export default function ActualSizeSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
index 1d5bc188..5bfad3e4 100644
--- a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
@@ -45,7 +45,7 @@ export default function ContextRoofAllocationSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lr mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -214,6 +214,7 @@ export default function ContextRoofAllocationSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
index 4118db79..0142a329 100644
--- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
@@ -49,7 +49,7 @@ export default function RoofAllocationSetting(props) {
       <div className={`modal-pop-wrap lr mount`}>
         {currentRoofList && (
           <>
-            <div className="modal-head">
+            <div className="modal-head modal-handle">
               <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
               <button className="modal-close" onClick={() => closePopup(id)}>
                 닫기
@@ -235,6 +235,7 @@ export default function RoofAllocationSetting(props) {
             </div>
           </>
         )}
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
index 090eec0a..b47d2356 100644
--- a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
@@ -31,7 +31,7 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 }
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxm`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -67,6 +67,7 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 }
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
index b43bdd18..1efbb767 100644
--- a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
@@ -90,7 +90,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lr mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.roof.shape.setting')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -120,6 +120,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
index f5e6e3ca..0ccd337a 100644
--- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx
+++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
@@ -75,7 +75,7 @@ export default function SettingModal01(props) {
     <>
       <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }}>
         <div className={`modal-pop-wrap sm mount`}>
-          <div className="modal-head">
+          <div className="modal-head modal-handle">
             <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
             <button className="modal-close" onClick={() => closePopup(id, true)}>
               닫기
@@ -100,6 +100,7 @@ export default function SettingModal01(props) {
             {buttonAct === 2 && <SecondOption {...secondProps} />}
             {buttonAct === 3 && <GridOption {...gridProps} />}
           </div>
+          <div className="modal-foot modal-handle"></div>
         </div>
       </WithDraggable>
     </>
diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
index 571741ed..9aae056b 100644
--- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
@@ -192,7 +192,7 @@ export default function DimensionLineSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
           <button
             className="modal-close"
@@ -258,6 +258,7 @@ export default function DimensionLineSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
index 0691046d..708897c0 100644
--- a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
@@ -57,7 +57,7 @@ export default function PlanSizeSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xsm mount`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</h1>
           <button
             className="modal-close"
@@ -104,6 +104,7 @@ export default function PlanSizeSetting(props) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
index 0edafff9..5e01918d 100644
--- a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
+++ b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
@@ -41,7 +41,7 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
-        <div className="modal-head">
+        <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
@@ -66,6 +66,7 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
             </button>
           </div>
         </div>
+        <div className="modal-foot modal-handle"></div>
       </div>
     </WithDraggable>
   )
diff --git a/src/hooks/useAxios.js b/src/hooks/useAxios.js
index 35c90a87..b4b9652d 100644
--- a/src/hooks/useAxios.js
+++ b/src/hooks/useAxios.js
@@ -97,13 +97,11 @@ export function useAxios(lang = '') {
 
   const getFetcher = async (url) => {
     const res = await get({ url })
-    console.log('🚀 ~ getFetcher ~ res:', res)
     return res
   }
 
-  const postFetcher = async (url, { arg }) => {
+  const postFetcher = async (url, arg) => {
     const res = await post({ url, data: arg })
-    console.log('🚀 ~ postFetcher ~ res:', res)
     return res
   }
 
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 0e767ee7..57ce2c5a 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,477 +4,505 @@ $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;
+.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;
+      }
     }
-    &.xxxm{
-        width: 240px;
-    }
-    &.xxm{
-        width: 270px;
-    }
-    &.xm{
-        width: 300px;
-    }
-    &.ssm{
-        width: 380px;
-    }
-    &.sm{
-        width: 580px;
-    }
-    &.r{
-        width: 400px;
-    }
-    &.lr{
-        width: 440px;
-    }
-    &.lr-2{
-        width: 450px;
-    }
-    &.lrr{
-        width: 480px;
-    }
-    &.ml{
-        width: 530px;
-    }
-    &.l-2{
-        width: 640px;
-    }
-    &.lx-2{
-        width: 740px;
-    }
-    &.lx{
-        width: 770px;
-    }
-    &.l{
-        width: 800px;
-    }
-    &.ll{
-        width: 900px;
-    }
-    &.mount{
-        animation: mountpop .17s ease-in-out forwards;
-    }
-    &.unmount{
-        animation: unmountpop .17s ease-in-out forwards;
-    }
-    &.alert{
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background-color: transparent;
-        border: none;
-        .modal-head{
-            background-color: transparent;
-            padding: 0 0 8px;
-            .modal-close{
-                width: 20px;
-                height: 20px;
-                background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
-            }
-        }
-        .modal-body{
-            background-color: #fff;
-            padding: 22px;
-            border-radius: 4px;
-            border: 1px solid #101010;
-            color: $alert-color;
-            .alert-title{
-                font-size: 13px;
-                font-weight: 700;
-                color: $alert-color;
-                margin-bottom: 15px;
-            }
-        }
-    }
-}
-.modal-head{
-    display: flex;
-    align-items: center;
-    padding: 10px 24px;
-    background-color: #000;
-    // overflow: hidden;
-    h1.title{
+    .modal-body {
+      background-color: #fff;
+      padding: 22px;
+      border-radius: 4px;
+      border: 1px solid #101010;
+      color: $alert-color;
+      .alert-title {
         font-size: 13px;
-        color: $pop-color;
         font-weight: 700;
-    }
-    .modal-close{
-        margin-left: auto;
-        color: transparent;
-        font-size: 0;
-        width: 10px;
-        height: 10px;
-        background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
-    }
-}
-.modal-body{
-    padding: 24px;
-    .modal-btn-wrap{
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        button{
-            flex: 1;
-        }
-        &.sub{
-            button{
-                flex: 1 1 auto;
-                padding: 0;
-            }
-            margin-bottom: 14px;
-        }
-    }
-    .modal-check-btn-wrap{
-        margin-top: 15px;
-        .check-wrap-title{
-            font-size: $pop-normal-size;
-            color: $pop-color;
-            font-weight: 600;
-            &.light{
-                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;
+        margin-bottom: 15px;
+      }
     }
+  }
 }
-
-.adsorption-point{
+.modal-head {
+  display: flex;
+  align-items: center;
+  padding: 10px 24px;
+  background-color: #000;
+  // overflow: hidden;
+  cursor: pointer;
+  h1.title {
+    font-size: 13px;
+    color: $pop-color;
+    font-weight: 700;
+  }
+  .modal-close {
+    margin-left: auto;
+    color: transparent;
+    font-size: 0;
+    width: 10px;
+    height: 10px;
+    background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
+  }
+}
+.modal-body {
+  padding: 24px;
+  .modal-btn-wrap {
     display: flex;
     align-items: center;
-    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;
+    gap: 5px;
+    button {
+      flex: 1;
     }
-    i{
-        display: flex;
-        align-items: center;
-        padding: 0 7px;
-        margin-left: auto;
-        height: 100%;
-        font-size: 13px;
-        color: #898989;
+    &.sub {
+      button {
+        flex: 1 1 auto;
+        padding: 0;
+      }
+      margin-bottom: 14px;
     }
-    &.act{
-        i{
-            color: $pop-color;
-            background-color: #1083E3;
+  }
+  .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 {
+    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{
+.grid-check-form {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding-bottom: 15px;
+  &.border {
+    border-bottom: 1px solid #424242;
+  }
+}
+.grid-option-overflow {
+  max-height: 350px;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #d9d9d9;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+.grid-option-wrap {
+  .grid-option-box {
     display: flex;
     align-items: center;
-    gap: 15px;
-    padding-bottom: 15px;
-    &.border{
-        border-bottom: 1px solid #424242;
-    }
-}
-.grid-option-overflow{
-    max-height: 350px;
-    overflow-y: auto;
-    &::-webkit-scrollbar {
-        width: 4px;
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-}
-.grid-option-wrap{
-    .grid-option-box{
-        display: flex;
-        align-items: center;
-        background-color: transparent;
-        border: 1px solid #3D3D3D;
-        border-radius: 2px;
-        padding: 15px 10px;
-        gap: 20px;
-        margin-bottom: 10px;
-        .grid-input-form{
-            display: flex;
-            align-items: center;
-            span{
-                flex: none;
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                font-weight: $pop-bold-weight;
-            }
-            .input-grid{
-                width: 54px;
-                input{
-                    width: 100%;
-                }
-            }
-        }
-        &:last-child{
-            margin-bottom: 0;
-        }
-    }
-    .grid-option-block-form{
-        flex: 1;
-    }
-}
-.select-form{
-    .sort-select{width: 100%;}
-}
-.grid-select{
-    flex: 1;
-    &.no-flx{
-        flex: unset;
-    }
-    .sort-select{
-        width: 100%;
-        background-color: #313131;
-        min-width: auto;
-        font-size: 12px;
-        border: none;
-        p{
-            font-size: 12px;
-        }
-        > ul{
-            border: none;
-        }
-    }
-    &.right{
-        p{
-            text-align: right;
-        }
-        ul{
-            li{
-                justify-content: flex-end;
-            }
-        }
-    }
-}
-.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-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 .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{
+    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-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%;
+      }
+      .input-grid {
+        width: 54px;
+        input {
+          width: 100%;
         }
+      }
     }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .grid-option-block-form {
+    flex: 1;
+  }
 }
-.direction-move-wrap{
-    flex: none;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 5px;
-    margin-left: auto;
+.select-form {
+  .sort-select {
+    width: 100%;
+  }
+}
+.grid-select {
+  flex: 1;
+  &.no-flx {
+    flex: unset;
+  }
+  .sort-select {
+    width: 100%;
+    background-color: #313131;
+    min-width: auto;
+    font-size: 12px;
+    border: none;
+    p {
+      font-size: 12px;
+    }
+    > ul {
+      border: none;
+    }
+  }
+  &.right {
+    p {
+      text-align: right;
+    }
+    ul {
+      li {
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+.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-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;
+  }
+}
+
+// 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{
-                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;
-                }
-            }
+.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;
+  }
+  .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;
     }
-    &.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;
-                }
-            }
-        }
+    th {
+      padding: 14px 0;
     }
+    tr {
+      &:first-child {
+        td,
+        th {
+          padding-top: 14px;
+        }
+      }
+      &:last-child {
+        td,
+        th {
+          padding-bottom: 0px;
+        }
+      }
+    }
+  }
 }
 
 // 2024-12-11
@@ -485,1612 +513,1793 @@ $alert-color: #101010;
 //     max-width: 250px;
 // }
 
-.pop-form-radio{
-    display: flex;
-    align-items: center;
-    gap: 10px;
+.pop-form-radio {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
-.placement-option{
-    display: flex;
-    align-items: center;
-    gap: 20px;
+.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{
-        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;
-        }
-    }
-}
-.img-name-wrap{
-    display: flex;
-    align-items: center;
+.select-wrap {
+  .sort-select {
     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);
-    }
+  }
+}
+.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;
+.img-edit-wrap {
+  flex: none;
+  .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 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;
     }
-    .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);}
+    &: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);
+  }
+}
+
+.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{
-        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{
+.outline-wrap {
+  padding: 24px 0;
+  border-top: 1px solid #424242;
+
+  .outline-inner {
     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;
-        }
+    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;
 
-    .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;
+  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;
+  }
 }
 
-.cul-wrap{
+.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 {
     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{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 50%;
-        background-color: #3D3D3D;
-        border-radius: 2px ;
-    }
+    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 .15s ease-in-out;
-            &.green{
-                background-color: #305941;
-                border: 1px solid #45CD7D;
-                &:hover{
-                    background-color: #3a6b4e;
-                }
-            }
-            &.blue{
-                background-color: #2E5360;
-                border: 1px solid #3FBAE6;
-                &:hover{
-                    background-color: #365f6e;
-                }
-            }
-        }
-    }
-}
-
-// 지붕형상 설정
-.roof-shape-menu{
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 24px 10px;
-    margin-bottom: 24px;
-    .shape-box{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        padding: 13px;
-        background-color: #3D3D3D;
-        transition: background .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 .15s ease-in-out;
-    }
-    .shape-menu-box{
-        &.act,
-        &:hover{
-            .shape-box{background-color: #008BFF;}
-            .shape-title{color: #008BFF;}
-        }
-    }
-}
-
-.setting-box{
+.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;
-}
-.padding-form{
-    padding-left: 23px;
-}
-.discrimination-box{
-    padding: 16px 12px;
-    border: 1px solid #3D3D3D;
-    border-radius: 2px;
+    .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;
+        }
+      }
+    }
+  }
 }
 
-.modal-bottom-border-bx{
-    margin-top: 24px;
-    padding-bottom: 14px;
-    border-bottom: 1px solid #424242;
+// 지붕형상 설정
+.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;
-            }
-        }
+.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;
-    }
+.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{
+.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;
-    padding-bottom: 14px;
-    border-bottom: 1px solid #424242;
-    margin-bottom: 14px;
-    span{
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-bold-weight;
-        margin-right: 10px;
-    }
-    .allocation-edit{
-        display: flex;
-        align-items: center;
-        height: 30px;
-        padding: 0 10px;
-        margin-left: 5px;
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-normal-weight;
-        border: 1px solid #484848;
-        background-color: #323234;
-        i{
-            display: block;
-            width: 12px;
-            height: 12px;
-            margin-right: 5px;
-            background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center;
-            background-size: cover;
-        }
+    height: 30px;
+    padding: 0 10px;
+    margin-left: 5px;
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-normal-weight;
+    border: 1px solid #484848;
+    background-color: #323234;
+    i {
+      display: block;
+      width: 12px;
+      height: 12px;
+      margin-right: 5px;
+      background: url(../../public/static/images/canvas/allocation_edit.svg) no-repeat center;
+      background-size: cover;
     }
+  }
 }
 
-.block-box{
-    display: flex;
-    align-items: center;
+.block-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+  .flex-ment {
     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;
-        }
+    .dec {
+      text-decoration: underline;
     }
-    &:last-child{
-        margin-bottom: 0;
+    .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;
+.icon-btn-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  button {
     display: flex;
     align-items: center;
-    gap: 5px;
-    button{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 30px;
-        font-size: $pop-normal-size;
-        font-weight: $pop-normal-weight;
-        color: $pop-color;
-        border: 1px solid #646464;
-        border-radius: 2px;
-        padding: 0 10px;
-        transition: all .15s ease-in-out;
-        i{
-            height: 15px;
-            display: block;
-            margin-left: 10px;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: cover;
-            transition: all .15s ease-in-out;
-            &.allocation01{
-                background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
-                width: 15px;
-            }
-            &.allocation02{
-                background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
-                width: 18px;
-            }
-        }
-        &.act,
-        &:hover{
-            color: #101010;
-            border: 1px solid #101010;
-            background-color: #fff;
-            i{
-                &.allocation01{
-                    background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
-                }
-                &.allocation02{
-                    background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
-                }
-            }
-        }
-    }
-}
-
-// 경사설정
-.slope-wrap{
-    padding-bottom: 24px;
-    border-bottom: 1px solid #424242;
-}
-
-// 면형상 배치
-.plane-frame-wrap{
-    display: flex;
-    gap: 10px;
-    .plane-shape-wrap{
-        flex: none;
-        width: 73px;
-    }
-}
-
-.plane-shape-menu{
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 5px;
-    .shape-menu-box{
-        border-radius: 2px;
-        width: 34px;
-        height: 34px;
-        background-color: #373737;
-        border: 1px solid #676767;
-        transition: background .15s ease-in-out, border .15s ease-in-out;
-        .shape-box{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            position: relative;
-            width: 100%;
-            height: 100%;
-            border-radius: 2px;
-        }
-        &.act,
-        &:hover{
-            border-color: #008BFF;
-            background-color: #008BFF;
-        }
-    }
-}
-
-.shape-library{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     justify-content: center;
-    gap: 5px;
-    padding-top: 5px;
-    .library-btn{
-        width: 100%;
-        height: 34px;
-        border: 1px solid #6C6C6C;
-        border-radius: 2px;
-        background-color: #373737;
-        background-repeat: no-repeat;
-        background-position: center;
-        transition: all .15s ease-in-out;
-        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
-        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
-        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
-        &:hover{
-            border-color: #1083E3;
-            background-color: #1083E3;
-        }
-    }
-}
-
-.plane-detail-wrap{
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-.plane-shape-wrapper{
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    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%;
-            }
-        }
-    }
-}
-.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);
-        }
-    }
-}
-
-.plane-tab-guide{
+    width: 100%;
+    height: 30px;
     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%;
+    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);
+        }
+      }
+    }
+  }
 }
 
-// 오브젝트 배치
-.mb-box{
-    margin-bottom: 24px;
+// 경사설정
+.slope-wrap {
+  padding-bottom: 24px;
+  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;
+// 면형상 배치
+.plane-frame-wrap {
+  display: flex;
+  gap: 10px;
+  .plane-shape-wrap {
+    flex: none;
+    width: 73px;
+  }
 }
 
-.object-size-wrap{
-    display: flex;
-    min-height: 206px;
-    gap: 24px;
-    margin-top: 14px;
-    .object-size-img{
-        position: relative;
-        flex: none;
-        width: 200px;
-        background-color: #fff;
-        img{
+.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%);
+          }
         }
-    }
-}
-
-// 표시변경
-.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;
-        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;
-            }
-        }
-    }
-    .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;
-}
-
-// 지붕모듈선택
-.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);
-        }
-    }
-}
-
-.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-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{
-                margin-left: auto;
-            }
-        }
-    }
-}
-
-// 회로 및 가대설정
-.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;
-        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.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;
-        }
-    }
-}
-.circuit-table-tit{
-    color: #fff;
-    font-size: 12px;
-    font-weight: 600;
-    padding: 11px 10px;
-    background-color: #474747;
-    border: 1px solid #505050;
-    border-bottom: none;
-}
-
-.circuit-overflow{
-    overflow-x: auto;
-    margin-bottom: 25px;
-    &::-webkit-scrollbar {
-        height: 4px;
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-    .module-table-box{
-        display: flex;
-        &.by-max{
-            min-width: 886px;
-        }
-    }
-}
-
-.circuit-table-flx-wrap{
-    display: flex;
-    gap: 10px;
-    margin-bottom: 10px;
-    .circuit-table-flx-box{
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        .bottom-wrap{
-            margin-top: auto;
-        }
-        .roof-module-table{
-            table{
-                table-layout: fixed;
-            }
-        }
-    }
-}
-
-.circuit-count-input{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-// 모듈부가기능
-.additional-radio-wrap{
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 15px 0;
-    margin-bottom: 24px;
-}
-.additional-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{
-        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;
-                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;
+        .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;
                 }
+              }
             }
+          }
         }
+      }
     }
-}
-
-// 글꼴 설정 팝업
-.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;
-    }
-    .font-ex-box{
+    &.direction-box {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      .plane-direction-box {
+        flex: 1;
         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;
+.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%);
     }
-}
-
-.line-color-wrap{
-    margin-bottom: 15px;
-    .color-btn{
-        display: block;
-        width: 100%;
-        height: 30px;
-        border-radius: 2px;
+    &.right {
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
     }
-}
-
-.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;
-                }
-            }
-        }
+    &.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);
+    }
+  }
 }
 
-// 사이즈 변경
-.size-inner-warp{
-    position: relative;
+.plane-tab-guide {
+  font-size: $pop-normal-size;
+  font-weight: $pop-normal-weight;
+  color: $pop-color;
+  margin-top: 10px;
 }
-.size-check-wrap{
-    position: relative;
+.plane-shape-btn {
+  padding-top: 10px;
+  margin-top: auto;
+  button {
     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; }
+    width: 100%;
+  }
+}
+
+// 오브젝트 배치
+.mb-box {
+  margin-bottom: 24px;
+}
+
+.object-direction-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.discrimination-tit {
+  font-size: 13px;
+  color: #fff;
+  font-weight: 500;
+}
+
+.object-size-wrap {
+  display: flex;
+  min-height: 206px;
+  gap: 24px;
+  margin-top: 14px;
+  .object-size-img {
+    position: relative;
+    flex: none;
+    width: 200px;
+    background-color: #fff;
+    img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
     }
-    .size-box{
+  }
+}
+
+// 표시변경
+.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;
+    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: 100px;
-        height: 100px;
+        width: 5px;
+        height: 5px;
         background-color: #fff;
+        border-radius: 50%;
+      }
+      i {
+        color: #fff;
+      }
     }
-}
-
-.size-option-top{
-    margin-bottom: 15px;
-}
-.size-option-side{
+  }
+  .compas {
     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;
-        }
-        span{
-            flex: none;
-        }
+    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;
+}
+
+// 지붕모듈선택
+.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;
+        }
+      }
+    }
+  }
+}
+.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 0.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-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 {
+        margin-left: auto;
+      }
+    }
+  }
+}
+
+// 회로 및 가대설정
+.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;
+    height: 4px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #b4b4b4;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+}
+
+.circuit-right-wrap {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.circuit-data-form {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-height: 60px;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  span {
+    display: inline-flex;
+    align-items: center;
+    .del {
+      display: block;
+      margin-left: 10px;
+      width: 15px;
+      height: 15px;
+      background: url(../../public/static/images/canvas/circuit_del.svg) no-repeat center;
+      background-size: cover;
+    }
+  }
+}
+.circuit-table-tit {
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 11px 10px;
+  background-color: #474747;
+  border: 1px solid #505050;
+  border-bottom: none;
+}
+
+.circuit-overflow {
+  overflow-x: auto;
+  margin-bottom: 25px;
+  &::-webkit-scrollbar {
+    height: 4px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #d9d9d9;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  .module-table-box {
+    display: flex;
+    &.by-max {
+      min-width: 886px;
+    }
+  }
+}
+
+.circuit-table-flx-wrap {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+  .circuit-table-flx-box {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    .bottom-wrap {
+      margin-top: auto;
+    }
+    .roof-module-table {
+      table {
+        table-layout: fixed;
+      }
+    }
+  }
+}
+
+.circuit-count-input {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+// 모듈부가기능
+.additional-radio-wrap {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px 0;
+  margin-bottom: 24px;
+}
+.additional-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 {
+    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;
+        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;
+  }
+  .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;
+    }
+    .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-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: 100px;
+    height: 100px;
+    background-color: #fff;
+  }
+}
+
+.size-option-top {
+  margin-bottom: 15px;
+}
+.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;
+    }
+    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{
+.module-table-box {
+  &.none-flex {
+    flex: none;
+    width: 230px;
+    .outline-form {
+      .grid-select {
         flex: none;
-        width: 230px;
-        .outline-form{
-            .grid-select{
-                flex: none;
-                width: 95.77px;
-            }
-            .thin{
-                margin-left: auto;
-            }
-        }
-    }
-}
-.roof-module-tab2-overflow{
-    max-height: 500px;
-    overflow-y: auto;
-    padding-bottom: 15px;
-    border-bottom: 1px solid #4D4D4D;
-    &::-webkit-scrollbar {
-        width: 4px;
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-}
-.module-table-flex-wrap{
-    &.tab2{
-        margin-top: 10px;
-        gap: 15px;
-        
-    }
-    .module-flex-item{
-        flex: 1;
-        .module-flex-item-tit{
-            font-size: 12px;
-            font-weight: 500;
-            color: #fff;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #4D4D4D;
-        }
-        .flex-item-btn-wrap{
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 8px;
-            margin-bottom: 24px;
-        }
-        &.non-flex{
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            flex: none;
-            padding-top: 27.5px;
-            width: 260px;
-        }
-    }
-}
-
-.module-table-box{
-    .module-table-inner{
-        .module-table-flex-wrap{
-            &.tab2{
-                .eaves-keraba-table{
-                    .eaves-keraba-th{
-                        width: 90px;
-                    }
-                    .eaves-keraba-td{
-                        padding-left: 0;
-                        padding-bottom: 5px;
-                    }
-                } 
-            }
-        } 
-    } 
-} 
-.keraba-flex{
-    display: flex;
-    align-items: center;
-    .grid-select{
-        flex: none;
-        width: 110px;
-    }
-    .outline-form{
-        justify-content: flex-end;
-    }
-}
-
-.reset-word-wrap{
-    display: flex;
-    align-items: center;
-    .grid-btn-wrap{
+        width: 95.77px;
+      }
+      .thin {
         margin-left: auto;
+      }
     }
+  }
 }
-.reset-word{
-    font-size: 12px;
-    color: #FFCACA;
-    font-weight: 400;
+.roof-module-tab2-overflow {
+  max-height: 500px;
+  overflow-y: auto;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #4d4d4d;
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #d9d9d9;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+.module-table-flex-wrap {
+  &.tab2 {
     margin-top: 10px;
-}
\ No newline at end of file
+    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;
+          }
+        }
+      }
+    }
+  }
+}
+.keraba-flex {
+  display: flex;
+  align-items: center;
+  .grid-select {
+    flex: none;
+    width: 110px;
+  }
+  .outline-form {
+    justify-content: flex-end;
+  }
+}
+
+.reset-word-wrap {
+  display: flex;
+  align-items: center;
+  .grid-btn-wrap {
+    margin-left: auto;
+  }
+}
+.reset-word {
+  font-size: 12px;
+  color: #ffcaca;
+  font-weight: 400;
+  margin-top: 10px;
+}
diff --git a/src/util/common-utils.js b/src/util/common-utils.js
index 47498464..b77cf62d 100644
--- a/src/util/common-utils.js
+++ b/src/util/common-utils.js
@@ -134,3 +134,18 @@ export const getQueryString = (o) => {
     .join('&')
   return `?${queryString}`
 }
+
+export const unescapeString = (str) => {
+  const regex = /&(amp|lt|gt|quot|#39);/g
+  const chars = {
+    '&amp;': '&',
+    '&lt;': '<',
+    '&gt;': '>',
+    '&quot;': '"',
+    '&#39;': "'",
+  }
+
+  if (regex.test(str)) {
+    return str.replace(regex, (matched) => chars[matched] || matched)
+  }
+}

From 7ac16fbf5dee5996b412bda5300211f82c374dc9 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Fri, 17 Jan 2025 13:43:24 +0900
Subject: [PATCH 2/7] =?UTF-8?q?directionText=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/usePolygon.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js
index 4a8ecfdc..9c690a6b 100644
--- a/src/hooks/usePolygon.js
+++ b/src/hooks/usePolygon.js
@@ -427,6 +427,12 @@ export const usePolygon = () => {
       text = '西西南'
     }
 
+    const sameDirectionCnt = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF && obj.directionText === text)
+
+    text = text + (sameDirectionCnt.length + 1)
+
+    polygon.set('directionText', text)
+
     const textObj = new fabric.Text(`${text} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`, {
       fontFamily: flowFontOptions.fontFamily.value,
       fontWeight: flowFontOptions.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',

From 00aaea8b9c28d25351079e28d3f232f417de1a55 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Fri, 17 Jan 2025 13:54:57 +0900
Subject: [PATCH 3/7] =?UTF-8?q?=EB=B0=A9=ED=96=A5=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=EB=A7=8C=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/usePolygon.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js
index 9c690a6b..3e24920c 100644
--- a/src/hooks/usePolygon.js
+++ b/src/hooks/usePolygon.js
@@ -427,12 +427,13 @@ export const usePolygon = () => {
       text = '西西南'
     }
 
-    const sameDirectionCnt = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF && obj.directionText === text)
+    const sameDirectionCnt = canvas.getObjects().filter((obj) => {
+      const onlyStrDirection = obj.directionText?.replace(/[0-9]/g, '')
+      return obj.name === POLYGON_TYPE.ROOF && onlyStrDirection === text
+    })
 
     text = text + (sameDirectionCnt.length + 1)
-
     polygon.set('directionText', text)
-
     const textObj = new fabric.Text(`${text} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`, {
       fontFamily: flowFontOptions.fontFamily.value,
       fontWeight: flowFontOptions.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',

From a81a330b3d5977d4ba211028a73c510544ad82f0 Mon Sep 17 00:00:00 2001
From: changkyu choi <okoookoo@naver.com>
Date: Fri, 17 Jan 2025 16:40:51 +0900
Subject: [PATCH 4/7] =?UTF-8?q?floor-plan=20=EC=9D=B8=EC=9E=85=20=EC=8B=9C?=
 =?UTF-8?q?=20FloorPlanProvider=20Warning=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/floor-plan/FloorPlanProvider.js                       | 4 ++--
 .../floor-plan/modal/placementShape/PlacementShapeSetting.jsx | 4 ++--
 src/hooks/option/useCanvasSetting.js                          | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/floor-plan/FloorPlanProvider.js b/src/app/floor-plan/FloorPlanProvider.js
index efed75e6..fbfbea41 100644
--- a/src/app/floor-plan/FloorPlanProvider.js
+++ b/src/app/floor-plan/FloorPlanProvider.js
@@ -48,14 +48,14 @@ const FloorPlanProvider = ({ children }) => {
   const objectNo = searchParams.get('objectNo')
   const pid = searchParams.get('pid')
 
-  useEffect(() => { // 오류 발생으로 useEffect 사용
+  //useEffect(() => { // 오류 발생으로 useEffect 사용
     if (pathname === '/floor-plan') {
       if (pid === undefined || pid === '' || pid === null || objectNo === undefined || objectNo === '' || objectNo === null) {
         notFound()
       }
       setCurrentObjectNo(objectNo)
     }
-  }, [pid, objectNo])
+  //}, [pid, objectNo])
 
   const [floorPlanState, setFloorPlanState] = useState({
     // 플랜 파일 업로드 모달 오픈 제어
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 844cb87e..1a5ea92a 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -260,7 +260,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           title={
                             currentRoof?.roofSizeSet === '3' ? getMessage('modal.placement.initial.setting.size.none.pitch') : currentRoof?.roofMatlNm
                           }
-                          ref={roofRef.roofCd}
+                          //ref={roofRef.roofCd}
                           options={roofMaterials.map((roof) => {
                             return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
                           })}
@@ -346,7 +346,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                             <div className="select-wrap" style={{ width: '160px' }}>
                               <QSelectBox
                                 options={raftCodes}
-                                ref={roofRef.rafter}
+                                //ref={roofRef.rafter}
                                 title={
                                   raftCodes?.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft))
                                     .clCodeNm
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index 6afced52..413be59d 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -290,7 +290,7 @@ export function useCanvasSetting() {
         let roofsRow = {}
         let roofsArray = {}
 
-        if (res.length > 0) {
+        if (res) {
           roofsRow = res.map((item) => {
             return {
               roofSizeSet: String(item.roofSizeSet),

From 0e736ee4794ff2c25cb400272bcea44e55626c9d Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Fri, 17 Jan 2025 16:44:14 +0900
Subject: [PATCH 5/7] =?UTF-8?q?fix:=20provider=20=EC=A4=91=EC=B2=A9?=
 =?UTF-8?q?=EC=8B=9C=20suspense=20=EC=82=AC=EC=9A=A9=20=EC=8B=9C=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.js | 32 +++++++++++++++-----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/app/layout.js b/src/app/layout.js
index 0a514711..fd9f08bd 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -66,24 +66,22 @@ export default async function RootLayout({ children }) {
       <GlobalDataProvider>
         <html lang="en">
           <body>
-            <Suspense fallback={<GlobalSpinner />}>
-              {headerPathname === '/login' || headerPathname === '/join' ? (
-                <QcastProvider>{children}</QcastProvider>
-              ) : (
-                <QcastProvider>
-                  <div className="wrap">
-                    <Header userSession={sessionProps} />
-                    <div className="content">
-                      <Dimmed />
-                      <SessionProvider useSession={sessionProps}>{children}</SessionProvider>
-                    </div>
-                    <Footer />
+            {headerPathname === '/login' || headerPathname === '/join' ? (
+              <QcastProvider>{children}</QcastProvider>
+            ) : (
+              <QcastProvider>
+                <div className="wrap">
+                  <Header userSession={sessionProps} />
+                  <div className="content">
+                    <Dimmed />
+                    <SessionProvider useSession={sessionProps}>{children}</SessionProvider>
                   </div>
-                </QcastProvider>
-              )}
-              <QModal />
-              <PopupManager />
-            </Suspense>
+                  <Footer />
+                </div>
+              </QcastProvider>
+            )}
+            <QModal />
+            <PopupManager />
           </body>
         </html>
       </GlobalDataProvider>

From 3622065ded48d7e758495f6f7cd75fa56c020bfa Mon Sep 17 00:00:00 2001
From: changkyu choi <okoookoo@naver.com>
Date: Fri, 17 Jan 2025 16:49:44 +0900
Subject: [PATCH 6/7] =?UTF-8?q?Canvas=EC=84=A4=EC=A0=95=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5=20=EC=8B=9C=20=EC=A0=80=EC=9E=A5=ED=99=95=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/option/useCanvasSetting.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index 413be59d..6a0adb06 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -674,7 +674,7 @@ export function useCanvasSetting() {
     // HTTP POST 요청 보내기
     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
       .then((res) => {
-        // swalFire({ text: getMessage(res.returnMessage) })
+        swalFire({ text: getMessage(res.returnMessage) })
 
         // Canvas 디스플레이 설정 시 해당 옵션 적용
         frontSettings()
@@ -682,7 +682,8 @@ export function useCanvasSetting() {
         fetchSettings()
       })
       .catch((error) => {
-        swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+        //swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+        swalFire({ text: error.message, icon: 'error' })
       })
 
     //setAdsorptionRange(item.range)

From 35000622587a6e121a3679653a71746f7b5245fd Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Fri, 17 Jan 2025 16:57:46 +0900
Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20planNo=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- canvas_status 추가/삭제 시 plan추가/삭제 api 호출 추가
- planNo 추가, ordering 제거 및 planNo로 변경
---
 src/components/estimate/Estimate.jsx       |  2 +-
 src/components/floor-plan/CanvasLayout.jsx | 10 +--
 src/components/floor-plan/CanvasMenu.jsx   |  8 +--
 src/components/simulator/Simulator.jsx     |  2 +-
 src/hooks/usePlan.js                       | 82 +++++++++++++---------
 5 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx
index 21e87620..a97cb4cb 100644
--- a/src/components/estimate/Estimate.jsx
+++ b/src/components/estimate/Estimate.jsx
@@ -135,7 +135,7 @@ export default function Estimate({}) {
 
   useEffect(() => {
     console.log('🚀 ~ Estimate ~ selectedPlan:', selectedPlan)
-    if (selectedPlan) initEstimate(selectedPlan.ordering)
+    if (selectedPlan) initEstimate(selectedPlan.planNo)
   }, [selectedPlan])
 
   useEffect(() => {
diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx
index ba2994c0..bc1a4007 100644
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/src/components/floor-plan/CanvasLayout.jsx
@@ -30,22 +30,22 @@ export default function CanvasLayout({ children }) {
     <div className="canvas-layout">
       <div className={`canvas-page-list ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
         <div className="canvas-plane-wrap">
-          {plans.map((plan) => (
+          {plans.map((plan, index) => (
             <button
               key={`plan-${plan.id}`}
               className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
               onClick={() => handleCurrentPlan(plan.id)}
             >
-              <span>{`Plan ${plan.ordering}`}</span>
-              {plan.ordering !== 1 && (
+              <span>{`Plan ${plan.planNo}`}</span>
+              {index !== 0 && (
                 <i
                   className="close"
                   onClick={(e) =>
                     swalFire({
-                      text: `Plan ${plan.ordering} ` + getMessage('plan.message.confirm.delete'),
+                      text: `Plan ${plan.planNo} ` + getMessage('plan.message.confirm.delete'),
                       type: 'confirm',
                       confirmFn: () => {
-                        handleDeletePlan(e, plan.id)
+                        handleDeletePlan(e, plan)
                       },
                     })
                   }
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 012b62e9..0f32da9b 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -171,14 +171,14 @@ export default function CanvasMenu(props) {
         break
       case 5:
         // let pid = urlParams.get('pid')
-        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.ordering}/detail` }).then((res) => {
+        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.planNo}/detail` }).then((res) => {
           if (res.status === 200) {
             const estimateDetail = res.data
             if (estimateDetail.tempFlg === '0' && estimateDetail.estimateDate !== null) {
               setMenuNumber(menu.index)
               setCurrentMenu(menu.title)
               setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
-              router.push(`/floor-plan/estimate/${menu.index}?pid=${selectedPlan.ordering}&objectNo=${objectNo}`)
+              router.push(`/floor-plan/estimate/${menu.index}?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
             } else {
               swalFire({ text: getMessage('estimate.menu.move.valid1') })
             }
@@ -186,13 +186,13 @@ export default function CanvasMenu(props) {
         })
         break
       case 6:
-        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.ordering}/detail` }).then((res) => {
+        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.planNo}/detail` }).then((res) => {
           if (res.status === 200) {
             const estimateDetail = res.data
             if (estimateDetail.tempFlg === '0') {
               setMenuNumber(menu.index)
               setCurrentMenu(menu.title)
-              router.push(`/floor-plan/simulator/${menu.index}?pid=${selectedPlan.ordering}&objectNo=${objectNo}`)
+              router.push(`/floor-plan/simulator/${menu.index}?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
             } else {
               swalFire({ text: getMessage('simulator.menu.move.valid1') })
             }
diff --git a/src/components/simulator/Simulator.jsx b/src/components/simulator/Simulator.jsx
index 249398c4..3abb6969 100644
--- a/src/components/simulator/Simulator.jsx
+++ b/src/components/simulator/Simulator.jsx
@@ -111,7 +111,7 @@ export default function Simulator() {
     setHatsudenryouPeakcutAllSnow([])
 
     if (objectNo && pid && selectedPlan) {
-      fetchObjectDetail(objectNo, selectedPlan.ordering)
+      fetchObjectDetail(objectNo, selectedPlan.planNo)
       fetchSimulatorNotice()
       setPwrGnrSimType('D')
       setPwrRecoil({ ...pwrRecoil, type: 'D' })
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index a0733e57..510b7874 100644
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@@ -4,7 +4,6 @@ import { useContext, useEffect, useState } from 'react'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 
 import { useRecoilState } from 'recoil'
-import { v4 as uuidv4 } from 'uuid'
 
 import { canvasState, currentCanvasPlanState, plansState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
@@ -18,7 +17,6 @@ import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateCon
 export function usePlan(params = {}) {
   const { floorPlanState } = useContext(FloorPlanContext)
 
-  const [planNum, setPlanNum] = useState(0)
   const [selectedPlan, setSelectedPlan] = useState(null)
 
   const [canvas, setCanvas] = useRecoilState(canvasState)
@@ -131,35 +129,52 @@ export function usePlan(params = {}) {
    */
   const getCanvasByObjectNo = async (userId, objectNo) => {
     return await get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
-      res.map((item, index) => ({
+      res.map((item) => ({
         id: item.id,
+        objectNo: item.objectNo,
+        planNo: item.planNo,
         userId: item.userId,
         canvasStatus: dbToCanvasFormat(item.canvasStatus),
         isCurrent: false,
         bgImageName: item.bgImageName,
         mapPositionAddress: item.mapPositionAddress,
-        ordering: index + 1,
       })),
     )
   }
 
+  /**
+   * 물건번호(object) plan 추가 (canvas 생성 전 planNo 할당)
+   */
+  const postObjectPlan = async (userId, objectNo) => {
+    return await promisePost({ url: '/api/object/add-plan', data: { userId: userId, objectNo: objectNo } })
+      .then((res) => {
+        return res.data.planNo
+      })
+      .catch((error) => {
+        swalFire({ text: error.response.data.message, icon: 'error' })
+        return null
+      })
+  }
+
   /**
    * 신규 canvas 데이터를 저장
    */
   const postCanvasStatus = async (userId, objectNo, canvasStatus) => {
+    const planNo = await postObjectPlan(userId, objectNo)
+    if (!planNo) return
+
     const planData = {
       userId: userId,
-      imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
       objectNo: objectNo,
+      planNo: planNo,
       bgImageName: currentCanvasPlan?.bgImageName ?? null,
       mapPositionAddress: currentCanvasPlan?.mapPositionAddress ?? null,
       canvasStatus: canvasToDbFormat(canvasStatus),
     }
     await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
       .then((res) => {
-        setPlans((plans) => [...plans, { id: res.data, objectNo: objectNo, userId: userId, canvasStatus: canvasStatus, ordering: planNum + 1 }])
+        setPlans((plans) => [...plans, { id: res.data, objectNo: objectNo, planNo: planNo, userId: userId, canvasStatus: canvasStatus }])
         updateCurrentPlan(res.data)
-        setPlanNum(planNum + 1)
       })
       .catch((error) => {
         swalFire({ text: error.message, icon: 'error' })
@@ -204,12 +219,12 @@ export function usePlan(params = {}) {
    * 현재 plan의 작업상태를 저장 후 이동
    */
   const handleCurrentPlan = async (newCurrentId) => {
-    const orderingNo = plans?.find((obj) => obj.id === newCurrentId).ordering
+    const planNo = plans?.find((obj) => obj.id === newCurrentId).planNo
     const objectNo = floorPlanState.objectNo
     //견적서 or 발전시뮬
 
     if (pathname !== '/floor-plan') {
-      await promiseGet({ url: `/api/estimate/${objectNo}/${orderingNo}/detail` })
+      await promiseGet({ url: `/api/estimate/${objectNo}/${planNo}/detail` })
         .then((res) => {
           if (res.status === 200) {
             const estimateDetail = res.data
@@ -278,7 +293,7 @@ export function usePlan(params = {}) {
 
   const handleCurrentPlanUrl = () => {
     const currentPlan = plans.find((plan) => plan.isCurrent)
-    if (currentPlan) router.push(`${pathname}?pid=${currentPlan?.ordering}&objectNo=${floorPlanState?.objectNo}`)
+    if (currentPlan) router.push(`${pathname}?pid=${currentPlan?.planNo}&objectNo=${floorPlanState?.objectNo}`)
   }
 
   const setBgImage = () => {
@@ -295,7 +310,7 @@ export function usePlan(params = {}) {
     }
     JSON.parse(currentCanvasData()).objects.length > 0
       ? swalFire({
-          text: `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.copy'),
+          text: `Plan ${currentCanvasPlan.planNo} ` + getMessage('plan.message.confirm.copy'),
           type: 'confirm',
           confirmFn: async () => {
             await postCanvasStatus(userId, objectNo, currentCanvasData())
@@ -308,31 +323,31 @@ export function usePlan(params = {}) {
   }
 
   /**
-   * DB에 추가하지 않고 화면 상에서 plan을 추가하는 함수
+   * 물건번호(object) plan 삭제 (canvas 삭제 전 planNo 삭제)
    */
-  const addPlan = (userId, objectNo, canvasStatus) => {
-    const id = uuidv4()
-    const newPlan = {
-      id: id,
-      objectNo: objectNo,
-      userId: userId,
-      canvasStatus: canvasStatus,
-      ordering: planNum + 1,
-    }
-    setPlans([...plans, newPlan])
-    handleCurrentPlan(id)
-    setPlanNum(planNum + 1)
+  const deleteObjectPlan = async (userId, objectNo, planNo) => {
+    return await promiseDel({ url: `/api/object/plan/${objectNo}/${planNo}?userId=${userId}` })
+      .then((res) => {
+        return true
+      })
+      .catch((error) => {
+        swalFire({ text: error.response.data.message, icon: 'error' })
+        return false
+      })
   }
 
   /**
    * plan 삭제
    */
-  const handleDeletePlan = async (e, id) => {
+  const handleDeletePlan = async (e, targetPlan) => {
     e.stopPropagation() // 이벤트 버블링 방지
 
-    await delCanvasById(id)
+    const isSuccess = await deleteObjectPlan(targetPlan.id, targetPlan.objectNo, targetPlan.planNo)
+    if (!isSuccess) return
+
+    await delCanvasById(targetPlan.id)
       .then((res) => {
-        setPlans((plans) => plans.filter((plan) => plan.id !== id))
+        setPlans((plans) => plans.filter((plan) => plan.id !== targetPlan.id))
         removeImage(currentCanvasPlan.id)
         swalFire({ text: getMessage('plan.message.delete') })
       })
@@ -341,11 +356,10 @@ export function usePlan(params = {}) {
       })
 
     // 삭제 후 last 데이터에 포커싱
-    const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
+    const lastPlan = plans.filter((plan) => plan.id !== targetPlan.id).at(-1)
     if (!lastPlan) {
-      setPlanNum(0)
       setCurrentCanvasPlan(null)
-    } else if (id !== lastPlan.id) {
+    } else if (targetPlan.id !== lastPlan.id) {
       updateCurrentPlan(lastPlan.id)
     }
   }
@@ -353,13 +367,11 @@ export function usePlan(params = {}) {
   /**
    * plan 조회
    */
-  const loadCanvasPlanData = async (userId, objectNo, pid) => {
+  const loadCanvasPlanData = async (userId, objectNo, planNo) => {
     await getCanvasByObjectNo(userId, objectNo).then((res) => {
-      // console.log('canvas 목록 ', res)
       if (res.length > 0) {
         setPlans(res)
-        updateCurrentPlan(res[pid - 1].id)
-        setPlanNum(res.length)
+        updateCurrentPlan(res.find((plan) => plan.planNo === planNo).id)
       } else {
         postCanvasStatus(userId, objectNo, '')
       }
@@ -370,7 +382,7 @@ export function usePlan(params = {}) {
    * 현재 plan 이동 -> 새로운 링크로 이동
    */
   const handlePlanMove = () => {
-    router.push(`${pathname}?objectNo=${floorPlanState.objectNo}&pid=${currentCanvasPlan?.ordering}`)
+    router.push(`${pathname}?objectNo=${floorPlanState.objectNo}&pid=${currentCanvasPlan?.planNo}`)
   }
 
   return {