From 09530111c1695bafcf9b8267abf6c36241115e91 Mon Sep 17 00:00:00 2001
From: Kimhyojung0810 <jenny0308@g.skku.edu>
Date: Mon, 2 Dec 2024 23:59:53 +0900
Subject: [PATCH] fix(fe): fix ErrorBoundary and Suspense

---
 .../problem/_components/MySubmission.tsx      | 86 ++++++++++---------
 1 file changed, 46 insertions(+), 40 deletions(-)

diff --git a/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/MySubmission.tsx b/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/MySubmission.tsx
index 695462c57..0f22c837d 100644
--- a/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/MySubmission.tsx
+++ b/apps/frontend/app/(client)/(main)/contest/[contestId]/@tabs/problem/_components/MySubmission.tsx
@@ -21,7 +21,7 @@ import { useParams } from 'next/navigation'
 import { useState, Suspense } from 'react'
 import SubmissionDetailContent from './SubmissionDetailContent'
 
-export default function MySubmission({ problem }: { problem: ContestProblem }) {
+function MySubmissionContent({ problem }: { problem: ContestProblem }) {
   const [isTooltipOpen, setIsTooltipOpen] = useState(false)
   const { contestId: contestIdString } = useParams()
   const contestId = Number(contestIdString)
@@ -55,48 +55,54 @@ export default function MySubmission({ problem }: { problem: ContestProblem }) {
     return null
   }
 
+  return (
+    <Dialog onOpenChange={() => setIsTooltipOpen(false)}>
+      <TooltipProvider>
+        <Tooltip>
+          <DialogTrigger asChild>
+            <TooltipTrigger asChild>
+              <Image
+                src={seeSubmissionIcon}
+                width={20}
+                height={20}
+                alt={'See submission'}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setIsTooltipOpen(true)
+                }}
+                onMouseEnter={() => setIsTooltipOpen(true)}
+                onMouseLeave={() => setIsTooltipOpen(false)}
+              />
+            </TooltipTrigger>
+          </DialogTrigger>
+          {isTooltipOpen && (
+            <TooltipContent className="mr-4 bg-white">
+              <p className="text-xs text-neutral-900">
+                Click to check your latest submission.
+              </p>
+              <TooltipPrimitive.Arrow className="fill-white" />
+            </TooltipContent>
+          )}
+        </Tooltip>
+      </TooltipProvider>
+      <div onClick={(e) => e.stopPropagation()}>
+        <DialogContent className="max-h-[620px] max-w-[800px] justify-center">
+          <SubmissionDetailContent
+            submission={submission}
+            submissionId={latestSubmissionId}
+            problem={problem}
+          />
+        </DialogContent>
+      </div>
+    </Dialog>
+  )
+}
+
+export default function MySubmission({ problem }: { problem: ContestProblem }) {
   return (
     <ErrorBoundary fallback={null}>
       <Suspense fallback={<Skeleton className="size-[25px]" />}>
-        <Dialog onOpenChange={() => setIsTooltipOpen(false)}>
-          <TooltipProvider>
-            <Tooltip>
-              <DialogTrigger asChild>
-                <TooltipTrigger asChild>
-                  <Image
-                    src={seeSubmissionIcon}
-                    width={20}
-                    height={20}
-                    alt={'See submission'}
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      setIsTooltipOpen(true)
-                    }}
-                    onMouseEnter={() => setIsTooltipOpen(true)}
-                    onMouseLeave={() => setIsTooltipOpen(false)}
-                  />
-                </TooltipTrigger>
-              </DialogTrigger>
-              {isTooltipOpen && (
-                <TooltipContent className="mr-4 bg-white">
-                  <p className="text-xs text-neutral-900">
-                    Click to check your latest submission.
-                  </p>
-                  <TooltipPrimitive.Arrow className="fill-white" />
-                </TooltipContent>
-              )}
-            </Tooltip>
-          </TooltipProvider>
-          <div onClick={(e) => e.stopPropagation()}>
-            <DialogContent className="max-h-[620px] max-w-[800px] justify-center">
-              <SubmissionDetailContent
-                submission={submission}
-                submissionId={latestSubmissionId}
-                problem={problem}
-              />
-            </DialogContent>
-          </div>
-        </Dialog>
+        <MySubmissionContent problem={problem} />
       </Suspense>
     </ErrorBoundary>
   )