feat: 결과 페이지 스켈레톤 UI 구현

src/pages/ReviewResultPage/components/ResultSkeleton/index.tsx

@@ -0,0 +1,26 @@
+import { Header } from '@/components'
+
+const ResultSkeleton = () => {
+  return (
+    <div className="h-full">
+      <Header />
+
+      <div className="mx-auto flex max-w-[37.5rem] flex-col px-5 py-7">
+        <div className="flex flex-col gap-5">
+          <div className="justify-between md:flex">
+            <div className="skeleton h-5 w-32"></div>
+            <div className="skeleton h-5 w-[18rem]"></div>
+          </div>
+
+          <div className="flex justify-between">
+            <div className="skeleton h-6"></div>
+          </div>
+          <div className="skeleton h-5"></div>
+        </div>
+        <div className="skeleton mt-8 h-80"></div>
+      </div>
+    </div>
+  )
+}
+
+export default ResultSkeleton

src/pages/ReviewResultPage/components/index.ts

@@ -1,3 +1,4 @@
 export { default as DoughnutChart } from './DoughnutChart'
 export { default as RadarChart } from './RadarChart'
 export { default as StarChart } from './StarChart'
+export { default as ResultSkeleton } from './ResultSkeleton'

src/pages/ReviewResultPage/index.tsx

@@ -41,7 +41,7 @@ const ReviewResultPage = () => {
     <div className="h-full">
       <Header />
 
-      <div className="mx-auto flex max-w-[800px] flex-col px-5 py-7">
+      <div className="mx-auto flex max-w-[37.5rem] flex-col px-5 py-7">
         <div className="flex flex-col gap-5">
           <div className="justify-between md:flex">
             <p className="text-base dark:text-white md:text-lg">

src/routes/router.tsx

@@ -11,6 +11,7 @@ import {
   ReviewResultPage,
   SignUpPage,
 } from '@/pages'
+import { ResultSkeleton } from '@/pages/ReviewResultPage/components'
 import Layout from './Layout'
 import { PATH } from './constants'
 import { loginLoader, unLoginLoader } from './loader'
@@ -64,7 +65,11 @@ const router = createBrowserRouter([
       },
       {
         path: PATH.REVIEW_RESULT,
-        element: <ReviewResultPage />,
+        element: (
+          <Suspense fallback={<ResultSkeleton />}>
+            <ReviewResultPage />
+          </Suspense>
+        ),
         loader: loginLoader,
       },
       {