diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index 230eecd1..a55f4e46 100644
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@@ -25,6 +25,8 @@ import SampleReducer from './sample/SampleReducer'
 import styles from './playground.module.css'
 import useSWR from 'swr'
 import useSWRMutation from 'swr/mutation'
+import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
+import { canvasPopupStatusStore } from '@/store/canvasPopupStatusAtom'
 
 export default function Playground() {
   const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
@@ -267,6 +269,12 @@ export default function Playground() {
     return <div>Error...</div>
   }
 
+  useCanvasPopupStatusController(1)
+
+  const [canvasPopupStatusState, setCanvasPopupStatusState] = useRecoilState(canvasPopupStatusStore)
+  useEffect(() => {
+    console.log('🚀 ~ Playground ~ canvasPopupStatusState:', canvasPopupStatusState)
+  }, [canvasPopupStatusState])
   return (
     <>
       <div className="container mx-auto p-4 m-4 border">
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
index 287d9ff8..8bb39d4e 100644
--- a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
@@ -1,6 +1,9 @@
-import QSelectBox from '@/components/common/select/QSelectBox'
-import { useMessage } from '@/hooks/useMessage'
 import { useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
+import { canvasPopupStatusStore } from '@/store/canvasPopupStatusAtom'
+import { useMessage } from '@/hooks/useMessage'
+import QSelectBox from '@/components/common/select/QSelectBox'
 
 const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
 
@@ -8,6 +11,12 @@ export default function StepUp({}) {
   const { getMessage } = useMessage()
   const [moduleTab, setModuleTab] = useState(1)
   const [arrayLength, setArrayLength] = useState(3) //module-table-inner의 반복 개수
+
+  useCanvasPopupStatusController(6)
+  const canvasPopupStatusState = useRecoilValue(canvasPopupStatusStore)
+  if (Object.keys(canvasPopupStatusState[6]).length !== 0) {
+  }
+
   return (
     <>
       <div className="properties-setting-wrap outer">
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 0a539ac2..a9619c2f 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -344,8 +344,7 @@ 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)}
@@ -367,7 +366,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           )}
                         </div>
                       )}
-                      {currentRoof && ['C', 'R'].includes(currentRoof.roofPchAuth) && (
+                      {currentRoof && ['C', 'R'].includes(currentRoof?.roofPchAuth) && (
                         <div className="flex-ment">
                           <span>{getMessage('hajebichi')}</span>
                           <div className="input-grid" style={{ width: '84px' }}>
@@ -376,10 +375,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               className="input-origin block"
                               name={`hajebichi`}
                               ref={roofRef.hajebichi}
-                              value={parseInt(currentRoof.hajebichi)}
+                              value={parseInt(currentRoof?.hajebichi)}
                               onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                              readOnly={currentRoof.roofPchAuth === 'R'}
-                              disabled={currentRoof.roofSizeSet === '3'}
+                              readOnly={currentRoof?.roofPchAuth === 'R'}
+                              disabled={currentRoof?.roofSizeSet === '3'}
                             />
                           </div>
                         </div>
diff --git a/src/hooks/common/useCanvasPopupStatusController.js b/src/hooks/common/useCanvasPopupStatusController.js
new file mode 100644
index 00000000..88b2207a
--- /dev/null
+++ b/src/hooks/common/useCanvasPopupStatusController.js
@@ -0,0 +1,28 @@
+'use client'
+
+import { useEffect } from 'react'
+import useSWR from 'swr'
+import useSWRMutation from 'swr/mutation'
+import { useAxios } from '../useAxios'
+import { useRecoilState } from 'recoil'
+import { canvasPopupStatusStore } from '@/store/canvasPopupStatusAtom'
+
+export function useCanvasPopupStatusController(popupType) {
+  const [canvasPopupStatusState, setCanvasPopupStatusState] = useRecoilState(canvasPopupStatusStore)
+  const { getFetcher, postFetcher } = useAxios()
+  const {
+    data: popupStatus,
+    error,
+    isLoading,
+  } = useSWR(popupType ? 'canvas-popup-status--data' : null, () => getFetcher(`http://localhost:8080/api/tutorial?popupType=${popupType}`))
+
+  useEffect(() => {
+    if (popupStatus) {
+      setCanvasPopupStatusState({ ...canvasPopupStatusState, [popupType]: popupStatus })
+    }
+  }, [popupStatus])
+
+  const { trigger, isMutating } = useSWRMutation('canvas-popup-status-update', postFetcher)
+
+  return { trigger }
+}
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index 6d576a30..299d7e67 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -34,6 +34,7 @@ import { useMasterController } from '@/hooks/common/useMasterController'
 import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import { useCanvasMenu } from '../common/useCanvasMenu'
 import { menuTypeState } from '@/store/menuAtom'
+import { usePopup } from '../usePopup'
 
 const defaultDotLineGridSetting = {
   INTERVAL: {
@@ -116,6 +117,8 @@ export function useCanvasSetting() {
 
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
 
+  const { closeAll } = usePopup()
+
   useEffect(() => {
     setFetchRoofMaterials(!fetchRoofMaterials)
     if (fetchRoofMaterials) {
@@ -369,7 +372,7 @@ export function useCanvasSetting() {
     if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
       setBasicSettings({ ...canvasSetting })
     }
-    //setCanvasSetting({ ...basicSetting })
+    setCanvasSetting({ ...basicSetting })
   }
 
   // 기본설정(PlacementShapeSetting) 저장
@@ -426,6 +429,7 @@ export function useCanvasSetting() {
     } catch (error) {
       swalFire({ text: error.message, icon: 'error' })
     }
+    closeAll()
   }
 
   // CanvasSetting 조회 및 초기화
diff --git a/src/store/canvasPopupStatusAtom.js b/src/store/canvasPopupStatusAtom.js
new file mode 100644
index 00000000..74aafb7d
--- /dev/null
+++ b/src/store/canvasPopupStatusAtom.js
@@ -0,0 +1,13 @@
+import { atom } from 'recoil'
+
+export const canvasPopupStatusStore = atom({
+  key: 'canvasPopupStatusState',
+  default: {
+    1: {},
+    2: {},
+    3: {},
+    4: {},
+    5: {},
+    6: {},
+  },
+})