Fix/id card creation (#233)

* feat: getCommunityListServer api * feat: getUserInfoServer api * refactor: /my-page layout 파일 정리 * refactor: 행성에 이미 주민증이 생성됐을 때 에러 처리 * refactor: 주민증 생성 페이지에서 주민증 클릭시 라우팅 이동 에러 #231
depromeet · Jul 5, 2023 · 2368e81 · 2368e81
1 parent e556b18
commit 2368e81
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 35 deletions.
diff --git a/src/api/domain/community.api.server.ts b/src/api/domain/community.api.server.ts
@@ -2,6 +2,7 @@ import {
   CommunityDetailResponse,
   CommunityIdCardsRequest,
   CommunityIdCardsResponse,
+  CommunityListResponse,
 } from '~/types/community';
 
 import { privateApi } from '../config/privateApi.server';
@@ -20,3 +21,6 @@ export const getCommunityIdCardsServer = ({
   privateApi.get<CommunityIdCardsResponse>(
     `/communities/${communityId}/idCards?page=${pageParam}&size=10`,
   );
+
+export const getCommunityListServer = (userId: number) =>
+  privateApi.get<CommunityListResponse>(`/communities/users/${userId}`);
diff --git a/src/api/domain/user.api.server.ts b/src/api/domain/user.api.server.ts
@@ -0,0 +1,4 @@
+import { privateApi } from '~/api/config/privateApi.server';
+import { UserInfoResponse } from '~/types/user';
+
+export const getUserInfoServer = () => privateApi.get<UserInfoResponse>(`/user/profile`);
diff --git a/src/app/my-page/[communityId]/layout.tsx b/src/app/my-page/[communityId]/layout.tsx
@@ -0,0 +1,33 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import { PropsWithChildren } from 'react';
+
+import { BottomNavigation } from '~/components/BottomNavigation';
+import { GearFillIcon } from '~/components/Icon';
+import { TopNavigation } from '~/components/TopNavigation';
+import { PlanetSelector } from '~/modules/PlanetSelector';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  const router = useRouter();
+
+  const onClickGearFill = () => {
+    router.push('/my-page/config');
+  };
+  return (
+    <div>
+      <TopNavigation bottomBorderColor="bg-grey-100">
+        <TopNavigation.Left>
+          <PlanetSelector />
+        </TopNavigation.Left>
+        <TopNavigation.Title></TopNavigation.Title>
+        <TopNavigation.Right>
+          <GearFillIcon onClick={onClickGearFill} />
+        </TopNavigation.Right>
+      </TopNavigation>
+      {children}
+      <BottomNavigation />
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/src/app/my-page/config/layout.tsx b/src/app/my-page/config/layout.tsx
@@ -0,0 +1,24 @@
+import { PropsWithChildren } from 'react';
+
+import { BottomNavigation } from '~/components/BottomNavigation';
+import { TopNavigation } from '~/components/TopNavigation';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <div>
+      <TopNavigation>
+        <TopNavigation.Left>
+          <TopNavigation.BackButton />
+        </TopNavigation.Left>
+        <TopNavigation.Title>
+          <h1 className="text-h5 font-semibold text-black">설정</h1>
+        </TopNavigation.Title>
+        <TopNavigation.Right />
+      </TopNavigation>
+      {children}
+      <BottomNavigation />
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/src/app/my-page/config/page.tsx b/src/app/my-page/config/page.tsx
@@ -1,31 +1,22 @@
 import 'server-only';
 
-import { getCommunityList } from '~/api/domain/community.api';
+import { getCommunityListServer } from '~/api/domain/community.api.server';
+import { getUserInfoServer } from '~/api/domain/user.api.server';
 import { Divider } from '~/components/Divider';
-import { TopNavigation } from '~/components/TopNavigation';
 import { PlanetMenu } from '~/modules/PlanetMenu';
 import { UserMenu } from '~/modules/UserMenu';
 
 export const dynamic = 'force-dynamic';
 
 const MyPageConfig = async () => {
-  // TODO: userId 수정 필요
-  const userId = 1;
+  const { userProfileDto } = await getUserInfoServer();
 
-  const { communityListDtos } = await getCommunityList(userId);
+  const { communityListDtos } = await getCommunityListServer(userProfileDto.userId);
 
   const isBelongToCommunity = communityListDtos.length !== 0;
 
   return (
     <main>
-      <TopNavigation>
-        <TopNavigation.Left>
-          <TopNavigation.BackButton />
-        </TopNavigation.Left>
-        <TopNavigation.Title>
-          <h1 className="text-h5 font-semibold text-black">설정</h1>
-        </TopNavigation.Title>
-      </TopNavigation>
       <div className="pt-28pxr">
         {isBelongToCommunity && (
           <>

diff --git a/src/app/my-page/layout.tsx b/src/app/my-page/layout.tsx
@@ -1,29 +1,10 @@
-'use client';
-import { useRouter } from 'next/navigation';
 import { PropsWithChildren } from 'react';
 
 import { BottomNavigation } from '~/components/BottomNavigation';
-import { GearFillIcon } from '~/components/Icon';
-import { TopNavigation } from '~/components/TopNavigation';
-import { PlanetSelector } from '~/modules/PlanetSelector';
 
 const Layout = ({ children }: PropsWithChildren) => {
-  const router = useRouter();
-
-  const onClickGearFill = () => {
-    router.push('/my-page/config');
-  };
   return (
     <div>
-      <TopNavigation bottomBorderColor="bg-grey-100">
-        <TopNavigation.Left>
-          <PlanetSelector />
-        </TopNavigation.Left>
-        <TopNavigation.Title></TopNavigation.Title>
-        <TopNavigation.Right>
-          <GearFillIcon onClick={onClickGearFill} />
-        </TopNavigation.Right>
-      </TopNavigation>
       {children}
       <BottomNavigation />
     </div>

diff --git a/src/modules/IdCard/IdCard.client.tsx b/src/modules/IdCard/IdCard.client.tsx
@@ -36,7 +36,8 @@ export const IdCard = ({
   const pathname = usePathname();
 
   const handleClickIdCard = () => {
-    router.push(`${pathname}/id-card/${idCardId}`);
+    const planetIdPathname = pathname.replace('/id-card/create', '');
+    router.push(`${planetIdPathname}/id-card/${idCardId}`);
   };
 
   return (

diff --git a/src/modules/IdCardCreation/IdCardCreationSteps.tsx b/src/modules/IdCardCreation/IdCardCreationSteps.tsx
@@ -1,17 +1,22 @@
 'use client';
 
 import { yupResolver } from '@hookform/resolvers/yup';
+import { usePathname, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as yup from 'yup';
 
 import { usePostIdCardCreate } from '~/api/domain/idCard.api';
+import { useGetUserInfo } from '~/api/domain/user.api';
 import { IdCardCreationForm } from '~/modules/IdCardCreation/Form';
 import { BoardingStep, CompleteStep } from '~/modules/IdCardCreation/Step';
+import { useToastMessageStore } from '~/stores/toastMessage.store';
 import { IdCardCreationFormModel } from '~/types/idCard';
 
 import { CreationSteps } from './IdCardCreation.type';
 
+const INIT_STEP = 0;
+
 const steps: CreationSteps[] = ['BOARDING', 'PROFILE', 'KEYWORD', 'KEYWORD_CONTENT', 'COMPLETE'];
 
 const schema = yup.object({
@@ -27,10 +32,15 @@ type IdCardCreationStepsProps = {
 };
 
 export const IdCardCreationSteps = ({ communityId }: IdCardCreationStepsProps) => {
+  const { errorToast } = useToastMessageStore();
+  const { data } = useGetUserInfo();
+  const profileImageUrl = data?.userProfileDto.profileImageUrl;
+  const router = useRouter();
+  const pathname = usePathname();
   const methods = useForm<IdCardCreationFormModel>({
     defaultValues: {
       communityId,
-      profileImageUrl: '',
+      profileImageUrl,
       nickname: '',
       aboutMe: '',
       keywords: [],
@@ -40,14 +50,21 @@ export const IdCardCreationSteps = ({ communityId }: IdCardCreationStepsProps) =
   });
   const [userId, setUserId] = useState<number>();
 
-  const [stepOrder, setStepOrder] = useState<number>(0);
+  const [stepOrder, setStepOrder] = useState<number>(INIT_STEP);
   const onNext = () => setStepOrder(stepOrder + 1);
   const onPrev = () => setStepOrder(stepOrder - 1);
 
   const { mutateAsync } = usePostIdCardCreate({
     onSuccess: data => {
       setUserId(data.id);
     },
+    onError: error => {
+      errorToast(error.message);
+      setTimeout(() => {
+        const planetIdPathname = pathname.replace('/id-card/create', '');
+        router.push(`${planetIdPathname}`);
+      }, 2000);
+    },
   });
 
   const onSubmit = () => {