refactor(my-page): my-page suspense 적용 및 root page server component로 변경

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 /> */}
     </>
   );
 }

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;

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;

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>
+  );
+};

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>
+  );
+};

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,
+  });
+};

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}
+    </>
+  );
+}

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>
   );

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'