refactor: my page body skeleton add (#191)

Author: sikkzz

src/app/mypage/page.tsx

@@ -4,6 +4,7 @@ import { ServerFetchBoundary } from "@/apis/ServerFetchBoundary";
 
 import Gnb from "@/components/common/Gnb/Gnb";
 import MyPageBody from "@/components/MyPage/MypageBody/MyPageBody";
+import MyPageBodySkeleton from "@/components/MyPage/MypageBody/MyPageBodySkeleton";
 import MyPageHeader from "@/components/MyPage/MyPageHeader/MyPageHeader";
 
 import { userInfoQueryOptions } from "@/hooks/api/userInfo/useUserInfoQuery";
@@ -14,20 +15,7 @@ export default function MyPage() {
     <>
       <MyPageHeader />
 
-      <Suspense
-        fallback={
-          // TODO: loading 컴포넌트로 변경
-          <div className="flex justify-between mt-[60px] px-4 animate-pulse">
-            <div className="flex gap-4 items-center">
-              <div className="w-[60px] h-[60px] rounded-full bg-gray-50" />
-              <div className="flex flex-col gap-1 items-start">
-                <div className="w-20 h-4 rounded bg-gray-50" />
-                <div className="w-14 h-5 rounded bg-gray-50" />
-              </div>
-            </div>
-          </div>
-        }
-      >
+      <Suspense fallback={<MyPageBodySkeleton />}>
         <ServerFetchBoundary fetchOptions={serverFetchOptions}>
           <MyPageBody />
         </ServerFetchBoundary>

src/components/MyPage/MypageBody/MyPageBodySkeleton.tsx

@@ -0,0 +1,17 @@
+import Skeleton from "@/components/common/Skeleton/Skeleton";
+
+const MyPageBodySkeleton = () => {
+  return (
+    <div className="px-4">
+      <Skeleton className="w-full h-[60px] mt-14" />
+      <Skeleton className="w-full h-8 mt-9" />
+      <Skeleton className="w-full h-[150px] mt-3" />
+      <Skeleton className="w-full h-8 mt-8" />
+      <Skeleton className="w-full h-[134px] mt-7" />
+      <Skeleton className="w-full h-8 mt-20" />
+      <Skeleton className="w-full h-[104px] mt-6" />
+    </div>
+  );
+};
+
+export default MyPageBodySkeleton;