주민증 수정 관련 버그 (프로필 버튼, react-query cache errror)

src/api/domain/idCard.api.ts

@@ -17,7 +17,7 @@ import {
 } from '~/types/idCard';
 
 export const idCardQueryKey = {
-  idCards: (idCardId: number) => ['getIdCardDetail', idCardId],
+  idCards: (idCardId: number) => ['IdCardDetail', idCardId],
   myCommunity: (communityId: number) => ['CommunityMyIdCard', communityId],
 };
 
@@ -50,12 +50,13 @@ export const editIdCardDetail = (idCardInfo: EditIdCardRequest) => {
   });
 };
 
-export const useEditIdCardDetail = () => {
+export const useEditIdCardDetail = (communityId: number) => {
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: (idCardInfo: EditIdCardRequest) => editIdCardDetail(idCardInfo),
     onSuccess: (data: IdCardEditResponse) => {
+      queryClient.invalidateQueries(idCardQueryKey.myCommunity(communityId));
       queryClient.invalidateQueries(idCardQueryKey.idCards(data.id));
     },
   });

src/app/my-page/[communityId]/edit/components/MyPageEditIdCard/MyPageEditIdCard.tsx

@@ -1,35 +1,41 @@
-import 'server-only';
-
 import { Suspense } from 'react';
 
+import { idCardQueryKey } from '~/api/domain/idCard.api';
 import { getCommunityMyIdCardDetailServer } from '~/api/domain/idCard.api.server';
 import RetryErrorBoundary from '~/components/ErrorBoundary/RetryErrorBoundary.client';
+import { HydrationProvider } from '~/components/HydrationProvider';
 import { IdCardEditor } from '~/modules/IdCardEditor';
 
 type EditMyPageProps = {
   communityId: number;
 };
 
-const MyPageEditCardComponent = async ({ communityId }: EditMyPageProps) => {
-  const { idCardDetailsDto } = await getCommunityMyIdCardDetailServer(communityId);
-  const { idCardId, nickname, aboutMe, profileImageUrl, keywords } = idCardDetailsDto;
+const MyPageEditCardComponent = ({ communityId }: EditMyPageProps) => {
+  const getCommunityMyIdCardDetailQuery = async () => {
+    const { idCardDetailsDto } = await getCommunityMyIdCardDetailServer(communityId);
+
+    return {
+      idCardDetailsDto,
+    };
+  };
 
   return (
-    <IdCardEditor
-      idCardId={idCardId}
-      nickname={nickname}
-      aboutMe={aboutMe}
-      profileImageUrl={profileImageUrl}
-      keywords={keywords}
-    />
+    <>
+      {/* @ts-expect-error Server Component */}
+      <HydrationProvider
+        queryKey={idCardQueryKey.myCommunity(communityId)}
+        queryFn={getCommunityMyIdCardDetailQuery}
+      >
+        <IdCardEditor communityId={communityId} />
+      </HydrationProvider>
+    </>
   );
 };
 
 export const MyPageEditIdCard = ({ communityId }: EditMyPageProps) => {
   return (
     <RetryErrorBoundary>
       <Suspense>
-        {/* @ts-expect-error Server Component */}
         <MyPageEditCardComponent communityId={communityId} />
       </Suspense>
     </RetryErrorBoundary>

src/app/my-page/[communityId]/edit/page.tsx

@@ -1,5 +1,3 @@
-import 'server-only';
-
 import { MyPageEditIdCard } from '~/app/my-page/[communityId]/edit/components/MyPageEditIdCard';
 
 type MyPageEditProps = {

src/app/my-page/[communityId]/page.tsx

@@ -1,8 +1,12 @@
-import 'server-only';
+import Link from 'next/link';
 
 import { MyPageIdCard } from '~/app/my-page/[communityId]/components/MyPageIdCard';
+import { BottomNavigation } from '~/components/BottomNavigation';
+import { GearFillIcon } from '~/components/Icon';
+import { TopNavigation } from '~/components/TopNavigation';
 import { IdCardEditButton } from '~/modules/IdCardEditButton';
 import { PlanetCreationButton } from '~/modules/PlanetCreationButton';
+import { PlanetSelector } from '~/modules/PlanetSelector';
 
 type MyPageProps = {
   params: {
@@ -12,18 +16,31 @@ type MyPageProps = {
 
 const MyPage = ({ params: { communityId } }: MyPageProps) => {
   return (
-    <main className="pt-35pxr">
-      <div className="mx-layout-l">
-        <div className="mb-16pxr flex w-full justify-between">
-          <h2 className="text-h3 text-grey-800">내 주민증</h2>
-          <IdCardEditButton />
+    <div>
+      <TopNavigation bottomBorderColor="bg-grey-100">
+        <TopNavigation.Left>
+          <PlanetSelector />
+        </TopNavigation.Left>
+        <TopNavigation.Right>
+          <Link href="/my-page/config">
+            <GearFillIcon />
+          </Link>
+        </TopNavigation.Right>
+      </TopNavigation>
+      <main className="pt-35pxr">
+        <div className="mx-layout-l">
+          <div className="mb-16pxr flex w-full justify-between">
+            <h2 className="text-h3 text-grey-800">내 주민증</h2>
+            <IdCardEditButton />
+          </div>
+          <MyPageIdCard id={communityId} />
         </div>
-        <MyPageIdCard id={communityId} />
-      </div>
-      <div className="mx-layout-sm mt-28pxr">
-        <PlanetCreationButton />
-      </div>
-    </main>
+        <div className="mx-layout-sm mt-28pxr">
+          <PlanetCreationButton />
+        </div>
+      </main>
+      <BottomNavigation />
+    </div>
   );
 };
 

src/app/my-page/empty/page.tsx

@@ -1,8 +1,12 @@
 'use client';
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
-import { PlusIcon } from '~/components/Icon';
+import { BottomNavigation } from '~/components/BottomNavigation';
+import { GearFillIcon, PlusIcon } from '~/components/Icon';
+import { TopNavigation } from '~/components/TopNavigation';
 import { PlanetCreationButton } from '~/modules/PlanetCreationButton';
+import { PlanetSelector } from '~/modules/PlanetSelector';
 import { useCommunityStore } from '~/stores/community.store';
 
 const EmptyPlanet = () => {
@@ -15,25 +19,38 @@ const EmptyPlanet = () => {
   };
 
   return (
-    <main className="pt-35pxr">
-      <div className="mx-layout-l">
-        <h1 className="text-h3 text-grey-800">내 주민증</h1>
-        <div className="mt-16pxr flex h-[404px] w-full items-center justify-center rounded-[16px] border border-dashed border-primary-500 bg-blue-100">
-          <div className="flex flex-col items-center gap-8pxr">
-            <button
-              onClick={onClickCreateIdCardButton}
-              className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-blue-200"
-            >
-              <PlusIcon className="fill-primary-500 stroke-2" />
-            </button>
-            <span className="text-b1 text-primary-500">주민증 만들기</span>
+    <div>
+      <TopNavigation bottomBorderColor="bg-grey-100">
+        <TopNavigation.Left>
+          <PlanetSelector />
+        </TopNavigation.Left>
+        <TopNavigation.Right>
+          <Link href="/my-page/config">
+            <GearFillIcon />
+          </Link>
+        </TopNavigation.Right>
+      </TopNavigation>
+      <main className="pt-35pxr">
+        <div className="mx-layout-l">
+          <h1 className="text-h3 text-grey-800">내 주민증</h1>
+          <div className="mt-16pxr flex h-[404px] w-full items-center justify-center rounded-[16px] border border-dashed border-primary-500 bg-blue-100">
+            <div className="flex flex-col items-center gap-8pxr">
+              <button
+                onClick={onClickCreateIdCardButton}
+                className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-blue-200"
+              >
+                <PlusIcon className="fill-primary-500 stroke-2" />
+              </button>
+              <span className="text-b1 text-primary-500">주민증 만들기</span>
+            </div>
           </div>
         </div>
-      </div>
-      <div className="mx-layout-sm mt-28pxr">
-        <PlanetCreationButton />
-      </div>
-    </main>
+        <div className="mx-layout-sm mt-28pxr">
+          <PlanetCreationButton />
+        </div>
+      </main>
+      <BottomNavigation />
+    </div>
   );
 };
 

src/app/planet/[communityId]/id-card/[idCardId]/components/IdCardDetail/IdCardDetail.tsx

@@ -1,8 +1,9 @@
+'use client';
 import Link from 'next/link';
 import { Suspense } from 'react';
 
-import { getIdCardDetailServer } from '~/api/domain/idCard.api.server';
-import { getUserInfoServer } from '~/api/domain/user.api.server';
+import { useGetIdCardDetail } from '~/api/domain/idCard.api';
+import { useGetUserInfo } from '~/api/domain/user.api';
 import RetryErrorBoundary from '~/components/ErrorBoundary/RetryErrorBoundary.client';
 import { TopNavigation } from '~/components/TopNavigation';
 import { Intro, KeywordContentCard } from '~/modules/IdCardDetail';
@@ -20,14 +21,16 @@ type IdCardDetailProps = {
   communityId: number;
 };
 
-const IdCardDetailComponent = async ({ idCardId, communityId }: IdCardDetailProps) => {
-  const [idCardDetailsDto, userProfileDto] = await Promise.all([
-    getIdCardDetailServer(idCardId).then(response => response.idCardDetailsDto),
-    getUserInfoServer().then(response => response.userProfileDto),
-  ]);
+const IdCardDetailComponent = ({ idCardId, communityId }: IdCardDetailProps) => {
+  const { data: idCardDetail } = useGetIdCardDetail(idCardId);
+  const { data: userInfo } = useGetUserInfo();
+
+  const idCardDetailsDto = idCardDetail!.idCardDetailsDto;
+  const userId = userInfo!.userProfileDto.userId;
+
   const bgColor = bgColors[idCardDetailsDto.characterType];
 
-  const isMyIdCard = userProfileDto.userId === idCardDetailsDto.userId;
+  const isMyIdCard = userId === idCardDetailsDto.userId;
 
   return (
     <>
@@ -76,7 +79,6 @@ export const IdCardDetail = ({ idCardId, communityId }: IdCardDetailProps) => {
   return (
     <RetryErrorBoundary>
       <Suspense>
-        {/* @ts-expect-error Server Component */}
         <IdCardDetailComponent idCardId={idCardId} communityId={communityId} />
       </Suspense>
     </RetryErrorBoundary>

src/app/planet/[communityId]/id-card/[idCardId]/page.tsx

@@ -1,7 +1,9 @@
-import 'server-only';
-
 import { commentQueryKey } from '~/api/domain/comment/comment.api';
 import { getCommentsServer } from '~/api/domain/comment/comment.api.server';
+import { idCardQueryKey } from '~/api/domain/idCard.api';
+import { getIdCardDetailServer } from '~/api/domain/idCard.api.server';
+import { userQueryKey } from '~/api/domain/user.api';
+import { getUserInfoServer } from '~/api/domain/user.api.server';
 import { CommentCount } from '~/app/planet/[communityId]/id-card/[idCardId]/components/CommentCount';
 import { CommentList } from '~/app/planet/[communityId]/id-card/[idCardId]/components/CommentList';
 import { IdCardDetail } from '~/app/planet/[communityId]/id-card/[idCardId]/components/IdCardDetail';
@@ -16,7 +18,7 @@ type IdCardDetailPageProps = {
   };
 };
 
-const IdCardDetailPage = async ({
+const IdCardDetailPage = ({
   params: { idCardId: idCardIdParam, communityId: communityIdParam },
 }: IdCardDetailPageProps) => {
   const idCardId = Number(idCardIdParam);
@@ -29,9 +31,30 @@ const IdCardDetailPage = async ({
     };
   };
 
+  const getUserInfoQuery = async () => {
+    const { userProfileDto } = await getUserInfoServer();
+    return {
+      userProfileDto,
+    };
+  };
+
+  const getIdCardDetailQuery = async () => {
+    const { idCardDetailsDto } = await getIdCardDetailServer(idCardId);
+
+    return {
+      idCardDetailsDto,
+    };
+  };
+
   return (
     <main>
-      <IdCardDetail idCardId={idCardId} communityId={communityId} />
+      {/* @ts-expect-error Server Component */}
+      <HydrationProvider queryKey={idCardQueryKey.idCards(idCardId)} queryFn={getIdCardDetailQuery}>
+        {/* @ts-expect-error Server Component */}
+        <HydrationProvider queryKey={userQueryKey.userInfo()} queryFn={getUserInfoQuery}>
+          <IdCardDetail idCardId={idCardId} communityId={communityId} />
+        </HydrationProvider>
+      </HydrationProvider>
       <Divider />
       <CommentCount idCardId={idCardId} />
       {/* @ts-expect-error Server Component */}