feat: 마일스톤 페이지에 갯수 표시

codesquad-masters2024-team02 · May 31, 2024 · cddc09a · cddc09a
1 parent 78fa57c
commit cddc09a
Showing 1 changed file with 16 additions and 5 deletions.
diff --git a/FE/src/components/milestones/Main.jsx b/FE/src/components/milestones/Main.jsx
@@ -1,30 +1,41 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Header from '../header/Header';
 import { FlexRow, IndexContainer, MainContainer } from '../../styles/theme';
 import { TagsOutlined, PlusOutlined } from '@ant-design/icons';
 import { CustomButton } from '../../assets/CustomButton';
 import { IconMilestone } from '../../assets/icons/IconMilestone';
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
+import { useLabelMilestoneCountData } from '../../hooks/useLabelData';
 
 export default function MilestoneMain() {
     const naivgate = useNavigate();
     const clickMileStone = () => naivgate('/milestones');
     const clickLabel = () => naivgate('/labels');
 
+    const { data: countData } = useLabelMilestoneCountData();
+    const [labelCount, setLabelCount] = useState(0);
+    const [milestoneCount, setMilestoneCount] = useState(0);
+
+    useEffect(() => {
+        if (!countData) return;
+        setLabelCount(countData.labelCount.count);
+        setMilestoneCount(countData.milestoneCount.isOpened + countData.milestoneCount.isClosed);
+    }, [countData]);
+
     return (
         <IndexContainer>
             <Header />
             <MainContainer>
                 <NavContainer>
                     <NavBtnContainer>
-                        <StyledLabelBtn type={'container'} size={'large'} isDisabled={false} onClick={clickLabel}>
+                        <StyledLabelBtn type={'outline'} size={'large'} isDisabled={false} onClick={clickLabel}>
                             <TagsOutlined />
-                            레이블(0)
+                            레이블({labelCount})
                         </StyledLabelBtn>
-                        <StyledMilestoneBtn type={'outline'} size={'large'} isDisabled={false} onClick={clickMileStone}>
+                        <StyledMilestoneBtn type={'container'} size={'large'} isDisabled={false} onClick={clickMileStone}>
                             <IconMilestone />
-                            마일스톤(0)
+                            마일스톤({milestoneCount})
                         </StyledMilestoneBtn>
                     </NavBtnContainer>
                     <CustomButton type={'container'} size={'large'} isDisabled={false}>