refactor(#43): Suspense 기반 로딩 처리로 변경 및 ProfileSkeleton 적

Author: wkdtnqls0506

src/app/member/profile/_components/Profile/Profile.tsx

@@ -1,46 +1,23 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 
 import { memberQueryOptions } from "@/app/member/_api";
-import Bapurit from "@/assets/logo/front-bapurit.svg";
-import { HStack, VStack } from "@/components/ui/Stack";
 import { Text } from "@/components/ui/Text";
 
-import * as styles from "./Profile.css";
+import { ProfileLayout } from "./ProfileLayout";
 
 export const Profile = () => {
-  const { data: member, isLoading } = useQuery(memberQueryOptions);
-
-  // TODO: 로딩 스피너 or 스켈레톤 정해지면 수정
-  if (isLoading) {
-    return (
-      <HStack gap={16} className={styles.wrapper}>
-        <div className={styles.imageBackground}>
-          <Bapurit width={61} height={61} />
-        </div>
-        <VStack justify='center' gap={4}>
-          <Text typo='title2Sb' color='neutral.10'>
-            불러오는 중...
-          </Text>
-        </VStack>
-      </HStack>
-    );
-  }
+  const { data: member } = useSuspenseQuery(memberQueryOptions);
 
   return (
-    <HStack gap={16} className={styles.wrapper}>
-      <div className={styles.imageBackground}>
-        <Bapurit width={61} height={61} />
-      </div>
-      <VStack justify='center' gap={4}>
-        <Text typo='title2Sb' color='neutral.10'>
-          {member?.nickname}
-        </Text>
-        <Text typo='caption1Md' color='neutral.50'>
-          {member?.email}
-        </Text>
-      </VStack>
-    </HStack>
+    <ProfileLayout>
+      <Text typo='title2Sb' color='neutral.10'>
+        {member.nickname}
+      </Text>
+      <Text typo='caption1Md' color='neutral.50'>
+        {member.email}
+      </Text>
+    </ProfileLayout>
   );
 };

src/app/member/profile/_components/Profile/ProfileLayout.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { type ReactNode } from "react";
+
+import Bapurit from "@/assets/logo/front-bapurit.svg";
+import { HStack, VStack } from "@/components/ui/Stack";
+
+import * as styles from "./Profile.css";
+
+export type ProfileLayoutProps = {
+  children: ReactNode;
+};
+
+export const ProfileLayout = ({ children }: ProfileLayoutProps) => {
+  return (
+    <HStack gap={16} className={styles.wrapper}>
+      <div className={styles.imageBackground}>
+        <Bapurit width={61} height={61} />
+      </div>
+      <VStack justify='center' gap={8}>
+        {children}
+      </VStack>
+    </HStack>
+  );
+};

src/app/member/profile/_components/Profile/ProfileSkeleton.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from "@/components/ui/Skeleton";
+import { radius } from "@/styles";
+
+import { ProfileLayout } from "./ProfileLayout";
+
+export const ProfileSkeleton = () => {
+  return (
+    <ProfileLayout>
+      <Skeleton width={80} height={20} radius={radius[40]} />
+      <Skeleton width={160} height={20} radius={radius[40]} />
+    </ProfileLayout>
+  );
+};

src/app/member/profile/page.tsx

@@ -1,13 +1,18 @@
+import { Suspense } from "react";
+
 import { VStack } from "@/components/ui/Stack";
 
 import { Banner } from "./_components/Banner";
 import { MenuList } from "./_components/MenuList";
 import { Profile } from "./_components/Profile";
+import { ProfileSkeleton } from "./_components/Profile/ProfileSkeleton";
 
 export default function ProfilePage() {
   return (
     <VStack>
-      <Profile />
+      <Suspense fallback={<ProfileSkeleton />}>
+        <Profile />
+      </Suspense>
       <Banner />
       <MenuList />
     </VStack>