diff --git a/src/app/[locale]/playground/page.jsx b/src/app/[locale]/playground/page.jsx
new file mode 100644
index 00000000..b8a7f496
--- /dev/null
+++ b/src/app/[locale]/playground/page.jsx
@@ -0,0 +1,9 @@
+import Playground from '@/components/Playground'
+
+export default function PlaygroundPage() {
+  return (
+    <>
+      <Playground />
+    </>
+  )
+}
diff --git a/src/components/Headers.jsx b/src/components/Headers.jsx
index a5503b8c..07caed71 100644
--- a/src/components/Headers.jsx
+++ b/src/components/Headers.jsx
@@ -9,7 +9,7 @@ export default function Headers() {
         </Link>
         <div className="space-x-4 text-xl">
           <Link href="/intro">Intro</Link>
-          <Link href="/changelog">Changelog</Link>
+          <Link href="/playground">Playground</Link>
           <Link href="/roof">Roof</Link>
           <Link href="/roof2">Roof2</Link>
         </div>
diff --git a/src/components/Intro.jsx b/src/components/Intro.jsx
index 054edc53..0129e7a4 100644
--- a/src/components/Intro.jsx
+++ b/src/components/Intro.jsx
@@ -1,13 +1,13 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import Link from 'next/link'
 
 import { useRecoilState } from 'recoil'
 import { modalContent, modalState } from '@/store/modalAtom'
 
-import { AxiosType, useAxios } from '@/hooks/useAxios'
+import { useAxios } from '@/hooks/useAxios'
 
 import { Button } from '@nextui-org/react'
 
diff --git a/src/app/[locale]/changelog/page.jsx b/src/components/Playground.jsx
similarity index 68%
rename from src/app/[locale]/changelog/page.jsx
rename to src/components/Playground.jsx
index 26cfc0a9..2467798a 100644
--- a/src/app/[locale]/changelog/page.jsx
+++ b/src/components/Playground.jsx
@@ -7,9 +7,9 @@ import { useAxios } from '@/hooks/useAxios'
 
 import QSelect from '@/components/ui/QSelect'
 
-import styles from './changelog.module.css'
+import styles from './playground.module.css'
 
-export default function changelogPage() {
+export default function Playground() {
   const { get } = useAxios()
   const testVar = process.env.NEXT_PUBLIC_TEST
 
@@ -46,24 +46,6 @@ export default function changelogPage() {
     <>
       <div className="container mx-auto p-4 m-4 border">
         <div className={styles.test}>이 영역은 테스트입니다.</div>
-        <div>
-          <Table isStriped>
-            <TableHeader>
-              <TableColumn>DATE</TableColumn>
-              <TableColumn>NAME</TableColumn>
-              <TableColumn>CONTENTS</TableColumn>
-            </TableHeader>
-            <TableBody>
-              {data.map((item) => (
-                <TableRow key={item.id}>
-                  <TableCell>{item.date}</TableCell>
-                  <TableCell>{item.author}</TableCell>
-                  <TableCell>{item.contents}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
         <div className="m-2">
           <QSelect />
         </div>
diff --git a/src/app/[locale]/changelog/changelog.module.css b/src/components/playground.module.css
similarity index 100%
rename from src/app/[locale]/changelog/changelog.module.css
rename to src/components/playground.module.css