diff --git a/.env.development b/.env.development
index 87e51c2b..161467af 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1,3 @@
-NEXT_PUBLIC_TEST="테스트변수입니다. development"
\ No newline at end of file
+NEXT_PUBLIC_TEST="테스트변수입니다. development"
+
+NEXT_PUBLIC_API_SERVER_PATH="http://localhost:8080"
\ No newline at end of file
diff --git a/.env.production b/.env.production
index e810ba94..efb12105 100644
--- a/.env.production
+++ b/.env.production
@@ -1 +1,3 @@
-NEXT_PUBLIC_TEST="테스트변수입니다. production"
\ No newline at end of file
+NEXT_PUBLIC_TEST="테스트변수입니다. production"
+
+NEXT_PUBLIC_API_SERVER_PATH="http://localhost:8080"
\ No newline at end of file
diff --git a/package.json b/package.json
index a5c429a7..d4cdd9bb 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@nextui-org/react": "^2.4.2",
     "@prisma/client": "^5.17.0",
+    "axios": "^1.7.3",
     "fabric": "^5.3.0",
     "framer-motion": "^11.2.13",
     "mathjs": "^13.0.2",
diff --git a/src/app/changelog/page.jsx b/src/app/changelog/page.jsx
index bf392304..1dcc8d0e 100644
--- a/src/app/changelog/page.jsx
+++ b/src/app/changelog/page.jsx
@@ -1,12 +1,18 @@
 'use client'
 
-import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react'
+import { Button, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react'
 import Hero from '@/components/Hero'
 import QSelect from '@/components/ui/QSelect'
 import styles from './changelog.module.css'
+import { get } from '@/lib/Axios'
 
 export default function changelogPage() {
   const testVar = process.env.NEXT_PUBLIC_TEST
+
+  const handleUsers = async () => {
+    const users = await get('/api/user/find-all')
+    console.log(users)
+  }
   return (
     <>
       <Hero title="Change log" />
@@ -32,10 +38,15 @@ export default function changelogPage() {
           </TableBody>
         </Table>
       </div>
-      <div className="px-2 py-4">
+      <div className="m-2">
         <QSelect />
       </div>
-      <div className="w-full bg-orange-300 py-4">{testVar}</div>
+      <div className="w-full bg-orange-300 m-2">{testVar}</div>
+      <div>
+        <div className="m-2">
+          <Button onClick={handleUsers}>Button</Button>
+        </div>
+      </div>
     </>
   )
 }
diff --git a/src/lib/Axios.js b/src/lib/Axios.js
new file mode 100644
index 00000000..cae33f3e
--- /dev/null
+++ b/src/lib/Axios.js
@@ -0,0 +1,56 @@
+'use client'
+
+import axios from 'axios'
+
+axios.defaults.baseURL = process.env.NEXT_PUBLIC_API_SERVER_PATH
+
+const axiosInstance = axios.create({
+  // baseURL: process.env.API_SERVER_URL,
+  headers: {
+    Accept: 'application/json',
+  },
+})
+
+axiosInstance.interceptors.request.use((config) => {
+  // config['Authorization'] = localStorage.getItem('token')
+  //TODO: 인터셉터에서 추가 로직 구현
+  return config
+})
+
+axiosInstance.interceptors.request.use(undefined, (error) => {
+  //TODO: 인터셉터에서 에러 처리 로직 구현
+  // if (error.isAxiosError && e.response?.status === 401) {
+  //   localStorage.removeItem('token')
+  // }
+})
+
+export const get = (url) =>
+  axiosInstance
+    .get(url)
+    .then((res) => res.data)
+    .catch(console.error)
+
+export const post = (url, data) =>
+  axiosInstance
+    .post(url, data)
+    .then((res) => res.data)
+    .catch(console.error)
+
+export const put = (url, data) =>
+  axiosInstance
+    .put(url, data)
+    .then((res) => res.data)
+    .catch(console.error)
+
+export const patch = (url, data) =>
+  axiosInstance
+    .patch(url, data)
+
+    .then((res) => res.data)
+    .catch(console.error)
+
+export const del = (url) =>
+  axiosInstance
+    .delete(url)
+    .then((res) => res.data)
+    .catch(console.error)
diff --git a/yarn.lock b/yarn.lock
index f34efa44..5eec9ca2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2181,6 +2181,15 @@ asynckit@^0.4.0:
   resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
+axios@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.3.tgz#a1125f2faf702bc8e8f2104ec3a76fab40257d85"
+  integrity sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
@@ -2539,6 +2548,11 @@ flat@^5.0.2:
   resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
   integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
 
+follow-redirects@^1.15.6:
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
 foreground-child@^3.1.0:
   version "3.2.1"
   resolved "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz"
@@ -3233,6 +3247,11 @@ prisma@^5.17.0:
   dependencies:
     "@prisma/engines" "5.17.0"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz"