Bug/#353/fe

frontend/src/app/(app)/(with-navbar)/layout.tsx

@@ -1,4 +1,4 @@
-import { Navbar } from '@/widgets';
+import NavbarPortal from '@/widgets/navbar/NavbarPortal';
 
 export default function Layout({
   children,
@@ -8,7 +8,7 @@ export default function Layout({
   return (
     <div className={'w-full'}>
       {children}
-      <Navbar />
+      <NavbarPortal />
     </div>
   );
 }

frontend/src/widgets/navbar/Navbar.tsx

@@ -40,7 +40,7 @@ function Navigation() {
   return (
     <div
       className={
-        'bg-white w-full max-w-[430px] min-w-[320px] py-[34px] fixed bottom-0 flex justify-around pt-1 '
+        'bg-white w-full max-w-[430px] min-w-[320px] py-[34px] fixed bottom-0 flex justify-around pt-1 z-100'
       }
       style={{
         // 모바일에서 안전 영역 고려

frontend/src/widgets/navbar/NavbarPortal.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Navbar } from '@/widgets';
+
+export default function NavbarPortal() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  return mounted ? createPortal(<Navbar />, document.body) : null;
+}