Merge pull request #238 from ttaerrim/type-2

[Refactor] 프론트에서 @morak/apitype 공통 타입 사용하도록 수정
boostcampwm2023 · Nov 29, 2023 · bf36718 · bf36718
2 parents 8a7db26 + f0bcfa0
commit bf36718
Show file tree

Hide file tree

Showing 24 changed files with 162 additions and 263 deletions.
diff --git a/app/frontend/src/components/MogacoItem/index.tsx b/app/frontend/src/components/MogacoItem/index.tsx
@@ -1,15 +1,18 @@
 import { NavLink } from 'react-router-dom';
 
+import { ResponseMogacoDto } from '@morak/apitype';
 import dayjs from 'dayjs';
 
 import { ReactComponent as Calendar } from '@/assets/icons/calendar.svg';
 import { ReactComponent as Map } from '@/assets/icons/map.svg';
 import { Label } from '@/components';
-import { Mogaco } from '@/types';
 
 import * as styles from './index.css';
 
-type MogacoProps = Mogaco;
+type MogacoProps = Omit<
+  ResponseMogacoDto,
+  'createdAt' | 'deletedAt' | 'updatedAt'
+>;
 
 export function MogacoItem({
   id,

diff --git a/app/frontend/src/components/Sidebar/Contents/Mogaco/GroupWrapper.tsx b/app/frontend/src/components/Sidebar/Contents/Mogaco/GroupWrapper.tsx
@@ -1,13 +1,14 @@
+import { ResponseParticipant } from '@morak/apitype';
+
 import { UserChip } from '@/components';
 import { sansBold14 } from '@/styles/font.css';
-import { Member } from '@/types';
 
 import * as styles from './index.css';
 
 export function GroupWrapper({
   nickname,
   profilePicture,
-}: Pick<Member, 'nickname' | 'profilePicture'>) {
+}: Pick<ResponseParticipant, 'nickname' | 'profilePicture'>) {
   return (
     <div className={styles.groupWrapper}>
       <UserChip username={nickname} profileSrc={profilePicture} />

diff --git a/app/frontend/src/components/Sidebar/Contents/Mogaco/InfoWrapper.tsx b/app/frontend/src/components/Sidebar/Contents/Mogaco/InfoWrapper.tsx
@@ -1,14 +1,14 @@
+import { ResponseMogacoDto } from '@morak/apitype';
 import dayjs from 'dayjs';
 
 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 { MogacoTypes } from '@/types';
 
 import * as styles from './index.css';
 
 type InfoWrapperProps = Pick<
-  MogacoTypes,
+  ResponseMogacoDto,
   'date' | 'maxHumanCount' | 'address'
 > & {
   participantCount: number;

diff --git a/app/frontend/src/components/Sidebar/Contents/Mogaco/MogacoInfo.tsx b/app/frontend/src/components/Sidebar/Contents/Mogaco/MogacoInfo.tsx
@@ -1,6 +1,7 @@
+import { ResponseMogacoWithMemberDto } from '@morak/apitype';
+
 import { Button } from '@/components';
 import { sansRegular16 } from '@/styles/font.css';
-import { Mogaco } from '@/types';
 
 import { GroupWrapper } from './GroupWrapper';
 import * as styles from './index.css';
@@ -11,7 +12,7 @@ export function MogacoInfo({
   mogaco,
   onClickDetailPage,
 }: {
-  mogaco: Mogaco;
+  mogaco: ResponseMogacoWithMemberDto;
   onClickDetailPage: () => void;
 }) {
   const {

diff --git a/app/frontend/src/components/Sidebar/Contents/Mogaco/TitleWrapper.tsx b/app/frontend/src/components/Sidebar/Contents/Mogaco/TitleWrapper.tsx
@@ -1,13 +1,14 @@
+import { ResponseMogacoDto } from '@morak/apitype';
+
 import { Label } from '@/components';
 import { sansBold24 } from '@/styles/font.css';
-import { MogacoTypes } from '@/types';
 
 import * as styles from './index.css';
 
 export function TitleWrapper({
   status,
   title,
-}: Pick<MogacoTypes, 'title' | 'status'>) {
+}: Pick<ResponseMogacoDto, 'title' | 'status'>) {
   return (
     <div className={styles.titleWrapper}>
       <Label theme="primary" shape="fill">

diff --git a/app/frontend/src/mocks/members.ts b/app/frontend/src/mocks/members.ts
@@ -1,22 +1,24 @@
+import { ResponseParticipant } from '@morak/apitype';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { http, HttpResponse } from 'msw';
 
-import { Member } from '@/types';
-
-const memberList: Member[] = [
+const memberList: ResponseParticipant[] = [
   {
+    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: '태림',

diff --git a/app/frontend/src/mocks/mogaco.ts b/app/frontend/src/mocks/mogaco.ts
@@ -1,141 +1,80 @@
+import {
+  RequestCreateMogacoDto,
+  ResponseMogacoDto,
+  ResponseMogacoWithMemberDto,
+} from '@morak/apitype';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { http, HttpResponse } from 'msw';
 
-import { Mogaco, MogacoPostRequest } from '@/types';
-
-import { memberList } from './members';
-
-let mogacoList: Mogaco[] = [
-  {
-    id: '1',
-    groupId: '1',
-    title: '인천역 모각코',
-    contents: '인천에서 같이 모각코 하실 분을 모십니다.',
-    date: '2023-11-22T12:00:00.000Z',
-    maxHumanCount: 5,
-    address: '서울 관악구 어디길 어디로 뭐시기카페',
-    coord: '37.4764, 126.617',
-    status: '모집 중' as const,
-    member: memberList[0],
-    participants: [memberList[0], memberList[1], memberList[2]],
-    group: { id: '1', title: '부스트캠프 웹·모바일 8기' },
-  },
-  {
-    id: '2',
-    groupId: '1',
-    title: '이수역 모각코',
-    contents: '이수역 모각코 하실 분 구합니다!',
-    date: '2023-11-22T12:00:00.000Z',
-    maxHumanCount: 5,
-    address: '주소주소주소주소주소',
-    coord: '37.4868, 126.9822',
-    status: '모집 중' as const,
-    member: memberList[2],
-    participants: [memberList[0], memberList[2]],
-    group: { id: '1', title: '부스트캠프 웹·모바일 8기' },
-  },
-  {
-    id: '3',
-    groupId: '1',
-    title: '종각역 모각코',
-    contents: '종각역에서 모각코 하실 분 구해요',
-    date: '2023-10-11T12:00:00.000Z',
-    maxHumanCount: 2,
-    address: '주소주소주소주소주소',
-    coord: '37.5702, 126.9831',
-    status: '모집 중' as const,
-    member: memberList[2],
-    participants: [memberList[1], memberList[2]],
-    group: { id: '1', title: '부스트캠프 웹·모바일 8기' },
-  },
-  {
-    id: '4',
-    groupId: '1',
-    title: '사당역 모각코',
-    contents: '사당역 크레이저 커피로 오세요~',
-    date: '2023-11-22T12:00:00.000Z',
-    maxHumanCount: 2,
-    address: '주소주소주소주소주소',
-    coord: '37.4766, 126.9817',
-    status: '모집 중' as const,
-    member: memberList[1],
-    participants: [memberList[0], memberList[1]],
-    group: { id: '1', title: '부스트캠프 웹·모바일 8기' },
-  },
-];
-
 export const mogacoAPIHandlers = [
-  http.get('/mogaco', ({ request }) => {
-    const url = new URL(request.url);
-    const params = new URLSearchParams(url.search);
-    const date = params.get('date');
-    if (date) {
-      const filteredMogacoList = mogacoList.filter((mogaco) =>
-        mogaco.date.startsWith(date),
-      );
-      return HttpResponse.json<Mogaco[]>(filteredMogacoList);
-    }
-    return HttpResponse.json<Mogaco[]>(mogacoList);
-  }),
-  http.post<never, MogacoPostRequest>('/mogaco', async ({ request }) => {
-    const body = await request.json();
-    const postId = String(Number(mogacoList[mogacoList.length - 1].id) + 1);
-    const newPost = {
-      ...body,
-      id: postId,
-      member: memberList[0],
-      participants: [memberList[0]],
-      group: { id: '1', title: '부스트캠프 웹·모바일 8기' },
-    };
-    mogacoList.push(newPost);
-    return HttpResponse.json(newPost, { status: 201 });
-  }),
-  http.patch<{ id: string }, MogacoPostRequest>(
-    '/mogaco/:id',
-    async ({ params: { id }, request }) => {
-      const body = await request.json();
-      const editedPost = {
-        ...body,
-        id,
-        member: memberList[0],
-        participants: [memberList[0]],
-        group: { id: '1', title: '부스트캠프 웹·모바일 8기' },
-      };
-      const targetIndex = mogacoList.findIndex((mogaco) => mogaco.id === id);
-
-      if (targetIndex === undefined) {
-        return HttpResponse.json(null, { status: 404 });
-      }
-
-      mogacoList[targetIndex] = editedPost;
-      return HttpResponse.json(editedPost, { status: 200 });
-    },
+  http.get('/mogaco', () =>
+    HttpResponse.json<ResponseMogacoDto[]>([
+      {
+        id: '1',
+        groupId: '1',
+        title: '사당역 모각코',
+        contents: '사당역에서 모각코를 열려고 합니다.',
+        date: new Date('2023-11-22T12:00:00Z'),
+        maxHumanCount: 5,
+        address: '서울특별시 관악구 어디길 22 모락 카페',
+        status: '모집 중',
+        createdAt: new Date('2023-11-25T10:21:35.716Z'),
+        updatedAt: new Date('2023-11-25T10:21:35.716Z'),
+        deletedAt: null,
+        group: {
+          id: '1',
+          title: '부스트캠프 웹・모바일 8기',
+        },
+      },
+    ]),
   ),
-  http.get('/mogaco/:id', ({ params: { id } }) =>
-    HttpResponse.json<Mogaco>(mogacoList.find((mogaco) => mogaco.id === id)),
+  http.post<never, RequestCreateMogacoDto>('/mogaco', async () =>
+    HttpResponse.json(null, { status: 201 }),
   ),
-  http.delete('/mogaco/:id', ({ params: { id } }) => {
-    mogacoList = mogacoList.filter((mogaco) => mogaco.id !== id);
-    return HttpResponse.json({ status: 204 });
-  }),
-  http.post('/mogaco/:id/join', ({ params: { id } }) => {
-    const target = mogacoList.find((item) => item.id === id);
-    if (!target) {
-      return HttpResponse.json(null, { status: 404 });
-    }
-
-    target.participants = [...target.participants, memberList[0]];
-    return HttpResponse.json(null, { status: 200 });
-  }),
-  http.delete('/mogaco/:id/join', ({ params: { id } }) => {
-    const target = mogacoList.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({ status: 200 });
-  }),
+  http.patch<{ id: string }, RequestCreateMogacoDto>('/mogaco/:id', async () =>
+    HttpResponse.json(null, { status: 200 }),
+  ),
+  http.get('/mogaco/:id', () =>
+    HttpResponse.json<ResponseMogacoWithMemberDto>(
+      {
+        id: '1',
+        groupTitle: '부스트캠프 웹모바일 8기',
+        title: '서울 어딘가 모각코 ',
+        contents: '모각코 하실 분 구해요~!!',
+        date: new Date('2023-11-29T08:40:00.000Z'),
+        maxHumanCount: 15,
+        address: '서울특별시 어디구 어디동 12',
+        status: '모집 중',
+        member: {
+          providerId: '107756461693287933704',
+          email: '[email protected]',
+          nickname: 'RIMI',
+          profilePicture:
+            'https://lh3.googleusercontent.com/a/ACg8ocIUKQm6-xqA7Rzw7oLHEXJVdQdIAu8tgwmYpqa1x6PdXjw=s96-c',
+        },
+        participants: [
+          {
+            id: '1',
+            providerId: '107756461693287933704',
+            email: '[email protected]',
+            nickname: 'RIMI',
+            profilePicture:
+              'https://lh3.googleusercontent.com/a/ACg8ocIUKQm6-xqA7Rzw7oLHEXJVdQdIAu8tgwmYpqa1x6PdXjw=s96-c',
+          },
+          {
+            id: '2',
+            providerId: '117187214221556274884',
+            email: '[email protected]',
+            nickname: 'morak morak',
+            profilePicture:
+              'https://lh3.googleusercontent.com/a/ACg8ocKej7-OYc7vwz5Xu8Tss37yWKC5vEVMet-1YFh8PcB7Xg=s96-c',
+          },
+        ],
+      },
+      { status: 200 },
+    ),
+  ),
+  http.delete('/mogaco/:id', () => HttpResponse.json(null, { status: 200 })),
+  http.post('/mogaco/:id/join', () => HttpResponse.json(null, { status: 200 })),
+  http.delete('/mogaco/:id/join', () => HttpResponse.json({ status: 200 })),
 ];
diff --git a/app/frontend/src/pages/Calendar/useMogacoQuery.ts b/app/frontend/src/pages/Calendar/useMogacoQuery.ts
@@ -1,10 +1,10 @@
+import { ResponseMogacoDto } from '@morak/apitype';
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 
 import { queryKeys } from '@/queries';
-import type { Mogaco } from '@/types';
 
-const refineMogacoList = (mogacoList: Mogaco[]) =>
+const refineMogacoList = (mogacoList: ResponseMogacoDto[]) =>
   mogacoList.map(({ id, title, date }) => ({ id, title, date }));
 
 export const useCalendarMogacoQuery = (selectedDate: Date) =>

diff --git a/app/frontend/src/pages/Mogaco/MogacoList.tsx b/app/frontend/src/pages/Mogaco/MogacoList.tsx
@@ -31,7 +31,6 @@ export function MogacoList() {
             address,
             status,
             group,
-            participants,
           }) => (
             <MogacoItem
               key={id}
@@ -44,7 +43,6 @@ export function MogacoList() {
               date={date}
               status={status}
               group={group}
-              participants={participants}
             />
           ),
         )}

diff --git a/app/frontend/src/pages/MogacoPost/Controller/PostAddress.tsx b/app/frontend/src/pages/MogacoPost/Controller/PostAddress.tsx
@@ -1,11 +1,12 @@
 import { Controller, Control } from 'react-hook-form';
 
+import { RequestCreateMogacoDto } from '@morak/apitype';
+
 import { Input } from '@/components';
 import { MOGACO_POST } from '@/constants';
-import { MogacoPostForm } from '@/types';
 
 type PostAddressProps = {
-  control: Control<MogacoPostForm>;
+  control: Control<RequestCreateMogacoDto>;
 };
 
 export function PostAddress({ control }: PostAddressProps) {

diff --git a/app/frontend/src/pages/MogacoPost/Controller/PostContents.tsx b/app/frontend/src/pages/MogacoPost/Controller/PostContents.tsx
@@ -1,11 +1,12 @@
 import { Controller, Control } from 'react-hook-form';
 
+import { RequestCreateMogacoDto } from '@morak/apitype';
+
 import { Textarea } from '@/components';
 import { MOGACO_POST } from '@/constants';
-import { MogacoPostForm } from '@/types';
 
 type PostContentsProps = {
-  control: Control<MogacoPostForm>;
+  control: Control<RequestCreateMogacoDto>;
 };
 
 export function PostContents({ control }: PostContentsProps) {