From 8dc310485290db2915b847f1c7534f131f4cf118 Mon Sep 17 00:00:00 2001
From: chaaerim <cofla411@ewhain.net>
Date: Fri, 19 Jan 2024 17:06:36 +0900
Subject: [PATCH] =?UTF-8?q?=20:sparkles:=20feat:=20server=20render?=
 =?UTF-8?q?=EC=8B=9C=20userInfo=20null=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(BackHeader)/my-page/@toast/page.tsx    |  2 --
 src/app/(BackHeader)/my-page/@userInfo/page.tsx | 12 ++++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/app/(BackHeader)/my-page/@toast/page.tsx b/src/app/(BackHeader)/my-page/@toast/page.tsx
index 1fbb8a81..7b76c587 100644
--- a/src/app/(BackHeader)/my-page/@toast/page.tsx
+++ b/src/app/(BackHeader)/my-page/@toast/page.tsx
@@ -11,8 +11,6 @@ const Toast = () => {
 
   useEffect(() => {
     setToastData(getSavedToastInfo());
-    console.log(getSavedToastInfo());
-    console.log(toastData);
 
     clearSavedToast();
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/src/app/(BackHeader)/my-page/@userInfo/page.tsx b/src/app/(BackHeader)/my-page/@userInfo/page.tsx
index 35de8485..4c29c4fd 100644
--- a/src/app/(BackHeader)/my-page/@userInfo/page.tsx
+++ b/src/app/(BackHeader)/my-page/@userInfo/page.tsx
@@ -7,18 +7,22 @@ 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: user } = useSuspenseUserInfoQuery(accessToken as string);
+  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={user ? user.profileImageUrl : ICON_URL.EMOJI_BASE_GRAY}
+          src={userInfo ? userInfo.profileImageUrl : ICON_URL.EMOJI_BASE_GRAY}
           alt="프로필 이미지"
           width={96}
           height={96}
@@ -26,7 +30,7 @@ const UserInfo = () => {
       </div>
       <div className="mb-8px flex h-24px w-full justify-center">
         <Text typo="headingL" color="gray10">
-          {user?.nickname}
+          {userInfo?.nickname}
         </Text>
         <Image
           className="ml-4px"
@@ -39,7 +43,7 @@ const UserInfo = () => {
       </div>
       <div className="h-24px">
         <Text typo="body" color="gray40">
-          {user?.email}
+          {userInfo?.email}
         </Text>
       </div>
     </div>