frontend/components/layout/AppLayout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, Suspense } from "react";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import {
@@ -191,7 +191,7 @@ const convertSingleMenu = (menu: MenuItem, allMenus: MenuItem[], userInfo: Exten
   };
 };
 
-export function AppLayout({ children }: AppLayoutProps) {
+function AppLayoutInner({ children }: AppLayoutProps) {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -442,3 +442,20 @@ export function AppLayout({ children }: AppLayoutProps) {
     </div>
   );
 }
+
+export function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex h-screen items-center justify-center">
+          <div className="flex flex-col items-center">
+            <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
+            <p>로딩중...</p>
+          </div>
+        </div>
+      }
+    >
+      <AppLayoutInner>{children}</AppLayoutInner>
+    </Suspense>
+  );
+}