Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

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>
   )

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>

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )
 }

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -62,7 +62,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   //   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) {
@@ -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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
   )

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>
     </>

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>
   )

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>
   )

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>
   )

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
   }
 

src/styles/_modal.scss

@@ -5,12 +5,24 @@ $pop-normal-size: 12px;
 $alert-color: #101010;
 
 @keyframes mountpop {
-    from{opacity: 0; scale: 0.95;}
+  from {
-    to{opacity: 1; scale: 1;}
+    opacity: 0;
+    scale: 0.95;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
 }
 @keyframes unmountpop {
-    from{opacity: 1; scale: 1;}
+  from {
-    to{opacity: 0; scale: 0.95;}
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
 }
 
 .normal-font {
@@ -85,10 +97,10 @@ $alert-color: #101010;
     width: 900px;
   }
   &.mount {
-        animation: mountpop .17s ease-in-out forwards;
+    animation: mountpop 0.17s ease-in-out forwards;
   }
   &.unmount {
-        animation: unmountpop .17s ease-in-out forwards;
+    animation: unmountpop 0.17s ease-in-out forwards;
   }
   &.alert {
     position: absolute;
@@ -127,6 +139,7 @@ $alert-color: #101010;
   padding: 10px 24px;
   background-color: #000;
   // overflow: hidden;
+  cursor: pointer;
   h1.title {
     font-size: 13px;
     color: $pop-color;
@@ -193,7 +206,7 @@ $alert-color: #101010;
     }
   }
   .outer-line-wrap {
-        border-top: 1px solid #3C3C3C;
+    border-top: 1px solid #3c3c3c;
     margin-top: 10px;
     padding-top: 15px;
     margin-bottom: 15px;
@@ -211,11 +224,18 @@ $alert-color: #101010;
     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;
+  background-color: #3a3a3a;
   border-radius: 3px;
   padding-left: 11px;
   overflow: hidden;
@@ -236,7 +256,7 @@ $alert-color: #101010;
   &.act {
     i {
       color: $pop-color;
-            background-color: #1083E3;
+      background-color: #1083e3;
     }
   }
 }
@@ -259,7 +279,7 @@ $alert-color: #101010;
     background-color: transparent;
   }
   &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
+    background-color: #d9d9d9;
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
@@ -270,7 +290,7 @@ $alert-color: #101010;
     display: flex;
     align-items: center;
     background-color: transparent;
-        border: 1px solid #3D3D3D;
+    border: 1px solid #3d3d3d;
     border-radius: 2px;
     padding: 15px 10px;
     gap: 20px;
@@ -300,7 +320,9 @@ $alert-color: #101010;
   }
 }
 .select-form {
-    .sort-select{width: 100%;}
+  .sort-select {
+    width: 100%;
+  }
 }
 .grid-select {
   flex: 1;
@@ -345,7 +367,6 @@ $alert-color: #101010;
   color: $pop-color;
   font-weight: $pop-normal-weight;
   padding-bottom: 15px;
-
 }
 .grid-direction {
   display: flex;
@@ -362,11 +383,17 @@ $alert-color: #101010;
   background-position: center;
   background-size: 16px 15px;
   border-radius: 50%;
-    transition: all .15s ease-in-out;
+  transition: all 0.15s ease-in-out;
   opacity: 0.6;
-    &.down{transform: rotate(180deg);}
+  &.down {
-    &.left{transform: rotate(-90deg);}
+    transform: rotate(180deg);
-    &.right{transform: rotate(90deg);}
+  }
+  &.left {
+    transform: rotate(-90deg);
+  }
+  &.right {
+    transform: rotate(90deg);
+  }
   &:hover,
   &.act {
     opacity: 1;
@@ -452,10 +479,11 @@ $alert-color: #101010;
   }
   &.light {
     padding: 0;
-        th,td{
+    th,
+    td {
       color: $alert-color;
       border-bottom: none;
-            border-top: 1px solid #EFEFEF;
+      border-top: 1px solid #efefef;
     }
     th {
       padding: 14px 0;
@@ -509,7 +537,6 @@ $alert-color: #101010;
     color: $pop-color;
     font-weight: $pop-normal-weight;
   }
-
 }
 
 .img-edit-wrap {
@@ -525,7 +552,7 @@ $alert-color: #101010;
     background-color: #fff;
     border-radius: 2px;
     cursor: pointer;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     .img-edit {
       width: 16px;
       height: 16px;
@@ -545,7 +572,6 @@ $alert-color: #101010;
   margin-left: 10px;
   input {
     flex: 1;
-
   }
   .img-check {
     flex: none;
@@ -571,8 +597,12 @@ $alert-color: #101010;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
-        &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
+    &.fail {
-        &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
+      background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+    }
+    &.success {
+      background-image: url(../../public/static/images/canvas/img_check_success.svg);
+    }
   }
 }
 
@@ -652,7 +682,7 @@ $alert-color: #101010;
     align-items: center;
     justify-content: center;
     width: 50%;
-        background-color: #3D3D3D;
+    background-color: #3d3d3d;
     border-radius: 2px;
   }
 }
@@ -660,7 +690,7 @@ $alert-color: #101010;
 // 외벽선 속성 설정
 .properties-guide {
   font-size: $pop-normal-size;
-    color: #AAA;
+  color: #aaa;
   font-weight: $pop-normal-weight;
   margin-bottom: 14px;
 }
@@ -689,17 +719,17 @@ $alert-color: #101010;
       color: #fff;
       font-weight: 700;
       border-radius: 2px;
-            transition: all .15s ease-in-out;
+      transition: all 0.15s ease-in-out;
       &.green {
         background-color: #305941;
-                border: 1px solid #45CD7D;
+        border: 1px solid #45cd7d;
         &:hover {
           background-color: #3a6b4e;
         }
       }
       &.blue {
-                background-color: #2E5360;
+        background-color: #2e5360;
-                border: 1px solid #3FBAE6;
+        border: 1px solid #3fbae6;
         &:hover {
           background-color: #365f6e;
         }
@@ -721,8 +751,8 @@ $alert-color: #101010;
     justify-content: center;
     width: 100%;
     padding: 13px;
-        background-color: #3D3D3D;
+    background-color: #3d3d3d;
-        transition: background .15s ease-in-out;
+    transition: background 0.15s ease-in-out;
     img {
       max-width: 100%;
     }
@@ -733,13 +763,17 @@ $alert-color: #101010;
     color: $pop-color;
     margin-top: 10px;
     text-align: center;
-        transition: color .15s ease-in-out;
+    transition: color 0.15s ease-in-out;
   }
   .shape-menu-box {
     &.act,
     &:hover {
-            .shape-box{background-color: #008BFF;}
+      .shape-box {
-            .shape-title{color: #008BFF;}
+        background-color: #008bff;
+      }
+      .shape-title {
+        color: #008bff;
+      }
     }
   }
 }
@@ -754,7 +788,7 @@ $alert-color: #101010;
 }
 .discrimination-box {
   padding: 16px 12px;
-    border: 1px solid #3D3D3D;
+  border: 1px solid #3d3d3d;
   border-radius: 2px;
 }
 
@@ -787,12 +821,12 @@ $alert-color: #101010;
       align-items: center;
       justify-content: center;
       padding: 5px;
-            background-color: #3D3D3D;
+      background-color: #3d3d3d;
-            border: 1px solid #3D3D3D;
+      border: 1px solid #3d3d3d;
       border-radius: 2px;
       cursor: pointer;
       &.act {
-                border: 1px solid #ED0004;
+        border: 1px solid #ed0004;
       }
     }
     &:last-child {
@@ -891,7 +925,7 @@ $alert-color: #101010;
     border: 1px solid #646464;
     border-radius: 2px;
     padding: 0 10px;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     i {
       height: 15px;
       display: block;
@@ -899,7 +933,7 @@ $alert-color: #101010;
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;
-            transition: all .15s ease-in-out;
+      transition: all 0.15s ease-in-out;
       &.allocation01 {
         background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
         width: 15px;
@@ -952,7 +986,9 @@ $alert-color: #101010;
     height: 34px;
     background-color: #373737;
     border: 1px solid #676767;
-        transition: background .15s ease-in-out, border .15s ease-in-out;
+    transition:
+      background 0.15s ease-in-out,
+      border 0.15s ease-in-out;
     .shape-box {
       display: flex;
       justify-content: center;
@@ -964,8 +1000,8 @@ $alert-color: #101010;
     }
     &.act,
     &:hover {
-            border-color: #008BFF;
+      border-color: #008bff;
-            background-color: #008BFF;
+      background-color: #008bff;
     }
   }
 }
@@ -980,18 +1016,27 @@ $alert-color: #101010;
   .library-btn {
     width: 100%;
     height: 34px;
-        border: 1px solid #6C6C6C;
+    border: 1px solid #6c6c6c;
     border-radius: 2px;
     background-color: #373737;
     background-repeat: no-repeat;
     background-position: center;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
-        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
+    &.ico01 {
-        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
+      background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
-        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
+      background-size: 19px 18px;
+    }
+    &.ico02 {
+      background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
+      background-size: 15px 20px;
+    }
+    &.ico03 {
+      background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
+      background-size: 19px 16px;
+    }
     &:hover {
-            border-color: #1083E3;
+      border-color: #1083e3;
-            background-color: #1083E3;
+      background-color: #1083e3;
     }
   }
 }
@@ -1077,11 +1122,27 @@ $alert-color: #101010;
     position: absolute;
     font-size: 12px;
     font-weight: 500;
-        color: #B1B1B1;
+    color: #b1b1b1;
-        &.top{top: 0; left: 50%; transform: translateX(-50%);}
+    &.top {
-        &.right{top: 50%; right: 0; transform: translateY(-50%);}
+      top: 0;
-        &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
+      left: 50%;
-        &.left{top: 50%; left: 0; transform: translateY(-50%);}
+      transform: translateX(-50%);
+    }
+    &.right {
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+    }
+    &.bottom {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    &.left {
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+    }
   }
   .plane-btn {
     position: absolute;
@@ -1093,11 +1154,27 @@ $alert-color: #101010;
     background-repeat: no-repeat;
     background-position: center;
     border-radius: 50%;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
-        &.up{top: 22px; left: 50%; transform: translateX(-50%);}
+    &.up {
-        &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
+      top: 22px;
-        &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
+      left: 50%;
-        &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
+      transform: translateX(-50%);
+    }
+    &.right {
+      top: 50%;
+      right: 32px;
+      transform: translateY(-50%) rotate(90deg);
+    }
+    &.down {
+      bottom: 22px;
+      left: 50%;
+      transform: translateX(-50%) rotate(180deg);
+    }
+    &.left {
+      top: 50%;
+      left: 32px;
+      transform: translateY(-50%) rotate(270deg);
+    }
     &:hover,
     &.act {
       background-color: #fff;
@@ -1163,7 +1240,7 @@ $alert-color: #101010;
 .warning {
   font-size: $pop-normal-size;
   font-weight: $pop-normal-weight;
-    color: #FFAFAF;
+  color: #ffafaf;
 }
 
 // 각 변 속성 변경
@@ -1219,37 +1296,157 @@ $alert-color: #101010;
       top: 12.5px;
       left: 50%;
       font-size: 11px;
-            color: #8B8B8B;
+      color: #8b8b8b;
       font-weight: 500;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-use-select: none;
       user-select: none;
     }
-        &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
+    &:nth-child(1) {
-        &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
+      transform: rotate(180deg) translate(-50%, -50%);
-        &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
+      i {
-        &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
+        transform: translateX(-50%) rotate(180deg);
-        &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
+      }
-        &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
+    }
-        &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
+    &:nth-child(2) {
-        &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
+      transform: rotate(195deg) translate(-50%, -50%);
-        &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
+      i {
-        &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
+        transform: translateX(-50%) rotate(165deg);
-        &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
+      }
-        &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
+    }
-        &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
+    &:nth-child(3) {
-        &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
+      transform: rotate(210deg) translate(-50%, -50%);
-        &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
+      i {
-        &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
+        transform: translateX(-50%) rotate(150deg);
-        &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
+      }
-        &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
+    }
-        &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
+    &:nth-child(4) {
-        &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
+      transform: rotate(225deg) translate(-50%, -50%);
-        &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
+      i {
-        &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
+        transform: translateX(-50%) rotate(135deg);
-        &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
+      }
-        &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
+    }
+    &:nth-child(5) {
+      transform: rotate(240deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(120deg);
+      }
+    }
+    &:nth-child(6) {
+      transform: rotate(255deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(105deg);
+      }
+    }
+    &:nth-child(7) {
+      transform: rotate(270deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(90deg);
+      }
+    }
+    &:nth-child(8) {
+      transform: rotate(285deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(75deg);
+      }
+    }
+    &:nth-child(9) {
+      transform: rotate(300deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(60deg);
+      }
+    }
+    &:nth-child(10) {
+      transform: rotate(315deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(45deg);
+      }
+    }
+    &:nth-child(11) {
+      transform: rotate(330deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(30deg);
+      }
+    }
+    &:nth-child(12) {
+      transform: rotate(345deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(15deg);
+      }
+    }
+    &:nth-child(13) {
+      transform: rotate(0deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(0deg);
+      }
+    }
+    &:nth-child(14) {
+      transform: rotate(15deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-15deg);
+      }
+    }
+    &:nth-child(15) {
+      transform: rotate(30deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-30deg);
+      }
+    }
+    &:nth-child(16) {
+      transform: rotate(45deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-45deg);
+      }
+    }
+    &:nth-child(17) {
+      transform: rotate(60deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-60deg);
+      }
+    }
+    &:nth-child(18) {
+      transform: rotate(75deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-75deg);
+      }
+    }
+    &:nth-child(19) {
+      transform: rotate(90deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-90deg);
+      }
+    }
+    &:nth-child(20) {
+      transform: rotate(105deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-105deg);
+      }
+    }
+    &:nth-child(21) {
+      transform: rotate(120deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-120deg);
+      }
+    }
+    &:nth-child(22) {
+      transform: rotate(135deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-135deg);
+      }
+    }
+    &:nth-child(23) {
+      transform: rotate(150deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-150deg);
+      }
+    }
+    &:nth-child(24) {
+      transform: rotate(165deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-165deg);
+      }
+    }
     &.act {
       &::after {
         content: '';
@@ -1303,13 +1500,13 @@ $alert-color: #101010;
     border-radius: 2px;
     background-color: transparent;
     font-size: 12px;
-        color: #AAA;
+    color: #aaa;
     text-align: center;
     cursor: default;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     &.act {
-            background-color: #1083E3;
+      background-color: #1083e3;
-            border: 1px solid #1083E3;
+      border: 1px solid #1083e3;
       color: #fff;
       font-weight: 500;
     }
@@ -1322,7 +1519,7 @@ $alert-color: #101010;
     background-position: center;
     background-size: cover;
     background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     &.act {
       background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
     }
@@ -1355,7 +1552,9 @@ $alert-color: #101010;
         top: 22px;
       }
       &.act {
-                i{color: #8B8B8B;}
+        i {
+          color: #8b8b8b;
+        }
       }
     }
   }
@@ -1387,7 +1586,7 @@ $alert-color: #101010;
     height: 30px;
     font-size: 12px;
     font-weight: 400;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     &:first-child {
       border-left: 1px solid #505050;
     }
@@ -1401,7 +1600,7 @@ $alert-color: #101010;
 
 .module-table-box {
   flex: 1;
-    background-color: #3D3D3D;
+  background-color: #3d3d3d;
   border-radius: 2px;
   .module-table-inner {
     padding: 10px;
@@ -1414,7 +1613,7 @@ $alert-color: #101010;
       padding: 10px 0;
       font-size: 12px;
       color: #fff;
-            border-bottom: 1px solid #4D4D4D;
+      border-bottom: 1px solid #4d4d4d;
     }
     .eaves-keraba-table {
       width: 100%;
@@ -1437,7 +1636,7 @@ $alert-color: #101010;
   .warning-guide {
     padding: 20px;
     .warning {
-            color: #FFCACA;
+      color: #ffcaca;
       max-height: 55px;
       overflow-y: auto;
       padding-right: 30px;
@@ -1446,7 +1645,7 @@ $alert-color: #101010;
         background-color: transparent;
       }
       &::-webkit-scrollbar-thumb {
-                background-color: #D9D9D9;
+        background-color: #d9d9d9;
       }
       &::-webkit-scrollbar-track {
         background-color: transparent;
@@ -1457,7 +1656,7 @@ $alert-color: #101010;
 
 .module-self-table {
   display: table;
-    border-top: 1px solid #4D4D4D;
+  border-top: 1px solid #4d4d4d;
   border-collapse: collapse;
   width: 100%;
   .self-table-item {
@@ -1466,7 +1665,7 @@ $alert-color: #101010;
     .self-item-th {
       display: table-cell;
       vertical-align: middle;
-            border-bottom: 1px solid #4D4D4D;
+      border-bottom: 1px solid #4d4d4d;
     }
     .self-item-th {
       width: 60px;
@@ -1494,7 +1693,7 @@ $alert-color: #101010;
 .hexagonal-wrap {
   .hexagonal-item {
     padding: 15px 0;
-        border-bottom: 1px solid #4D4D4D;
+    border-bottom: 1px solid #4d4d4d;
     &:first-child {
       padding-top: 0;
     }
@@ -1528,7 +1727,7 @@ $alert-color: #101010;
       background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-            background-color: #D9D9D9;
+      background-color: #d9d9d9;
     }
     &::-webkit-scrollbar-track {
       background-color: transparent;
@@ -1577,7 +1776,7 @@ $alert-color: #101010;
   gap: 5px;
   min-height: 60px;
   padding: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.20);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   span {
     display: inline-flex;
     align-items: center;
@@ -1609,7 +1808,7 @@ $alert-color: #101010;
     background-color: transparent;
   }
   &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
+    background-color: #d9d9d9;
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
@@ -1674,10 +1873,10 @@ $alert-color: #101010;
       height: 16px;
       &.pink {
         border: 2px solid #ce1c9c;
-                background-color: #16417D;
+        background-color: #16417d;
       }
       &.white {
-                border: 2px solid #FFF;
+        border: 2px solid #fff;
         background-color: #001027;
       }
     }
@@ -1702,7 +1901,7 @@ $alert-color: #101010;
       .react-colorful__pointer {
         width: 15px;
         height: 15px;
-                border: 4px solid #Fff;
+        border: 4px solid #fff;
       }
       .react-colorful__saturation {
         border-radius: 2px;
@@ -1792,7 +1991,6 @@ $alert-color: #101010;
     min-height: 80px;
     background-color: #fff;
   }
-    
 }
 
 // 치수선 설정
@@ -1912,10 +2110,22 @@ $alert-color: #101010;
         border-radius: 50%;
       }
     }
-        &:nth-child(1){ top: 0; left: 0; }
+    &:nth-child(1) {
-        &:nth-child(2){ top: 0; right: 0; }
+      top: 0;
-        &:nth-child(3){ bottom: 0; left: 0; }
+      left: 0;
-        &:nth-child(4){ bottom: 0; right: 0; }
+    }
+    &:nth-child(2) {
+      top: 0;
+      right: 0;
+    }
+    &:nth-child(3) {
+      bottom: 0;
+      left: 0;
+    }
+    &:nth-child(4) {
+      bottom: 0;
+      right: 0;
+    }
   }
   .size-box {
     position: absolute;
@@ -2008,13 +2218,13 @@ $alert-color: #101010;
   max-height: 500px;
   overflow-y: auto;
   padding-bottom: 15px;
-    border-bottom: 1px solid #4D4D4D;
+  border-bottom: 1px solid #4d4d4d;
   &::-webkit-scrollbar {
     width: 4px;
     background-color: transparent;
   }
   &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
+    background-color: #d9d9d9;
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
@@ -2024,7 +2234,6 @@ $alert-color: #101010;
   &.tab2 {
     margin-top: 10px;
     gap: 15px;
-        
   }
   .module-flex-item {
     flex: 1;
@@ -2033,7 +2242,7 @@ $alert-color: #101010;
       font-weight: 500;
       color: #fff;
       padding-bottom: 10px;
-            border-bottom: 1px solid #4D4D4D;
+      border-bottom: 1px solid #4d4d4d;
     }
     .flex-item-btn-wrap {
       display: grid;
@@ -2090,7 +2299,7 @@ $alert-color: #101010;
 }
 .reset-word {
   font-size: 12px;
-    color: #FFCACA;
+  color: #ffcaca;
   font-weight: 400;
   margin-top: 10px;
 }

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 = {
+    '&': '&',
+    '&lt;': '<',
+    '&gt;': '>',
+    '&quot;': '"',
+    '&#39;': "'",
+  }
+
+  if (regex.test(str)) {
+    return str.replace(regex, (matched) => chars[matched] || matched)
+  }
+}