From 1f38c86a86596687a0d286ca6f5439a034fddc50 Mon Sep 17 00:00:00 2001
From: nangkyeonglim <nangkyeonglim@gmail.com>
Date: Tue, 15 Aug 2023 23:03:54 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20`Toast`=20=EC=BB=A4=EB=A7=81=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20css=20pro?=
 =?UTF-8?q?ps=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/@common/Toast/Toast.tsx     | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/@common/Toast/Toast.tsx b/frontend/src/components/@common/Toast/Toast.tsx
index 2a6d690d4..ae868154f 100644
--- a/frontend/src/components/@common/Toast/Toast.tsx
+++ b/frontend/src/components/@common/Toast/Toast.tsx
@@ -37,15 +37,13 @@ const Toast = ({
 
   const hideToast: HideToast = () => setIsVisible(false);
 
-  const removeToast =
-    (toastId: number): AnimationEventHandler<HTMLDivElement> =>
-    () => {
-      onClose(toastId);
-    };
+  const removeToast = (toastId: number) => {
+    onClose(toastId);
+  };
 
   return (
-    <AnimationDiv isVisible={isVisible} onDisappear={removeToast(toastId)}>
-      <S.ToastContainer $theme={theme} $type={type}>
+    <AnimationDiv isVisible={isVisible} onDisappear={() => removeToast(toastId)}>
+      <S.ToastContainer $toastTheme={theme} $type={type}>
         <S.Content>
           <span>{message}</span>
           {hasCloseButton && (
@@ -66,14 +64,14 @@ export default Toast;
 
 const S = {
   ToastContainer: styled.div<{
-    $theme: ToastTheme;
+    $toastTheme: ToastTheme;
     $type: ToastType;
   }>`
     position: relative;
     width: fit-content;
     padding: 1.2rem 2.4rem;
-    background-color: ${({ theme, $type, $theme }) =>
-      $theme === 'light' ? theme.color.gray1 : theme.toastColor[$type].background};
+    background-color: ${({ theme, $type, $toastTheme }) =>
+      $toastTheme === 'light' ? theme.color.gray1 : theme.toastColor[$type].background};
     border: 1px solid ${({ theme, $type }) => theme.toastColor[$type].border};
     border-radius: 8px;
     box-shadow: