✨ 참석/참석 취소 구현

boostcampwm2023 · Nov 23, 2023 · d17b5fa · d17b5fa
1 parent 4d8f530
commit d17b5fa
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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: '[email protected]',
+    });
 
   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
@@ -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 });
   }),
 ];