fix: 플로팅 버튼과 카드 리스트 겹치는 에러 해결

woowacourse-teams · Jul 31, 2024 · 4c1e45e · 4c1e45e
1 parent e28207f
commit 4c1e45e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/frontend/src/components/common/Button/FloatingButton.tsx b/frontend/src/components/common/Button/FloatingButton.tsx
@@ -10,21 +10,23 @@ type Color = 'yellow' | 'green' | 'subGreen';
 
 interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
+  onClick: () => void;
   size?: Size;
   color?: Color;
   'aria-label'?: string;
 }
 
 const FloatingButton = ({
   children,
+  onClick,
   size = 'medium',
   color = 'yellow',
   'aria-label': ariaLabel = 'add',
   ...rest
 }: Props) => {
   return (
     <S.Wrapper>
-      <S.Button size={size} color={color} aria-label={ariaLabel} {...rest}>
+      <S.Button size={size} color={color} aria-label={ariaLabel} onClick={onClick} {...rest}>
         {children}
       </S.Button>
     </S.Wrapper>

diff --git a/frontend/src/pages/ChecklistListPage.tsx b/frontend/src/pages/ChecklistListPage.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { getChecklists } from '@/apis/checklist';
 import { Plus } from '@/assets/assets';
@@ -46,6 +46,10 @@ const ChecklistListPage = () => {
     });
   };
 
+  const handleClickFloatingButton = () => {
+    navigate(ROUTE_PATH.checklistNew);
+  };
+
   return (
     <>
       <Header center={<Header.Text>체크리스트</Header.Text>} />
@@ -61,11 +65,9 @@ const ChecklistListPage = () => {
           ))}
         </S.ListBox>
       </Layout>
-      <Link to={ROUTE_PATH.checklistNew}>
-        <FloatingButton>
-          <Plus />
-        </FloatingButton>
-      </Link>
+      <FloatingButton onClick={handleClickFloatingButton}>
+        <Plus />
+      </FloatingButton>
       <FooterDefault />
     </>
   );