refactor: axios 옵션 추가, 적용 코드 수정

- axios 옵션 추가 ( 내부, 외부)
- 샘플 적용 코드 수정

src/app/[locale]/changelog/page.jsx

@@ -1,15 +1,26 @@
 'use client'
 
 import { Button, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react'
+
+import { AxiosType } from '@/const/axiosConst'
+import { useAxios } from '@/hooks/useAxios'
+// import { get } from '@/lib/Axios'
+
 import QSelect from '@/components/ui/QSelect'
+
 import styles from './changelog.module.css'
-import { get } from '@/lib/Axios'
 
 export default function changelogPage() {
+  const { get } = useAxios()
   const testVar = process.env.NEXT_PUBLIC_TEST
 
   const handleUsers = async () => {
-    const users = await get('/api/user/find-all')
+    // const users = await get('/api/user/find-all')
+    const params = {
+      type: AxiosType.INTERNAL,
+      url: '/api/user/find-all',
+    }
+    const users = await get(params)
     console.log(users)
   }
 

src/components/Intro.jsx

@@ -4,6 +4,9 @@ import { useEffect, useMemo, useState } from 'react'
 
 import Link from 'next/link'
 
+import { AxiosType } from '@/const/axiosConst'
+import { useAxios } from '@/hooks/useAxios'
+
 import { Button } from '@nextui-org/react'
 
 import SingleDatePicker from './common/datepicker/SingleDatePicker'
@@ -13,6 +16,8 @@ import QModal from './common/modal/QModal'
 import { QToast } from '@/hooks/useToast'
 
 export default function Intro() {
+  const { get } = useAxios()
+
   const [open, setOpen] = useState(false)
   const [startDate, setStartDate] = useState(new Date())
   const singleDatePickerProps = {
@@ -61,8 +66,10 @@ export default function Intro() {
 
   useEffect(() => {
     async function fetchData() {
-      const response = await fetch('https://www.ag-grid.com/example-assets/space-mission-data.json')
+      // const response = await fetch('https://www.ag-grid.com/example-assets/space-mission-data.json')
-      const data = await response.json()
+      // const data = await response.json()
+      const data = await get({ type: AxiosType.EXTERNAL, url: 'https://www.ag-grid.com/example-assets/space-mission-data.json' })
+      console.log(data)
       setGridProps({ ...gridProps, gridData: data })
     }
     fetchData()

src/const/axiosConst.js

@@ -0,0 +1,4 @@
+export const AxiosType = {
+  INTERNAL: 'Internal',
+  EXTERNAL: 'External',
+}

src/hooks/useAxios.js

@@ -0,0 +1,50 @@
+import { AxiosType } from '@/const/axiosConst'
+import axios from 'axios'
+
+export function useAxios() {
+  const getInstances = (type) => {
+    return axios.create({
+      baseURL: type === AxiosType.INTERNAL ? process.env.NEXT_PUBLIC_API_SERVER_PATH : '',
+      headers: {
+        Accept: 'application/json',
+      },
+    })
+  }
+
+  const get = async ({ type, url }) => {
+    return await getInstances(type)
+      .get(url)
+      .then((res) => res.data)
+      .catch(console.error)
+  }
+
+  const post = async ({ type, url, data }) => {
+    return await getInstances(type)
+      .post(url, data)
+      .then((res) => res.data)
+      .catch(console.error)
+  }
+
+  const put = async ({ type, url, data }) => {
+    return await getInstances(type)
+      .put(url, data)
+      .then((res) => res.data)
+      .catch(console.error)
+  }
+
+  const patch = async ({ type, url, data }) => {
+    return await getInstances(type)
+      .patch(url, data)
+      .then((res) => res.data)
+      .catch(console.error)
+  }
+
+  const del = async ({ type, url }) => {
+    return await getInstances(type)
+      .delete(url)
+      .then((res) => res.data)
+      .catch(console.error)
+  }
+
+  return { get, post, put, patch, del }
+}