home page

src/api/index.ts

@@ -1 +1,2 @@
 export * as auth from './auth'
+export * as user from './user'

src/api/user.ts

@@ -0,0 +1,16 @@
+import axios from '@/utils/axios'
+
+export interface UserEntity {
+  id: string
+  email: string
+  username: string | null
+  password: string
+  /** @format date-time */
+  createdAt: string
+  /** @format date-time */
+  updatedAt: string
+}
+
+export async function getUserInfo() {
+  return axios.get<UserEntity>('/api/user/profile')
+}

src/pages/index.tsx

@@ -1,3 +1,39 @@
+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 { useRouter } from 'next/router'
+
 export default function Home() {
-  return <>hello world</>
+  const router = useRouter()
+
+  const [user, setUser] = useState<UserEntity>()
+  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={{
+          position: 'fixed',
+          top: '30%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
+      />
+    )
+  }
+
+  return <>hello {user.email}</>
 }