From 56242d37885c46fbf145af97a5f7fda1398a24d2 Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Fri, 24 Nov 2023 00:46:34 +0900
Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=8E=A8=20=EB=AA=A8=EA=B0=81=EC=BD=94?=
 =?UTF-8?q?=20=EC=B0=B8=EC=84=9D/=EC=B0=B8=EC=84=9D=20=EC=B7=A8=EC=86=8C?=
 =?UTF-8?q?=20=EA=B4=80=EB=A0=A8=20query=20hook=20=EB=B0=8F=20query=20key?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/mocks/mogaco.ts         |  2 +-
 app/frontend/src/queries/hooks/mogaco.ts | 29 ++++++++++++++++++++++--
 app/frontend/src/queries/mogaco.ts       |  3 ++-
 app/frontend/src/services/mogaco.ts      |  8 +++++--
 4 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/app/frontend/src/mocks/mogaco.ts b/app/frontend/src/mocks/mogaco.ts
index 8f43e91de..34b9ef70e 100644
--- a/app/frontend/src/mocks/mogaco.ts
+++ b/app/frontend/src/mocks/mogaco.ts
@@ -61,6 +61,7 @@ const participantsList = [
 
 export const mogacoAPIHandlers = [
   http.get('/mogaco', () => HttpResponse.json<Mogaco[]>(mogacoList)),
+  http.delete('/mogaco/:id', () => HttpResponse.json(null, { status: 200 })),
   http.get('/mogaco/:id', ({ params: { id } }) =>
     HttpResponse.json<Mogaco>(mogacoList[Number(id) - 1]),
   ),
@@ -81,5 +82,4 @@ export const mogacoAPIHandlers = [
     );
     return HttpResponse.json(null, { status: 200 });
   }),
-  http.delete('/mogaco/:id', () => HttpResponse.json(null, { status: 200 })),
 ];
diff --git a/app/frontend/src/queries/hooks/mogaco.ts b/app/frontend/src/queries/hooks/mogaco.ts
index 2957aa4b1..0967f8f31 100644
--- a/app/frontend/src/queries/hooks/mogaco.ts
+++ b/app/frontend/src/queries/hooks/mogaco.ts
@@ -1,9 +1,8 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
+import { queryKeys } from '@/queries';
 import { mogaco } from '@/services';
 
-import { queryKeys } from '..';
-
 export const useDeleteMogacoQuery = () => {
   const queryClient = useQueryClient();
 
@@ -16,3 +15,29 @@ export const useDeleteMogacoQuery = () => {
     },
   });
 };
+
+export const useJoinMogacoQuery = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (postId: string) => mogaco.join(postId),
+    onSuccess: (data, postId) => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.mogaco.participants(postId).queryKey,
+      });
+    },
+  });
+};
+
+export const useQuitMogacoQuery = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (postId: string) => mogaco.delete(postId),
+    onSuccess: (data, postId) => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.mogaco.participants(postId).queryKey,
+      });
+    },
+  });
+};
diff --git a/app/frontend/src/queries/mogaco.ts b/app/frontend/src/queries/mogaco.ts
index 5ed5141ed..61399d162 100644
--- a/app/frontend/src/queries/mogaco.ts
+++ b/app/frontend/src/queries/mogaco.ts
@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
+ 
 import { createQueryKeys } from '@lukemorales/query-key-factory';
 
 import { mogaco } from '@/services';
@@ -9,4 +9,5 @@ export const mogacoKeys = createQueryKeys('mogaco', {
     queryFn: () => mogaco.list(),
   }),
   detail: (id: string) => [id],
+  participants: (id: string) => [id],
 });
diff --git a/app/frontend/src/services/mogaco.ts b/app/frontend/src/services/mogaco.ts
index 7499ad040..c04264a1e 100644
--- a/app/frontend/src/services/mogaco.ts
+++ b/app/frontend/src/services/mogaco.ts
@@ -26,10 +26,14 @@ export const mogaco = {
     return data;
   },
   join: async (id: string) => {
-    await morakAPI.post(`${mogaco.endPoint.index}/${id}/join`);
+    const response = await morakAPI.post(`${mogaco.endPoint.index}/${id}/join`);
+    return response;
   },
   quit: async (id: string) => {
-    await morakAPI.delete(`${mogaco.endPoint.index}/${id}/join`);
+    const response = await morakAPI.delete(
+      `${mogaco.endPoint.index}/${id}/join`,
+    );
+    return response;
   },
   delete: async (id: string) => {
     const response = await morakAPI.delete(`${mogaco.endPoint.index}/${id}`);

From 21d5f64d0d30b7954d79c8be56bed73a2710595c Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Fri, 24 Nov 2023 01:15:53 +0900
Subject: [PATCH 2/9] =?UTF-8?q?=E2=9C=A8=20detail,=20participants=20?=
 =?UTF-8?q?=EC=BF=BC=EB=A6=AC=20=ED=82=A4=20=EC=88=98=EC=A0=95=20=EB=B0=8F?=
 =?UTF-8?q?=20member=20=EC=BF=BC=EB=A6=AC=20=ED=82=A4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/queries/index.ts  |  5 +++--
 app/frontend/src/queries/member.ts |  7 +++++++
 app/frontend/src/queries/mogaco.ts | 11 ++++++++---
 3 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 app/frontend/src/queries/member.ts

diff --git a/app/frontend/src/queries/index.ts b/app/frontend/src/queries/index.ts
index 519c343e3..aa4001cb6 100644
--- a/app/frontend/src/queries/index.ts
+++ b/app/frontend/src/queries/index.ts
@@ -1,6 +1,7 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
+ 
 import { mergeQueryKeys } from '@lukemorales/query-key-factory';
 
+import { memberKeys } from './member';
 import { mogacoKeys } from './mogaco';
 
-export const queryKeys = mergeQueryKeys(mogacoKeys);
+export const queryKeys = mergeQueryKeys(mogacoKeys, memberKeys);
diff --git a/app/frontend/src/queries/member.ts b/app/frontend/src/queries/member.ts
new file mode 100644
index 000000000..a0cae2f09
--- /dev/null
+++ b/app/frontend/src/queries/member.ts
@@ -0,0 +1,7 @@
+import { createQueryKeys } from '@lukemorales/query-key-factory';
+
+import { member } from '@/services';
+
+export const memberKeys = createQueryKeys('member', {
+  me: () => ({ queryKey: ['me'], queryFn: () => member.myInfo() }),
+});
diff --git a/app/frontend/src/queries/mogaco.ts b/app/frontend/src/queries/mogaco.ts
index 61399d162..56da1104d 100644
--- a/app/frontend/src/queries/mogaco.ts
+++ b/app/frontend/src/queries/mogaco.ts
@@ -1,4 +1,3 @@
- 
 import { createQueryKeys } from '@lukemorales/query-key-factory';
 
 import { mogaco } from '@/services';
@@ -8,6 +7,12 @@ export const mogacoKeys = createQueryKeys('mogaco', {
     queryKey: [{ filters }],
     queryFn: () => mogaco.list(),
   }),
-  detail: (id: string) => [id],
-  participants: (id: string) => [id],
+  detail: (id: string) => ({
+    queryKey: [id],
+    queryFn: () => mogaco.detail(id),
+  }),
+  participants: (id: string) => ({
+    queryKey: [id],
+    queryFn: () => mogaco.participants(id),
+  }),
 });

From a335df2ca5bd4b52e4b5c0f70ef14953f3892b00 Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Fri, 24 Nov 2023 01:26:49 +0900
Subject: [PATCH 3/9] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=20UserInfo=20->=20Member=EB=A1=9C=20=EC=9D=B4=EB=A6=84=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MogacoDetail/DetailHeader.tsx         | 6 +++---
 app/frontend/src/services/member.ts                      | 8 ++++----
 app/frontend/src/stores/user.ts                          | 4 ++--
 app/frontend/src/types/index.ts                          | 2 +-
 app/frontend/src/types/{user.ts => member.ts}            | 2 +-
 app/frontend/src/types/mogaco.ts                         | 9 +++------
 6 files changed, 14 insertions(+), 17 deletions(-)
 rename app/frontend/src/types/{user.ts => member.ts} (77%)

diff --git a/app/frontend/src/components/MogacoDetail/DetailHeader.tsx b/app/frontend/src/components/MogacoDetail/DetailHeader.tsx
index 255173943..34487ef33 100644
--- a/app/frontend/src/components/MogacoDetail/DetailHeader.tsx
+++ b/app/frontend/src/components/MogacoDetail/DetailHeader.tsx
@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import { UserChip } from '@/components';
 import { member } from '@/services';
 import { sansBold24 } from '@/styles/font.css';
-import { UserInfo } from '@/types';
+import { Member } from '@/types';
 
 import { DetailHeaderButtons } from './DetailHeaderButtons';
 import * as styles from './index.css';
@@ -25,7 +25,7 @@ export function DetailHeader({
   userHosted,
   userParticipated,
 }: DetailHeaderProps) {
-  const [hostUser, setHostUser] = useState<UserInfo | null>(null);
+  const [hostUser, setHostUser] = useState<Member | null>(null);
 
   useEffect(() => {
     if (hostUser) {
@@ -33,7 +33,7 @@ export function DetailHeader({
     }
 
     const getUser = async () => {
-      const data = await member.userInfoById(memberId);
+      const data = await member.infoById(memberId);
       setHostUser(data);
     };
 
diff --git a/app/frontend/src/services/member.ts b/app/frontend/src/services/member.ts
index 66c4da2dc..0174aaa1b 100644
--- a/app/frontend/src/services/member.ts
+++ b/app/frontend/src/services/member.ts
@@ -1,4 +1,4 @@
-import { UserInfo } from '@/types';
+import { Member } from '@/types';
 
 import { morakAPI } from './morakAPI';
 
@@ -9,12 +9,12 @@ export const member = {
   },
 
   myInfo: async () => {
-    const { data } = await morakAPI.get<UserInfo>(member.endPoint.me);
+    const { data } = await morakAPI.get<Member>(member.endPoint.me);
     return data;
   },
 
-  userInfoById: async (id: string) => {
-    const { data } = await morakAPI.get<UserInfo>(
+  infoById: async (id: string) => {
+    const { data } = await morakAPI.get<Member>(
       `${member.endPoint.default}/${id}`,
     );
     return data;
diff --git a/app/frontend/src/stores/user.ts b/app/frontend/src/stores/user.ts
index 8e1cfec8d..ef7829dd3 100644
--- a/app/frontend/src/stores/user.ts
+++ b/app/frontend/src/stores/user.ts
@@ -1,6 +1,6 @@
 import { atom, useAtom } from 'jotai';
 
-import { UserInfo } from '@/types';
+import { Member } from '@/types';
 
-const userStore = atom<UserInfo | null>(null);
+const userStore = atom<Member | null>(null);
 export const useUserAtom = () => useAtom(userStore);
diff --git a/app/frontend/src/types/index.ts b/app/frontend/src/types/index.ts
index 3c2485f26..d345d022b 100644
--- a/app/frontend/src/types/index.ts
+++ b/app/frontend/src/types/index.ts
@@ -1,3 +1,3 @@
 export * from './chatting';
+export * from './member';
 export * from './mogaco';
-export * from './user';
diff --git a/app/frontend/src/types/user.ts b/app/frontend/src/types/member.ts
similarity index 77%
rename from app/frontend/src/types/user.ts
rename to app/frontend/src/types/member.ts
index 0ef668185..9cc212a1b 100644
--- a/app/frontend/src/types/user.ts
+++ b/app/frontend/src/types/member.ts
@@ -1,4 +1,4 @@
-export type UserInfo = {
+export type Member = {
   providerId: string;
   email: string;
   nickname: string;
diff --git a/app/frontend/src/types/mogaco.ts b/app/frontend/src/types/mogaco.ts
index a263f1e10..f5273e0c5 100644
--- a/app/frontend/src/types/mogaco.ts
+++ b/app/frontend/src/types/mogaco.ts
@@ -1,3 +1,5 @@
+import { Member } from './member';
+
 interface MogacoTypes {
   id: string;
   groupId: number;
@@ -23,7 +25,7 @@ export type Mogaco = Pick<
   | 'maxHumanCount'
   | 'address'
   | 'status'
->;
+> & { member: Member };
 
 export type MogacoPostForm = Pick<
   MogacoTypes,
@@ -47,8 +49,3 @@ export type MogacoPostRequest = Pick<
   | 'address'
   | 'status'
 >;
-
-export type Participant = Pick<
-  MogacoTypes,
-  'id' | 'nickname' | 'profilePicture'
->;

From cb91c077b923b5c02085ca3647f9a4de873136b7 Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Fri, 24 Nov 2023 02:19:53 +0900
Subject: [PATCH 4/9] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20props=20=EC=9E=AC=EC=A0=95=EC=9D=98=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=BF=BC=EB=A6=AC=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 기존 Participant 타입을 Member 타입으로 대체
---
 .../MogacoDetail/DetailContents.tsx           |  7 --
 .../components/MogacoDetail/DetailHeader.tsx  | 54 ++++--------
 .../MogacoDetail/DetailHeaderButtons.tsx      | 45 +++++-----
 .../components/MogacoDetail/DetailInfo.tsx    | 24 ++----
 .../src/components/MogacoDetail/index.tsx     | 83 ++++++-------------
 app/frontend/src/pages/MogacoDetail/index.tsx | 50 +----------
 app/frontend/src/services/mogaco.ts           |  4 +-
 app/frontend/src/types/mogaco.ts              |  1 -
 8 files changed, 78 insertions(+), 190 deletions(-)
 delete mode 100644 app/frontend/src/components/MogacoDetail/DetailContents.tsx

diff --git a/app/frontend/src/components/MogacoDetail/DetailContents.tsx b/app/frontend/src/components/MogacoDetail/DetailContents.tsx
deleted file mode 100644
index 5e2a06ef3..000000000
--- a/app/frontend/src/components/MogacoDetail/DetailContents.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-type DetailContentsProps = {
-  contents: string;
-};
-
-export function DetailContents({ contents }: DetailContentsProps) {
-  return <div>{contents}</div>;
-}
diff --git a/app/frontend/src/components/MogacoDetail/DetailHeader.tsx b/app/frontend/src/components/MogacoDetail/DetailHeader.tsx
index 34487ef33..ff1f83912 100644
--- a/app/frontend/src/components/MogacoDetail/DetailHeader.tsx
+++ b/app/frontend/src/components/MogacoDetail/DetailHeader.tsx
@@ -1,65 +1,41 @@
-import { useState, useEffect } from 'react';
-
 import { UserChip } from '@/components';
-import { member } from '@/services';
 import { sansBold24 } from '@/styles/font.css';
-import { Member } from '@/types';
+import { Member, Mogaco } from '@/types';
 
 import { DetailHeaderButtons } from './DetailHeaderButtons';
 import * as styles from './index.css';
 
 type DetailHeaderProps = {
   id: string;
-  memberId: string;
-  title: string;
-  status: '모집 중' | '마감' | '종료';
-  userHosted: boolean;
-  userParticipated: boolean;
+  currentUser: Member;
+  mogacoData: Mogaco;
+  participantList: Member[];
 };
 
 export function DetailHeader({
   id,
-  memberId,
-  title,
-  status,
-  userHosted,
-  userParticipated,
+  currentUser,
+  mogacoData,
+  participantList,
 }: DetailHeaderProps) {
-  const [hostUser, setHostUser] = useState<Member | null>(null);
-
-  useEffect(() => {
-    if (hostUser) {
-      return;
-    }
-
-    const getUser = async () => {
-      const data = await member.infoById(memberId);
-      setHostUser(data);
-    };
-
-    getUser();
-  }, [hostUser, memberId]);
-
   return (
     <div className={styles.header}>
       <div className={styles.title}>
-        <div className={sansBold24}>{title}</div>
+        <div className={sansBold24}>{mogacoData.title}</div>
         <div className={styles.buttons}>
           <DetailHeaderButtons
             id={id}
-            status={status}
-            userHosted={userHosted}
-            userParticipated={userParticipated}
+            currentUser={currentUser}
+            mogacoData={mogacoData}
+            participantList={participantList}
           />
         </div>
       </div>
       <div className={styles.hostUser}>
-        {hostUser && (
-          <UserChip
-            username={hostUser.nickname}
-            profileSrc={hostUser.profilePicture}
-          />
-        )}
+        <UserChip
+          username={mogacoData.member.nickname}
+          profileSrc={mogacoData.member.profilePicture}
+        />
         <span>부스트캠프 웹·모바일 8기</span>
       </div>
     </div>
diff --git a/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx b/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx
index 74cba2488..bb9a580fd 100644
--- a/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx
+++ b/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx
@@ -1,32 +1,39 @@
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { Button } from '@/components';
-import { useDeleteMogacoQuery } from '@/queries/hooks';
-import { mogaco } from '@/services';
+import {
+  useDeleteMogacoQuery,
+  useJoinMogacoQuery,
+  useQuitMogacoQuery,
+} from '@/queries/hooks';
+import { Member, Mogaco } from '@/types';
 
 type DetailHeaderButtonsProps = {
   id: string;
-  userHosted: boolean;
-  userParticipated: boolean;
-  status: '모집 중' | '마감' | '종료';
+  currentUser: Member;
+  mogacoData: Mogaco;
+  participantList: Member[];
 };
 
 export function DetailHeaderButtons({
   id,
-  userHosted,
-  userParticipated,
-  status,
+  currentUser,
+  mogacoData,
+  participantList,
 }: DetailHeaderButtonsProps) {
   const navigate = useNavigate();
-  const { id: postId } = useParams();
-  const { mutateAsync } = useDeleteMogacoQuery();
 
-  const handleDelete = async () => {
-    if (!postId) {
-      return;
-    }
+  const deleteMogaco = useDeleteMogacoQuery();
+  const joinMogaco = useJoinMogacoQuery();
+  const quitMogaco = useQuitMogacoQuery();
 
-    const res = await mutateAsync(id);
+  const userHosted = mogacoData.member.providerId === currentUser.providerId;
+  const userParticipated = participantList.find(
+    (participant) => participant.providerId === currentUser.providerId,
+  );
+
+  const handleDelete = async () => {
+    const res = await deleteMogaco.mutateAsync(id!);
     if (res.status === 200) {
       navigate('/mogaco');
     }
@@ -41,11 +48,11 @@ export function DetailHeaderButtons({
   };
 
   const onClickJoin = async () => {
-    await mogaco.join(id);
+    await joinMogaco.mutateAsync(id!);
   };
 
   const onClickQuit = async () => {
-    await mogaco.quit(id);
+    await quitMogaco.mutateAsync(id!);
   };
 
   if (userHosted) {
@@ -66,7 +73,7 @@ export function DetailHeaderButtons({
     );
   }
 
-  if (status === '모집 중') {
+  if (mogacoData.status === '모집 중') {
     return userParticipated ? (
       <>
         <Button theme="primary" shape="fill" size="large">
diff --git a/app/frontend/src/components/MogacoDetail/DetailInfo.tsx b/app/frontend/src/components/MogacoDetail/DetailInfo.tsx
index bff77c097..ecdb9b709 100644
--- a/app/frontend/src/components/MogacoDetail/DetailInfo.tsx
+++ b/app/frontend/src/components/MogacoDetail/DetailInfo.tsx
@@ -9,23 +9,16 @@ import { ReactComponent as People } from '@/assets/icons/people_large.svg';
 import { UserChip } from '@/components';
 import { MAP_SAMPLE_IMAGE } from '@/constants';
 import { vars } from '@/styles';
-import { Participant } from '@/types';
+import { Member, Mogaco } from '@/types';
 
 import * as styles from './index.css';
 
 type DetailInfoProps = {
-  participantList: Participant[] | null;
-  maxHumanCount: number;
-  date: string;
-  address: string;
+  mogacoData: Mogaco;
+  participantList: Member[];
 };
 
-export function DetailInfo({
-  participantList,
-  maxHumanCount,
-  date,
-  address,
-}: DetailInfoProps) {
+export function DetailInfo({ mogacoData, participantList }: DetailInfoProps) {
   const [participantsShown, setParticipantsShown] = useState(false);
 
   const toggleParticipantsShown = () =>
@@ -36,7 +29,8 @@ export function DetailInfo({
       <div className={styles.infoItem}>
         <People fill={vars.color.grayscale200} />
         <span>
-          <span>{participantList?.length}</span>/<span>{maxHumanCount}</span>
+          <span>{participantList.length}</span>/
+          <span>{mogacoData.maxHumanCount}</span>
         </span>
         <button
           type="button"
@@ -56,7 +50,7 @@ export function DetailInfo({
         {!!participantList &&
           participantList.map((participant) => (
             <UserChip
-              key={participant.id}
+              key={participant.providerId}
               username={participant.nickname}
               profileSrc={participant.profilePicture}
             />
@@ -64,11 +58,11 @@ export function DetailInfo({
       </div>
       <div className={styles.infoItem}>
         <Calendar fill={vars.color.grayscale200} />
-        <span>{dayjs(date).format('YYYY/MM/DD HH:mm~')}</span>
+        <span>{dayjs(mogacoData.date).format('YYYY/MM/DD HH:mm~')}</span>
       </div>
       <div className={styles.infoItem}>
         <Map fill={vars.color.grayscale200} />
-        <span>{address}</span>
+        <span>{mogacoData.address}</span>
       </div>
       <img src={MAP_SAMPLE_IMAGE} alt="맵 샘플 이미지" className={styles.map} />
     </div>
diff --git a/app/frontend/src/components/MogacoDetail/index.tsx b/app/frontend/src/components/MogacoDetail/index.tsx
index 0e37930ba..b5040fe11 100644
--- a/app/frontend/src/components/MogacoDetail/index.tsx
+++ b/app/frontend/src/components/MogacoDetail/index.tsx
@@ -1,78 +1,45 @@
-import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
 
-import { mogaco } from '@/services';
-import { useUserAtom } from '@/stores';
-import { Mogaco, Participant } from '@/types';
+import { useQuery } from '@tanstack/react-query';
+
+import { queryKeys } from '@/queries';
 
-import { DetailContents } from './DetailContents';
 import { DetailHeader } from './DetailHeader';
 import { DetailInfo } from './DetailInfo';
 import * as styles from './index.css';
 
-type MogacoDetailProps = Mogaco;
+export function MogacoDetailPage() {
+  const { id } = useParams();
+  const navigator = useNavigate();
 
-export function MogacoDetailPage({
-  id,
-  memberId,
-  title,
-  maxHumanCount,
-  date,
-  address,
-  contents,
-  status,
-}: MogacoDetailProps) {
-  const [participantList, setParticipantList] = useState<Participant[] | null>(
-    null,
+  const { data: currentUser } = useQuery(queryKeys.member.me());
+  const { data: mogacoData } = useQuery(queryKeys.mogaco.detail(id!));
+  const { data: participantList } = useQuery(
+    queryKeys.mogaco.participants(id!),
   );
-  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
-    ? !!participantList.find(
-        (participant) => participant.id === user?.providerId,
-      )
-    : false;
 
-  useEffect(() => {
-    if (participantList) {
-      return;
-    }
+  if (!currentUser) {
+    // eslint-disable-next-line no-alert
+    window.alert('인증 정보가 없습니다.\n로그인해 주세요.');
+    navigator('/');
+    return <div>리다이렉션...</div>;
+  }
 
-    const getParticipantList = async () => {
-      const data = await mogaco.participants(id);
-      setParticipantList(data);
-    };
-
-    getParticipantList();
-  }, [id, participantList]);
+  if (!mogacoData || !participantList) {
+    return <div>로딩 중...</div>;
+  }
 
   return (
     <div className={styles.wrapper}>
       <div className={styles.container}>
         <DetailHeader
-          id={id}
-          title={title}
-          status={status}
-          memberId={memberId}
-          userHosted={userHosted}
-          userParticipated={userParticipated}
-        />
-        <DetailInfo
+          id={id!}
+          currentUser={currentUser}
+          mogacoData={mogacoData}
           participantList={participantList}
-          maxHumanCount={maxHumanCount}
-          date={date}
-          address={address}
         />
-        <DetailContents contents={contents} />
+        <DetailInfo mogacoData={mogacoData} participantList={participantList} />
+        <div>{mogacoData.contents}</div>
         <hr className={styles.horizontalLine} />
       </div>
     </div>
diff --git a/app/frontend/src/pages/MogacoDetail/index.tsx b/app/frontend/src/pages/MogacoDetail/index.tsx
index ea8a11f37..8b19430a7 100644
--- a/app/frontend/src/pages/MogacoDetail/index.tsx
+++ b/app/frontend/src/pages/MogacoDetail/index.tsx
@@ -1,53 +1,5 @@
-import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-
 import { MogacoDetailPage } from '@/components';
-import { mogaco } from '@/services';
-import { Mogaco } from '@/types';
 
 export function MogacoDetail() {
-  const { id } = useParams();
-  const [mogacoData, setMogacoData] = useState<Mogaco | null>(null);
-
-  useEffect(() => {
-    if (!id || mogacoData) {
-      return;
-    }
-
-    const fetchMogacoData = async () => {
-      const data = await mogaco.detail(id);
-      setMogacoData(data);
-    };
-
-    fetchMogacoData();
-  }, [id, mogacoData]);
-
-  if (!mogacoData) {
-    return <div>불러오는 중...</div>;
-  }
-
-  const {
-    memberId,
-    groupId,
-    title,
-    maxHumanCount,
-    date,
-    address,
-    contents,
-    status,
-  } = mogacoData;
-
-  return (
-    <MogacoDetailPage
-      id={id as string}
-      memberId={memberId}
-      groupId={groupId}
-      title={title}
-      maxHumanCount={maxHumanCount}
-      date={date}
-      address={address}
-      contents={contents}
-      status={status}
-    />
-  );
+  return <MogacoDetailPage />;
 }
diff --git a/app/frontend/src/services/mogaco.ts b/app/frontend/src/services/mogaco.ts
index c04264a1e..03e92d81a 100644
--- a/app/frontend/src/services/mogaco.ts
+++ b/app/frontend/src/services/mogaco.ts
@@ -1,4 +1,4 @@
-import { Mogaco, Participant, MogacoPostRequest } from '@/types';
+import { Member, Mogaco } from '@/types';
 
 import { morakAPI } from './morakAPI';
 
@@ -20,7 +20,7 @@ export const mogaco = {
   post: async (form: MogacoPostRequest) =>
     morakAPI.post(mogaco.endPoint.index, form),
   participants: async (id: string) => {
-    const { data } = await morakAPI.get<Participant[]>(
+    const { data } = await morakAPI.get<Member[]>(
       `${mogaco.endPoint.index}/${id}/participants`,
     );
     return data;
diff --git a/app/frontend/src/types/mogaco.ts b/app/frontend/src/types/mogaco.ts
index f5273e0c5..5de7b9a89 100644
--- a/app/frontend/src/types/mogaco.ts
+++ b/app/frontend/src/types/mogaco.ts
@@ -18,7 +18,6 @@ export type Mogaco = Pick<
   MogacoTypes,
   | 'id'
   | 'groupId'
-  | 'memberId'
   | 'title'
   | 'contents'
   | 'date'

From fbf7019351d024daeb0d13d8d73cbd9f95ed1555 Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Fri, 24 Nov 2023 02:25:17 +0900
Subject: [PATCH 5/9] =?UTF-8?q?=F0=9F=A4=A1=20mock=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EC=B5=9C=EC=8B=A0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/mocks/members.ts | 27 +++++++++++++-------------
 app/frontend/src/mocks/mogaco.ts  | 32 +++++++++++++++----------------
 2 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/app/frontend/src/mocks/members.ts b/app/frontend/src/mocks/members.ts
index e04410a9a..2ae8022c7 100644
--- a/app/frontend/src/mocks/members.ts
+++ b/app/frontend/src/mocks/members.ts
@@ -1,19 +1,24 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { http, HttpResponse } from 'msw';
 
-const userList = [
+import { Member } from '@/types';
+
+const memberList: Member[] = [
   {
-    id: '1',
+    providerId: '1',
+    email: '.',
     nickname: '지승',
     profilePicture: 'https://avatars.githubusercontent.com/u/50646827?v=4',
   },
   {
-    id: '2',
+    providerId: '2',
+    email: '.',
     nickname: '지원',
     profilePicture: 'https://avatars.githubusercontent.com/u/110762136?v=4',
   },
   {
-    id: '3',
+    providerId: '3',
+    email: '.',
     nickname: '태림',
     profilePicture: 'https://avatars.githubusercontent.com/u/43867711?v=4',
   },
@@ -23,19 +28,13 @@ export const memberAPIHandlers = [
   http.get(
     '/member/me',
     // () => HttpResponse.error(),
-    () =>
-      HttpResponse.json({
-        providerId: '1234',
-        email: 'ttrrr121@gmail.com',
-        nickname: 'RIMI',
-        profilePicture:
-          'https://lh3.googleusercontent.com/ogw/AKPQZvwTnGmjh0sydCnI53wZMYLcKf-KZJ7Z9MaLg1ZVLQ=s64-c-mo',
-      }),
+    () => HttpResponse.json(memberList[0]),
   ),
   http.get(
     '/member/:id',
     // () => HttpResponse.error(),
-    ({ params: { id } }) => HttpResponse.json(userList[Number(id) - 1]),
+    ({ params: { id } }) => HttpResponse.json(memberList[Number(id) - 1]),
   ),
 ];
-export { userList };
+
+export { memberList };
diff --git a/app/frontend/src/mocks/mogaco.ts b/app/frontend/src/mocks/mogaco.ts
index 34b9ef70e..e38c9a740 100644
--- a/app/frontend/src/mocks/mogaco.ts
+++ b/app/frontend/src/mocks/mogaco.ts
@@ -1,84 +1,84 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { http, HttpResponse } from 'msw';
 
-import { Mogaco, Participant } from '@/types';
+import { Member, Mogaco } from '@/types';
 
-import { userList } from './members';
+import { memberList } from './members';
 
-const mogacoList = [
+const mogacoList: Mogaco[] = [
   {
     id: '1',
     groupId: 1,
-    memberId: '1',
     title: '인천역 모각코',
     contents: '인천에서 같이 모각코 하실 분을 모십니다.',
     date: '2023-11-22T12:00:00.000Z',
     maxHumanCount: 5,
     address: '서울 관악구 어디길 어디로 뭐시기카페',
     status: '모집 중' as const,
+    member: memberList[0],
   },
   {
     id: '2',
     groupId: 1,
-    memberId: '2',
     title: '이수역 모각코',
     contents: '이수역 모각코 하실 분 구합니다!',
     date: '2023-11-22T12:00:00.000Z',
     maxHumanCount: 5,
     address: '주소주소주소주소주소',
     status: '모집 중' as const,
+    member: memberList[1],
   },
   {
     id: '3',
     groupId: 1,
-    memberId: '3',
     title: '종각역 모각코',
     contents: '종각역에서 모각코 하실 분 구해요',
     date: '2023-10-11T12:00:00.000Z',
     maxHumanCount: 5,
     address: '주소주소주소주소주소',
     status: '모집 중' as const,
+    member: memberList[2],
   },
   {
     id: '4',
     groupId: 1,
-    memberId: '1',
     title: '사당역 모각코',
     contents: '사당역 크레이저 커피로 오세요~',
     date: '2023-11-22T12:00:00.000Z',
     maxHumanCount: 5,
     address: '주소주소주소주소주소',
     status: '모집 중' as const,
+    member: memberList[1],
   },
 ];
 
-const participantsList = [
-  [userList[0], userList[1], userList[2]],
-  [userList[1], userList[2]],
-  [userList[0], userList[2]],
-  [userList[0], userList[1]],
+const participantsList: Member[][] = [
+  [memberList[0], memberList[1], memberList[2]],
+  [memberList[1], memberList[2]],
+  [memberList[0], memberList[2]],
+  [memberList[0], memberList[1]],
 ];
 
 export const mogacoAPIHandlers = [
   http.get('/mogaco', () => HttpResponse.json<Mogaco[]>(mogacoList)),
+  http.post('/mogaco', () => HttpResponse.json(null, { status: 200 })),
   http.delete('/mogaco/:id', () => HttpResponse.json(null, { status: 200 })),
   http.get('/mogaco/:id', ({ params: { id } }) =>
     HttpResponse.json<Mogaco>(mogacoList[Number(id) - 1]),
   ),
   http.get('/mogaco/:id/participants', ({ params: { id } }) =>
-    HttpResponse.json<Participant[]>(participantsList[Number(id) - 1]),
+    HttpResponse.json<Member[]>(participantsList[Number(id) - 1]),
   ),
-  http.post('/mogaco', () => HttpResponse.json(null, { status: 201 })),
   http.post('/mogaco/:id/join', ({ params: { id } }) => {
     participantsList[Number(id) - 1] = [
       ...participantsList[Number(id) - 1],
-      userList[0],
+      memberList[0],
     ];
     return HttpResponse.json(null, { status: 200 });
   }),
   http.delete('/mogaco/:id/join', ({ params: { id } }) => {
     participantsList[Number(id) - 1] = participantsList[Number(id) - 1].filter(
-      (participant) => participant.id !== userList[0].id,
+      (participant) => participant.providerId !== memberList[0].providerId,
     );
     return HttpResponse.json(null, { status: 200 });
   }),

From 5045cf25ffb927fd55394fb120206eb7c08926d0 Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Fri, 24 Nov 2023 02:48:06 +0900
Subject: [PATCH 6/9] =?UTF-8?q?=F0=9F=90=9B=20=EC=B0=B8=EC=84=9D=20?=
 =?UTF-8?q?=EC=B7=A8=EC=86=8C=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useNavigate hook을 useEffect()에서 호출하도록 변경
- /member/me 쿼리의 staleTime을 무한으로 지정
---
 .../src/components/MogacoDetail/index.tsx      | 18 ++++++++++--------
 app/frontend/src/main.tsx                      |  4 ++++
 app/frontend/src/queries/hooks/mogaco.ts       |  2 +-
 app/frontend/src/services/mogaco.ts            | 10 +++++-----
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/app/frontend/src/components/MogacoDetail/index.tsx b/app/frontend/src/components/MogacoDetail/index.tsx
index b5040fe11..1a8721dce 100644
--- a/app/frontend/src/components/MogacoDetail/index.tsx
+++ b/app/frontend/src/components/MogacoDetail/index.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 
 import { useQuery } from '@tanstack/react-query';
@@ -10,7 +11,7 @@ import * as styles from './index.css';
 
 export function MogacoDetailPage() {
   const { id } = useParams();
-  const navigator = useNavigate();
+  const navigate = useNavigate();
 
   const { data: currentUser } = useQuery(queryKeys.member.me());
   const { data: mogacoData } = useQuery(queryKeys.mogaco.detail(id!));
@@ -18,12 +19,13 @@ export function MogacoDetailPage() {
     queryKeys.mogaco.participants(id!),
   );
 
-  if (!currentUser) {
-    // eslint-disable-next-line no-alert
-    window.alert('인증 정보가 없습니다.\n로그인해 주세요.');
-    navigator('/');
-    return <div>리다이렉션...</div>;
-  }
+  useEffect(() => {
+    if (!currentUser) {
+      // eslint-disable-next-line no-alert
+      window.alert('인증 정보가 없습니다.\n로그인해 주세요.');
+      navigate('/');
+    }
+  }, [currentUser, navigate]);
 
   if (!mogacoData || !participantList) {
     return <div>로딩 중...</div>;
@@ -34,7 +36,7 @@ export function MogacoDetailPage() {
       <div className={styles.container}>
         <DetailHeader
           id={id!}
-          currentUser={currentUser}
+          currentUser={currentUser!}
           mogacoData={mogacoData}
           participantList={participantList}
         />
diff --git a/app/frontend/src/main.tsx b/app/frontend/src/main.tsx
index 934624895..6fee80518 100644
--- a/app/frontend/src/main.tsx
+++ b/app/frontend/src/main.tsx
@@ -6,6 +6,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import ReactDOM from 'react-dom/client';
 
 import App from './App';
+import { queryKeys } from './queries';
 
 async function enableMocking() {
   if (import.meta.env.MODE !== 'development') {
@@ -18,6 +19,9 @@ async function enableMocking() {
 }
 
 const queryClient = new QueryClient();
+queryClient.setQueryDefaults(queryKeys.member.me().queryKey, {
+  staleTime: Infinity,
+});
 
 enableMocking().then(() => {
   ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/app/frontend/src/queries/hooks/mogaco.ts b/app/frontend/src/queries/hooks/mogaco.ts
index 0967f8f31..ca480d483 100644
--- a/app/frontend/src/queries/hooks/mogaco.ts
+++ b/app/frontend/src/queries/hooks/mogaco.ts
@@ -33,7 +33,7 @@ export const useQuitMogacoQuery = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (postId: string) => mogaco.delete(postId),
+    mutationFn: (postId: string) => mogaco.quit(postId),
     onSuccess: (data, postId) => {
       queryClient.invalidateQueries({
         queryKey: queryKeys.mogaco.participants(postId).queryKey,
diff --git a/app/frontend/src/services/mogaco.ts b/app/frontend/src/services/mogaco.ts
index 03e92d81a..9151fd32f 100644
--- a/app/frontend/src/services/mogaco.ts
+++ b/app/frontend/src/services/mogaco.ts
@@ -1,4 +1,4 @@
-import { Member, Mogaco } from '@/types';
+import { Member, Mogaco, MogacoPostRequest } from '@/types';
 
 import { morakAPI } from './morakAPI';
 
@@ -19,6 +19,10 @@ export const mogaco = {
   },
   post: async (form: MogacoPostRequest) =>
     morakAPI.post(mogaco.endPoint.index, form),
+  delete: async (id: string) => {
+    const response = await morakAPI.delete(`${mogaco.endPoint.index}/${id}`);
+    return response;
+  },
   participants: async (id: string) => {
     const { data } = await morakAPI.get<Member[]>(
       `${mogaco.endPoint.index}/${id}/participants`,
@@ -35,8 +39,4 @@ export const mogaco = {
     );
     return response;
   },
-  delete: async (id: string) => {
-    const response = await morakAPI.delete(`${mogaco.endPoint.index}/${id}`);
-    return response;
-  },
 };

From 93a3ba7176d83845bc2f24d24f8658e7bbcc30d7 Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Fri, 24 Nov 2023 03:10:19 +0900
Subject: [PATCH 7/9] =?UTF-8?q?=F0=9F=A4=A1=20mock=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EC=9E=AC=EA=B5=AC=EC=A1=B0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/mocks/mogaco.ts | 50 ++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 19 deletions(-)

diff --git a/app/frontend/src/mocks/mogaco.ts b/app/frontend/src/mocks/mogaco.ts
index e38c9a740..abf9f32c0 100644
--- a/app/frontend/src/mocks/mogaco.ts
+++ b/app/frontend/src/mocks/mogaco.ts
@@ -5,7 +5,7 @@ import { Member, Mogaco } from '@/types';
 
 import { memberList } from './members';
 
-const mogacoList: Mogaco[] = [
+let mogacoList: Mogaco[] = [
   {
     id: '1',
     groupId: 1,
@@ -26,7 +26,7 @@ const mogacoList: Mogaco[] = [
     maxHumanCount: 5,
     address: '주소주소주소주소주소',
     status: '모집 중' as const,
-    member: memberList[1],
+    member: memberList[2],
   },
   {
     id: '3',
@@ -52,34 +52,46 @@ const mogacoList: Mogaco[] = [
   },
 ];
 
-const participantsList: Member[][] = [
-  [memberList[0], memberList[1], memberList[2]],
-  [memberList[1], memberList[2]],
-  [memberList[0], memberList[2]],
-  [memberList[0], memberList[1]],
+const participantsList: { id: string; participants: Member[] }[] = [
+  { id: '1', participants: [memberList[0], memberList[1], memberList[2]] },
+  { id: '2', participants: [memberList[0], memberList[2]] },
+  { id: '3', participants: [memberList[1], memberList[2]] },
+  { id: '4', participants: [memberList[0], memberList[1]] },
 ];
 
 export const mogacoAPIHandlers = [
   http.get('/mogaco', () => HttpResponse.json<Mogaco[]>(mogacoList)),
-  http.post('/mogaco', () => HttpResponse.json(null, { status: 200 })),
-  http.delete('/mogaco/:id', () => HttpResponse.json(null, { status: 200 })),
+  http.post('/mogaco', () => HttpResponse.json({ status: 201 })),
   http.get('/mogaco/:id', ({ params: { id } }) =>
-    HttpResponse.json<Mogaco>(mogacoList[Number(id) - 1]),
+    HttpResponse.json<Mogaco>(mogacoList.find((mogaco) => mogaco.id === id)),
   ),
+  http.delete('/mogaco/:id', ({ params: { id } }) => {
+    mogacoList = mogacoList.filter((mogaco) => mogaco.id !== id);
+    return HttpResponse.json({ status: 204 });
+  }),
   http.get('/mogaco/:id/participants', ({ params: { id } }) =>
-    HttpResponse.json<Member[]>(participantsList[Number(id) - 1]),
+    HttpResponse.json<Member[]>(
+      participantsList.find((item) => item.id === id)?.participants,
+    ),
   ),
   http.post('/mogaco/:id/join', ({ params: { id } }) => {
-    participantsList[Number(id) - 1] = [
-      ...participantsList[Number(id) - 1],
-      memberList[0],
-    ];
-    return HttpResponse.json(null, { status: 200 });
+    const target = participantsList.find((item) => item.id === id);
+    if (!target) {
+      return HttpResponse.json({ status: 404 });
+    }
+
+    target.participants = [...target.participants, memberList[0]];
+    return HttpResponse.json({ status: 200 });
   }),
   http.delete('/mogaco/:id/join', ({ params: { id } }) => {
-    participantsList[Number(id) - 1] = participantsList[Number(id) - 1].filter(
-      (participant) => participant.providerId !== memberList[0].providerId,
+    const target = participantsList.find((item) => item.id === id);
+    if (!target) {
+      return HttpResponse.json({ status: 404 });
+    }
+
+    target.participants = target.participants.filter(
+      (item) => item.providerId !== memberList[0].providerId,
     );
-    return HttpResponse.json(null, { status: 200 });
+    return HttpResponse.json({ status: 200 });
   }),
 ];

From 3245c7c2f5c26ea9bc35f553d1e2260a73cbfce4 Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Fri, 24 Nov 2023 03:38:03 +0900
Subject: [PATCH 8/9] =?UTF-8?q?=F0=9F=A4=A1=20=EB=AA=A8=EA=B0=81=EC=BD=94?=
 =?UTF-8?q?=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=83=9D=EC=84=B1=20mock=20AP?=
 =?UTF-8?q?I=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MogacoDetail/index.tsx     | 23 ++++++++++++++-----
 app/frontend/src/mocks/mogaco.ts              | 16 +++++++++----
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/app/frontend/src/components/MogacoDetail/index.tsx b/app/frontend/src/components/MogacoDetail/index.tsx
index 1a8721dce..08ec5ead0 100644
--- a/app/frontend/src/components/MogacoDetail/index.tsx
+++ b/app/frontend/src/components/MogacoDetail/index.tsx
@@ -13,9 +13,13 @@ export function MogacoDetailPage() {
   const { id } = useParams();
   const navigate = useNavigate();
 
-  const { data: currentUser } = useQuery(queryKeys.member.me());
-  const { data: mogacoData } = useQuery(queryKeys.mogaco.detail(id!));
-  const { data: participantList } = useQuery(
+  const { data: currentUser, isLoading: currentUserLoading } = useQuery(
+    queryKeys.member.me(),
+  );
+  const { data: mogacoData, isLoading: mogacoDataLoading } = useQuery(
+    queryKeys.mogaco.detail(id!),
+  );
+  const { data: participantList, isLoading: participantListLoading } = useQuery(
     queryKeys.mogaco.participants(id!),
   );
 
@@ -27,10 +31,14 @@ export function MogacoDetailPage() {
     }
   }, [currentUser, navigate]);
 
-  if (!mogacoData || !participantList) {
+  if (currentUserLoading || mogacoDataLoading || participantListLoading) {
     return <div>로딩 중...</div>;
   }
 
+  if (!mogacoData) {
+    return <div>정보를 불러오는 데에 실패했습니다.</div>;
+  }
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.container}>
@@ -38,9 +46,12 @@ export function MogacoDetailPage() {
           id={id!}
           currentUser={currentUser!}
           mogacoData={mogacoData}
-          participantList={participantList}
+          participantList={participantList || []}
+        />
+        <DetailInfo
+          mogacoData={mogacoData}
+          participantList={participantList || []}
         />
-        <DetailInfo mogacoData={mogacoData} participantList={participantList} />
         <div>{mogacoData.contents}</div>
         <hr className={styles.horizontalLine} />
       </div>
diff --git a/app/frontend/src/mocks/mogaco.ts b/app/frontend/src/mocks/mogaco.ts
index abf9f32c0..a65d374f3 100644
--- a/app/frontend/src/mocks/mogaco.ts
+++ b/app/frontend/src/mocks/mogaco.ts
@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { http, HttpResponse } from 'msw';
 
-import { Member, Mogaco } from '@/types';
+import { Member, Mogaco, MogacoPostRequest } from '@/types';
 
 import { memberList } from './members';
 
@@ -61,7 +61,15 @@ const participantsList: { id: string; participants: Member[] }[] = [
 
 export const mogacoAPIHandlers = [
   http.get('/mogaco', () => HttpResponse.json<Mogaco[]>(mogacoList)),
-  http.post('/mogaco', () => HttpResponse.json({ status: 201 })),
+  http.post<never, MogacoPostRequest>('/mogaco', async ({ request }) => {
+    const body = await request.json();
+    mogacoList.push({
+      ...body,
+      id: String(mogacoList[mogacoList.length - 1].id + 1),
+      member: memberList[0],
+    });
+    return HttpResponse.json(null, { status: 201 });
+  }),
   http.get('/mogaco/:id', ({ params: { id } }) =>
     HttpResponse.json<Mogaco>(mogacoList.find((mogaco) => mogaco.id === id)),
   ),
@@ -77,11 +85,11 @@ export const mogacoAPIHandlers = [
   http.post('/mogaco/:id/join', ({ params: { id } }) => {
     const target = participantsList.find((item) => item.id === id);
     if (!target) {
-      return HttpResponse.json({ status: 404 });
+      return HttpResponse.json(null, { status: 404 });
     }
 
     target.participants = [...target.participants, memberList[0]];
-    return HttpResponse.json({ status: 200 });
+    return HttpResponse.json(null, { status: 200 });
   }),
   http.delete('/mogaco/:id/join', ({ params: { id } }) => {
     const target = participantsList.find((item) => item.id === id);

From 09331f1cc55bb8177c6e70817fdb024026258e86 Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Fri, 24 Nov 2023 03:44:11 +0900
Subject: [PATCH 9/9] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20=EB=B9=8C=EB=93=9C=20?=
 =?UTF-8?q?=EC=8B=9C=20=EC=97=90=EB=9F=AC=20=EB=B0=9C=EC=83=9D=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/components/Mogaco/MogacoList.tsx        | 2 --
 app/frontend/src/components/commons/MogacoItem/index.tsx | 2 +-
 app/frontend/src/queries/hooks/mogaco.ts                 | 4 ++--
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/frontend/src/components/Mogaco/MogacoList.tsx b/app/frontend/src/components/Mogaco/MogacoList.tsx
index c8627d51f..d5ec03f11 100644
--- a/app/frontend/src/components/Mogaco/MogacoList.tsx
+++ b/app/frontend/src/components/Mogaco/MogacoList.tsx
@@ -15,7 +15,6 @@ export function MogacoList() {
         mogacoList.map(
           ({
             id,
-            memberId,
             groupId,
             title,
             contents,
@@ -27,7 +26,6 @@ export function MogacoList() {
             <MogacoItem
               key={id}
               id={id}
-              memberId={memberId}
               title={title}
               groupId={groupId}
               contents={contents}
diff --git a/app/frontend/src/components/commons/MogacoItem/index.tsx b/app/frontend/src/components/commons/MogacoItem/index.tsx
index 8887de2a4..ed659bd61 100644
--- a/app/frontend/src/components/commons/MogacoItem/index.tsx
+++ b/app/frontend/src/components/commons/MogacoItem/index.tsx
@@ -9,7 +9,7 @@ import { Mogaco } from '@/types';
 
 import * as styles from './index.css';
 
-type MogacoProps = Mogaco;
+type MogacoProps = Omit<Mogaco, 'member'>;
 
 export function MogacoItem({
   id,
diff --git a/app/frontend/src/queries/hooks/mogaco.ts b/app/frontend/src/queries/hooks/mogaco.ts
index ca480d483..fc1449d2a 100644
--- a/app/frontend/src/queries/hooks/mogaco.ts
+++ b/app/frontend/src/queries/hooks/mogaco.ts
@@ -21,7 +21,7 @@ export const useJoinMogacoQuery = () => {
 
   return useMutation({
     mutationFn: (postId: string) => mogaco.join(postId),
-    onSuccess: (data, postId) => {
+    onSuccess: (_, postId) => {
       queryClient.invalidateQueries({
         queryKey: queryKeys.mogaco.participants(postId).queryKey,
       });
@@ -34,7 +34,7 @@ export const useQuitMogacoQuery = () => {
 
   return useMutation({
     mutationFn: (postId: string) => mogaco.quit(postId),
-    onSuccess: (data, postId) => {
+    onSuccess: (_, postId) => {
       queryClient.invalidateQueries({
         queryKey: queryKeys.mogaco.participants(postId).queryKey,
       });