Feat: #39 props로 전달받은 정보로 모달 메뉴 아이템 렌더링

codesquad-members-2021 · Jun 17, 2021 · b818e65 · b818e65
1 parent 27cd1f7
commit b818e65
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 21 deletions.
diff --git a/FE/issue-tracker/src/components/newIssue/select/AssigneeModal.tsx b/FE/issue-tracker/src/components/newIssue/select/AssigneeModal.tsx
@@ -3,16 +3,29 @@ import { MenuList, MenuOptionGroup, MenuItemOption } from '@chakra-ui/react';
 import { Avatar } from '@chakra-ui/avatar';
 import { modalStyle, modalTitleStyle, modalListStyle } from '../style';
 
-function AssigneeModal() {
+type Props = {
+  assignees: { user_id: number; name: string; avatar_url: string }[] | null;
+};
+
+function AssigneeModal({ assignees }: Props) {
   return (
     <MenuList {...modalStyle}>
       <MenuOptionGroup {...modalTitleStyle} type="checkbox" title="담당자 추가">
-        <MenuItemOption {...modalListStyle} value="Qbabo">
-          <ItemWrap>
-            <Avatar size="sm" src="./janmang.jpeg" />
-            <Text>Qbabo</Text>
-          </ItemWrap>
-        </MenuItemOption>
+        {assignees &&
+          assignees.map(({ user_id, name, avatar_url }) => {
+            return (
+              <MenuItemOption
+                {...modalListStyle}
+                value={user_id.toString()}
+                key={user_id}
+              >
+                <ItemWrap>
+                  <Avatar size="sm" src={avatar_url} />
+                  <Text>{name}</Text>
+                </ItemWrap>
+              </MenuItemOption>
+            );
+          })}
       </MenuOptionGroup>
     </MenuList>
   );

diff --git a/FE/issue-tracker/src/components/newIssue/select/LabelModal.tsx b/FE/issue-tracker/src/components/newIssue/select/LabelModal.tsx
@@ -4,15 +4,36 @@ import { MenuList, MenuOptionGroup, MenuItemOption } from '@chakra-ui/react';
 import Label from '@components/common/Label';
 import { modalStyle, modalTitleStyle, modalListStyle } from '../style';
 
-function LabelModal() {
+type Props = {
+  labels:
+    | {
+        id: number;
+        title: string;
+        description: string;
+        color_code: string;
+        text_color: string;
+      }[]
+    | null;
+};
+
+function LabelModal({ labels }: Props) {
   return (
     <MenuList {...modalStyle}>
       <MenuOptionGroup {...modalTitleStyle} type="checkbox" title="레이블 추가">
-        <MenuItemOption {...modalListStyle} value="Qbabo">
-          <ItemWrap>
-            <Label name="Qbabo" colorCode="#00A5B7" fontLight={true} />
-          </ItemWrap>
-        </MenuItemOption>
+        {labels &&
+          labels.map(({ id, title, color_code }) => {
+            return (
+              <MenuItemOption
+                {...modalListStyle}
+                value={id.toString()}
+                key={id}
+              >
+                <ItemWrap>
+                  <Label name={title} colorCode={color_code} fontLight={true} />
+                </ItemWrap>
+              </MenuItemOption>
+            );
+          })}
       </MenuOptionGroup>
     </MenuList>
   );

diff --git a/FE/issue-tracker/src/components/newIssue/select/MilestoneModal.tsx b/FE/issue-tracker/src/components/newIssue/select/MilestoneModal.tsx
@@ -2,16 +2,34 @@ import styled from 'styled-components';
 import { MenuList, MenuOptionGroup, MenuItemOption } from '@chakra-ui/react';
 import { modalStyle, modalTitleStyle, modalListStyle } from '../style';
 
-function MilestoneModal() {
+type Props = {
+  milestones:
+    | {
+        id: number;
+        title: string;
+        description: string;
+        due_date: string;
+        opend_issue_count: number;
+        closed_issue_count: number;
+      }[]
+    | null;
+};
+
+function MilestoneModal({ milestones }: Props) {
   return (
     <MenuList {...modalStyle}>
       <MenuOptionGroup {...modalTitleStyle} type="radio" title="마일스톤 추가">
-        <MenuItemOption {...modalListStyle} value="DB설계">
-          <ItemWrap>
-            <span className="title">[BE] DB 설계</span>
-            <span className="due_date">No due date</span>
-          </ItemWrap>
-        </MenuItemOption>
+        {milestones &&
+          milestones.map(({ id, title, due_date }) => {
+            return (
+              <MenuItemOption {...modalListStyle} value={id.toString()}>
+                <ItemWrap>
+                  <span className="title">{title}</span>
+                  <span className="due_date">{due_date}</span>
+                </ItemWrap>
+              </MenuItemOption>
+            );
+          })}
       </MenuOptionGroup>
     </MenuList>
   );
@@ -26,7 +44,6 @@ const ItemWrap = styled.div`
     color: ${({ theme }) => theme.colors.gr_titleActive};
     font-size: ${({ theme }) => theme.fontSizes.sm};
     font-weight: ${({ theme }) => theme.fontWeights.bold};
-    margin-bottom: 4px;
   }
   .due_date {
     color: ${({ theme }) => theme.colors.gr_label};