Fe/dev2 (#106)

* WIP: 깃허브 로그인 중 * WIP: 깃허브 로그인 * feat: 로컬 스토리지 토큰 읽어오기 * feat: authorization 추가 * fix: authorization 변수에 할당하여 지정 * feat: credentials 헤더 속성 추가 * refactor: strict 모드 주석 해제 * style: 주석 제거 및 margin추가 * feat: header 에 origin 추가 * style: 주석 제거 및 로딩스피너 추가 * design: 깃허브 아이콘 추가 * feat: input 엔터 키다운 이벤트 * fix: props 복원 * refactor: 열린, 닫힌 이슈 개수 * style: 따옴표 제거 * feat: 마일스톤 페이지에 갯수 표시
codesquad-masters2024-team02 · May 31, 2024 · e1868b0 · e1868b0
1 parent 9ddd102
commit e1868b0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/FE/src/components/issues/Main.jsx b/FE/src/components/issues/Main.jsx
@@ -70,6 +70,11 @@ const initFetched = {
 };
 const resetListData = { id: null, title: null, createDate: null, milestoneName: null, author: null, assignees: null, labels: null };
 
+const initIssueCount = {
+    isOpen: 0,
+    isClosed: 0,
+};
+
 export default function Main() {
     const navigate = useNavigate();
     const { state: selectedFilters, dispatch } = useFilterContext();
@@ -81,6 +86,7 @@ export default function Main() {
     const [hasFetched, setHasFetched] = useState(initFetched);
     const [labelCount, setLabelCount] = useState(0);
     const [milestoneCount, setMilestoneCount] = useState(0);
+    const [issueCount, setIssueCount] = useState(initIssueCount);
 
     const { data: countData } = useLabelMilestoneCountData();
     const { data: issueList, isLoading: issueListIsLoading } = usefilteredIssueData();
@@ -205,6 +211,7 @@ export default function Main() {
         const newIsOpenCount = issueListCount.openedIssueCount;
         const newIsClosedCount = issueListCount.closedIssueCount;
 
+        setIssueCount({ isOpen: issueList.count.openedCount, isClosed: issueList.count.closedCount });
         const newIssueList = issueList.filteredIssues;
         setIssueDatas((prev) => ({ ...prev, count: { ...prev.count, isOpen: newIsOpenCount } }));
         setIssueDatas((prev) => ({ ...prev, count: { ...prev.count, isClosed: newIsClosedCount } }));
@@ -276,14 +283,16 @@ export default function Main() {
                         />
                     ) : (
                         <NavFilterType
-                            issueCount={issueDatas.count}
+                            issueCount={issueCount}
                             dispatchTypeByFilterContents={dispatchTypeByFilterContents}
                             imageTypeItems={filterItemsByType.members}
                             labelTypeItems={filterItemsByType.labels}
                             milestoneTypeItems={filterItemsByType.milestones}
                             dispatch={dispatch}
                             ischecked={selectedFilters.issues.isClosed}
                             handleMouseEnter={handleMouseEnter}
+                            labelCount={labelCount}
+                            milestoneCount={milestoneCount}
                         />
                     )}
                 </StyledBoxHeader>

diff --git a/FE/src/components/labels/LabelEditor.jsx b/FE/src/components/labels/LabelEditor.jsx
@@ -228,12 +228,12 @@ export default function LabelEditor({ isNew = true, togglePlusLabelState, toggle
                     {isNew ? (
                         <>
                             <PlusOutlined />
-                            '완료'
+                            완료
                         </>
                     ) : (
                         <>
                             <IconEdit />
-                            '편집 완료'
+                            편집 완료
                         </>
                     )}
                 </CustomButton>

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}>