From 4c1e45e3a49b5ea3bbd33eca2cac46249c08b6c7 Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Wed, 31 Jul 2024 17:04:40 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=94=8C=EB=A1=9C=ED=8C=85=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=EA=B3=BC=20=EC=B9=B4=EB=93=9C=20=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B2=B9=EC=B9=98=EB=8A=94=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/Button/FloatingButton.tsx    |  4 +++-
 frontend/src/pages/ChecklistListPage.tsx           | 14 ++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/common/Button/FloatingButton.tsx b/frontend/src/components/common/Button/FloatingButton.tsx
index 0c6f714a..7a24c4d0 100644
--- a/frontend/src/components/common/Button/FloatingButton.tsx
+++ b/frontend/src/components/common/Button/FloatingButton.tsx
@@ -10,6 +10,7 @@ type Color = 'yellow' | 'green' | 'subGreen';
 
 interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
+  onClick: () => void;
   size?: Size;
   color?: Color;
   'aria-label'?: string;
@@ -17,6 +18,7 @@ interface Props extends React.HTMLAttributes<HTMLButtonElement> {
 
 const FloatingButton = ({
   children,
+  onClick,
   size = 'medium',
   color = 'yellow',
   'aria-label': ariaLabel = 'add',
@@ -24,7 +26,7 @@ const FloatingButton = ({
 }: 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
index 2417d744..3babc0c0 100644
--- 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 />
     </>
   );