From 4a28344cbceb244c3ad4c3091c236d8c9003a68e Mon Sep 17 00:00:00 2001
From: YUNHO <kimyouknow@naver.com>
Date: Thu, 6 Jul 2023 15:57:10 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A3=BC=EB=AF=BC=EC=A6=9D=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20boadring=ED=8E=98=EC=9D=B4=EC=A7=80,=20=EC=A3=BC?=
 =?UTF-8?q?=EB=AF=BC=EC=A6=9D=EC=9D=B4=20=EC=97=86=EB=8A=94=20=EA=B2=BD?=
 =?UTF-8?q?=EC=9A=B0=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EC=97=90=20=EC=A0=91=EA=B7=BC=ED=96=88=EC=9D=84=20=EB=95=8C=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20(#260)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 주민증 생성 boadring페이지에 뒤로가기 버튼

* feat: checkIdCardServer

* feat: CreateIdCardButton

* refactor: MyPage

주민증이 없는 경우 마이페이지에 접근했을 때 처리

* refactor: EmptyPlanet에서 PlanetCreationButton 분리
---
 src/api/domain/community.api.server.ts        |  4 +
 .../components/MyPageIdCard/MyPageIdCard.tsx  | 31 +++---
 src/app/my-page/[communityId]/page.tsx        | 15 +--
 src/app/my-page/empty/page.tsx                | 32 +-----
 .../CreateIdCardButton.client.tsx             | 31 ++++++
 .../CreateIdCardButton.stories.tsx            | 17 ++++
 src/modules/CreateIdCardButton/index.ts       |  1 +
 .../Step/BoardingStep.client.tsx              | 98 ++++++++++---------
 8 files changed, 138 insertions(+), 91 deletions(-)
 create mode 100644 src/modules/CreateIdCardButton/CreateIdCardButton.client.tsx
 create mode 100644 src/modules/CreateIdCardButton/CreateIdCardButton.stories.tsx
 create mode 100644 src/modules/CreateIdCardButton/index.ts

diff --git a/src/api/domain/community.api.server.ts b/src/api/domain/community.api.server.ts
index fd3f2e7b..92bfae6b 100644
--- a/src/api/domain/community.api.server.ts
+++ b/src/api/domain/community.api.server.ts
@@ -1,4 +1,5 @@
 import {
+  CheckIdCardResponse,
   CommunityDetailResponse,
   CommunityIdCardsRequest,
   CommunityIdCardsResponse,
@@ -24,3 +25,6 @@ export const getCommunityIdCardsServer = ({
 
 export const getCommunityListServer = (userId: number) =>
   privateApi.get<CommunityListResponse>(`/communities/users/${userId}`);
+
+export const checkIdCardServer = (communityId: number) =>
+  privateApi.get<CheckIdCardResponse>(`/communities/${communityId}/users`);
diff --git a/src/app/my-page/[communityId]/components/MyPageIdCard/MyPageIdCard.tsx b/src/app/my-page/[communityId]/components/MyPageIdCard/MyPageIdCard.tsx
index a87c4382..ee02e76e 100644
--- a/src/app/my-page/[communityId]/components/MyPageIdCard/MyPageIdCard.tsx
+++ b/src/app/my-page/[communityId]/components/MyPageIdCard/MyPageIdCard.tsx
@@ -5,33 +5,40 @@ import { Suspense } from 'react';
 import { getCommunityMyIdCardDetailServer } from '~/api/domain/idCard.api.server';
 import RetryErrorBoundary from '~/components/ErrorBoundary/RetryErrorBoundary.client';
 import { IdCard } from '~/modules/IdCard';
+import { IdCardEditButton } from '~/modules/IdCardEditButton';
 
 type MyPageProps = {
-  id: number;
+  communityId: number;
 };
 
-const MyPageIdCardComponent = async ({ id }: MyPageProps) => {
-  const { idCardDetailsDto } = await getCommunityMyIdCardDetailServer(id);
+const MyPageIdCardComponent = async ({ communityId }: MyPageProps) => {
+  const { idCardDetailsDto } = await getCommunityMyIdCardDetailServer(communityId);
   const { idCardId, nickname, aboutMe, characterType, keywords } = idCardDetailsDto;
   const keywordTitles = keywords.map(keyword => keyword.title);
 
   return (
-    <IdCard
-      idCardId={idCardId}
-      nickname={nickname}
-      aboutMe={aboutMe}
-      characterType={characterType}
-      keywordTitles={keywordTitles}
-    />
+    <div>
+      <div className="mb-16pxr flex w-full justify-between">
+        <h2 className="text-h3 text-grey-800">내 주민증</h2>
+        <IdCardEditButton />
+      </div>
+      <IdCard
+        idCardId={idCardId}
+        nickname={nickname}
+        aboutMe={aboutMe}
+        characterType={characterType}
+        keywordTitles={keywordTitles}
+      />
+    </div>
   );
 };
 
-export const MyPageIdCard = ({ id }: MyPageProps) => {
+export const MyPageIdCard = ({ communityId }: MyPageProps) => {
   return (
     <RetryErrorBoundary>
       <Suspense>
         {/* @ts-expect-error Server Component */}
-        <MyPageIdCardComponent id={id} />
+        <MyPageIdCardComponent communityId={communityId} />
       </Suspense>
     </RetryErrorBoundary>
   );
diff --git a/src/app/my-page/[communityId]/page.tsx b/src/app/my-page/[communityId]/page.tsx
index d453c3c5..cb6067b4 100644
--- a/src/app/my-page/[communityId]/page.tsx
+++ b/src/app/my-page/[communityId]/page.tsx
@@ -1,10 +1,13 @@
+import 'server-only';
+
 import Link from 'next/link';
 
+import { checkIdCardServer } from '~/api/domain/community.api.server';
 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 { CreateIdCardButton } from '~/modules/CreateIdCardButton';
 import { PlanetCreationButton } from '~/modules/PlanetCreationButton';
 import { PlanetSelector } from '~/modules/PlanetSelector';
 
@@ -14,7 +17,9 @@ type MyPageProps = {
   };
 };
 
-const MyPage = ({ params: { communityId } }: MyPageProps) => {
+const MyPage = async ({ params: { communityId } }: MyPageProps) => {
+  const { userMakeIdCard } = await checkIdCardServer(communityId);
+  const isUserMakeIdCard = userMakeIdCard;
   return (
     <div>
       <TopNavigation bottomBorderColor="bg-grey-100">
@@ -29,11 +34,7 @@ const MyPage = ({ params: { communityId } }: MyPageProps) => {
       </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} />
+          {isUserMakeIdCard ? <MyPageIdCard communityId={communityId} /> : <CreateIdCardButton />}
         </div>
         <div className="mx-layout-sm mt-28pxr">
           <PlanetCreationButton />
diff --git a/src/app/my-page/empty/page.tsx b/src/app/my-page/empty/page.tsx
index 367361a9..dc7e30eb 100644
--- a/src/app/my-page/empty/page.tsx
+++ b/src/app/my-page/empty/page.tsx
@@ -1,29 +1,16 @@
-'use client';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 
 import { BottomNavigation } from '~/components/BottomNavigation';
-import { GearFillIcon, PlusIcon } from '~/components/Icon';
+import { GearFillIcon } from '~/components/Icon';
 import { TopNavigation } from '~/components/TopNavigation';
+import { CreateIdCardButton } from '~/modules/CreateIdCardButton';
 import { PlanetCreationButton } from '~/modules/PlanetCreationButton';
-import { PlanetSelector } from '~/modules/PlanetSelector';
-import { useCommunityStore } from '~/stores/community.store';
 
 const EmptyPlanet = () => {
-  const { communityId } = useCommunityStore();
-  const router = useRouter();
-
-  // TODO: communityId가 없는 경우 에러 처리가 필요해요( ex. 홈이나 다른 페이지로 보내기)
-  const onClickCreateIdCardButton = () => {
-    router.replace(`/planet/${communityId}/id-card/create`);
-  };
-
   return (
     <div>
       <TopNavigation bottomBorderColor="bg-grey-100">
-        <TopNavigation.Left>
-          <PlanetSelector />
-        </TopNavigation.Left>
+        <TopNavigation.Left></TopNavigation.Left>
         <TopNavigation.Right>
           <Link href="/my-page/config">
             <GearFillIcon />
@@ -32,18 +19,7 @@ const EmptyPlanet = () => {
       </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>
+          <CreateIdCardButton />
         </div>
         <div className="mx-layout-sm mt-28pxr">
           <PlanetCreationButton />
diff --git a/src/modules/CreateIdCardButton/CreateIdCardButton.client.tsx b/src/modules/CreateIdCardButton/CreateIdCardButton.client.tsx
new file mode 100644
index 00000000..c4f53e09
--- /dev/null
+++ b/src/modules/CreateIdCardButton/CreateIdCardButton.client.tsx
@@ -0,0 +1,31 @@
+'use client';
+import { useRouter } from 'next/navigation';
+
+import { PlusIcon } from '~/components/Icon';
+import { useCommunityStore } from '~/stores/community.store';
+
+export const CreateIdCardButton = () => {
+  const { communityId } = useCommunityStore();
+  const router = useRouter();
+
+  // TODO: communityId가 없는 경우 에러 처리가 필요해요( ex. 홈이나 다른 페이지로 보내기)
+  const onClickCreateIdCardButton = () => {
+    router.replace(`/planet/${communityId}/id-card/create`);
+  };
+  return (
+    <div>
+      <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>
+  );
+};
diff --git a/src/modules/CreateIdCardButton/CreateIdCardButton.stories.tsx b/src/modules/CreateIdCardButton/CreateIdCardButton.stories.tsx
new file mode 100644
index 00000000..7348ab55
--- /dev/null
+++ b/src/modules/CreateIdCardButton/CreateIdCardButton.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CreateIdCardButton } from './index';
+
+const meta: Meta<typeof CreateIdCardButton> = {
+  title: 'modules/CreateIdCardButton',
+  component: CreateIdCardButton,
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CreateIdCardButton>;
+
+export const Primary: Story = {
+  render: () => <CreateIdCardButton />,
+};
diff --git a/src/modules/CreateIdCardButton/index.ts b/src/modules/CreateIdCardButton/index.ts
new file mode 100644
index 00000000..8247c896
--- /dev/null
+++ b/src/modules/CreateIdCardButton/index.ts
@@ -0,0 +1 @@
+export * from './CreateIdCardButton.client';
diff --git a/src/modules/IdCardCreation/Step/BoardingStep.client.tsx b/src/modules/IdCardCreation/Step/BoardingStep.client.tsx
index cf381528..e31b6481 100644
--- a/src/modules/IdCardCreation/Step/BoardingStep.client.tsx
+++ b/src/modules/IdCardCreation/Step/BoardingStep.client.tsx
@@ -5,6 +5,7 @@ import Image from 'next/image';
 import BottomSheet, { useBottomSheet } from '~/components/BottomSheet';
 import { Button, TextButton } from '~/components/Button';
 import { QuestionCircleIcon } from '~/components/Icon';
+import { TopNavigation } from '~/components/TopNavigation';
 
 type BoardingStepProps = {
   onNext: VoidFunction;
@@ -17,56 +18,65 @@ export const BoardingStep = ({ onNext }: BoardingStepProps) => {
   };
 
   return (
-    <div className="px-layout-sm">
-      <h1 className="text-h2 text-grey-900">주민증으로 나를 소개해요!</h1>
-      <p className="mt-12pxr text-b1 text-grey-700">
-        {`주민증에 담기는 내용을 언제든지\n수정할 수 있어요.`}
-      </p>
-      <div className="pb-32pxr">
-        <div className="flex flex-col items-center justify-center">
-          <Image
-            src="/assets/images/id_card_creation.png"
-            alt="explain id card"
-            object-fit="contain"
-            object-position="center"
-            width={375}
-            height={375}
-          />
-          <TextButton className="mt-36pxr flex gap-4pxr" onClick={() => onClickHelperText()}>
-            <QuestionCircleIcon />
-            <span className="text-b3 text-grey-600">어떻게 수정하나요?</span>
-          </TextButton>
-        </div>
-      </div>
-      <Button color="primary" size="large" onClick={onNext} className="mt-45pxr">
-        주민증 만들기
-      </Button>
-      <BottomSheet {...bottomSheetHandlers}>
-        <BottomSheet.Header>주민증 수정</BottomSheet.Header>
-        <BottomSheet.Content>
-          <div className="flex w-full flex-col items-center justify-center">
+    <div>
+      <TopNavigation>
+        <TopNavigation.Left>
+          <TopNavigation.BackButton />
+        </TopNavigation.Left>
+      </TopNavigation>
+      <main className="px-layout-sm">
+        <h1 className="text-h2 text-grey-900">주민증으로 나를 소개해요!</h1>
+        <p className="mt-12pxr text-b1 text-grey-700">
+          {`주민증에 담기는 내용을 언제든지\n수정할 수 있어요.`}
+        </p>
+        <div className="pb-32pxr">
+          <div className="flex flex-col items-center justify-center">
             <Image
-              src="/assets/images/memo.png"
+              src="/assets/images/id_card_creation.png"
               alt="explain id card"
               object-fit="contain"
               object-position="center"
-              width={160}
-              height={160}
+              width={375}
+              height={375}
             />
-            <span className="text-b1 text-grey-700">마이페이지에서 주민증을 수정할 수 있어요.</span>
+            <TextButton className="mt-36pxr flex gap-4pxr" onClick={() => onClickHelperText()}>
+              <QuestionCircleIcon />
+              <span className="text-b3 text-grey-600">어떻게 수정하나요?</span>
+            </TextButton>
           </div>
-        </BottomSheet.Content>
-        <BottomSheet.Footer>
-          <BottomSheet.Footer.Button
-            onClick={bottomSheetHandlers.onClose}
-            size="large"
-            color="primary"
-            className="text-white"
-          >
-            확인했어요.
-          </BottomSheet.Footer.Button>
-        </BottomSheet.Footer>
-      </BottomSheet>
+        </div>
+        <Button color="primary" size="large" onClick={onNext} className="mt-45pxr">
+          주민증 만들기
+        </Button>
+        <BottomSheet {...bottomSheetHandlers}>
+          <BottomSheet.Header>주민증 수정</BottomSheet.Header>
+          <BottomSheet.Content>
+            <div className="flex w-full flex-col items-center justify-center">
+              <Image
+                src="/assets/images/memo.png"
+                alt="explain id card"
+                object-fit="contain"
+                object-position="center"
+                width={160}
+                height={160}
+              />
+              <span className="text-b1 text-grey-700">
+                마이페이지에서 주민증을 수정할 수 있어요.
+              </span>
+            </div>
+          </BottomSheet.Content>
+          <BottomSheet.Footer>
+            <BottomSheet.Footer.Button
+              onClick={bottomSheetHandlers.onClose}
+              size="large"
+              color="primary"
+              className="text-white"
+            >
+              확인했어요.
+            </BottomSheet.Footer.Button>
+          </BottomSheet.Footer>
+        </BottomSheet>
+      </main>
     </div>
   );
 };