feat: add ProfilePage

src/pages/ProfilePage.tsx

@@ -0,0 +1,52 @@
+import { lazy } from "react";
+import { useParams } from "react-router-dom";
+import { Accordion, AccordionItem, AccordionPanel, Box, Stack, Table, Tbody, Td, Tr } from "@chakra-ui/react";
+
+import { useProfileQuery, UserRole } from "../app/services/user";
+
+const SubmissionTable = lazy(() => import("../components/SubmissionTable"));
+const TitleItem = lazy(() => import("../components/AccordionTitleItem"));
+
+export default function ProfilePage() {
+    const { id } = useParams();
+    const uid = Number(id) || 0;
+    const { data: profile } = useProfileQuery(uid);
+    const roleName = Object.entries(UserRole).filter(([, v]) => v === profile?.body.role);
+
+    const userInfoMenu = (
+        <Accordion defaultIndex={[0]}>
+            <AccordionItem>
+                <TitleItem word="Profile" />
+                <AccordionPanel>
+                    <Table variant="striped" size="sm">
+                        <Tbody>
+                            <Tr>
+                                <Td>Nickname</Td>
+                                <Td>{profile?.body.nick_name}</Td>
+                            </Tr>
+                            <Tr>
+                                <Td>Joined at</Td>
+                                <Td>{new Date(profile?.body.meta.CreatedAt || "").toLocaleString()}</Td>
+                            </Tr>
+                            <Tr>
+                                <Td>Role</Td>
+                                <Td>{(roleName.length > 0 && roleName[0][0]) || "N/A"}</Td>
+                            </Tr>
+                        </Tbody>
+                    </Table>
+                </AccordionPanel>
+            </AccordionItem>
+        </Accordion>
+    );
+
+    return (
+        <>
+            <Stack direction={{ base: "column", md: "row" }}>
+                <Box w="100%">
+                    <SubmissionTable uid={uid} />
+                </Box>
+                <Box maxW="480px">{userInfoMenu}</Box>
+            </Stack>
+        </>
+    );
+}

src/routes.tsx

@@ -13,6 +13,7 @@ const ProblemDetailPage = lazy(() => import("./pages/ProblemDetailPage"));
 const SubmitPage = lazy(() => import("./pages/SubmitPage"));
 const SubmissionListPage = lazy(() => import("./pages/SubmissionListPage"));
 const StatusPage = lazy(() => import("./pages/StatusPage"));
+const ProfilePage = lazy(() => import("./pages/ProfilePage"));
 
 export const router: RouteObject[] = [
     {
@@ -68,6 +69,22 @@ export const router: RouteObject[] = [
                     </RequireAuth>
                 ),
             },
+            {
+                path: "profile",
+                element: (
+                    <RequireAuth>
+                        <ProfilePage />
+                    </RequireAuth>
+                ),
+            },
+            {
+                path: "profile/:id",
+                element: (
+                    <RequireAuth>
+                        <ProfilePage />
+                    </RequireAuth>
+                ),
+            },
         ],
     },
 ];