home page

package.json

@@ -23,6 +23,7 @@
     "next": "13.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "swr": "^2.0.3",
     "yup": "^1.0.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -22,6 +22,7 @@ specifiers:
   prettier: 2.8.4
   react: 18.2.0
   react-dom: 18.2.0
+  swr: ^2.0.3
   typescript: ^4.9.5
   yup: ^1.0.0
 
@@ -38,6 +39,7 @@ dependencies:
   next: 13.1.6_biqbaboplfbrettd7655fr4n2y
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
+  swr: 2.0.3_react@18.2.0
   yup: 1.0.0
 
 devDependencies:
@@ -2955,6 +2957,16 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  /swr/2.0.3_react@18.2.0:
+    resolution: {integrity: sha512-sGvQDok/AHEWTPfhUWXEHBVEXmgGnuahyhmRQbjl9XBYxT/MSlAzvXEKQpyM++bMPaI52vcWS2HiKNaW7+9OFw==}
+    engines: {pnpm: '7'}
+    peerDependencies:
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+      use-sync-external-store: 1.2.0_react@18.2.0
+    dev: false
+
   /synckit/0.8.5:
     resolution: {integrity: sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -3083,6 +3095,14 @@ packages:
       punycode: 2.3.0
     dev: true
 
+  /use-sync-external-store/1.2.0_react@18.2.0:
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /which-boxed-primitive/1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
     dependencies:

src/api/auth.ts

@@ -20,5 +20,5 @@ export async function login(data: LoginInputDto) {
 }
 
 export async function refreshToken(data: TokenRefreshPayload) {
-  return axios.post<Token>('/api/auth/token', data)
+  return axios.put<Token>('/api/auth/token', data)
 }

src/api/user.ts

@@ -12,5 +12,5 @@ export interface UserEntity {
 }
 
 export async function getUserInfo() {
-  return axios.get<UserEntity>('/api/user/profile')
+  return axios.get<UserEntity>('/api/users/me')
 }

src/pages/index.tsx

@@ -1,28 +1,11 @@
-import { useEffect, useState } from 'react'
-import * as api from '@/api'
-import type { UserEntity } from '@/api/user'
 import CircularProgress from '@mui/material/CircularProgress'
-import { AxiosError } from 'axios'
+import { useUser } from '@/utils/useUser'
-import { useRouter } from 'next/router'
+import Alert from '@mui/material/Alert'
 
 export default function Home() {
-  const router = useRouter()
+  const { user, isLoading, errMsg } = useUser()
 
-  const [user, setUser] = useState<UserEntity>()
+  if (isLoading) {
-  useEffect(() => {
-    console.log('useEffect')
-    api.user
-      .getUserInfo()
-      .then((res) => {
-        setUser(res.data)
-      })
-      .catch((err: AxiosError) => {
-        console.error(err.response)
-        router.push('/login')
-      })
-  }, [router])
-
-  if (!user) {
     return (
       <CircularProgress
         sx={{
@@ -35,5 +18,9 @@ export default function Home() {
     )
   }
 
-  return <>hello {user.email}</>
+  if (errMsg) {
+    return <Alert severity="error">{errMsg}</Alert>
+  }
+
+  return <>hello {user!.email}</>
 }

src/utils/axios.ts

@@ -18,7 +18,7 @@ axios.interceptors.response.use(
     if (
       error.config &&
       error.config.url === '/api/auth/token' &&
-      error.config.method === 'post'
+      error.config.method === 'put'
     ) {
       Router.push('/login')
       return Promise.reject(error)

src/utils/useUser.ts

@@ -0,0 +1,20 @@
+import useSWR from 'swr'
+import * as api from '@/api'
+import type { AxiosError, AxiosResponse } from 'axios'
+import { UserEntity } from '@/api/user'
+
+export function useUser() {
+  const { data, error, isLoading } = useSWR<
+    AxiosResponse<UserEntity>,
+    AxiosError
+  >(`user`, api.user.getUserInfo)
+
+  const user = data?.data ?? null
+  const errMsg = error?.message ?? ''
+
+  return {
+    user,
+    isLoading,
+    errMsg,
+  }
+}