Merge pull request #141 from js43o/mocking-mogaco-detail

[Feat] 모각코 상세 게시글 페이지 읽기 구현
boostcampwm2023 · Nov 23, 2023 · 47e4c1f · 47e4c1f
2 parents 9abe520 + b23e38e
commit 47e4c1f
Show file tree

Hide file tree

Showing 15 changed files with 262 additions and 110 deletions.
diff --git a/app/frontend/src/components/MogacoDetail/DetailContent.tsx b/app/frontend/src/components/MogacoDetail/DetailContent.tsx
diff --git a/app/frontend/src/components/MogacoDetail/DetailContents.tsx b/app/frontend/src/components/MogacoDetail/DetailContents.tsx
@@ -0,0 +1,7 @@
+type DetailContentsProps = {
+  contents: string;
+};
+
+export function DetailContents({ contents }: DetailContentsProps) {
+  return <div>{contents}</div>;
+}
diff --git a/app/frontend/src/components/MogacoDetail/DetailHeader.tsx b/app/frontend/src/components/MogacoDetail/DetailHeader.tsx
@@ -1,18 +1,48 @@
+import { useState, useEffect } from 'react';
+
+import { UserChip } from '@/components';
+import { member } from '@/services';
 import { sansBold24 } from '@/styles/font.css';
+import { UserInfo } from '@/types';
 
 import { DetailHeaderButtons } from './DetailHeaderButtons';
 import * as styles from './index.css';
 
 type DetailHeaderProps = {
-  state: 'not-participated' | 'participated' | 'hosted';
+  memberId: string;
+  title: string;
+  status: '모집 중' | '마감' | '종료';
 };
 
-export function DetailHeader({ state }: DetailHeaderProps) {
+export function DetailHeader({ memberId, title, status }: DetailHeaderProps) {
+  const [user, setUser] = useState<UserInfo | null>(null);
+
+  useEffect(() => {
+    if (user) {
+      return;
+    }
+
+    const getUser = async () => {
+      const data = await member.userInfoById(memberId);
+      setUser(data);
+    };
+
+    getUser();
+  }, [user, memberId]);
+
   return (
     <div className={styles.header}>
-      <div className={sansBold24}>모각코 함께 해요</div>
-      <div className={styles.buttons}>
-        <DetailHeaderButtons state={state} />
+      <div className={styles.title}>
+        <div className={sansBold24}>{title}</div>
+        <div className={styles.buttons}>
+          <DetailHeaderButtons status={status} />
+        </div>
+      </div>
+      <div className={styles.writer}>
+        {user && (
+          <UserChip username={user.nickname} profileSrc={user.profilePicture} />
+        )}
+        <span>부스트캠프 웹·모바일 8기</span>
       </div>
     </div>
   );

diff --git a/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx b/app/frontend/src/components/MogacoDetail/DetailHeaderButtons.tsx
@@ -1,43 +1,55 @@
 import { Button } from '@/components';
 
+const buttonComponents = {
+  participating: (
+    <Button theme="primary" shape="fill" size="large">
+      참석하기
+    </Button>
+  ),
+  participated: (
+    <>
+      <Button theme="primary" shape="fill" size="large">
+        채팅
+      </Button>
+      <Button theme="danger" shape="fill" size="large">
+        참석 취소
+      </Button>
+    </>
+  ),
+  hosted: (
+    <>
+      <Button theme="primary" shape="line" size="large">
+        수정
+      </Button>
+      <Button theme="danger" shape="line" size="large">
+        삭제
+      </Button>
+    </>
+  ),
+  closed: (
+    <Button theme="primary" shape="fill" size="large" disabled>
+      마감
+    </Button>
+  ),
+};
+
 type DetailHeaderButtonsProps = {
-  state: 'not-participated' | 'participated' | 'hosted';
+  status: '모집 중' | '마감' | '종료';
 };
 
-export function DetailHeaderButtons({ state }: DetailHeaderButtonsProps) {
-  if (state === 'not-participated') {
-    return (
-      <Button theme="primary" shape="fill" size="large">
-        참석하기
-      </Button>
-    );
-  }
+export function DetailHeaderButtons({ status }: DetailHeaderButtonsProps) {
+  const userHosted = false;
+  const userParticipated = false;
 
-  if (state === 'participated') {
-    return (
-      <>
-        <Button theme="primary" shape="fill" size="large">
-          채팅
-        </Button>
-        <Button theme="primary" shape="line" size="large">
-          참석 취소
-        </Button>
-      </>
-    );
+  if (userHosted) {
+    return buttonComponents.hosted;
   }
 
-  if (state === 'hosted') {
-    return (
-      <>
-        <Button theme="primary" shape="line" size="large">
-          수정
-        </Button>
-        <Button theme="danger" shape="line" size="large">
-          삭제
-        </Button>
-      </>
-    );
+  if (status === '모집 중') {
+    return userParticipated
+      ? buttonComponents.participated
+      : buttonComponents.participating;
   }
 
-  return null;
+  return buttonComponents.closed;
 }
diff --git a/app/frontend/src/components/MogacoDetail/DetailInfo.tsx b/app/frontend/src/components/MogacoDetail/DetailInfo.tsx
@@ -1,28 +1,30 @@
 import { useState } from 'react';
 
+import dayjs from 'dayjs';
+
 import { ReactComponent as ArrowDown } from '@/assets/icons/arrow_down.svg';
 import { ReactComponent as Calendar } from '@/assets/icons/calendar_large.svg';
 import { ReactComponent as Map } from '@/assets/icons/map_large.svg';
 import { ReactComponent as People } from '@/assets/icons/people_large.svg';
 import { UserChip } from '@/components';
 import { MAP_SAMPLE_IMAGE } from '@/constants';
 import { vars } from '@/styles';
-import { UserInfo } from '@/types';
+import { Participant } from '@/types';
 
 import * as styles from './index.css';
 
 type DetailInfoProps = {
-  participants: UserInfo[];
-  maxParticipantsNumber: number;
-  datetime: string;
-  location: string;
+  participantList: Participant[];
+  maxHumanCount: number;
+  date: string;
+  address: string;
 };
 
 export function DetailInfo({
-  participants,
-  maxParticipantsNumber,
-  datetime,
-  location,
+  participantList,
+  maxHumanCount,
+  date,
+  address,
 }: DetailInfoProps) {
   const [participantsShown, setParticipantsShown] = useState(false);
 
@@ -34,8 +36,7 @@ export function DetailInfo({
       <div className={styles.infoItem}>
         <People fill={vars.color.grayscale200} />
         <span>
-          <span>{participants.length}</span>/
-          <span>{maxParticipantsNumber}</span>
+          <span>{participantList.length}</span>/<span>{maxHumanCount}</span>
         </span>
         <button
           type="button"
@@ -52,21 +53,21 @@ export function DetailInfo({
           participantsShown ? styles.shown : ''
         }`}
       >
-        {participants.map((participant) => (
+        {participantList.map((participant) => (
           <UserChip
-            key={participant.providerId}
+            key={participant.id}
             username={participant.nickname}
-            profileSrc={participant.profilePicture}
+            profileSrc={participant.profile}
           />
         ))}
       </div>
       <div className={styles.infoItem}>
         <Calendar fill={vars.color.grayscale200} />
-        <span>{datetime}</span>
+        <span>{dayjs(date).format('YYYY/MM/DD HH:mm~')}</span>
       </div>
       <div className={styles.infoItem}>
         <Map fill={vars.color.grayscale200} />
-        <span>{location}</span>
+        <span>{address}</span>
       </div>
       <img src={MAP_SAMPLE_IMAGE} alt="맵 샘플 이미지" className={styles.map} />
     </div>

diff --git a/app/frontend/src/components/MogacoDetail/index.css.ts b/app/frontend/src/components/MogacoDetail/index.css.ts
@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
 import { vars } from '@/styles';
-import { sansRegular16 } from '@/styles/font.css';
+import { sansBold16, sansRegular16 } from '@/styles/font.css';
 
 export const buttons = style({
   display: 'flex',
@@ -18,11 +18,11 @@ export const container = style([
     lineHeight: '1.6',
   },
 ]);
+
 export const header = style({
   display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  flexGrow: 1,
+  flexDirection: 'column',
+  gap: '0.4rem',
 });
 
 export const horizontalLine = style({
@@ -67,6 +67,13 @@ export const participants = style({
 
 export { shown };
 
+export const title = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  flexGrow: 1,
+});
+
 export const togglePeopleButton = style({
   display: 'flex',
   padding: '0.25rem',
@@ -87,3 +94,12 @@ export const wrapper = style({
   flexDirection: 'column',
   alignItems: 'center',
 });
+
+export const writer = style([
+  sansBold16,
+  {
+    display: 'flex',
+    gap: '1.6rem',
+    color: vars.color.grayscale200,
+  },
+]);
diff --git a/app/frontend/src/components/MogacoDetail/index.tsx b/app/frontend/src/components/MogacoDetail/index.tsx
@@ -1,43 +1,33 @@
-import { DetailContent } from './DetailContent';
+import { Mogaco } from '@/types';
+
+import { DetailContents } from './DetailContents';
 import { DetailHeader } from './DetailHeader';
 import { DetailInfo } from './DetailInfo';
 import * as styles from './index.css';
 
-const participants = [
-  {
-    providerId: '1',
-    profilePicture:
-      'https://avatars.githubusercontent.com/u/50646827?s=400&v=4',
-    nickname: '지승',
-    email: '.',
-  },
-  {
-    providerId: '2',
-    profilePicture: 'https://avatars.githubusercontent.com/u/43867711?s=64&v=4',
-    nickname: '태림',
-    email: '',
-  },
-  {
-    providerId: '3',
-    profilePicture:
-      'https://avatars.githubusercontent.com/u/110762136?s=64&v=4',
-    nickname: '지원',
-    email: '',
-  },
-];
+type MogacoDetailProps = Mogaco;
 
-export function MogacoDetailPage() {
+export function MogacoDetailPage({
+  memberId,
+  title,
+  maxHumanCount,
+  participantList,
+  date,
+  address,
+  contents,
+  status,
+}: MogacoDetailProps) {
   return (
     <div className={styles.wrapper}>
       <div className={styles.container}>
-        <DetailHeader state="participated" />
+        <DetailHeader title={title} status={status} memberId={memberId} />
         <DetailInfo
-          participants={participants}
-          maxParticipantsNumber={5}
-          datetime="2023/11/7 14:00~19:00"
-          location="서울 관악구 남현3길 71 크레이저 커피"
+          participantList={participantList}
+          maxHumanCount={maxHumanCount}
+          date={date}
+          address={address}
         />
-        <DetailContent content="사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다. 사당역에서 부스트캠프 모락 팀이 모입니다." />
+        <DetailContents contents={contents} />
         <hr className={styles.horizontalLine} />
       </div>
     </div>

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/handlers.ts b/app/frontend/src/mocks/handlers.ts
@@ -1,4 +1,4 @@
 import { memberAPIHandlers } from './members';
-import { mogacoAPIHandlers } from './mogacos';
+import { mogacoAPIHandlers } from './mogaco';
 
 export const mockAPIhandlers = [...memberAPIHandlers, ...mogacoAPIHandlers];