feat: 빠른 데이터 요청

src/App.tsx

@@ -1,8 +1,13 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import { RouterProvider } from "react-router-dom";
+import { checkToken } from "./client-entry";
 import router from "./router/router";
 
+document.addEventListener("DOMContentLoaded", () => {
+  checkToken();
+});
+
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

src/api/auth/postLogin.ts

@@ -17,6 +17,7 @@ export default async function postLogin(loginBody: LoginBodyType) {
 
   localStorage.setItem("accessToken", accessToken);
   localStorage.setItem("refreshToken", refreshToken);
+  localStorage.setItem("tokenAvailable", "true");
 
   return response;
 }

src/client-entry.ts

@@ -0,0 +1,33 @@
+export async function checkToken() {
+  const accessToken = localStorage.getItem("accessToken");
+  const refreshToken = localStorage.getItem("refreshToken");
+  const headers = new Headers();
+
+  if (refreshToken) {
+    headers.append("x-refresh-token", refreshToken);
+  }
+  if (accessToken) {
+    headers.append("Authorization", `Bearer ${accessToken}`);
+  }
+  headers.append("Content-Type", "application/json");
+  try {
+    const response = await fetch("https://linkedoutapp.com/api/admin-info/my", {
+      method: "GET",
+      headers,
+    });
+
+    if (!response.ok) {
+      sessionStorage.setItem("tokenAvailable", "false");
+    }
+
+    if (response.status === 200) {
+      const data = await response.json();
+      sessionStorage.setItem("tokenAvailable", "true");
+      sessionStorage.setItem("root", `${data.data.name === "root"}`);
+    } else {
+      sessionStorage.setItem("tokenAvailable", "false");
+    }
+  } catch (error) {
+    console.error("Error fetching data:", error);
+  }
+}

src/layouts/authCheckLoader.tsx

@@ -7,14 +7,18 @@ import { redirect } from "react-router-dom";
 type LoaderContext = "AuthLayout" | "DefaultLayout";
 
 export default async function authCheckLoader(context: LoaderContext) {
-  const accessToken = localStorage.getItem("accessToken");
+  const tokenAvailable = localStorage.getItem("tokenAvailable");
+
+  if (tokenAvailable) {
+    redirect("/auth/login");
+  }
 
   const handleUnauthorized = () => {
     localStorage.removeItem("accessToken");
     return redirect(`/auth/${AuthPaths.LOGIN}`);
   };
 
-  if (!accessToken) {
+  if (!tokenAvailable || tokenAvailable === "false") {
     return context === "DefaultLayout" ? handleUnauthorized() : null;
   }
 
@@ -27,7 +31,6 @@ export default async function authCheckLoader(context: LoaderContext) {
     sessionStorage.setItem("redirected", "true");
 
     if (response?.id !== undefined) {
-      localStorage.setItem("isRootAccount", `${response.id === 0}`);
       if (context === "AuthLayout") {
         return redirect(`/${DefaultPaths.DASHBOARD}`);
       }

vite.config.ts

@@ -5,6 +5,11 @@ import react from "@vitejs/plugin-react";
 
 // https://vite.dev/config/
 export default defineConfig({
+  server: {
+    hmr: {
+      overlay: false,
+    },
+  },
   plugins: [
     react(),
     VitePWA({