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/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/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: {},
+  },
+})