diff --git a/src/app/bookarchive/page.tsx b/src/app/bookarchive/page.tsx
index 0393cdde..db02d48f 100644
--- a/src/app/bookarchive/page.tsx
+++ b/src/app/bookarchive/page.tsx
@@ -1,10 +1,9 @@
 'use client';
 
 import useMyProfileQuery from '@/queries/user/useMyProfileQuery';
-
 import { checkAuthentication } from '@/utils/helpers';
-
-import SSRSafeSuspense from '@/components/SSRSafeSuspense';
+import { Suspense } from 'react';
+import useMounted from '@/hooks/useMounted';
 import BookArchiveForAuth from '@/v1/bookArchive/BookArchiveForAuth';
 import BookArchiveForUnAuth from '@/v1/bookArchive/BookArchiveForUnAuth';
 import TopHeader from '@/v1/base/TopHeader';
@@ -14,9 +13,9 @@ export default function BookArchivePage() {
     <div className="flex w-full flex-col gap-[1rem] pb-[2rem]">
       <TopHeader text="BookArchive" />
       {/* TODO: 스켈레톤 컴포넌트로 교체 */}
-      <SSRSafeSuspense fallback={null}>
+      <Suspense fallback={null}>
         <Contents />
-      </SSRSafeSuspense>
+      </Suspense>
     </div>
   );
 }
@@ -26,6 +25,8 @@ const Contents = () => {
   const { data: userData } = useMyProfileQuery({
     enabled: isAuthenticated,
   });
+  const mounted = useMounted();
+  if (!mounted) return null;
 
   return isAuthenticated ? (
     <BookArchiveForAuth userJobGroup={userData.job.jobGroupName} />