로그인을 해야 Id를 받을 수 있고, 이에 따른 마인드맵의 소유권을 갱신할 수 있어야 하는데, 문제는 UseAuth와 useDashboard가 함께 동작하다보니 서로 타이밍이 다르면 대시보드가 먼저 갱신될 떄가 있어 새로고침할 경우에 id가 제대로 반영되지 않아 갱신이 되지 않는 현상 발생

새로고침을 했을 때 기존의 전역 상태가 유지되지 않아 id값을 못 불러오는 탓에 기존의 값을 하지 못함

import Spinner from "@/components/common/Spinner";
import Profile from "@/components/MindMapHeader/Profile";
import useAuth from "@/hooks/useAuth";
import { lazy, Suspense } from "react";

const DashBoard = lazy(() => import("@/components/Dashboard"));

export default function MainPage() {
  const { isLoading } = useAuth();
  return (
    <>
      {isLoading && <Spinner />}
      <header className={`flex w-full justify-end bg-transparent p-4`}>
        <Profile />
      </header>
      <main className="flex h-[90%] w-full flex-col overflow-hidden p-8">
        <p className="p-3 text-2xl font-bold">대시보드</p>
        <div className="relative flex h-[90%] w-full gap-4">
          <Suspense fallback={<Spinner />}>
            <DashBoard />
          </Suspense>
        </div>
      </main>
    </>
  );
}

이를 해결하기 위해 LazyLoading을 통해 타이밍 조절을 해줬음

useAuth가 끝난 후에 DashBoard를 Lazy loading하여 타이밍이 조절됨