From ecfb38d0cd9cd9abbef08f0d874c067b540250b9 Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Thu, 23 Nov 2023 22:58:01 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=EC=B0=B8=EC=84=9D/=EC=B0=B8?=
 =?UTF-8?q?=EC=84=9D=20=EC=B7=A8=EC=86=8C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MogacoDetail/DetailHeader.tsx  |  3 +
 .../MogacoDetail/DetailHeaderButtons.tsx      | 78 ++++++++++---------
 .../src/components/MogacoDetail/index.tsx     | 12 ++-
 app/frontend/src/mocks/mogaco.ts              | 10 ++-
 4 files changed, 60 insertions(+), 43 deletions(-)

diff --git a/app/frontend/src/components/MogacoDetail/DetailHeader.tsx b/app/frontend/src/components/MogacoDetail/DetailHeader.tsx
index a0d08afab..255173943 100644
--- a/app/frontend/src/components/MogacoDetail/DetailHeader.tsx
+++ b/app/frontend/src/components/MogacoDetail/DetailHeader.tsx
@@ -9,6 +9,7 @@ import { DetailHeaderButtons } from './DetailHeaderButtons';
 import * as styles from './index.css';
 
 type DetailHeaderProps = {
+  id: string;
   memberId: string;
   title: string;
   status: '모집 중' | '마감' | '종료';
@@ -17,6 +18,7 @@ type DetailHeaderProps = {
 };
 
 export function DetailHeader({
+  id,
   memberId,
   title,
   status,
@@ -44,6 +46,7 @@ export function DetailHeader({
         <div className={sansBold24}>{title}</div>
         <div className={styles.buttons}>
           <DetailHeaderButtons
+            id={id}
             status={status}
             userHosted={userHosted}
             userParticipated={userParticipated}
diff --git a/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx b/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx
index 344be64d9..52880c827 100644
--- a/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx
+++ b/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx
@@ -1,58 +1,60 @@
 import { Button } from '@/components';
-
-const buttonComponents = {
-  participating: (
-    <Button theme="primary" shape="fill" size="large">
-      참석하기
-    </Button>
-  ),
-  participated: (
-    <>
-      <Button theme="primary" shape="fill" size="large">
-        채팅
-      </Button>
-      <Button theme="danger" shape="fill" size="large">
-        참석 취소
-      </Button>
-    </>
-  ),
-  hosted: (
-    <>
-      <Button theme="primary" shape="line" size="large">
-        수정
-      </Button>
-      <Button theme="danger" shape="line" size="large">
-        삭제
-      </Button>
-    </>
-  ),
-  closed: (
-    <Button theme="primary" shape="fill" size="large" disabled>
-      마감
-    </Button>
-  ),
-};
+import { mogaco } from '@/services';
 
 type DetailHeaderButtonsProps = {
+  id: string;
   userHosted: boolean;
   userParticipated: boolean;
   status: '모집 중' | '마감' | '종료';
 };
 
 export function DetailHeaderButtons({
+  id,
   userHosted,
   userParticipated,
   status,
 }: DetailHeaderButtonsProps) {
+  const onClickJoin = async () => {
+    await mogaco.join(id);
+  };
+
+  const onClickQuit = async () => {
+    await mogaco.quit(id);
+  };
+
   if (userHosted) {
-    return buttonComponents.hosted;
+    return (
+      <>
+        <Button theme="primary" shape="line" size="large">
+          수정
+        </Button>
+        <Button theme="danger" shape="line" size="large">
+          삭제
+        </Button>
+      </>
+    );
   }
 
   if (status === '모집 중') {
-    return userParticipated
-      ? buttonComponents.participated
-      : buttonComponents.participating;
+    return userParticipated ? (
+      <>
+        <Button theme="primary" shape="fill" size="large">
+          채팅
+        </Button>
+        <Button theme="danger" shape="fill" size="large" onClick={onClickQuit}>
+          참석 취소
+        </Button>
+      </>
+    ) : (
+      <Button theme="primary" shape="fill" size="large" onClick={onClickJoin}>
+        참석하기
+      </Button>
+    );
   }
 
-  return buttonComponents.closed;
+  return (
+    <Button theme="primary" shape="fill" size="large" disabled>
+      마감
+    </Button>
+  );
 }
diff --git a/app/frontend/src/components/MogacoDetail/index.tsx b/app/frontend/src/components/MogacoDetail/index.tsx
index 998bff987..0e37930ba 100644
--- a/app/frontend/src/components/MogacoDetail/index.tsx
+++ b/app/frontend/src/components/MogacoDetail/index.tsx
@@ -24,7 +24,16 @@ export function MogacoDetailPage({
   const [participantList, setParticipantList] = useState<Participant[] | null>(
     null,
   );
-  const [user] = useUserAtom();
+  const [user, setUser] = useUserAtom();
+
+  if (!user)
+    setUser({
+      providerId: '1',
+      nickname: '지승',
+      profilePicture:
+        'https://avatars.githubusercontent.com/u/50646827?s=40&v=4',
+      email: 'js43og@gamil.com',
+    });
 
   const userHosted = user?.providerId === memberId;
   const userParticipated = participantList
@@ -50,6 +59,7 @@ export function MogacoDetailPage({
     <div className={styles.wrapper}>
       <div className={styles.container}>
         <DetailHeader
+          id={id}
           title={title}
           status={status}
           memberId={memberId}
diff --git a/app/frontend/src/mocks/mogaco.ts b/app/frontend/src/mocks/mogaco.ts
index fb4815f22..e8542b7a7 100644
--- a/app/frontend/src/mocks/mogaco.ts
+++ b/app/frontend/src/mocks/mogaco.ts
@@ -26,7 +26,7 @@ const mogacoList = [
     date: '2023-11-22T12:00:00.000Z',
     maxHumanCount: 5,
     address: '주소주소주소주소주소',
-    status: '마감' as const,
+    status: '모집 중' as const,
   },
   {
     id: '3',
@@ -37,7 +37,7 @@ const mogacoList = [
     date: '2023-10-11T12:00:00.000Z',
     maxHumanCount: 5,
     address: '주소주소주소주소주소',
-    status: '종료' as const,
+    status: '모집 중' as const,
   },
   {
     id: '4',
@@ -67,15 +67,17 @@ export const mogacoAPIHandlers = [
   http.get('/mogaco/:id/participants', ({ params: { id } }) =>
     HttpResponse.json<Participant[]>(participantsList[Number(id) - 1]),
   ),
-  http.post('mogaco/:id/join', async ({ params: { id } }) => {
+  http.post('/mogaco/:id/join', ({ params: { id } }) => {
     participantsList[Number(id) - 1] = [
       ...participantsList[Number(id) - 1],
       userList[0],
     ];
+    return HttpResponse.json(null, { status: 200 });
   }),
-  http.delete('mogaco/:id/join', async ({ params: { id } }) => {
+  http.delete('/mogaco/:id/join', ({ params: { id } }) => {
     participantsList[Number(id) - 1] = participantsList[Number(id) - 1].filter(
       (participant) => participant.id !== userList[0].id,
     );
+    return HttpResponse.json(null, { status: 200 });
   }),
 ];