From cddc09a45fcb3437590a695a7aab49cb4c6c9a2b Mon Sep 17 00:00:00 2001
From: minjeongHEO <hmjoung9770@gmail.com>
Date: Fri, 31 May 2024 13:27:45 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=BC=EC=8A=A4=ED=86=A4=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EA=B0=AF=EC=88=98=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/components/milestones/Main.jsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/FE/src/components/milestones/Main.jsx b/FE/src/components/milestones/Main.jsx
index a90dbdd04..916b14dbf 100644
--- a/FE/src/components/milestones/Main.jsx
+++ b/FE/src/components/milestones/Main.jsx
@@ -1,4 +1,4 @@
-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';
@@ -6,25 +6,36 @@ 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}>