➕ add react-query-devtools

.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_SERVER_URL=http://101.101.216.221:3000
+NEXT_PUBLIC_APP_ENV=development

.eslintrc.js

@@ -67,5 +67,6 @@ module.exports = {
     'react/react-in-jsx-scope': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/non-nullable-type-assertion-style': 'off',
+    '@typescript-eslint/promise-function-async': 'off',
   },
 }

app/(route)/layout.tsx

@@ -1,6 +1,7 @@
 import { Inter } from 'next/font/google'
 
 import type { Metadata } from 'next'
+
 import '@/app/_styles/globals.css'
 import Providers from '@/app/_components/providers/QueryClientProvider'
 

app/_components/providers/QueryClientProvider.tsx

@@ -1,7 +1,9 @@
 'use client'
 
-import { PropsWithChildren, useState } from 'react'
+import { type PropsWithChildren, useState } from 'react'
+
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 export default function Providers({ children }: PropsWithChildren) {
   const [queryClient] = useState(
@@ -17,5 +19,10 @@ export default function Providers({ children }: PropsWithChildren) {
       })
   )
 
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryDevtools />
+      {children}
+    </QueryClientProvider>
+  )
 }

app/_service/auth/index.ts

@@ -1,6 +1,13 @@
 import axios from 'axios'
-import { GetTokenFromKakaoParams, GetTokenFromKakaoResponse } from './auth.types'
 
-export const getTokenByAuthorizationCode = ({ code }: GetTokenFromKakaoParams) => {
-  return axios.get<GetTokenFromKakaoResponse>(`/oauth/callback/kakao/api?code=${code}`)
+import api from '../core/api'
+
+import { type GetTokenFromKakaoParams, type GetTokenFromKakaoResponse } from './auth.types'
+
+export const getTokenByAuthorizationCode = async ({ code }: GetTokenFromKakaoParams) => {
+  return await axios.get<GetTokenFromKakaoResponse>(`/oauth/callback/kakao/api?code=${code}`)
+}
+
+export const getUsers = () => {
+  return api.get('/users')
 }

app/_service/core/api.ts

@@ -1,12 +1,12 @@
 import axios, { type AxiosRequestConfig } from 'axios'
 
-import { getApiEndpoint } from './api.utils'
 import type { ServerResponse } from './api.types'
+import { getApiEndpoint } from './api.utils'
 
 const createApi = () => {
   const _api = axios.create({
     baseURL: getApiEndpoint(),
-    withCredentials: true,
+    // withCredentials: true,
     headers: {
       'Content-Type': 'application/json',
     },

package.json

@@ -18,9 +18,10 @@
     ]
   },
   "dependencies": {
-    "clsx": "^2.0.0",
     "@tanstack/react-query": "^5.13.4",
+    "@tanstack/react-query-devtools": "^5.13.5",
     "axios": "^1.6.2",
+    "clsx": "^2.0.0",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",