From 2590ba5c0274462c81cac6396bb0d1a961ea706e Mon Sep 17 00:00:00 2001
From: hyehyeon-moon <hyehyeon.moon@linecorp.com>
Date: Thu, 6 Jul 2023 01:48:18 +0900
Subject: [PATCH] Feat: Add title of community and characterType of user on
 complete step of creating id card

---
 src/api/domain/idCard.api.ts                  | 18 +++++++++-
 .../IdCardCreation/IdCardCreationSteps.tsx    |  6 ++--
 .../Step/CompleteStep.client.tsx              | 34 +++++++++++--------
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/api/domain/idCard.api.ts b/src/api/domain/idCard.api.ts
index 0adcffa7..4eeea237 100644
--- a/src/api/domain/idCard.api.ts
+++ b/src/api/domain/idCard.api.ts
@@ -1,4 +1,10 @@
-import { useMutation, UseMutationOptions, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+  useQueryClient,
+  UseQueryOptions,
+} from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import privateApi from '~/api/config/privateApi';
@@ -18,6 +24,16 @@ export const idCardQueryKey = {
 export const getIdCardDetail = (idCardId: number) =>
   privateApi.get<IdCardDetailResponse>(`/id-cards/${idCardId}`);
 
+export const useGetIdCardDetail = (
+  idCardId: number,
+  options?: UseQueryOptions<IdCardDetailResponse>,
+) =>
+  useQuery<IdCardDetailResponse>(
+    idCardQueryKey.idCards(idCardId),
+    () => getIdCardDetail(idCardId),
+    options,
+  );
+
 export const getCommunityMyIdCardDetail = (communityId: number) =>
   privateApi.get<CommunityMyIdCardDetailResponse>(`/communities/${communityId}/users/idCards`);
 
diff --git a/src/modules/IdCardCreation/IdCardCreationSteps.tsx b/src/modules/IdCardCreation/IdCardCreationSteps.tsx
index 8851a8b6..5fff56e4 100644
--- a/src/modules/IdCardCreation/IdCardCreationSteps.tsx
+++ b/src/modules/IdCardCreation/IdCardCreationSteps.tsx
@@ -48,7 +48,7 @@ export const IdCardCreationSteps = ({ communityId }: IdCardCreationStepsProps) =
     mode: 'onChange',
     resolver: yupResolver(schema),
   });
-  const [userId, setUserId] = useState<number>();
+  const [idCardId, setIdCardId] = useState<number>();
 
   const [stepOrder, setStepOrder] = useState<number>(INIT_STEP);
   const onNext = () => setStepOrder(stepOrder + 1);
@@ -56,7 +56,7 @@ export const IdCardCreationSteps = ({ communityId }: IdCardCreationStepsProps) =
 
   const { mutateAsync } = usePostIdCardCreate({
     onSuccess: data => {
-      setUserId(data.id);
+      setIdCardId(data.id);
     },
     onError: error => {
       errorToast(error.message);
@@ -88,7 +88,7 @@ export const IdCardCreationSteps = ({ communityId }: IdCardCreationStepsProps) =
             onSubmit={onSubmit}
           />
         )}
-        {steps[stepOrder] === 'COMPLETE' && userId && <CompleteStep userId={userId} />}
+        {steps[stepOrder] === 'COMPLETE' && idCardId && <CompleteStep idCardId={idCardId} />}
       </div>
     </FormProvider>
   );
diff --git a/src/modules/IdCardCreation/Step/CompleteStep.client.tsx b/src/modules/IdCardCreation/Step/CompleteStep.client.tsx
index 82d9c71f..09d2e030 100644
--- a/src/modules/IdCardCreation/Step/CompleteStep.client.tsx
+++ b/src/modules/IdCardCreation/Step/CompleteStep.client.tsx
@@ -4,42 +4,46 @@ import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
 import { useFormContext } from 'react-hook-form';
 
+import { useGetCommunityDetail } from '~/api/domain/community.api';
+import { useGetIdCardDetail } from '~/api/domain/idCard.api';
 import { Button } from '~/components/Button';
 import { IdCard } from '~/modules/IdCard/IdCard.client';
 import { IdCardCreationFormModel } from '~/types/idCard';
 
-const title = 'planet이름';
-
 type CompleteStepProps = {
-  userId: number;
+  idCardId: number;
 };
 
-export const CompleteStep = ({ userId }: CompleteStepProps) => {
+export const CompleteStep = ({ idCardId }: CompleteStepProps) => {
   const { getValues } = useFormContext<IdCardCreationFormModel>();
   const values = getValues();
   const { nickname, aboutMe, keywords } = values;
   const keywordTitles = keywords.map(keyword => keyword.title);
   const router = useRouter();
   const { communityId } = useParams();
+  const { data: idCardDetail } = useGetIdCardDetail(idCardId);
+  const { data: communityDetail } = useGetCommunityDetail(Number(communityId));
 
   const onMoveToCommunity = () => {
     router.push(`/planet/${communityId}`);
   };
 
   return (
-    // TODO: 지금은 커뮤니티 정보가 없는데 나중에 커뮤니티 타이틀 추가
     <div className="flex min-h-[calc(100vh-50px)] flex-col px-layout-sm ">
-      <h2 className="text-h1 text-grey-900">{`짜잔!${title} \n주민증이 발급되었어요!`}</h2>
+      <h2 className="text-h1 text-grey-900">{`짜잔!${
+        communityDetail?.communityDetailsDto.title || ''
+      } \n주민증이 발급되었어요!`}</h2>
       <div className="mt-24pxr flex flex-1 flex-col">
-        <IdCard
-          idCardId={userId}
-          aboutMe={aboutMe}
-          keywordTitles={keywordTitles}
-          nickname={nickname}
-          // TODO: 로그인 할때 캐릭터 타입 정보 넣어서 가져오기
-          characterType="TOBBY"
-        />
-        <Link href={`/planet/${communityId}/id-card/${userId}`}>
+        {idCardDetail && (
+          <IdCard
+            idCardId={idCardId}
+            aboutMe={aboutMe}
+            keywordTitles={keywordTitles}
+            nickname={nickname}
+            characterType={idCardDetail.idCardDetailsDto.characterType}
+          />
+        )}
+        <Link href={`/planet/${communityId}/id-card/${idCardId}`}>
           <p className="my-52px flex w-full flex-1 items-center justify-center text-center text-b1 text-primary-500">
             주민증을 눌러보세요!
           </p>