🤡 mock 데이터 객체로 분리

boostcampwm2023 · Nov 23, 2023 · df58e9f · df58e9f
1 parent 9bb0215
commit df58e9f
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 93 deletions.
diff --git a/app/frontend/src/components/MogacoDetail/DetailInfo.tsx b/app/frontend/src/components/MogacoDetail/DetailInfo.tsx
@@ -58,7 +58,7 @@ export function DetailInfo({
             <UserChip
               key={participant.id}
               username={participant.nickname}
-              profileSrc={participant.profile}
+              profileSrc={participant.profilePicture}
             />
           ))}
       </div>

diff --git a/app/frontend/src/mocks/members.ts b/app/frontend/src/mocks/members.ts
@@ -1,6 +1,24 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { http, HttpResponse } from 'msw';
 
+const userList = [
+  {
+    id: '1',
+    nickname: '지승',
+    profilePicture: 'https://avatars.githubusercontent.com/u/50646827?v=4',
+  },
+  {
+    id: '2',
+    nickname: '지원',
+    profilePicture: 'https://avatars.githubusercontent.com/u/110762136?v=4',
+  },
+  {
+    id: '3',
+    nickname: '태림',
+    profilePicture: 'https://avatars.githubusercontent.com/u/43867711?v=4',
+  },
+];
+
 export const memberAPIHandlers = [
   http.get(
     '/member/me',
@@ -17,13 +35,7 @@ export const memberAPIHandlers = [
   http.get(
     '/member/:id',
     // () => HttpResponse.error(),
-    () =>
-      HttpResponse.json({
-        providerId: '1',
-        email: '[email protected]',
-        nickname: '지승',
-        profilePicture:
-          'https://avatars.githubusercontent.com/u/50646827?s=64&v=4',
-      }),
+    ({ params: { id } }) => HttpResponse.json(userList[Number(id) - 1]),
   ),
 ];
+export { userList };
diff --git a/app/frontend/src/mocks/mogaco.ts b/app/frontend/src/mocks/mogaco.ts
@@ -3,90 +3,70 @@ import { http, HttpResponse } from 'msw';
 
 import { Mogaco, Participant } from '@/types';
 
+import { userList } from './members';
+
+const mogacoList = [
+  {
+    id: '1',
+    groupId: '1',
+    memberId: '1',
+    title: '인천역 모각코',
+    contents: '인천에서 같이 모각코 하실 분을 모십니다.',
+    date: '2023-11-22T12:00:00.000Z',
+    maxHumanCount: 5,
+    address: '서울 관악구 어디길 어디로 뭐시기카페',
+    status: '모집 중' as const,
+  },
+  {
+    id: '2',
+    groupId: '1',
+    memberId: '2',
+    title: '이수역 모각코',
+    contents: '이수역 모각코 하실 분 구합니다!',
+    date: '2023-11-22T12:00:00.000Z',
+    maxHumanCount: 5,
+    address: '주소주소주소주소주소',
+    status: '마감' as const,
+  },
+  {
+    id: '3',
+    groupId: '1',
+    memberId: '3',
+    title: '종각역 모각코',
+    contents: '종각역에서 모각코 하실 분 구해요',
+    date: '2023-10-11T12:00:00.000Z',
+    maxHumanCount: 5,
+    address: '주소주소주소주소주소',
+    status: '종료' as const,
+  },
+  {
+    id: '4',
+    groupId: '1',
+    memberId: '1',
+    title: '사당역 모각코',
+    contents: '사당역 크레이저 커피로 오세요~',
+    date: '2023-11-22T12:00:00.000Z',
+    maxHumanCount: 5,
+    address: '주소주소주소주소주소',
+    status: '모집 중' as const,
+  },
+];
+
+const participantsList = [
+  [userList[0], userList[1], userList[2]],
+  [userList[1], userList[2]],
+  [userList[0], userList[2]],
+  [userList[0], userList[1]],
+];
+
 export const mogacoAPIHandlers = [
-  http.get('/mogaco', () =>
-    HttpResponse.json<Mogaco[]>([
-      {
-        id: '1',
-        groupId: '12314',
-        memberId: '1',
-        title: '사당역 모각코',
-        contents:
-          '사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 ',
-        date: '2023-11-22T12:00:00.000Z',
-        maxHumanCount: 5,
-        address: '서울 관악구 어디길 어디로 뭐시기카페',
-        status: '모집 중',
-      },
-      {
-        id: '2',
-        groupId: '12314',
-        memberId: '1',
-        title: '사당역 모각코',
-        contents:
-          '사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 ',
-        date: '2023-11-22T12:00:00.000Z',
-        maxHumanCount: 5,
-        address: '주소주소주소주소주소',
-        status: '모집 중',
-      },
-      {
-        id: '3',
-        groupId: '12314',
-        memberId: '1',
-        title: '사당역 모각코',
-        contents:
-          '사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 ',
-        date: '2023-11-22T12:00:00.000Z',
-        maxHumanCount: 5,
-        address: '주소주소주소주소주소',
-        status: '모집 중',
-      },
-      {
-        id: '4',
-        groupId: '12314',
-        memberId: '1',
-        title: '사당역 모각코',
-        contents:
-          '사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 사당역 모각코 ',
-        date: '2023-11-22T12:00:00.000Z',
-        maxHumanCount: 5,
-        address: '주소주소주소주소주소',
-        status: '모집 중',
-      },
-    ]),
-  ),
-  http.get('/mogaco/:id', () =>
-    HttpResponse.json<Mogaco>({
-      id: '1',
-      groupId: '1',
-      memberId: '1',
-      title: '사당역에서 모각코 하실 분~',
-      contents:
-        '내일 오후 2시 사당역 크레이저 커피에서 같이 모각코 하실 분을 모십니다.',
-      date: '2023-11-22 16:22',
-      maxHumanCount: 5,
-      address: '서울 관악구 남현3길 71 크레이저 커피',
-      status: '모집 중',
-    }),
+  http.get('/mogaco', () => HttpResponse.json<Mogaco[]>(mogacoList)),
+  http.get('/mogaco/:id', ({ params: { id } }) =>
+    HttpResponse.json<Mogaco>(mogacoList[Number(id) - 1]),
   ),
-  http.get('/mogaco/:id/participants', () =>
-    HttpResponse.json<Participant[]>([
-      {
-        id: '1',
-        nickname: '지승',
-        profile: 'https://avatars.githubusercontent.com/u/50646827?v=4',
-      },
-      {
-        id: '2',
-        nickname: '지원',
-        profile: 'https://avatars.githubusercontent.com/u/110762136?v=4',
-      },
-      {
-        id: '3',
-        nickname: '태림',
-        profile: 'https://avatars.githubusercontent.com/u/43867711?v=4',
-      },
-    ]),
+  http.get('/mogaco/:id/participants', ({ params: { id } }) =>
+    HttpResponse.json<Participant[]>(participantsList[Number(id) - 1]),
   ),
+  http.post('mogaco/:id/join', () => {}),
+  http.delete('mogaco/:id/join', () => {}),
 ];
diff --git a/app/frontend/src/services/mogaco.ts b/app/frontend/src/services/mogaco.ts
@@ -21,4 +21,10 @@ export const mogaco = {
     );
     return data;
   },
+  join: async (id: string) => {
+    await morakAPI.post(`/mogaco/${id}/join`);
+  },
+  quit: async (id: string) => {
+    await morakAPI.delete(`/mogaco/${id}/join`);
+  },
 };
diff --git a/app/frontend/src/types/mogaco.ts b/app/frontend/src/types/mogaco.ts
@@ -13,5 +13,5 @@ export type Mogaco = {
 export type Participant = {
   id: string;
   nickname: string;
-  profile: string;
+  profilePicture: string;
 };