refactor: react-query 적용 (mypage)

apps/community/src/apis/my/queries.ts

@@ -0,0 +1,16 @@
+import { queryOptions } from '@tanstack/react-query';
+import { getMyProfile } from './remotes';
+
+const MY_PROFILE_QUERY_KEYS = {
+  ALL: ['my'],
+} as const;
+
+const MY_PROFILE_QUERY_OPTIONS = {
+  ALL: () =>
+    queryOptions({
+      queryKey: MY_PROFILE_QUERY_KEYS.ALL,
+      queryFn: () => getMyProfile(),
+    }),
+};
+
+export { MY_PROFILE_QUERY_KEYS, MY_PROFILE_QUERY_OPTIONS };

apps/community/src/app/my/page.tsx

@@ -1,34 +1,26 @@
-import { MyInfoEditableProfileCard } from '~/components/my/my-info-editable-profile-card';
-import { MyInfoProfileCard } from '~/components/my/my-info-profile-card';
-import { PageHeader } from '~/components/page-header';
-import { getMyProfile } from './remotes';
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
 
-// TODO: for mocking but will be replaced with a proper solution later
-export const dynamic = 'force-dynamic';
+import { MY_PROFILE_QUERY_OPTIONS } from '~/apis/my/queries';
 
-export default async function MyPage() {
-  const { data } = await getMyProfile();
+import { getQueryClient } from '~/utils/get-query-client';
 
-  const userDetails = [
-    { title: '이름', value: data.name },
-    { title: '학번', value: data.id },
-    { title: '구분', value: data.role },
-    { title: '전공', value: data.major },
-  ];
+import { MyInformation } from '~/components/my/my-information';
+import { PageHeader } from '~/components/page-header';
+
+export default async function MyPage() {
+  const queryClient = getQueryClient();
 
-  const userEditableDetails = [
-    { title: '전화번호', value: data.phone },
-    { title: '이메일', value: data.email },
-  ];
+  void queryClient.prefetchQuery(MY_PROFILE_QUERY_OPTIONS.ALL());
 
   return (
     <>
       <PageHeader
         title="회원 정보"
         description="등록한 회원 정보를 확인할 수 있어요."
       />
-      <MyInfoProfileCard data={userDetails} />
-      <MyInfoEditableProfileCard data={userEditableDetails} />
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <MyInformation />
+      </HydrationBoundary>
     </>
   );
 }

apps/community/src/components/my/my-information.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { MY_PROFILE_QUERY_OPTIONS } from '~/apis/my/queries';
+
+import { MyInfoEditableProfileCard } from './my-info-editable-profile-card';
+import { MyInfoProfileCard } from './my-info-profile-card';
+
+function MyInformation() {
+  const { data } = useSuspenseQuery(MY_PROFILE_QUERY_OPTIONS.ALL());
+  const userDetails = [
+    { title: '이름', value: data.data.name },
+    { title: '학번', value: data.data.id },
+    { title: '구분', value: data.data.role },
+    { title: '전공', value: data.data.major },
+  ];
+
+  const userEditableDetails = [
+    { title: '전화번호', value: data.data.phone },
+    { title: '이메일', value: data.data.email },
+  ];
+  return (
+    <>
+      <MyInfoProfileCard data={userDetails} />
+      <MyInfoEditableProfileCard data={userEditableDetails} />
+    </>
+  );
+}
+
+export { MyInformation };