feat(os): 부팅 화면 및 윈도우 시작음 기능 추가

Author: sageherb

src/App.tsx

@@ -1,29 +1,40 @@
+import { useState } from "react";
 import { Routes, Route, Navigate } from "react-router";
 
 import AuthInitializer from "@/hooks/AuthListener";
 import AuthLayout from "@/layouts/AuthLayout";
 import SignInPage from "@/pages/auth/sign-in/SignInPage";
 import SignUpPage from "@/pages/auth/sign-up/SignUpPage";
+import BootScreen from "@/pages/os/BootScreen";
 import OsMain from "@/pages/os/OsMain";
 import ProtectedRoute from "@/router/ProtectedRoute";
 import PublicRoute from "@/router/PublicRoute";
 
 export default function App() {
+  const [isBooting, setIsBooting] = useState(false);
+  const USE_ENTER_MODE = true;
+
   return (
     <>
       <AuthInitializer />
-      <Routes>
-        <Route element={<PublicRoute />}>
-          <Route element={<AuthLayout />}>
-            <Route path="/signin" element={<SignInPage />} />
-            <Route path="/signup" element={<SignUpPage />} />
+      {!isBooting ? (
+        <BootScreen onComplete={() => setIsBooting(true)} useEnterMode={USE_ENTER_MODE} />
+      ) : (
+        <Routes>
+          <Route element={<PublicRoute />}>
+            <Route element={<AuthLayout />}>
+              <Route path="/signin" element={<SignInPage />} />
+              <Route path="/signup" element={<SignUpPage />} />
+            </Route>
+          </Route>
+
+          <Route element={<ProtectedRoute />}>
+            <Route path="/" element={<OsMain />} />
           </Route>
-        </Route>
-        <Route element={<ProtectedRoute />}>
-          <Route path="/" element={<OsMain />} />
-        </Route>
-        <Route path="*" element={<Navigate to="/" replace />} />
-      </Routes>
+
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      )}
     </>
   );
 }

src/assets/os/bios.png

@@ -3,11 +3,7 @@ import { Navigate, Outlet } from "react-router";
 import { useAuthUser } from "@/hooks/useAuthUser";
 
 export default function ProtectedRoute() {
-  const { isLoggedIn, isLoading } = useAuthUser();
-
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
+  const { isLoggedIn } = useAuthUser();
 
   if (!isLoggedIn) {
     return <Navigate to="/signin" replace />;

src/assets/sounds/windows95-startup-sound.mp3

@@ -3,11 +3,7 @@ import { Navigate, Outlet } from "react-router";
 import { useAuthUser } from "@/hooks/useAuthUser";
 
 export default function PublicRoute() {
-  const { isLoggedIn, isLoading } = useAuthUser();
-
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
+  const { isLoggedIn } = useAuthUser();
 
   if (isLoggedIn) {
     return <Navigate to="/" replace />;