Merge branch 'qcast-pub' into dev

# Conflicts:
#	src/hooks/roofcover/usePropertiesSetting.js
#	src/hooks/surface/usePlacementShapeDrawing.js
#	src/hooks/surface/useSurfaceShapeBatch.js

src/components/common/font/FontSetting.jsx

@@ -1,4 +1,4 @@
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { usePopup } from '@/hooks/usePopup'
 import { useState } from 'react'

src/components/floor-plan/CanvasMenu.jsx

@@ -27,6 +27,7 @@ import { popupState } from '@/store/popupAtom'
 import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
 import { usePopup } from '@/hooks/usePopup'
 import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
+import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 
 const canvasMenus = [
   { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
@@ -39,28 +40,7 @@ const canvasMenus = [
 ]
 
 export default function CanvasMenu(props) {
-  const {
+  const { menuNumber, setMenuNumber } = props
-    menuNumber,
-    setMenuNumber,
-    setShowCanvasSettingModal,
-    showOutlineModal,
-    setShowOutlineModal,
-    setShowPlaceShapeModal,
-    setShowSlopeSettingModal,
-    setShowPlacementSurfaceSettingModal,
-    setShowPlaceShapeDrawingModal,
-    setShowRoofShapeSettingModal,
-    setShowObjectSettingModal,
-    setShowRoofShapePassivitySettingModal,
-    setShowAuxiliaryModal,
-    setShowEavesGableEditModal,
-    setShowMovementModal,
-    setShowWallLineOffsetSettingModal,
-    setShowRoofAllocationSettingModal,
-    setShowBasicSettingModal,
-    setShowCircuitTrestleSettingModal,
-    setShowPropertiesSettingModal,
-  } = props
 
   const { addPopup, closePopup } = usePopup()
   const [type, setType] = useState('')
@@ -115,22 +95,6 @@ export default function CanvasMenu(props) {
     }
   }
   const menuProps = {
-    setShowOutlineModal,
-    setShowPlaceShapeModal,
-    setShowRoofShapeSettingModal,
-    setShowRoofShapePassivitySettingModal,
-    setShowAuxiliaryModal,
-    setShowEavesGableEditModal,
-    setShowMovementModal,
-    setShowSlopeSettingModal,
-    setShowPlacementSurfaceSettingModal,
-    setShowPlaceShapeDrawingModal,
-    setShowWallLineOffsetSettingModal,
-    setShowRoofAllocationSettingModal,
-    setShowObjectSettingModal,
-    setShowBasicSettingModal,
-    setShowCircuitTrestleSettingModal,
-    setShowPropertiesSettingModal,
     type,
   }
 
@@ -140,7 +104,6 @@ export default function CanvasMenu(props) {
     if (menuNumber === 1) {
       onClickPlacementInitialMenu()
     }
-    if (menuNumber !== 2 && showOutlineModal) setShowOutlineModal(false)
   }, [menuNumber, type])
 
   // 저장버튼(btn08) 클릭 시 호출되는 함수
@@ -154,12 +117,17 @@ export default function CanvasMenu(props) {
     // })
   }
 
+  const [placementInitialId, setPlacementInitialId] = useState(uuidv4())
+  const placementInitialProps = {
+    id: placementInitialId,
+    pos: {
+      x: 50,
+      y: 180,
+    },
+  }
   const onClickPlacementInitialMenu = () => {
-    setShowOutlineModal(false)
+    addPopup(placementInitialId, 1, <PlacementShapeSetting {...placementInitialProps} />)
-    setShowCanvasSettingModal(false)
+    // setShowPlaceShapeModal(true)
-    setShowEavesGableEditModal(false)
-    setShowMovementModal(false)
-    setShowPlaceShapeModal(true)
   }
 
   const handleClear = () => {
@@ -177,7 +145,7 @@ export default function CanvasMenu(props) {
 
   const handlePopup = () => {
     const id = uuidv4()
-    addPopup(id, 1, <SettingModal01 id={id} />)
+    addPopup(id, 0, <SettingModal01 id={id} />)
   }
 
   const commonTextMode = () => {

src/components/floor-plan/FloorPlan.jsx

@@ -1,50 +1,15 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
-import { settingModalFirstOptionsState, settingModalGridOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import '@/styles/contents.scss'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
-import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting'
-import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
-import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
-import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
-import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/PlacementShapeDrawing'
-import Slope from '@/components/floor-plan/modal/Slope'
-
-import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing'
-import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
-import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
-import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
-import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
-import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
-import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
-import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
-import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting'
-import CircuitTrestleSetting from '@/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting'
-import { gridColorState } from '@/store/gridAtom'
 
 export default function FloorPlan() {
-  const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
-  const [showOutlineModal, setShowOutlineModal] = useState(false)
-  const [showPlaceShapeModal, setShowPlaceShapeModal] = useState(false)
-  const [showPropertiesSettingModal, setShowPropertiesSettingModal] = useState(false)
-  const [showRoofShapeSettingModal, setShowRoofShapeSettingModal] = useState(false)
-  const [showRoofShapePassivitySettingModal, setShowRoofShapePassivitySettingModal] = useState(false)
-  const [showAuxiliaryModal, setShowAuxiliaryModal] = useState(false)
-  const [showSlopeSettingModal, setShowSlopeSettingModal] = useState(false)
-  const [showPlacementSurfaceSettingModal, setShowPlacementSurfaceSettingModal] = useState(false)
-  const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
-  const [showObjectSettingModal, setShowObjectSettingModal] = useState(false)
-  const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
-  const [showMovementModal, setShowMovementModal] = useState(false)
-  const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false)
-  const [showRoofAllocationSettingModal, setShowRoofAllocationSettingModal] = useState(false)
-  const [showBasicSettingModal, setShowBasicSettingModal] = useState(false)
-  const [showCircuitTrestleSettingModal, setShowCircuitTrestleSettingModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
 
@@ -53,44 +18,16 @@ export default function FloorPlan() {
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
 
   const [menuNumber, setMenuNumber] = useState(null)
-  const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
-  const [showGridCopyModal, setShowGridCopyModal] = useState(false)
-  const [showGridMoveModal, setShowGridMoveModal] = useState(false)
-  const [color, setColor] = useRecoilState(gridColorState)
-  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
-
-  const outlineProps = {
-    setShowOutlineModal,
-    setShowPropertiesSettingModal,
-  }
 
   const modalProps = {
     menuNumber,
     setMenuNumber,
-    setShowCanvasSettingModal,
-    showOutlineModal,
-    setShowOutlineModal,
-    setShowPlaceShapeModal,
-    setShowSlopeSettingModal,
-    setShowPlacementSurfaceSettingModal,
-    setShowPlaceShapeDrawingModal,
-    setShowRoofShapeSettingModal,
-    setShowObjectSettingModal,
-    setShowRoofShapePassivitySettingModal,
-    setShowAuxiliaryModal,
-    setShowEavesGableEditModal,
-    setShowMovementModal,
-    setShowWallLineOffsetSettingModal,
-    setShowRoofAllocationSettingModal,
-    setShowBasicSettingModal,
-    setShowCircuitTrestleSettingModal,
-    setShowPropertiesSettingModal,
   }
 
   useEffect(() => {
     console.log('FloorPlan useEffect 실행')
     fetchSettings()
-  }, [showOutlineModal, objectNo])
+  }, [objectNo])
 
   // Canvas Setting 조회
   const fetchSettings = async () => {
@@ -118,36 +55,12 @@ export default function FloorPlan() {
     }
   }
 
-  const propertiesSettingProps = {
-    setShowPropertiesSettingModal,
-  }
-
-  useEffect(() => {}, [showOutlineModal])
-
   return (
     <>
       <div className="canvas-wrap">
         <CanvasMenu {...modalProps} />
         <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
           <CanvasLayout menuNumber={menuNumber} />
-          {showOutlineModal && <WallLineSetting {...outlineProps} />}
-          {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
-          {showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
-          {showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />}
-          {showRoofShapePassivitySettingModal && (
-            <RoofShapePassivitySetting setShowRoofShapePassivitySettingModal={setShowRoofShapePassivitySettingModal} />
-          )}
-          {showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
-          {showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
-          {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
-          {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
-          {showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />}
-          {showRoofAllocationSettingModal && <RoofAllocationSetting setShowRoofAllocationSettingModal={setShowRoofAllocationSettingModal} />}
-          {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
-          {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
-          {showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}
-          {showBasicSettingModal && <BasicSetting setShowBasicSettingModal={setShowBasicSettingModal} />}
-          {showCircuitTrestleSettingModal && <CircuitTrestleSetting setShowCircuitTrestleSettingModal={setShowCircuitTrestleSettingModal} />}
         </div>
       </div>
     </>

src/components/floor-plan/MenuDepth01.jsx

@@ -6,85 +6,92 @@ import { MENU } from '@/common/common'
 import { currentMenuState } from '@/store/canvasAtom'
 import { useSetRecoilState } from 'recoil'
 import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
+import { usePopup } from '@/hooks/usePopup'
+import { v4 as uuidv4 } from 'uuid'
+import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting'
+import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
+import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
+import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing'
+import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
+import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
+import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
+import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
+import Slope from '@/components/floor-plan/modal/Slope'
+import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
+import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/PlacementShapeDrawing'
+import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
+import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting'
+import CircuitTrestleSetting from '@/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting'
+
 export default function MenuDepth01(props) {
-  const {
+  const { type } = props
-    setShowOutlineModal,
-    type,
-    setShowPlaceShapeModal,
-    setShowRoofShapeSettingModal,
-    setShowRoofShapePassivitySettingModal,
-    setShowAuxiliaryModal,
-    setShowEavesGableEditModal,
-    setShowMovementModal,
-    setShowSlopeSettingModal,
-    setShowPlacementSurfaceSettingModal,
-    setShowPlaceShapeDrawingModal,
-    setShowWallLineOffsetSettingModal,
-    setShowRoofAllocationSettingModal,
-    setShowObjectSettingModal,
-    setShowBasicSettingModal,
-    setShowCircuitTrestleSettingModal,
-    setShowPropertiesSettingModal,
-  } = props
   const { getMessage } = useMessage()
   const [activeMenu, setActiveMenu] = useState()
   const setCurrentMenu = useSetRecoilState(currentMenuState)
-
   const { deleteAllSurfacesAndObjects } = useSurfaceShapeBatch()
-
+  const { addPopup } = usePopup()
+  const [outlineId, setOutlineId] = useState(uuidv4())
   const onClickMenu = ({ id, menu, name }) => {
     setActiveMenu(menu)
-    setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
     setCurrentMenu(menu)
-    setShowPlaceShapeModal(false)
     if (type === 'outline') {
-      setShowOutlineModal(id === 0)
+      switch (id) {
-      setShowRoofShapeSettingModal(id === 1)
+        case 0:
-      setShowRoofShapePassivitySettingModal(id === 2)
+          addPopup(outlineId, 1, <WallLineSetting id={outlineId} />)
-      setShowAuxiliaryModal(id === 3)
+          break
-      setShowEavesGableEditModal(id === 4)
+        case 1:
-      setShowMovementModal(id === 5)
+          addPopup(outlineId, 1, <RoofShapeSetting id={outlineId} />)
-      setShowWallLineOffsetSettingModal(id === 6)
+          break
-      setShowRoofAllocationSettingModal(id === 7)
+        case 2:
-      setShowPlaceShapeDrawingModal(false)
+          addPopup(outlineId, 1, <RoofShapePassivitySetting id={outlineId} />)
-      setShowPropertiesSettingModal(false)
+          break
-      setShowCircuitTrestleSettingModal(false)
+        case 3:
+          addPopup(outlineId, 1, <AuxiliaryDrawing id={outlineId} />)
+          break
+        case 4:
+          addPopup(outlineId, 1, <EavesGableEdit id={outlineId} />)
+          break
+        case 5:
+          addPopup(outlineId, 1, <MovementSetting id={outlineId} />)
+          break
+        case 6:
+          addPopup(outlineId, 1, <WallLineOffsetSetting id={outlineId} />)
+          break
+        case 7:
+          addPopup(outlineId, 1, <RoofAllocationSetting id={outlineId} />)
+          break
+      }
     }
 
     if (type === 'surface') {
-      setShowOutlineModal(false)
+      switch (id) {
-      setShowRoofShapeSettingModal(false)
+        case 0:
-      setShowRoofShapePassivitySettingModal(false)
+          addPopup(outlineId, 1, <Slope id={outlineId} />)
-      setShowAuxiliaryModal(false)
+          break
-      setShowEavesGableEditModal(false)
+        case 1:
-      setShowMovementModal(false)
+          addPopup(outlineId, 1, <PlacementShapeDrawing id={outlineId} />)
-      setShowWallLineOffsetSettingModal(false)
+          break
-      setShowRoofAllocationSettingModal(false)
+        case 2:
-      setShowPropertiesSettingModal(false)
+          addPopup(outlineId, 1, <PlacementSurfaceSetting id={outlineId} />)
-      setShowCircuitTrestleSettingModal(false)
+          break
-      setShowSlopeSettingModal(id === 0)
+        case 3:
-      setShowPlaceShapeDrawingModal(id === 1)
+          addPopup(outlineId, 1, <ObjectSetting id={outlineId} />)
-      setShowPlacementSurfaceSettingModal(id === 2)
+          break
-      setShowObjectSettingModal(id === 3)
+        case 4:
-
+          deleteAllSurfacesAndObjects()
-      //배치면 전체 삭제
+          break
-      if (id === 4) {
-        deleteAllSurfacesAndObjects()
       }
     }
 
     if (type === 'module') {
-      setShowOutlineModal(false)
+      switch (id) {
-      setShowRoofShapeSettingModal(false)
+        case 0:
-      setShowRoofShapePassivitySettingModal(false)
+          addPopup(outlineId, 1, <BasicSetting id={outlineId} />)
-      setShowAuxiliaryModal(false)
+          break
-      setShowEavesGableEditModal(false)
+        case 1:
-      setShowMovementModal(false)
+          addPopup(outlineId, 1, <CircuitTrestleSetting id={outlineId} />)
-      setShowWallLineOffsetSettingModal(false)
+          break
-      setShowRoofAllocationSettingModal(false)
+      }
-      setShowPropertiesSettingModal(false)
-      setShowBasicSettingModal(id === 0)
-      setShowCircuitTrestleSettingModal(id === 1)
     }
   }
 

src/components/floor-plan/modal/Slope.jsx

@@ -3,17 +3,20 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { globalPitchState } from '@/store/canvasAtom'
 import { useRecoilState } from 'recoil'
 import { useRef } from 'react'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function Slope({ setShowSlopeSettingModal }) {
+export default function Slope({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
   const [globalPitch, setGlobalPitch] = useRecoilState(globalPitchState)
   const inputRef = useRef()
+
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1>
-          <button className="modal-close" onClick={() => setShowSlopeSettingModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>
@@ -34,7 +37,7 @@ export default function Slope({ setShowSlopeSettingModal }) {
               className="btn-frame modal act"
               onClick={() => {
                 setGlobalPitch(inputRef.current.value)
-                setShowSlopeSettingModal(false)
+                closePopup(id)
               }}
             >
               {getMessage('modal.common.save')}

src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx

@@ -7,9 +7,11 @@ import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
 import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
 import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) {
+export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
 
   const types = [
     { id: 1, name: getMessage('straight.line'), type: OUTER_LINE_TYPE.OUTER_LINE },
@@ -47,7 +49,7 @@ export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) {
     handleFix,
     buttonAct,
     setButtonAct,
-  } = useAuxiliaryDrawing(setShowAuxiliaryModal)
+  } = useAuxiliaryDrawing(id)
 
   const outerLineProps = {
     length1,
@@ -121,11 +123,11 @@ export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) {
     setType(button.type)
   }
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1>
-          <button className="modal-close" onClick={() => setShowAuxiliaryModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>
@@ -149,7 +151,7 @@ export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) {
             <button className="btn-frame modal mr5" onClick={handleRollback}>
               {getMessage('modal.cover.outline.rollback')}
             </button>
-            <button className="btn-frame modal act" onClick={() => handleFix(setShowAuxiliaryModal)}>
+            <button className="btn-frame modal act" onClick={() => handleFix(id)}>
               {getMessage('apply')}
             </button>
           </div>

src/components/floor-plan/modal/basic/BasicSetting.jsx

@@ -8,17 +8,19 @@ import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/Pitch
 import Placement from '@/components/floor-plan/modal/basic/step/Placement'
 import { useRecoilState } from 'recoil'
 import { canvasSettingState } from '@/store/canvasAtom'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function BasicSetting({ setShowBasicSettingModal }) {
+export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
   const [tabNum, setTabNum] = useState(1)
   const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lx-2`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
-          <button className="modal-close" onClick={() => setShowBasicSettingModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

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

@@ -4,9 +4,11 @@ import PowerConditionalSelect from '@/components/floor-plan/modal/circuitTrestle
 import CircuitAllocation from '@/components/floor-plan/modal/circuitTrestle/step/CircuitAllocation'
 import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp'
 import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function CircuitTrestleSetting({ setShowCircuitTrestleSettingModal }) {
+export default function CircuitTrestleSetting({ id }) {
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
   const [tabNum, setTabNum] = useState(1)
   const [circuitAllocationType, setCircuitAllocationType] = useState(1)
   const circuitProps = {
@@ -18,7 +20,7 @@ export default function CircuitTrestleSetting({ setShowCircuitTrestleSettingModa
       <div className={`modal-pop-wrap lx-2`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
-          <button className="modal-close" onClick={() => setShowCircuitTrestleSettingModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx

@@ -5,11 +5,13 @@ import Gable from '@/components/floor-plan/modal/eavesGable/type/Gable'
 import WallMerge from '@/components/floor-plan/modal/eavesGable/type/WallMerge'
 import Shed from '@/components/floor-plan/modal/eavesGable/type/Shed'
 import { useEavesGableEdit } from '@/hooks/roofcover/useEavesGableEdit'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function EavesGableEdit({ setShowEavesGableEditModal }) {
+export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
 
-  const { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef } = useEavesGableEdit(setShowEavesGableEditModal)
+  const { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef } = useEavesGableEdit(id)
   const eavesProps = {
     pitchRef,
     offsetRef,
@@ -34,11 +36,11 @@ export default function EavesGableEdit({ setShowEavesGableEditModal }) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
-          <button className="modal-close" onClick={() => setShowEavesGableEditModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/movement/MovementSetting.jsx

@@ -3,9 +3,11 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useState } from 'react'
 import FlowLine from '@/components/floor-plan/modal/movement/type/FlowLine'
 import Updown from '@/components/floor-plan/modal/movement/type/Updown'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function MovementSetting({ setShowMovementModal }) {
+export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
   const [buttonAct, setButtonAct] = useState(1)
   const buttonMenu = [
     { id: 1, name: getMessage('modal.movement.flow.line.move') },
@@ -13,11 +15,11 @@ export default function MovementSetting({ setShowMovementModal }) {
   ]
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
-          <button className="modal-close" onClick={() => setShowMovementModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/object/ObjectSetting.jsx

@@ -12,13 +12,15 @@ import OpenSpace from '@/components/floor-plan/modal/object/type/OpenSpace'
 import Shadow from '@/components/floor-plan/modal/object/type/Shadow'
 import TriangleDormer from '@/components/floor-plan/modal/object/type/TriangleDormer'
 import PentagonDormer from '@/components/floor-plan/modal/object/type/PentagonDormer'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function ObjectSetting({ setShowObjectSettingModal }) {
+export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
   const [buttonAct, setButtonAct] = useState(1)
   const { swalFire } = useSwal()
   const { applyOpeningAndShadow, applyDormers } = useObjectBatch()
+  const { closePopup } = usePopup()
 
   const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
 
@@ -70,11 +72,11 @@ export default function ObjectSetting({ setShowObjectSettingModal }) {
     { id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
   ]
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lrr`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
-          <button className="modal-close" onClick={() => setShowObjectSettingModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx

@@ -4,21 +4,15 @@ import { usePropertiesSetting } from '@/hooks/roofcover/usePropertiesSetting'
 
 export default function PropertiesSetting(props) {
   const { getMessage } = useMessage()
-  const { setShowPropertiesSettingModal } = props
+  const { id, pos = { x: 50, y: 230 } } = props
-
+  const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(id)
-  const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(setShowPropertiesSettingModal)
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ssm`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
-          <button
+          <button className="modal-close" onClick={() => closeModal(id)}>
-            className="modal-close"
-            onClick={() => {
-              closeModal(setShowPropertiesSettingModal)
-            }}
-          >
             닫기
           </button>
         </div>
@@ -39,13 +33,7 @@ export default function PropertiesSetting(props) {
             <button className="btn-frame modal mr5" onClick={handleRollback}>
               {getMessage('modal.cover.outline.rollback')}
             </button>
-            <button
+            <button className="btn-frame modal act" onClick={() => handleFix()}>
-              className="btn-frame modal act"
-              onClick={() => {
-                handleFix()
-                setShowPropertiesSettingModal(false)
-              }}
-            >
               {getMessage('modal.cover.outline.finish')}
             </button>
           </div>

src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx

@@ -9,10 +9,15 @@ import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle'
 import Angle from '@/components/floor-plan/modal/lineTypes/Angle'
 import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
 import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
+import { usePopup } from '@/hooks/usePopup'
+import { useState } from 'react'
+import { v4 as uuidv4 } from 'uuid'
 
 export default function WallLineSetting(props) {
-  const { setShowOutlineModal, setShowPropertiesSettingModal } = props
+  const { id } = props
+  const { addPopup, closePopup } = usePopup()
   const { getMessage } = useMessage()
+  const [propertiesId, setPropertiesId] = useState(uuidv4())
   const {
     length1,
     setLength1,
@@ -39,7 +44,7 @@ export default function WallLineSetting(props) {
     outerLineDiagonalLengthRef,
     handleRollback,
     handleFix,
-  } = useOuterLineWall(setShowOutlineModal)
+  } = useOuterLineWall(id, propertiesId)
 
   const outerLineProps = {
     length1,
@@ -113,9 +118,8 @@ export default function WallLineSetting(props) {
       <div className={`modal-pop-wrap r mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
-          <button className="modal-close" onClick={() => setShowOutlineModal(false)}>
+          {/*<button className="modal-close" onClick={() => closePopup(id)}>*/}
-            닫기
+          <button className="modal-close">닫기</button>
-          </button>
         </div>
         <div className="modal-body">
           <div className="modal-btn-wrap">
@@ -172,7 +176,9 @@ export default function WallLineSetting(props) {
               className="btn-frame modal act"
               onClick={() => {
                 handleFix()
-                setShowPropertiesSettingModal(true)
+                // closePopup(id)
+
+                // setShowPropertiesSettingModal(true)
               }}
             >
               {getMessage('modal.cover.outline.fix')}

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

@@ -8,9 +8,11 @@ import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
 import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
 import { usePlacementShapeDrawing } from '@/hooks/surface/usePlacementShapeDrawing'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal }) {
+export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
   const [buttonAct, setButtonAct] = useState(1)
   const types = [
     { id: 1, name: getMessage('straight.line'), type: OUTER_LINE_TYPE.OUTER_LINE },
@@ -45,7 +47,7 @@ export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal })
     outerLineDiagonalLengthRef,
     handleRollback,
     handleFix,
-  } = usePlacementShapeDrawing(setShowPlaceShapeDrawingModal)
+  } = usePlacementShapeDrawing(id)
 
   const outerLineProps = {
     length1,
@@ -119,11 +121,11 @@ export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal })
     setType(button.type)
   }
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1>
-          <button className="modal-close" onClick={() => setShowPlaceShapeDrawingModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

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

@@ -7,13 +7,15 @@ import { canvasSettingState } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
+export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
   const [objectNo, setObjectNo] = useState('test123241008001') // 후에 삭제 필요
   const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
   const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
   const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(1)
   const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
+  const { closePopup } = usePopup()
   const [basicSetting, setBasicSettings] = useState({
     roofSizeSet: 1,
     roofAngleSet: 'slope',
@@ -169,11 +171,11 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap l mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
-          <button className="modal-close" onClick={() => setShowPlaceShapeModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx

@@ -7,15 +7,16 @@ import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { POLYGON_TYPE } from '@/common/common'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSettingModal }) {
+export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
   const [selectedType, setSelectedType] = useState()
   const [rotate, setRotate] = useState(0)
   const [xInversion, setXInversion] = useState(false)
   const [yInversion, setYInversion] = useState(false)
   const canvas = useRecoilValue(canvasState)
-
+  const { closePopup } = usePopup()
   const { applySurfaceShape } = useSurfaceShapeBatch()
 
   const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
@@ -231,7 +232,7 @@ export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSetting
     surfaceRefs.xInversion = xInversion //좌우반전
     surfaceRefs.yInversion = yInversion //상하반전
     surfaceRefs.rotate = rotate * 90 //앵글
-    applySurfaceShape(surfaceRefs, selectedType, setShowPlacementSurfaceSettingModal)
+    applySurfaceShape(surfaceRefs, selectedType, id)
   }
 
   useEffect(() => {
@@ -243,7 +244,7 @@ export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSetting
       <div className={`modal-pop-wrap l-2`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
-          <button className="modal-close" onClick={() => setShowPlacementSurfaceSettingModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -2,18 +2,20 @@ import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function RoofAllocationSetting({ setShowRoofAllocationSettingModal }) {
+export default function RoofAllocationSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
   const { handleSave, onAddRoofMaterial, onDeleteRoofMaterial, values, roofMaterials, selectedRoofMaterial, setSelectedRoofMaterial } =
-    useRoofAllocationSetting(setShowRoofAllocationSettingModal)
+    useRoofAllocationSetting(id)
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ml`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
-          <button className="modal-close" onClick={() => setShowRoofAllocationSettingModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx

@@ -4,11 +4,12 @@ import Gable from '@/components/floor-plan/modal/roofShape/passivity/Gable'
 import Shed from '@/components/floor-plan/modal/roofShape/passivity/Shed'
 import { useMessage } from '@/hooks/useMessage'
 import { useRoofShapePassivitySetting } from '@/hooks/roofcover/useRoofShapePassivitySetting'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySettingModal }) {
+export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 } }) {
-  const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef } =
+  const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef } = useRoofShapePassivitySetting(id)
-    useRoofShapePassivitySetting(setShowRoofShapePassivitySettingModal)
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
 
   const eavesProps = {
     offsetRef,
@@ -25,11 +26,11 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxm`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
-          <button className="modal-close" onClick={() => setShowRoofShapePassivitySettingModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>
@@ -58,7 +59,7 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={() => handleSave(setShowRoofShapePassivitySettingModal)}>
+            <button className="btn-frame modal act" onClick={() => handleSave(id)}>
               {getMessage('common.setting.finish')}
             </button>
           </div>

src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx

@@ -6,8 +6,9 @@ import Image from 'next/image'
 import Direction from '@/components/floor-plan/modal/roofShape/type/Direction'
 import { useRoofShapeSetting } from '@/hooks/roofcover/useRoofShapeSetting'
 import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) {
+export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
   const {
     shapeNum,
@@ -37,7 +38,8 @@ export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) {
     buttonMenu,
     handleConfirm,
     handleRollBack,
-  } = useRoofShapeSetting(setShowRoofShapeSettingModal)
+  } = useRoofShapeSetting(id)
+  const { closePopup } = usePopup()
 
   const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset }
   const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset }
@@ -79,11 +81,11 @@ export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lr mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.roof.shape.setting')}</h1>
-          <button className="modal-close" onClick={() => setShowRoofShapeSettingModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>
@@ -106,7 +108,7 @@ export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) {
             {(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && <Direction {...directionProps} />}
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={() => handleSave(setShowRoofShapeSettingModal)}>
+            <button className="btn-frame modal act" onClick={() => handleSave(id)}>
               {getMessage('common.setting.finish')}
             </button>
           </div>

src/components/floor-plan/modal/setting01/SecondOption.jsx

@@ -169,6 +169,12 @@ export default function SecondOption() {
 
   const [horizon, setHorizon] = useState(1600)
   const [vertical, setVertical] = useState(1600)
+
+  const fontProps = {
+    id: fontId,
+    pos: { x: 745, y: 180 },
+    setIsShow: setShowFontSettingModal,
+  }
   const planSizeProps = {
     id: planSizeId,
     horizon,
@@ -176,11 +182,12 @@ export default function SecondOption() {
     vertical,
     setVertical,
     setIsShow: setShowPlanSizeSettingModal,
-    pos: { x: 1020, y: 180 },
+    pos: { x: 1025, y: 180 },
   }
 
   const handlePopup = (type) => {
-    const id = uuidv4()
+    setShowPlanSizeSettingModal(false)
+    setShowFontSettingModal(false)
 
     switch (type) {
       case 'dimensionLine':
@@ -189,7 +196,7 @@ export default function SecondOption() {
           addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
         } else {
           setShowDimensionLineSettingModal(false)
-          closePopups([dimensionId, fontId])
+          closePopup(dimensionId)
         }
 
         break
@@ -197,10 +204,13 @@ export default function SecondOption() {
       case 'font2': //흐름 방향 글꼴 변경
       case 'font3': //치수 글꼴변경
       case 'font4': //회로번호 글꼴변경
-        addPopup(fontId, 2, <FontSetting id={fontId} setShowFontSettingModal={setShowFontSettingModal} />)
+        setShowFontSettingModal(true)
+
+        addPopup(fontId, 2, <FontSetting {...fontProps} />)
         break
       case 'planSize':
         setShowPlanSizeSettingModal(true)
+
         addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />)
         break
     }

src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx

@@ -1,4 +1,4 @@
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { v4 as uuidv4 } from 'uuid'
 import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
@@ -44,7 +44,17 @@ export default function DimensionLineSetting(props) {
   const [showColorPickerModal, setShowColorPickerModal] = useState(false)
   const [showFontModal, setShowFontModal] = useState(false)
   const { getMessage } = useMessage()
+
   useEffect(() => {
+    console.log(2, isShow)
+    if (pixel) {
+      setOriginPixel(pixels?.filter((data) => data.value === pixel)[0])
+    }
+    setIsShow(true)
+  }, [])
+
+  useEffect(() => {
+    console.log(1, isShow)
     if (!isShow) {
       closePopups([fontModalId, colorModalId])
     }
@@ -81,23 +91,14 @@ export default function DimensionLineSetting(props) {
   const popupHandle = (type) => {
     switch (type) {
       case 'color':
-        closePopup(fontModalId)
         addPopup(colorModalId, 3, <ColorPickerModal {...colorPickerProps} />)
         break
       case 'font':
-        closePopup(colorModalId)
         addPopup(fontModalId, 3, <FontSetting {...fontProps} />)
         break
     }
   }
 
-  useEffect(() => {
-    console.log(pixel)
-    if (pixel) {
-      setOriginPixel(pixels?.filter((data) => data.value === pixel)[0])
-    }
-  }, [])
-
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm`}>
@@ -106,10 +107,8 @@ export default function DimensionLineSetting(props) {
           <button
             className="modal-close"
             onClick={() => {
-              console.log('fontModalId', fontModalId)
-              console.log('colorModalId', colorModalId)
               closePopups([fontModalId, colorModalId, id])
-              // setIsShow(false)
+              setIsShow(false)
             }}
           >
             닫기

src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx

@@ -1,4 +1,4 @@
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
 import { useState } from 'react'

src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx

@@ -3,9 +3,11 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import WallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine'
 import Offset from '@/components/floor-plan/modal/wallLineOffset/type/Offset'
 import { useWallLineOffsetSetting } from '@/hooks/roofcover/useWallLineOffsetSetting'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModal }) {
+export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
   const {
     type,
     setType,
@@ -19,7 +21,7 @@ export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModa
     length2Ref,
     handleSave,
     wallLineEditRef,
-  } = useWallLineOffsetSetting(setShowWallLineOffsetSettingModal)
+  } = useWallLineOffsetSetting(id)
 
   const wallLineProps = {
     length1Ref,
@@ -37,11 +39,11 @@ export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModa
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>
-          <button className="modal-close" onClick={() => setShowWallLineOffsetSettingModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -1,19 +1,11 @@
 import { useEffect, useRef, useState } from 'react'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
-import {
+import { adsorptionRangeState, canvasState } from '@/store/canvasAtom'
-  adsorptionPointAddModeState,
-  adsorptionPointModeState,
-  adsorptionRangeState,
-  canvasState,
-  dotLineIntervalSelector,
-  verticalHorizontalModeState,
-} from '@/store/canvasAtom'
 import { useEvent } from '@/hooks/useEvent'
 import { useMouse } from '@/hooks/useMouse'
 import { useLine } from '@/hooks/useLine'
 import { useTempGrid } from '@/hooks/useTempGrid'
 import {
-  OUTER_LINE_TYPE,
   outerLineAngle1State,
   outerLineAngle2State,
   outerLineArrow1State,
@@ -23,14 +15,15 @@ import {
   outerLineLength2State,
   outerLineTypeState,
 } from '@/store/outerLineAtom'
-import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
+import { calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
 import { fabric } from 'fabric'
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 import { useSwal } from '@/hooks/useSwal'
 import { booleanPointInPolygon } from '@turf/turf'
+import { usePopup } from '@/hooks/usePopup'
 
 // 보조선 작성
-export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
+export function useAuxiliaryDrawing(id) {
   const canvas = useRecoilValue(canvasState)
   const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useEvent()
   const { getIntersectMousePoint } = useMouse()
@@ -38,6 +31,7 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
   const { tempGridMode } = useTempGrid()
   const { swalFire } = useSwal()
   const { getAdsorptionPoints } = useAdsorptionPoint()
+  const { closePopup } = usePopup()
 
   const adsorptionRange = useRecoilValue(adsorptionRangeState)
 
@@ -86,7 +80,7 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
     const roofs = canvas?.getObjects().filter((obj) => obj.name === 'roofBase')
     if (roofs.length === 0) {
       swalFire({ text: '지붕형상이 없습니다.' })
-      setShowAuxiliaryModal(false)
+      closePopup(id)
       return
     }
 
@@ -653,7 +647,7 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
       roofBase.innerLines = [...roofInnerLines]
     })
 
-    setShowAuxiliaryModal(false)
+    closePopup(id)
   }
 
   return {

src/hooks/roofcover/useEavesGableEdit.js

@@ -8,12 +8,14 @@ import { useLine } from '@/hooks/useLine'
 import { useMode } from '@/hooks/useMode'
 import { outerLineFixState } from '@/store/outerLineAtom'
 import { useSwal } from '@/hooks/useSwal'
+import { usePopup } from '@/hooks/usePopup'
 
 // 처마.케라바 변경
-export function useEavesGableEdit(setShowEavesGableEditModal) {
+export function useEavesGableEdit(id) {
   const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
   const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const { closePopup } = usePopup()
   const TYPES = {
     EAVES: 'eaves',
     GABLE: 'gable',
@@ -44,7 +46,7 @@ export function useEavesGableEdit(setShowEavesGableEditModal) {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
     if (!outerLineFix || outerLines.length === 0) {
       swalFire({ text: '외벽선이 없습니다.' })
-      setShowEavesGableEditModal(false)
+      closePopup(id)
     }
   }, [])
 

src/hooks/roofcover/useOuterLineWall.js

@@ -1,12 +1,11 @@
 import { useEffect, useRef } from 'react'
-import { distanceBetweenPoints, getDegreeByChon } from '@/util/canvas-util'
+import { distanceBetweenPoints } from '@/util/canvas-util'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import {
   adsorptionPointAddModeState,
   adsorptionPointModeState,
   adsorptionRangeState,
   canvasState,
-  currentCanvasPlanState,
   dotLineIntervalSelector,
   verticalHorizontalModeState,
 } from '@/store/canvasAtom'
@@ -29,11 +28,12 @@ import {
 } from '@/store/outerLineAtom'
 import { calculateAngle } from '@/util/qpolygon-utils'
 import { fabric } from 'fabric'
-import { QLine } from '@/components/fabric/QLine'
 import { outlineDisplaySelector } from '@/store/settingAtom'
+import { usePopup } from '@/hooks/usePopup'
+import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
 
 //외벽선 그리기
-export function useOuterLineWall(setShowOutlineModal) {
+export function useOuterLineWall(id, propertiesId) {
   const canvas = useRecoilValue(canvasState)
   const {
     initEvent,
@@ -71,6 +71,7 @@ export function useOuterLineWall(setShowOutlineModal) {
   const [outerLineDiagonalLength, setOuterLineDiagonalLength] = useRecoilState(outerLineDiagonalState)
   const arrow1Ref = useRef(arrow1)
   const arrow2Ref = useRef(arrow2)
+  const { addPopup, closePopup } = usePopup()
 
   const setOuterLineFix = useSetRecoilState(outerLineFixState)
 
@@ -221,7 +222,8 @@ export function useOuterLineWall(setShowOutlineModal) {
         removeAllDocumentEventListeners()
         canvas?.renderAll()
         setOuterLineFix(true)
-        setShowOutlineModal(false)
+        closePopup(id)
+        addPopup(propertiesId, 1, <PropertiesSetting id={propertiesId} pos={{ x: 50, y: 230 }} />)
       }
 
       if (points.length < 3) {
@@ -419,56 +421,104 @@ export function useOuterLineWall(setShowOutlineModal) {
           if (prev.length === 0) {
             return []
           }
-          return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x + length1Value / 10,
+              y: prev[prev.length - 1].y + length2Value / 10,
+            },
+          ]
         })
       } else if (arrow1Value === '↓' && arrow2Value === '←') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x - length1Value / 10,
+              y: prev[prev.length - 1].y + length2Value / 10,
+            },
+          ]
         })
       } else if (arrow1Value === '↑' && arrow2Value === '→') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x + length1Value / 10,
+              y: prev[prev.length - 1].y - length2Value / 10,
+            },
+          ]
         })
       } else if (arrow1Value === '↑' && arrow2Value === '←') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x - length1Value / 10,
+              y: prev[prev.length - 1].y - length2Value / 10,
+            },
+          ]
         })
       } else if (arrow1Value === '→' && arrow2Value === '↓') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x + length2Value / 10,
+              y: prev[prev.length - 1].y + length1Value / 10,
+            },
+          ]
         })
       } else if (arrow1Value === '→' && arrow2Value === '↑') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x + length2Value / 10,
+              y: prev[prev.length - 1].y - length1Value / 10,
+            },
+          ]
         })
       } else if (arrow1Value === '←' && arrow2Value === '↓') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x - length2Value / 10,
+              y: prev[prev.length - 1].y + length1Value / 10,
+            },
+          ]
         })
       } else if (arrow1Value === '←' && arrow2Value === '↑') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x - length2Value / 10,
+              y: prev[prev.length - 1].y - length1Value / 10,
+            },
+          ]
         })
       }
 
@@ -524,35 +574,65 @@ export function useOuterLineWall(setShowOutlineModal) {
           if (prev.length === 0) {
             return []
           }
-          return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x + length2Value / 10,
+              y: prev[prev.length - 1].y + length1Value / 10,
+            },
+          ]
         })
       } else if (arrow1Value === '↓' && arrow2Value === '←') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x - length2Value / 10,
+              y: prev[prev.length - 1].y + length1Value / 10,
+            },
+          ]
         })
       } else if (arrow1Value === '↑' && arrow2Value === '→') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x + length2Value / 10,
+              y: prev[prev.length - 1].y - length1Value / 10,
+            },
+          ]
         })
       } else if (arrow1Value === '↑' && arrow2Value === '←') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x - length2Value / 10,
+              y: prev[prev.length - 1].y - length1Value / 10,
+            },
+          ]
         })
       } else if (arrow1Value === '→' && arrow2Value === '↓') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
+          return [
+            ...prev,
+            {
+              x: prev[prev.length - 1].x + length1Value / 10,
+              y: prev[prev.length - 1].y + length2Value / 10,
+            },
+          ]
         })
       } else if (arrow1Value === '→' && arrow2Value === '↑') {
         setPoints((prev) => {

src/hooks/roofcover/usePropertiesSetting.js

@@ -6,9 +6,10 @@ import { useMode } from '@/hooks/useMode'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useLine } from '@/hooks/useLine'
 import { outerLinePointsState } from '@/store/outerLineAtom'
+import { usePopup } from '@/hooks/usePopup'
 
 // 외벽선 속성 설정
-export function usePropertiesSetting(setShowPropertiesSettingModal) {
+export function usePropertiesSetting(id) {
   const canvas = useRecoilValue(canvasState)
 
   const currentObject = useRecoilValue(currentObjectState)
@@ -17,7 +18,8 @@ export function usePropertiesSetting(setShowPropertiesSettingModal) {
   const setPoints = useResetRecoilState(outerLinePointsState)
 
   const { addPolygonByLines } = usePolygon()
-  const { removeLine, hideLine, addPitchTextsByOuterLines } = useLine()
+  const { removeLine, hideLine } = useLine()
+  const { closePopup } = usePopup()
 
   useEffect(() => {
     const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
@@ -129,18 +131,20 @@ export function usePropertiesSetting(setShowPropertiesSettingModal) {
         stroke: '#000000',
         strokeWidth: 4,
       })
+
+      hideLine(line)
     })
 
     const wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
 
     wall.lines = [...lines]
 
-    addPitchTextsByOuterLines()
     const roof = drawRoofPolygon(wall)
 
     setPoints([])
     canvas.renderAll()
     roof.drawHelpLine()
+    closePopup(id)
   }
 
   const closeModal = (fn) => {
@@ -160,7 +164,7 @@ export function usePropertiesSetting(setShowPropertiesSettingModal) {
 
     canvas.renderAll()
     setPoints([])
-    setShowPropertiesSettingModal(false)
+    closePopup(id)
   }
 
   return { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal }

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -5,11 +5,13 @@ import { setSurfaceShapePattern } from '@/util/canvas-util'
 import { splitPolygonWithLines } from '@/util/qpolygon-utils'
 import { useSwal } from '@/hooks/useSwal'
 import { usePolygon } from '@/hooks/usePolygon'
+import { usePopup } from '@/hooks/usePopup'
 
 // 지붕면 할당
-export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
+export function useRoofAllocationSetting(id) {
   const canvas = useRecoilValue(canvasState)
   const { drawDirectionArrow } = usePolygon()
+  const { closePopup } = usePopup()
 
   const { swalFire } = useSwal()
 
@@ -80,7 +82,7 @@ export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
     const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
     if (roofBases.length === 0) {
       swalFire({ text: '할당할 지붕이 없습니다.' })
-      setShowRoofAllocationSettingModal(false)
+      closePopup(id)
     }
   }, [])
 
@@ -120,7 +122,7 @@ export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
       setSurfaceShapePattern(roof)
       drawDirectionArrow(roof)
     })
-    setShowRoofAllocationSettingModal(false)
+    closePopup(id)
   }
 
   const handleRadioOnChange = (e) => {

src/hooks/roofcover/useRoofShapePassivitySetting.js

@@ -9,9 +9,10 @@ import { useMode } from '@/hooks/useMode'
 import { usePolygon } from '@/hooks/usePolygon'
 import { outerLineFixState } from '@/store/outerLineAtom'
 import { useSwal } from '@/hooks/useSwal'
+import { usePopup } from '@/hooks/usePopup'
 
 //지붕형상 수동 설정
-export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingModal) {
+export function useRoofShapePassivitySetting(id) {
   const TYPES = {
     EAVES: 'eaves',
     GABLE: 'gable',
@@ -28,16 +29,12 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
   const offsetRef = useRef(null)
   const pitchRef = useRef(null)
   const currentLineRef = useRef(null)
-
   const history = useRef([])
-
   const [type, setType] = useState(TYPES.EAVES)
-
   const isFix = useRef(false)
   const initLines = useRef([])
-
   const [isLoading, setIsLoading] = useState(false)
-
+  const { closePopup } = usePopup()
   const buttons = [
     { id: 1, name: getMessage('eaves'), type: TYPES.EAVES },
     { id: 2, name: getMessage('gable'), type: TYPES.GABLE },
@@ -50,7 +47,7 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
     if (!outerLineFix || outerLines.length === 0) {
       swalFire({ text: '외벽선이 없습니다.' })
-      setShowRoofShapePassivitySettingModal(false)
+      closePopup(id)
       return
     }
     setIsLoading(true)
@@ -180,7 +177,7 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
     isFix.current = true
     handleLineToPolygon()
 
-    setShowRoofShapePassivitySettingModal(false)
+    closePopup(id)
   }
 
   const handleLineToPolygon = () => {

src/hooks/roofcover/useRoofShapeSetting.js

@@ -2,15 +2,16 @@ import { useEffect, useRef, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
-import { LINE_TYPE, MENU } from '@/common/common'
+import { LINE_TYPE } from '@/common/common'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useMode } from '@/hooks/useMode'
 import { useLine } from '@/hooks/useLine'
 import { outerLineFixState } from '@/store/outerLineAtom'
 import { useSwal } from '@/hooks/useSwal'
+import { usePopup } from '@/hooks/usePopup'
 
 // 지붕형상 설정
-export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
+export function useRoofShapeSetting(id) {
   const [shapeNum, setShapeNum] = useState(1)
   const [buttonAct, setButtonAct] = useState(1)
   const { swalFire } = useSwal()
@@ -34,12 +35,14 @@ export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
   const outerLineFix = useRecoilValue(outerLineFixState)
 
   const history = useRef([])
+  const { closePopup } = usePopup()
 
   useEffect(() => {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
     if (!outerLineFix || outerLines.length === 0) {
       swalFire({ text: '외벽선이 없습니다.' })
-      setShowRoofShapeSettingModal(false)
+      // setShowRoofShapeSettingModal(false)
+      closePopup(id)
     }
 
     return () => {
@@ -372,7 +375,8 @@ export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
 
     canvas?.renderAll()
     roof.drawHelpLine()
-    setShowRoofShapeSettingModal(false)
+    // setShowRoofShapeSettingModal(false)
+    closePopup(id)
   }
 
   const initLineSetting = () => {

src/hooks/roofcover/useWallLineOffsetSetting.js

@@ -5,12 +5,14 @@ import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
 import { useLine } from '@/hooks/useLine'
 import { useSwal } from '@/hooks/useSwal'
+import { usePopup } from '@/hooks/usePopup'
 
 // 외벽선 편집 및 오프셋
-export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
+export function useWallLineOffsetSetting(id) {
   const canvas = useRecoilValue(canvasState)
   const { showLine, addLine } = useLine()
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
   const { swalFire } = useSwal()
   const { addCanvasMouseEventListener, initEvent } = useEvent()
   const wallLineEditRef = useRef(null)
@@ -58,7 +60,7 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
     if (outerLines.length === 0) {
       swalFire({ text: '외벽선이 없습니다.' })
-      setShowWallLineOffsetSettingModal(false)
+      closePopup(id)
       return
     }
     outerLines.forEach((outerLine) => {

src/hooks/surface/usePlacementShapeDrawing.js

@@ -30,9 +30,11 @@ import {
 } from '@/store/placementShapeDrawingAtom'
 import { usePolygon } from '@/hooks/usePolygon'
 import { POLYGON_TYPE } from '@/common/common'
+import { usePopup } from '@/hooks/usePopup'
+
 import { roofDisplaySelector } from '@/store/settingAtom'
 // 면형상 배치
-export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
+export function usePlacementShapeDrawing(id) {
   const canvas = useRecoilValue(canvasState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
   const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
@@ -40,7 +42,6 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
   const { getIntersectMousePoint } = useMouse()
   const { addLine, removeLine } = useLine()
   const { addPolygonByLines, drawDirectionArrow } = usePolygon()
-
   const { tempGridMode } = useTempGrid()
 
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
@@ -70,6 +71,8 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
 
   const isFix = useRef(false)
 
+  const { closePopup } = usePopup()
+
   const globalPitch = useRecoilValue(globalPitchState)
 
   useEffect(() => {
@@ -232,7 +235,7 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
 
         setPoints([])
         canvas?.renderAll()
-        setShowPlaceShapeDrawingModal(false)
+        closePopup(id)
       }
 
       if (points.length < 3) {

src/hooks/surface/useSurfaceShapeBatch.js

@@ -9,6 +9,7 @@ import { QPolygon } from '@/components/fabric/QPolygon'
 import { useSwal } from '@/hooks/useSwal'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
+import { usePopup } from '@/hooks/usePopup'
 import { roofDisplaySelector } from '@/store/settingAtom'
 
 export function useSurfaceShapeBatch() {
@@ -19,8 +20,9 @@ export function useSurfaceShapeBatch() {
   const roofDisplay = useRecoilValue(roofDisplaySelector)
   const { swalFire } = useSwal()
   const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const { closePopup } = usePopup()
 
-  const applySurfaceShape = (surfaceRefs, selectedType, setShowPlacementSurfaceSettingModal) => {
+  const applySurfaceShape = (surfaceRefs, selectedType, id) => {
     let length1, length2, length3, length4, length5
     const surfaceId = selectedType?.id
     const azimuth = surfaceRefs.azimuth.current
@@ -59,7 +61,6 @@ export function useSurfaceShapeBatch() {
     let obj = null
     let points = []
     if (checkSurfaceShape(surfaceId, { length1, length2, length3, length4, length5 })) {
-      setShowPlacementSurfaceSettingModal(false)
       addCanvasMouseEventListener('mouse:move', (e) => {
         if (!isDrawing) {
           return
@@ -115,6 +116,7 @@ export function useSurfaceShapeBatch() {
         obj.set({ originAngle: originAngle })
 
         canvas?.renderAll()
+        closePopup(id)
       })
 
       addCanvasMouseEventListener('mouse:down', (e) => {
@@ -122,7 +124,7 @@ export function useSurfaceShapeBatch() {
         obj.set('name', POLYGON_TYPE.ROOF)
         initEvent()
         setSurfaceShapePattern(obj, roofDisplay.column)
-        setShowPlacementSurfaceSettingModal(true)
+        closePopup(id)
       })
     }
   }

src/hooks/useContextMenu.js

@@ -165,10 +165,7 @@ export function useContextMenu({ externalFn }) {
   }, [currentMenu])
 
   useEffect(() => {
-    console.log('currentObject', currentObject)
-    console.log('currentMenu', currentMenu)
     if (currentObject?.name) {
-      console.log(currentObject)
       switch (currentObject.name) {
         case 'triangleDormer':
           setContextMenu([

src/hooks/usePopup.js

@@ -14,7 +14,21 @@ export function usePopup() {
   }
 
   const closePopup = (id) => {
-    setPopup({ children: [...popup.children.filter((child) => child.id !== id)] })
+    console.log(id)
+    setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
+  }
+
+  const filterPopup = (depth) => {
+    setPopup({ children: [...filterDepth(depth)] })
+  }
+
+  const filterChildrenPopup = (id) => {
+    const target = popup.children.filter((child) => child.id === id)
+    if (target.length !== 0) {
+      return popup.children.filter((child) => child.depth <= target[0].depth)
+    }
+
+    return popup.children
   }
 
   const closePopups = (ids) => {