Merge pull request #54 from JECT-Study/feat/35-agreement-screen

fix: wrap exhibition search params in suspense

Author: YeongJae0114

src/app/exhibitions/[exhibitionId]/consent/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { use, useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, use, useEffect, useMemo, useRef, useState } from "react";
 
 import { useRouter, useSearchParams } from "next/navigation";
 
@@ -96,7 +96,18 @@ function ConsentPageSkeleton() {
   );
 }
 
-export default function ConsentPage({ params }: ConsentPageProps) {
+function ConsentPageFallback() {
+  return (
+    <div className="bg-bg-primary min-h-dvh">
+      <Header title="동의서 작성" showBack />
+      <main className="mx-auto min-h-[calc(100dvh-60px)] w-full max-w-[430px] min-w-[320px]">
+        <ConsentPageSkeleton />
+      </main>
+    </div>
+  );
+}
+
+function ConsentPageContent({ params }: ConsentPageProps) {
   const { exhibitionId } = use(params);
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -308,3 +319,11 @@ export default function ConsentPage({ params }: ConsentPageProps) {
     </div>
   );
 }
+
+export default function ConsentPage({ params }: ConsentPageProps) {
+  return (
+    <Suspense fallback={<ConsentPageFallback />}>
+      <ConsentPageContent params={params} />
+    </Suspense>
+  );
+}

src/app/exhibitions/status/page.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { Suspense } from "react";
+
 import { useSearchParams } from "next/navigation";
 
 import Header from "@/components/common/Header";
@@ -26,7 +28,7 @@ function getErrorMessage(error: unknown) {
   return error instanceof Error ? error.message : "전시 현황을 불러오지 못했습니다.";
 }
 
-export default function ExhibitionStatusPage() {
+function ExhibitionStatusContent() {
   const searchParams = useSearchParams();
   const { isAuthReady, isAuthenticated } = useRequireAuth();
 
@@ -36,18 +38,39 @@ export default function ExhibitionStatusPage() {
   const isLoading = !isAuthReady || (isAuthenticated && query.isLoading);
   const errorMessage = query.error ? getErrorMessage(query.error) : null;
 
+  return (
+    <main className="mx-auto min-h-[calc(100dvh-60px)] w-full max-w-97.5 min-w-[320px]">
+      <StatusFilterTabs activeFilter={activeFilter} />
+      <ExhibitionStatusList
+        exhibitions={exhibitions}
+        isLoading={isLoading}
+        errorMessage={isAuthenticated ? errorMessage : null}
+        onRetry={() => void query.refetch()}
+      />
+    </main>
+  );
+}
+
+function ExhibitionStatusFallback() {
+  return (
+    <main className="mx-auto min-h-[calc(100dvh-60px)] w-full max-w-97.5 min-w-[320px]">
+      <ExhibitionStatusList
+        exhibitions={[]}
+        isLoading
+        errorMessage={null}
+        onRetry={() => undefined}
+      />
+    </main>
+  );
+}
+
+export default function ExhibitionStatusPage() {
   return (
     <div className="bg-bg-primary min-h-dvh">
       <Header title="전시 현황" showBorder={false} />
-      <main className="mx-auto min-h-[calc(100dvh-60px)] w-full max-w-97.5 min-w-[320px]">
-        <StatusFilterTabs activeFilter={activeFilter} />
-        <ExhibitionStatusList
-          exhibitions={exhibitions}
-          isLoading={isLoading}
-          errorMessage={isAuthenticated ? errorMessage : null}
-          onRetry={() => void query.refetch()}
-        />
-      </main>
+      <Suspense fallback={<ExhibitionStatusFallback />}>
+        <ExhibitionStatusContent />
+      </Suspense>
     </div>
   );
 }