#83 chore: 피드백 반영 및 자잘한 수정

codesquad-issue-team-05 · Aug 14, 2023 · 94dc462 · 94dc462
1 parent c467312
commit 94dc462
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 25 deletions.
diff --git a/frontend/src/components/milestone/Milestones.tsx b/frontend/src/components/milestone/Milestones.tsx
@@ -22,6 +22,8 @@ type Milestone = {
 export default function Milestones({ data }: { data: Milestone[] }) {
   const [milestoneType, setMilestoneType] = useState<MilestoneType>(open);
 
+  const openMilestoneCount = getOpenMilestoneCount(data);
+  const closedMilestoneCount = getClosedMilestoneCount(data);
   return (
     <Container>
       <Header>
@@ -34,9 +36,7 @@ export default function Milestones({ data }: { data: Milestone[] }) {
               ghost
               flexible>
               열린 마일스톤
-              {getOpenMilestoneCount(data)
-                ? ` (${getOpenMilestoneCount(data)})`
-                : ''}
+              {openMilestoneCount ? ` (${openMilestoneCount})` : ''}
             </Button>
           </li>
           <li>
@@ -47,17 +47,15 @@ export default function Milestones({ data }: { data: Milestone[] }) {
               ghost
               flexible>
               닫힌 마일스톤
-              {getClosedMilestoneCount(data)
-                ? ` (${getClosedMilestoneCount(data)})`
-                : ''}
+              {closedMilestoneCount ? ` (${closedMilestoneCount})` : ''}
             </Button>
           </li>
         </Buttons>
       </Header>
       <Body>
         {data.map((milestone) => (
           <TableElement key={milestone.name + milestone.id}>
-            <Milestone {...{ ...milestone }} />
+            <Milestone {...milestone} />
           </TableElement>
         ))}
       </Body>

diff --git a/frontend/src/pages/Components.tsx b/frontend/src/pages/Components.tsx
@@ -15,14 +15,15 @@ import ColorCodeInput from '../components/common/ColorCodeInput';
 // import Comment from '../components/common/CommentElements';
 import { AppContext } from '../main';
 import { useContext } from 'react';
+import SideBar from '../components/common/SideBar';
 
 export default function Components() {
   const appContext = useContext(AppContext);
   const { changeTheme } = appContext.control;
   return (
     <StyledComponents>
       <Wrapper>
-        <ButtonLarge type="submit" iconName="plus">
+        {/* <ButtonLarge type="submit" iconName="plus">
           BUTTON
         </ButtonLarge>
         <Button type="submit" outline iconName="plus">
@@ -41,7 +42,7 @@ export default function Components() {
           S BUTTON
         </ButtonSmall>
         <ColorCodeInput label="배경색" />
-        {/* <TabButton />
+        <TabButton />
         <InformationTag size="medium" iconName="alertCircle">
           Label
         </InformationTag>
@@ -75,9 +76,9 @@ export default function Components() {
           userInfo={{ userName: '@fuse' }}
           timeStamp="5분 전"
           comment="오늘 점심 뭐 먹죠?"
-        />
+        /> */}
         <SideBar />
-        <FilterBar /> */}
+        {/* <FilterBar /> */}
       </Wrapper>
     </StyledComponents>
   );

diff --git a/frontend/src/pages/Options.tsx b/frontend/src/pages/Options.tsx
@@ -29,20 +29,23 @@ export default function Options() {
   const axiosPrivate = useAxiosPrivate();
 
   useEffect(() => {
-    (async () => {
-      const fetchData =
-        activeOption === labels
-          ? () => axiosPrivate.get('api/labels')
-          : () => axiosPrivate.get('api/milestones');
+    const fetchData = async () => {
+      const requestPath =
+        activeOption === labels ? 'api/labels' : 'api/milestones';
 
-      const res = await fetchData();
-
-      if (activeOption === labels) {
-        setLabelData(res.data.message.labels);
-      } else {
-        setMilestoneData(res.data.message.milestones);
+      try {
+        const res = await axiosPrivate.get(requestPath);
+        if (activeOption === labels) {
+          setLabelData(res.data.message.labels);
+        } else {
+          setMilestoneData(res.data.message.milestones);
+        }
+      } catch (error) {
+        console.error('Error fetching data:', error);
       }
-    })();
+    };
+
+    fetchData();
   }, [activeOption, axiosPrivate]);
 
   return (
@@ -76,10 +79,10 @@ export default function Options() {
             ]}
           />
           <Button type="button" flexible iconName="plus">
-            {activeOption ? '마일스톤' : '레이블'} 추가
+            {activeOption === labels ? '레이블' : '마일스톤'} 추가
           </Button>
         </Toolbar>
-        {activeOption ? (
+        {activeOption === labels ? (
           <Milestones data={milestoneData} />
         ) : (
           <Labels data={labelData} />