diff --git a/package.json b/package.json
index 4fca5d9a..9321f939 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "recoil": "^0.7.7",
     "sweetalert2": "^11.14.1",
     "sweetalert2-react-content": "^5.0.7",
+    "swr": "^2.3.0",
     "usehooks-ts": "^3.1.0",
     "uuid": "^10.0.0"
   },
diff --git a/src/app/api/swr-tutorial/route.js b/src/app/api/swr-tutorial/route.js
new file mode 100644
index 00000000..99ebaf15
--- /dev/null
+++ b/src/app/api/swr-tutorial/route.js
@@ -0,0 +1,25 @@
+import { NextResponse } from 'next/server'
+
+const defaultData = [
+  {
+    id: 1,
+    name: 'John Doe',
+    email: 'john.doe@example.com',
+  },
+  {
+    id: 2,
+    name: 'Jane Lee',
+    email: 'jane.lee@example.com',
+  },
+]
+
+export async function GET(req, res) {
+  return NextResponse.json(defaultData)
+}
+
+export const POST = async (req, res) => {
+  const { id, name, email } = await req.json()
+  const newData = { id, name, email }
+  console.log('🚀 ~ POST ~ newData:', newData)
+  return NextResponse.json([...defaultData, newData])
+}
diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index 126a7f65..98c90a45 100644
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@@ -23,6 +23,8 @@ import QSelectBox from './common/select/QSelectBox'
 import SampleReducer from './sample/SampleReducer'
 
 import styles from './playground.module.css'
+import useSWR from 'swr'
+import useSWRMutation from 'swr/mutation'
 
 export default function Playground() {
   const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
@@ -32,7 +34,7 @@ export default function Playground() {
   const fileRef = useRef(null)
   const queryRef = useRef(null)
   const [zoom, setZoom] = useState(20)
-  const { get, promiseGet, promisePost } = useAxios()
+  const { get, promiseGet, post, promisePost } = useAxios()
   const testVar = process.env.NEXT_PUBLIC_TEST
   const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
   const { getMessage } = useMessage()
@@ -252,6 +254,22 @@ export default function Playground() {
     })
   }
 
+  const getFetcher = async (url) => {
+    const res = await get({ url })
+    console.log('🚀 ~ getFetcher ~ res:', res)
+    return res
+  }
+
+  const postFetcher = async (url, { arg }) => {
+    const res = await post({ url, data: arg })
+    console.log('🚀 ~ postFetcher ~ res:', res)
+    return res
+  }
+
+  const [getFetcherCallFlag, setGetFetcherCallFlag] = useState(false)
+  const { data: tutoData, error, isLoading } = useSWR('http://localhost:3000/api/swr-tutorial', getFetcher)
+  const { trigger, isMutating } = useSWRMutation('http://localhost:3000/api/swr-tutorial', postFetcher)
+
   return (
     <>
       <div className="container mx-auto p-4 m-4 border">
@@ -548,14 +566,25 @@ export default function Playground() {
         <div className="my-2">
           <Button onClick={() => setManagementState({})}>GlobalDataProvider 초기화</Button>
         </div>
-        <div className="my-2">
+        {/* <div className="my-2">
           <p>{managementStateLoaded?.objectNo}</p>
-        </div>
+        </div> */}
         <div className="my-2">
           <Button onClick={() => swalFire({ text: 'alert 테스트입니다.', type: 'alert', confirmFn: () => console.log('Alert!!!') })}>
             Sweetalert - alert
           </Button>
         </div>
+        <div className="my-2">
+          {tutoData &&
+            tutoData.map((item) => (
+              <div key={item.id}>
+                {item.name} / {item.email}
+              </div>
+            ))}
+        </div>
+        <div className="my-2">
+          <Button onClick={() => trigger({ id: 3, name: 'seulda kim', email: 'seulda.kim@interplug.co.kr' })}>insert data</Button>
+        </div>
       </div>
     </>
   )