From 667d171d5bd389dbfd81b8982b239502840a13b0 Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Thu, 23 Nov 2023 10:57:41 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=EB=84=A4=EC=9D=B4?=
 =?UTF-8?q?=EB=B0=8D=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EA=B8=B0=ED=83=80?=
 =?UTF-8?q?=20=EB=A6=AC=EB=B7=B0=20=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MogacoDetail/index.tsx     |  9 ++-
 .../components/commons/MogacoItem/index.tsx   |  6 +-
 app/frontend/src/mocks/members.ts             |  2 +-
 app/frontend/src/mocks/mogaco.ts              | 80 +++++++++++++++++-
 app/frontend/src/mocks/mogacos.ts             | 81 -------------------
 app/frontend/src/pages/MogacoDetail/index.tsx |  6 +-
 app/frontend/src/services/mogaco.ts           |  8 +-
 app/frontend/src/types/mogaco.ts              | 13 ++-
 8 files changed, 101 insertions(+), 104 deletions(-)
 delete mode 100644 app/frontend/src/mocks/mogacos.ts

diff --git a/app/frontend/src/components/MogacoDetail/index.tsx b/app/frontend/src/components/MogacoDetail/index.tsx
index 3a36899af..665570994 100644
--- a/app/frontend/src/components/MogacoDetail/index.tsx
+++ b/app/frontend/src/components/MogacoDetail/index.tsx
@@ -1,12 +1,13 @@
-import { MogacoProps } from '@/types';
+import { Mogaco } from '@/types';
 
 import { DetailContents } from './DetailContents';
 import { DetailHeader } from './DetailHeader';
 import { DetailInfo } from './DetailInfo';
 import * as styles from './index.css';
 
+type MogacoDetailProps = Mogaco;
+
 export function MogacoDetailPage({
-  id,
   memberId,
   title,
   maxHumanCount,
@@ -15,9 +16,9 @@ export function MogacoDetailPage({
   address,
   contents,
   status,
-}: MogacoProps) {
+}: MogacoDetailProps) {
   return (
-    <div className={styles.wrapper} id={id}>
+    <div className={styles.wrapper}>
       <div className={styles.container}>
         <DetailHeader title={title} status={status} memberId={memberId} />
         <DetailInfo
diff --git a/app/frontend/src/components/commons/MogacoItem/index.tsx b/app/frontend/src/components/commons/MogacoItem/index.tsx
index e73b1a0c6..da140def2 100644
--- a/app/frontend/src/components/commons/MogacoItem/index.tsx
+++ b/app/frontend/src/components/commons/MogacoItem/index.tsx
@@ -6,10 +6,12 @@ import { ReactComponent as Calendar } from '@/assets/icons/calendar.svg';
 import { ReactComponent as Map } from '@/assets/icons/map.svg';
 import { ReactComponent as People } from '@/assets/icons/people.svg';
 import { Label } from '@/components';
-import { MogacoProps } from '@/types';
+import { Mogaco } from '@/types';
 
 import * as styles from './index.css';
 
+type MogacoProps = Mogaco;
+
 export function MogacoItem({
   id,
   groupId,
@@ -22,7 +24,7 @@ export function MogacoItem({
   status,
 }: MogacoProps) {
   const MogacoLabel = (
-    <Label theme="primary" shape="fill" disabled={status === '모집 완료'}>
+    <Label theme="primary" shape="fill" disabled={status === '마감'}>
       {status}
     </Label>
   );
diff --git a/app/frontend/src/mocks/members.ts b/app/frontend/src/mocks/members.ts
index 59eacc46e..98662c331 100644
--- a/app/frontend/src/mocks/members.ts
+++ b/app/frontend/src/mocks/members.ts
@@ -15,7 +15,7 @@ export const memberAPIHandlers = [
       }),
   ),
   http.get(
-    /\/member\/\d+/,
+    '/member/:id',
     // () => HttpResponse.error(),
     () =>
       HttpResponse.json({
diff --git a/app/frontend/src/mocks/mogaco.ts b/app/frontend/src/mocks/mogaco.ts
index 85c52e202..e90853b99 100644
--- a/app/frontend/src/mocks/mogaco.ts
+++ b/app/frontend/src/mocks/mogaco.ts
@@ -1,11 +1,87 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { http, HttpResponse } from 'msw';
 
-import { MogacoProps } from '@/types';
+import { Mogaco } from '@/types';
 
 export const mogacoAPIHandlers = [
+  http.get('/mogaco', () =>
+    HttpResponse.json([
+      {
+        id: '1',
+        groupId: '12314',
+        memberId: '1',
+        title: '사당역 모각코',
+        contents:
+          '사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 ',
+        date: '2023-11-22T12:00:00.000Z',
+        participantList: [
+          {
+            id: '123',
+            nickname: 'Rimi',
+            profile:
+              'https://lh3.googleusercontent.com/ogw/AKPQZvwTnGmjh0sydCnI53wZMYLcKf-KZJ7Z9MaLg1ZVLQ=s64-c-mo',
+          },
+          {
+            id: '123',
+            nickname: 'Rimi',
+            profile:
+              'https://lh3.googleusercontent.com/ogw/AKPQZvwTnGmjh0sydCnI53wZMYLcKf-KZJ7Z9MaLg1ZVLQ=s64-c-mo',
+          },
+        ],
+        maxHumanCount: 5,
+        address: '서울 관악구 어디길 어디로 뭐시기카페',
+        status: '모집 중',
+      },
+      {
+        id: '2',
+        groupId: '12314',
+        memberId: '1',
+        title: '사당역 모각코',
+        contents:
+          '사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 ',
+        date: '2023-11-22T12:00:00.000Z',
+        participantList: [],
+        maxHumanCount: 5,
+        address: '주소주소주소주소주소',
+        status: '모집 중',
+      },
+      {
+        id: '3',
+        groupId: '12314',
+        memberId: '1',
+        title: '사당역 모각코',
+        contents:
+          '사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 ',
+        date: '2023-11-22T12:00:00.000Z',
+        participantList: [
+          {
+            id: '123',
+            nickname: 'Rimi',
+            profile:
+              'https://lh3.googleusercontent.com/ogw/AKPQZvwTnGmjh0sydCnI53wZMYLcKf-KZJ7Z9MaLg1ZVLQ=s64-c-mo',
+          },
+        ],
+        maxHumanCount: 5,
+        address: '주소주소주소주소주소',
+        status: '모집 중',
+      },
+      {
+        id: '4',
+        groupId: '12314',
+        memberId: '1',
+        title: '사당역 모각코',
+        contents:
+          '사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 ',
+        date: '2023-11-22T12:00:00.000Z',
+        participantList: [],
+        maxHumanCount: 5,
+        address: '주소주소주소주소주소',
+        status: '모집 중',
+      },
+    ]),
+  ),
   http.get('/mogaco/:id', () =>
-    HttpResponse.json<MogacoProps>({
+    HttpResponse.json<Mogaco>({
       id: '1',
       groupId: '1',
       memberId: '1',
diff --git a/app/frontend/src/mocks/mogacos.ts b/app/frontend/src/mocks/mogacos.ts
deleted file mode 100644
index 365393636..000000000
--- a/app/frontend/src/mocks/mogacos.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { http, HttpResponse } from 'msw';
-
-export const mogacoAPIHandlers = [
-  http.get('/mogaco', () =>
-    HttpResponse.json([
-      {
-        id: '1',
-        groupId: '12314',
-        memberId: '1',
-        title: '사당역 모각코',
-        contents:
-          '사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 ',
-        date: '2023-11-22T12:00:00.000Z',
-        participantList: [
-          {
-            id: '123',
-            nickname: 'Rimi',
-            profile:
-              'https://lh3.googleusercontent.com/ogw/AKPQZvwTnGmjh0sydCnI53wZMYLcKf-KZJ7Z9MaLg1ZVLQ=s64-c-mo',
-          },
-          {
-            id: '123',
-            nickname: 'Rimi',
-            profile:
-              'https://lh3.googleusercontent.com/ogw/AKPQZvwTnGmjh0sydCnI53wZMYLcKf-KZJ7Z9MaLg1ZVLQ=s64-c-mo',
-          },
-        ],
-        maxHumanCount: 5,
-        address: '서울 관악구 어디길 어디로 뭐시기카페',
-        status: '모집 중',
-      },
-      {
-        id: '2',
-        groupId: '12314',
-        memberId: '1',
-        title: '사당역 모각코',
-        contents:
-          '사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 ',
-        date: '2023-11-22T12:00:00.000Z',
-        participantList: [],
-        maxHumanCount: 5,
-        address: '주소주소주소주소주소',
-        status: '모집 중',
-      },
-      {
-        id: '3',
-        groupId: '12314',
-        memberId: '1',
-        title: '사당역 모각코',
-        contents:
-          '사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 ',
-        date: '2023-11-22T12:00:00.000Z',
-        participantList: [
-          {
-            id: '123',
-            nickname: 'Rimi',
-            profile:
-              'https://lh3.googleusercontent.com/ogw/AKPQZvwTnGmjh0sydCnI53wZMYLcKf-KZJ7Z9MaLg1ZVLQ=s64-c-mo',
-          },
-        ],
-        maxHumanCount: 5,
-        address: '주소주소주소주소주소',
-        status: '모집 중',
-      },
-      {
-        id: '4',
-        groupId: '12314',
-        memberId: '1',
-        title: '사당역 모각코',
-        contents:
-          '사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 ',
-        date: '2023-11-22T12:00:00.000Z',
-        participantList: [],
-        maxHumanCount: 5,
-        address: '주소주소주소주소주소',
-        status: '모집 중',
-      },
-    ]),
-  ),
-];
diff --git a/app/frontend/src/pages/MogacoDetail/index.tsx b/app/frontend/src/pages/MogacoDetail/index.tsx
index 8938340d4..ab4ee3c7e 100644
--- a/app/frontend/src/pages/MogacoDetail/index.tsx
+++ b/app/frontend/src/pages/MogacoDetail/index.tsx
@@ -2,16 +2,16 @@ import { useEffect, useState } from 'react';
 
 import { MogacoDetailPage } from '@/components';
 import { mogaco } from '@/services';
-import { MogacoProps } from '@/types';
+import { Mogaco } from '@/types';
 
 export function MogacoDetail() {
-  const [mogacoData, setMogacoData] = useState<MogacoProps | null>(null);
+  const [mogacoData, setMogacoData] = useState<Mogaco | null>(null);
 
   useEffect(() => {
     if (mogacoData) return;
 
     const fetchMogacoData = async () => {
-      const data = await mogaco.mogacoDetail();
+      const data = await mogaco.detail();
       setMogacoData(data);
     };
 
diff --git a/app/frontend/src/services/mogaco.ts b/app/frontend/src/services/mogaco.ts
index e26e8bc7c..c4d9d78f7 100644
--- a/app/frontend/src/services/mogaco.ts
+++ b/app/frontend/src/services/mogaco.ts
@@ -1,4 +1,4 @@
-import { MogacoProps } from '@/types';
+import { Mogaco } from '@/types';
 
 import { morakAPI } from './morakAPI';
 
@@ -9,11 +9,11 @@ export const mogaco = {
   },
 
   list: async () => {
-    const { data } = await morakAPI.get<MogacoProps[]>(mogaco.endPoint.list);
+    const { data } = await morakAPI.get<Mogaco[]>(mogaco.endPoint.list);
     return data;
   },
-  mogacoDetail: async () => {
-    const { data } = await morakAPI.get<MogacoProps>(mogaco.endPoint.detail);
+  detail: async () => {
+    const { data } = await morakAPI.get<Mogaco>(mogaco.endPoint.detail);
     return data;
   },
 };
diff --git a/app/frontend/src/types/mogaco.ts b/app/frontend/src/types/mogaco.ts
index 59f6d4441..024cd5199 100644
--- a/app/frontend/src/types/mogaco.ts
+++ b/app/frontend/src/types/mogaco.ts
@@ -1,15 +1,14 @@
-export type MogacoDetailProps = MogacoProps & {
-  disabled?: boolean;
-};
-
-export type MogacoProps = {
+export type Mogaco = {
   id: string;
   groupId: string;
-  memberId: string; // 작성자
+  memberId: string;
   title: string;
   contents: string;
   date: string;
-  participantList: Participant[]; // 참석자
+  participantList: Participant[];
+  maxHumanCount: number;
+  address: string;
+  status: '모집 중' | '마감' | '종료';
 };
 
 export type Participant = {