✏️ 데이터 스키마와 프로퍼티명 일치화

boostcampwm2023 · Nov 22, 2023 · 0cf538e · 0cf538e
1 parent 5fda3aa
commit 0cf538e
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 26 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/DetailInfo.tsx b/app/frontend/src/components/MogacoDetail/DetailInfo.tsx
@@ -1,5 +1,7 @@
 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';
@@ -12,17 +14,17 @@ import { Participant } from '@/types';
 import * as styles from './index.css';
 
 type DetailInfoProps = {
-  participants: Participant[];
-  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,7 +53,7 @@ export function DetailInfo({
           participantsShown ? styles.shown : ''
         }`}
       >
-        {participants.map((participant) => (
+        {participantList.map((participant) => (
           <UserChip
             key={participant.id}
             username={participant.nickname}
@@ -62,11 +63,11 @@ export function DetailInfo({
       </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.tsx b/app/frontend/src/components/MogacoDetail/index.tsx
@@ -1,6 +1,6 @@
 import { MogacoProps } from '@/types';
 
-import { DetailContent } from './DetailContent';
+import { DetailContents } from './DetailContents';
 import { DetailHeader } from './DetailHeader';
 import { DetailInfo } from './DetailInfo';
 import * as styles from './index.css';
@@ -20,12 +20,12 @@ export function MogacoDetailPage({
       <div className={styles.container}>
         <DetailHeader title={title} status={status} />
         <DetailInfo
-          participants={participantList}
-          maxParticipantsNumber={maxHumanCount}
-          datetime={date}
-          location={address}
+          participantList={participantList}
+          maxHumanCount={maxHumanCount}
+          date={date}
+          address={address}
         />
-        <DetailContent content={contents} />
+        <DetailContents contents={contents} />
         <hr className={styles.horizontalLine} />
       </div>
     </div>