diff --git a/src/app/(AppBarHeader)/layout.tsx b/src/app/(AppBarHeader)/layout.tsx
index ce63ca6e..7c340d27 100644
--- a/src/app/(AppBarHeader)/layout.tsx
+++ b/src/app/(AppBarHeader)/layout.tsx
@@ -1,12 +1,12 @@
 import { Appbar } from './_components/Appbar';
-import { CategoryBottomSheet } from './toks-main/_components/CategoryBottomSheet';
 
 export default function AppBarLayout({ children }: StrictPropsWithChildren) {
   return (
     <>
       <Appbar />
       {children}
-      <CategoryBottomSheet />
+      {/* TODO: 에러 고치기 .. */}
+      {/* <CategoryBottomSheet /> */}
     </>
   );
 }
diff --git a/src/app/(BackHeader)/my-page/@toast/page.tsx b/src/app/(BackHeader)/my-page/@toast/page.tsx
new file mode 100644
index 00000000..7b76c587
--- /dev/null
+++ b/src/app/(BackHeader)/my-page/@toast/page.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import { useToast } from '@/common';
+import { Toast as ToastComponent, ToastProps } from '@/common/components/Toast';
+
+const Toast = () => {
+  const { getSavedToastInfo, clearSavedToast } = useToast();
+  const [toastData, setToastData] = useState<ToastProps | null>(null);
+
+  useEffect(() => {
+    setToastData(getSavedToastInfo());
+
+    clearSavedToast();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (toastData === null) {
+    return null;
+  }
+
+  return (
+    <ToastComponent
+      isShow={toastData.isShow}
+      type={toastData.type}
+      direction={toastData.direction}
+      title={toastData.title}
+    />
+  );
+};
+
+export default Toast;
diff --git a/src/app/(BackHeader)/my-page/@userInfo/page.tsx b/src/app/(BackHeader)/my-page/@userInfo/page.tsx
new file mode 100644
index 00000000..4c29c4fd
--- /dev/null
+++ b/src/app/(BackHeader)/my-page/@userInfo/page.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { getCookie } from 'cookies-next';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+import { ICON_URL } from '@/common';
+import { Text } from '@/common/components/Text';
+
+import { SkeletonUserInfo } from '../_components/SkeletonUserInfo.tsx';
+import { useSuspenseUserInfoQuery } from '../_lib/hooks/useSuspenseUserInfoQuery';
+
+const UserInfo = () => {
+  const router = useRouter();
+  const accessToken = getCookie('accessToken');
+  const { data: userInfo } = useSuspenseUserInfoQuery(accessToken as string);
+
+  if (!userInfo) {
+    return <SkeletonUserInfo />;
+  }
+  return (
+    <div className="w-full flex-col items-center pt-20px text-center">
+      <div className="mx-auto mb-24px h-96px w-96px overflow-hidden rounded-full">
+        <Image
+          src={userInfo ? userInfo.profileImageUrl : ICON_URL.EMOJI_BASE_GRAY}
+          alt="프로필 이미지"
+          width={96}
+          height={96}
+        />
+      </div>
+      <div className="mb-8px flex h-24px w-full justify-center">
+        <Text typo="headingL" color="gray10">
+          {userInfo?.nickname}
+        </Text>
+        <Image
+          className="ml-4px"
+          src={ICON_URL.CHEVRON_RIGHT}
+          alt="닉네임 수정 버튼"
+          width={24}
+          height={24}
+          onClick={() => router.push('/nickname/update')}
+        />
+      </div>
+      <div className="h-24px">
+        <Text typo="body" color="gray40">
+          {userInfo?.email}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export default UserInfo;
diff --git a/src/app/(BackHeader)/my-page/_components/GoogleFormButton/index.tsx b/src/app/(BackHeader)/my-page/_components/GoogleFormButton/index.tsx
new file mode 100644
index 00000000..11ef2703
--- /dev/null
+++ b/src/app/(BackHeader)/my-page/_components/GoogleFormButton/index.tsx
@@ -0,0 +1,23 @@
+'use client';
+import { useRouter } from 'next/navigation';
+
+import { GOOGLE_FORM_URL } from '@/common';
+import { Button } from '@/common/components/Button';
+
+export const GoogleFormButton = () => {
+  const router = useRouter();
+
+  return (
+    <Button
+      className="w-full"
+      size="L"
+      typo="subheadingBold"
+      backgroundColor="primaryDefault"
+      onClick={() => {
+        router.push(GOOGLE_FORM_URL);
+      }}
+    >
+      이런 퀴즈가 있었으면 좋겠어요
+    </Button>
+  );
+};
diff --git a/src/app/(BackHeader)/my-page/_components/SkeletonUserInfo.tsx/index.tsx b/src/app/(BackHeader)/my-page/_components/SkeletonUserInfo.tsx/index.tsx
new file mode 100644
index 00000000..dc7c1655
--- /dev/null
+++ b/src/app/(BackHeader)/my-page/_components/SkeletonUserInfo.tsx/index.tsx
@@ -0,0 +1,23 @@
+import Image from 'next/image';
+
+import { ICON_URL } from '@/common';
+import { Skeleton } from '@/common/components/Skeleton';
+
+export const SkeletonUserInfo = () => {
+  return (
+    <div className="flex w-full animate-pulse flex-col items-center pt-20px text-center">
+      <div className="mx-auto mb-24px h-96px w-96px overflow-hidden rounded-full">
+        <Image
+          src={ICON_URL.EMOJI_BASE_GRAY}
+          alt="프로필 이미지"
+          width={96}
+          height={96}
+        />
+      </div>
+      <div className="flex w-full flex-col items-center">
+        <Skeleton className="mb-[8px] h-[24px] w-[120px]" />
+        <Skeleton className="m-[4px] h-[16px] w-[200px]" />
+      </div>
+    </div>
+  );
+};
diff --git a/src/app/(BackHeader)/my-page/_components/UserInfo/index.tsx b/src/app/(BackHeader)/my-page/_components/UserInfo/index.tsx
deleted file mode 100644
index 455dd237..00000000
--- a/src/app/(BackHeader)/my-page/_components/UserInfo/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-
-import { ICON_URL, IMAGE_URL } from '@/common';
-import { Text } from '@/common/components/Text';
-import { useAuth } from '@/common/hooks';
-
-export const UserInfo = () => {
-  const { user } = useAuth();
-  const [profileImage, setProfileImage] = useState(ICON_URL.EMOJI_BASE_GRAY);
-  const router = useRouter();
-
-  useEffect(() => {
-    if (user && user.profileImageUrl !== IMAGE_URL.BASE_KAKAO) {
-      setProfileImage(user.profileImageUrl);
-    }
-  }, [user]);
-
-  return (
-    <div className="w-full flex-col items-center pt-20px text-center">
-      <div className="mx-auto mb-24px h-96px w-96px overflow-hidden rounded-full">
-        <Image src={profileImage} alt="프로필 이미지" width={96} height={96} />
-      </div>
-      <div className="mb-8px flex w-full justify-center">
-        <Text typo="headingL" color="gray10">
-          {user?.nickname}
-        </Text>
-        <Image
-          className="ml-4px"
-          src={ICON_URL.CHEVRON_RIGHT}
-          alt="닉네임 수정 버튼"
-          width={24}
-          height={24}
-          onClick={() => router.push('/nickname/update')}
-        />
-      </div>
-      <Text typo="body" color="gray40">
-        {user?.email}
-      </Text>
-    </div>
-  );
-};
diff --git a/src/app/(BackHeader)/my-page/_lib/hooks/useSuspenseUserInfoQuery.ts b/src/app/(BackHeader)/my-page/_lib/hooks/useSuspenseUserInfoQuery.ts
new file mode 100644
index 00000000..d0b8df1e
--- /dev/null
+++ b/src/app/(BackHeader)/my-page/_lib/hooks/useSuspenseUserInfoQuery.ts
@@ -0,0 +1,10 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getUserInfo } from '@/common';
+
+export const useSuspenseUserInfoQuery = (accessToken?: string) => {
+  return useSuspenseQuery({
+    queryKey: ['userInfo', accessToken],
+    queryFn: getUserInfo,
+  });
+};
diff --git a/src/app/(BackHeader)/my-page/layout.tsx b/src/app/(BackHeader)/my-page/layout.tsx
new file mode 100644
index 00000000..1fd55e87
--- /dev/null
+++ b/src/app/(BackHeader)/my-page/layout.tsx
@@ -0,0 +1,22 @@
+import React, { PropsWithChildren, Suspense } from 'react';
+
+import { SkeletonUserInfo } from './_components/SkeletonUserInfo.tsx';
+
+type Props = {
+  toast: React.ReactNode;
+  userInfo: React.ReactNode;
+};
+
+export default function MyPageLayout({
+  children,
+  toast,
+  userInfo,
+}: PropsWithChildren<Props>) {
+  return (
+    <>
+      <Suspense fallback={<SkeletonUserInfo />}>{userInfo}</Suspense>
+      {children}
+      {toast}
+    </>
+  );
+}
diff --git a/src/app/(BackHeader)/my-page/page.tsx b/src/app/(BackHeader)/my-page/page.tsx
index 1198ee5a..82ffbcca 100644
--- a/src/app/(BackHeader)/my-page/page.tsx
+++ b/src/app/(BackHeader)/my-page/page.tsx
@@ -1,39 +1,15 @@
-'use client';
 import Image from 'next/image';
-import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
 
-import { GOOGLE_FORM_URL, ICON_URL } from '@/common';
-import { Button } from '@/common/components/Button';
+import { ICON_URL } from '@/common';
 import { Text } from '@/common/components/Text';
-import { Toast, ToastProps } from '@/common/components/Toast';
-import { useToast } from '@/common/hooks/useToast';
 
+import { GoogleFormButton } from './_components/GoogleFormButton';
 import { LogoutBar } from './_components/LogoutBar';
-import { UserInfo } from './_components/UserInfo';
 
 const MyPage = () => {
-  const [toastData, setToastData] = useState<ToastProps | null>(null);
-  const router = useRouter();
-  const { getSavedToastInfo, clearSavedToast } = useToast();
-  useEffect(() => {
-    setToastData(getSavedToastInfo());
-    clearSavedToast();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <div className="h-full">
       <div>
-        {toastData && (
-          <Toast
-            isShow={toastData.isShow}
-            type={toastData.type}
-            direction={toastData.direction}
-            title={toastData.title}
-          />
-        )}
-        <UserInfo />
         <div className="h-40px" />
         <LogoutBar />
         <div className="h-56px" />
@@ -47,17 +23,7 @@ const MyPage = () => {
           height={160}
           alt="로켓 이미지"
         />
-        <Button
-          className="w-full"
-          size="L"
-          typo="subheadingBold"
-          backgroundColor="primaryDefault"
-          onClick={() => {
-            router.push(GOOGLE_FORM_URL);
-          }}
-        >
-          이런 퀴즈가 있었으면 좋겠어요
-        </Button>
+        <GoogleFormButton />
       </div>
     </div>
   );
diff --git a/src/common/utils/http.ts b/src/common/utils/http.ts
index bc215e25..147ab65f 100644
--- a/src/common/utils/http.ts
+++ b/src/common/utils/http.ts
@@ -92,6 +92,9 @@ export const authToken = {
 
 export const redirectToLoginPage = () => {
   const isDev = process.env.NODE_ENV === 'development';
+  if (typeof window === 'undefined') {
+    return;
+  }
 
   window.location.href = isDev
     ? 'http://localhost:3000/toks-main'