chore: separate TitleItem from ProblemInfoMenu

src/components/AccordionTitleItem.tsx

@@ -0,0 +1,14 @@
+import { AccordionButton, AccordionIcon, Box } from "@chakra-ui/react";
+
+export default function TitleItem({ word }: { word: string }) {
+    return (
+        <h2>
+            <AccordionButton>
+                <Box as="span" flex="1" textAlign="left">
+                    {word}
+                </Box>
+                <AccordionIcon />
+            </AccordionButton>
+        </h2>
+    );
+}

src/components/ProblemInfoMenu.tsx

@@ -1,12 +1,9 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { lazy, useEffect, useState } from "react";
 import {
     Accordion,
-    AccordionButton,
-    AccordionIcon,
     AccordionItem,
     AccordionPanel,
-    Box,
     Link,
     Select,
     Table,
@@ -21,16 +18,7 @@ import { Link as ReactRouterLink } from "react-router-dom";
 import type { DetailResponse, RuntimeInfo } from "../app/services/problem";
 import { LanguageMap } from "./Languages";
 
-const TitleItem = ({ word }: { word: string }) => (
+const TitleItem = lazy(() => import("../components/AccordionTitleItem"));
-    <h2>
-        <AccordionButton>
-            <Box as="span" flex="1" textAlign="left">
-                {word}
-            </Box>
-            <AccordionIcon />
-        </AccordionButton>
-    </h2>
-);
 
 interface ProblemInfoMenuProps {
     data?: DetailResponse;