Merge pull request #315 from SCBJ-7/feature/##275-toast

[#275] path가 바뀔 때마다 토스트 상태 리셋

Author: im-na0

src/App.tsx

@@ -2,14 +2,21 @@ import IsLogin from "@components/isLogin/IsLogin";
 import ScrollToTop from "@components/scrollToTop/ScrollToTop";
 import Toast from "@components/toast/Toast";
 import { AnimatePresence } from "framer-motion";
-import { Outlet } from "react-router-dom";
+import { useEffect } from "react";
+import { Outlet, useLocation } from "react-router-dom";
 
 import "./firebase.ts";
 
 import { useToastStore } from "./store/store";
 
 const App = () => {
+  const location = useLocation();
   const toastConfig = useToastStore((state) => state.config);
+  const resetToast = useToastStore((state) => state.resetToast);
+
+  useEffect(() => {
+    resetToast();
+  }, [location, resetToast]);
 
   return (
     <IsLogin>

src/components/toast/Toast.tsx

@@ -14,7 +14,7 @@ const Toast = () => {
         duration: 0.3,
         type: "spring",
         stiffness: 60,
-        delay: 0.5,
+        delay: 0,
       },
     },
     hidden: {

src/pages/paymentPage/Payment.tsx

@@ -1,3 +1,14 @@
+import Caption from "@components/caption/Caption";
+import Modal from "@components/modal/Modal";
+import { paymentCaptions } from "@constants/caption";
+import { isAxiosError } from "axios";
+import { useEffect, useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+
+import PaymentButton from "./components/paymentButton/PaymentButton";
+import * as S from "./Payment.style";
+
 import { ERROR_CODE } from "@/constants/api";
 import { PATH } from "@/constants/path";
 import {
@@ -9,16 +20,6 @@ import PaymentInfoSection from "@/pages/paymentPage/components/paymentInfoSectio
 import PaymentMethodSection from "@/pages/paymentPage/components/paymentMethodSection/PaymentMethodSection";
 import TermsAgreementSection from "@/pages/paymentPage/components/termsAgreementSection/TermsAgreementSection";
 import UserInfoSection from "@/pages/paymentPage/components/userInfoSection/UserInfoSection";
-import Caption from "@components/caption/Caption";
-import Modal from "@components/modal/Modal";
-import { paymentCaptions } from "@constants/caption";
-import { isAxiosError } from "axios";
-import { useEffect, useState } from "react";
-import { FormProvider, useForm } from "react-hook-form";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
-
-import PaymentButton from "./components/paymentButton/PaymentButton";
-import * as S from "./Payment.style";
 
 interface PaymentProps {
   action: "default" | "cancel" | "ready";

src/store/store.ts

@@ -70,6 +70,7 @@ export type configType = {
 interface ToastStates {
   config: configType;
   setToastConfig: (updatedConfig: configType) => void;
+  resetToast: () => void;
 }
 
 export const useToastStore = create<ToastStates>((set) => ({
@@ -85,6 +86,14 @@ export const useToastStore = create<ToastStates>((set) => ({
         ...updated,
       },
     })),
+  resetToast: () =>
+    set(() => ({
+      config: {
+        isShow: false,
+        isError: false,
+        strings: [],
+      },
+    })),
 }));
 
 interface SearchState {