Merge pull request #111 from woowacourse-teams/feat/#110

참여자 목록을 보여주는 기능 추가

frontend/src/components/MoimDescription/MoimDescription.stories.tsx

@@ -12,7 +12,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    description: '볼 함 차보까?',
+    title: '볼 함 차보까?',
+    children: '내용',
   },
   render: (args) => <MoimDescription {...args} />,
 };

frontend/src/components/MoimDescription/MoimDescription.tsx

@@ -1,20 +1,22 @@
+import { ReactNode } from 'react';
 import * as S from './MoimDescription.style';
 
 interface MoimDescriptionProps {
-  description: string;
+  title: string;
+  children: ReactNode;
 }
 
 export default function MoimDescription(props: MoimDescriptionProps) {
-  const { description } = props;
+  const { title, children } = props;
 
-  if (description === '') {
+  if (title === '') {
     return;
   }
 
   return (
     <div css={S.containerStyle}>
-      <h2 css={S.titleStyle}>상세설명</h2>
-      <p css={S.descriptionStyle}>{description}</p>
+      <h2 css={S.titleStyle}>{title}</h2>
+      <div css={S.descriptionStyle}>{children}</div>
     </div>
   );
 }

frontend/src/pages/MoimDetailPage/MoimDetailPage.tsx

@@ -43,7 +43,18 @@ export default function MoimDetailPage() {
         <MoimSummary moimInfo={moim} />
         <MoimInformation moimInfo={moim} />
 
-        {moim.description && <MoimDescription description={moim.description} />}
+        {moim.description && (
+          <MoimDescription title={'상세설명'}>
+            {moim.description}
+          </MoimDescription>
+        )}
+        {moim.participants && (
+          <MoimDescription title="참여자">
+            {moim.participants.map((nickName) => {
+              return <p key={nickName}>{nickName}</p>;
+            })}
+          </MoimDescription>
+        )}
 
         <LabeledInput
           title="참가자 이름"

frontend/src/types/index.d.ts

@@ -8,7 +8,11 @@ export interface MoimInfo {
   maxPeople: number;
   currentPeople: number;
   authorNickname: string;
+  participants: string[];
   description?: string;
 }
 
-export type MoimInputInfo = Omit<MoimInfo, 'moimId' | 'currentPeople'>;
+export type MoimInputInfo = Omit<
+  MoimInfo,
+  'moimId' | 'currentPeople' | 'participants'
+>;