♻️ 네이밍 수정 및 기타 리뷰 사항 반영

boostcampwm2023 · Nov 23, 2023 · 667d171 · 667d171
1 parent 98c5ffb
commit 667d171
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 104 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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 = {