fix: toast 빨간 잔상 해결

woowacourse-teams · Oct 12, 2024 · cd440d5 · cd440d5
1 parent b666062
commit cd440d5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/frontend/src/components/common/Toast/Toast.style.ts b/frontend/src/components/common/Toast/Toast.style.ts
@@ -20,8 +20,8 @@ export const toastSlideOut = keyframes`
 
 export const Wrapper = styled.div<{ $closeAnimation: boolean; $type: ToastType }>`
   position: fixed;
-  right: 50px;
   top: 80px;
+  right: 50px;
 
   display: flex;
   align-items: center;
@@ -43,7 +43,7 @@ export const Wrapper = styled.div<{ $closeAnimation: boolean; $type: ToastType }
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
-    `}
+  `}
 
   animation: ${({ $closeAnimation }) => ($closeAnimation ? toastSlideOut : toastSlideIn)} 0.4s
     ease-in-out forwards;

diff --git a/frontend/src/components/common/Toast/Toast.tsx b/frontend/src/components/common/Toast/Toast.tsx
@@ -1,15 +1,18 @@
 import { useContext, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import * as S from "@/components/common/Toast/Toast.style";
+import { ToastType } from "@/@types/toast";
 import { ToastContext } from "@/providers/ToastProvider";
 
 const Toast = () => {
   const toastContainer = document.getElementById("toast");
   const toastInfo = useContext(ToastContext);
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [currentType, setCurrentType] = useState<ToastType>(toastInfo.type);
 
   useEffect(() => {
     if (toastInfo.isOpen) {
+      setCurrentType(toastInfo.type);
       setIsOpen(true);
       return;
     }
@@ -26,7 +29,7 @@ const Toast = () => {
   }
 
   return createPortal(
-    <S.Wrapper $type={toastInfo.type} $closeAnimation={!toastInfo.isOpen}>
+    <S.Wrapper $type={currentType} $closeAnimation={!toastInfo.isOpen}>
       {toastInfo.message}
     </S.Wrapper>,
     toastContainer,

diff --git a/frontend/src/hooks/common/useToast.ts b/frontend/src/hooks/common/useToast.ts
@@ -1,7 +1,8 @@
 import { useCallback, useContext, useEffect, useRef } from "react";
+import { ToastType } from "@/@types/toast";
 import { ToastContext, ToastDispatchContext } from "@/providers/ToastProvider";
 
-const useToast = (type: "error" | "success" = "error") => {
+const useToast = (type: ToastType = "error") => {
   const isOpenToast = useContext(ToastContext);
   const setIsOpenToast = useContext(ToastDispatchContext);
   const timerRef = useRef<NodeJS.Timeout | null>(null);