Migrate saju service UI

src/App.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import Navbar from './components/Navbar';
 import BottomNav from './components/BottomNav';
 import PageHeader from './components/PageHeader';
@@ -9,19 +9,21 @@ import './App.css';
 
 function App() {
     const isMobile = useIsMobile();
+    const { pathname } = useLocation();
+    const isImmersiveRoute = pathname.startsWith('/saju');
 
     return (
-        <div className="app-shell">
-            <Navbar />
-            <div className="app-content">
-                <main className="site-main">
-                    <PageHeader />
+        <div className={`app-shell${isImmersiveRoute ? ' app-shell--immersive' : ''}`}>
+            {!isImmersiveRoute && <Navbar />}
+            <div className={`app-content${isImmersiveRoute ? ' app-content--immersive' : ''}`}>
+                <main className={`site-main${isImmersiveRoute ? ' site-main--immersive' : ''}`}>
+                    {!isImmersiveRoute && <PageHeader />}
                     <React.Suspense fallback={<div className="suspend-loading"><Loading /></div>}>
                         <Outlet />
                     </React.Suspense>
                 </main>
             </div>
-            {isMobile && <BottomNav />}
+            {isMobile && !isImmersiveRoute && <BottomNav />}
         </div>
     );
 }