From 36e0a3dced2f3f922ae7131d4fe6f164f29f11d9 Mon Sep 17 00:00:00 2001 From: Jiseung Date: Wed, 22 Nov 2023 15:55:00 +0900 Subject: [PATCH 01/10] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=EB=AA=A8?= =?UTF-8?q?=EA=B0=81=EC=BD=94=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20props=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/frontend/src/types/mogaco.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/frontend/src/types/mogaco.ts b/app/frontend/src/types/mogaco.ts index 7a9bc7298..59f6d4441 100644 --- a/app/frontend/src/types/mogaco.ts +++ b/app/frontend/src/types/mogaco.ts @@ -5,15 +5,11 @@ export type MogacoDetailProps = MogacoProps & { export type MogacoProps = { id: string; groupId: string; - // group: string; memberId: string; // 작성자 title: string; contents: string; date: string; participantList: Participant[]; // 참석자 - maxHumanCount: number; - address: string; - status: string; }; export type Participant = { From 76c6008f74ccc7e25be2a636b4c6c43503010763 Mon Sep 17 00:00:00 2001 From: Jiseung Date: Wed, 22 Nov 2023 16:32:48 +0900 Subject: [PATCH 02/10] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=EB=90=9C=20=ED=83=80=EC=9E=85=EC=97=90=20=EB=A7=9E=EC=B6=B0=20?= =?UTF-8?q?Detail=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MogacoDetail/DetailHeader.tsx | 9 ++-- .../MogacoDetail/DetailHeaderButtons.tsx | 10 ++-- .../components/MogacoDetail/DetailInfo.tsx | 8 +-- .../src/components/MogacoDetail/index.tsx | 50 +++++++------------ 4 files changed, 33 insertions(+), 44 deletions(-) diff --git a/app/frontend/src/components/MogacoDetail/DetailHeader.tsx b/app/frontend/src/components/MogacoDetail/DetailHeader.tsx index 4a620e039..132130347 100644 --- a/app/frontend/src/components/MogacoDetail/DetailHeader.tsx +++ b/app/frontend/src/components/MogacoDetail/DetailHeader.tsx @@ -4,15 +4,16 @@ import { DetailHeaderButtons } from './DetailHeaderButtons'; import * as styles from './index.css'; type DetailHeaderProps = { - state: 'not-participated' | 'participated' | 'hosted'; + title: string; + status: string; }; -export function DetailHeader({ state }: DetailHeaderProps) { +export function DetailHeader({ title, status }: DetailHeaderProps) { return (
-
모각코 함께 해요
+
{title}
- +
); diff --git a/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx b/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx index 6bf0454c0..e64e44564 100644 --- a/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx +++ b/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx @@ -1,11 +1,11 @@ import { Button } from '@/components'; type DetailHeaderButtonsProps = { - state: 'not-participated' | 'participated' | 'hosted'; + status: string; }; -export function DetailHeaderButtons({ state }: DetailHeaderButtonsProps) { - if (state === 'not-participated') { +export function DetailHeaderButtons({ status }: DetailHeaderButtonsProps) { + if (status === '모집 중') { return ( + ), + 마감: ( + <> - ); - } - - if (status === '마감') { - return ( - <> - - - - ); - } - - if (status === '종료') { - return ( - <> - - - - ); - } + + + ), + 종료: ( + <> + + + + ), +}; - return null; +export function DetailHeaderButtons({ status }: DetailHeaderButtonsProps) { + return status ? buttonComponents[status as '모집 중' | '마감' | '종료'] : ''; } From 31f81b35dc90d61a00a18f2f450ec055fea3ed9a Mon Sep 17 00:00:00 2001 From: Jiseung Date: Thu, 23 Nov 2023 10:57:41 +0900 Subject: [PATCH 09/10] =?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 ( -
+
+ ); 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({ + HttpResponse.json({ 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(null); + const [mogacoData, setMogacoData] = useState(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(mogaco.endPoint.list); + const { data } = await morakAPI.get(mogaco.endPoint.list); return data; }, - mogacoDetail: async () => { - const { data } = await morakAPI.get(mogaco.endPoint.detail); + detail: async () => { + const { data } = await morakAPI.get(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 = { From b23e38e3586f9ff5c3d56192879018255cfd4df9 Mon Sep 17 00:00:00 2001 From: Jiseung Date: Thu, 23 Nov 2023 11:26:51 +0900 Subject: [PATCH 10/10] =?UTF-8?q?=F0=9F=90=9B=20=EC=9E=98=EB=AA=BB?= =?UTF-8?q?=EB=90=9C=20=EB=B2=84=ED=8A=BC=20=EB=B6=84=EA=B8=B0=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 --- .../components/MogacoDetail/DetailHeader.tsx | 2 +- .../MogacoDetail/DetailHeaderButtons.tsx | 36 ++++++++++++++----- 2 files changed, 28 insertions(+), 10 deletions(-) diff --git a/app/frontend/src/components/MogacoDetail/DetailHeader.tsx b/app/frontend/src/components/MogacoDetail/DetailHeader.tsx index 377444f1c..00253fb84 100644 --- a/app/frontend/src/components/MogacoDetail/DetailHeader.tsx +++ b/app/frontend/src/components/MogacoDetail/DetailHeader.tsx @@ -11,7 +11,7 @@ import * as styles from './index.css'; type DetailHeaderProps = { memberId: string; title: string; - status: string; + status: '모집 중' | '마감' | '종료'; }; export function DetailHeader({ memberId, title, status }: DetailHeaderProps) { diff --git a/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx b/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx index 88e3f25be..55843913b 100644 --- a/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx +++ b/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx @@ -1,26 +1,22 @@ import { Button } from '@/components'; -type DetailHeaderButtonsProps = { - status: string; -}; - const buttonComponents = { - '모집 중': ( + participating: ( ), - 마감: ( + participated: ( <> - ), - 종료: ( + hosted: ( <> ), + closed: ( + + ), +}; + +type DetailHeaderButtonsProps = { + status: '모집 중' | '마감' | '종료'; }; export function DetailHeaderButtons({ status }: DetailHeaderButtonsProps) { - return status ? buttonComponents[status as '모집 중' | '마감' | '종료'] : ''; + const userHosted = false; + const userParticipated = false; + + if (userHosted) { + return buttonComponents.hosted; + } + + if (status === '모집 중') { + return userParticipated + ? buttonComponents.participated + : buttonComponents.participating; + } + + return buttonComponents.closed; }