Merge branch 'main' of https://github.com/coffee-meet/frontend

package.json

@@ -29,7 +29,7 @@
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.16.0",
     "react-spinners": "^0.13.8",
-    "react-toastify": "^9.1.3",
+    "sonner": "^1.3.1",
     "zod": "^3.22.4",
     "zustand": "^4.4.4",
     "zustand-persist": "^0.4.0"

src/components/common/AppHeader/index.tsx

@@ -80,7 +80,6 @@ const AppHeader = ({ isAuth, isDarkMode, height, toggleDarkMode }: AppHeaderProp
     showToast({
       message: "프로필 정보를 불러오는데 실패했습니다.",
       type: "error",
-      isDarkMode,
     });
     useAuthStore.persist.clearStorage();
     navigate("/login");

src/components/layouts/Layout.tsx

@@ -1,16 +1,23 @@
 import { Outlet } from "react-router-dom";
-import { ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 import styled from "@emotion/styled";
+import { Toaster } from "sonner";
 import Modal from "@/components/common/Modal";
 import { theme } from "@/styles/theme";
+import useThemeStore from "@/store/ThemeStore.tsx";
 
 const Layout = () => {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
+
   return (
     <MainContainer>
+      <Toaster
+        duration={2000}
+        position={"top-center"}
+        theme={isDarkMode ? "dark" : "light"}
+        richColors
+      />
       <Modal />
       <Outlet />
-      <ToastContainer />
     </MainContainer>
   );
 };