Merge pull request #121 from boostcampwm-2022/refactor/toastMsg

[Refactor] Toast UI 에 전역 상태값 추가
boostcampwm-2022 · Feb 17, 2023 · 4d91bc3 · 4d91bc3
2 parents 5e7e715 + f1d9f61
commit 4d91bc3
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 10 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -20,6 +20,7 @@
 <body>
   <div id="root"></div>
   <div id="modal-root"></div>
+  <div id="toast-root"></div>
 </body>
 
 </html>
diff --git a/frontend/src/Router.tsx b/frontend/src/Router.tsx
@@ -1,7 +1,7 @@
 import React, { lazy, Suspense } from 'react';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { Spinner } from './components/spinner';
-import { ToastMsg } from './components/toastMsg';
+import ToastPortal from './components/toastMsg/ToastPortal';
 import MainLayout from './pages/MainLayout';
 import NotFoundPage from './pages/NotFoundPage';
 
@@ -15,7 +15,7 @@ const DocumentPage = lazy(() => import('./pages/DocumentPage'));
 const Router = () => {
   return (
     <BrowserRouter>
-      <ToastMsg />
+      <ToastPortal />
       <Suspense fallback={<Spinner />}>
         <Routes>
           <Route path="/" element={<LandingPage />} />

diff --git a/frontend/src/atoms/toastMsgAtom.ts b/frontend/src/atoms/toastMsgAtom.ts
@@ -4,7 +4,8 @@ const toastMsgState = atom({
   key: 'toastMsg',
   default: {
     type: 'INIT', 
-    msg: ''
+    msg: '',
+    key: 0,
   }
 });
 

diff --git a/frontend/src/components/toastMsg/ToastMsg.tsx b/frontend/src/components/toastMsg/ToastMsg.tsx
@@ -8,17 +8,17 @@ import { devices } from '../../constants/breakpoints';
 
 const ToastMsg = () => {
   const theme = useTheme();
-  const toastMsg = useRecoilValue(toastMsgState);
+  const {type, msg, key} = useRecoilValue(toastMsgState);
 
   const ICON_SIZE = 24;
-  const TOAST_COLOR = toastMsg.type === 'INFO' 
+  const TOAST_COLOR = type === 'INFO' 
                         ? theme.primary 
                         : theme.caution;
 
-  if (toastMsg.type !== 'INIT') {
+  if (type !== 'INIT') {
     return (
-      <ToastMsgWrapper key={+new Date()} color={TOAST_COLOR}>
-        {toastMsg.type === 'INFO' 
+      <ToastMsgWrapper key={key} color={TOAST_COLOR}>
+        {type === 'INFO' 
           ? <CheckIcon 
               width={ICON_SIZE}
               height={ICON_SIZE} 
@@ -28,7 +28,7 @@ const ToastMsg = () => {
               height={ICON_SIZE} 
               fill={TOAST_COLOR} />
         }
-        <ToastText color={TOAST_COLOR}>{toastMsg.msg}</ToastText>
+        <ToastText color={TOAST_COLOR}>{msg}</ToastText>
       </ToastMsgWrapper>
     );
   } else {

diff --git a/frontend/src/components/toastMsg/ToastPortal.tsx b/frontend/src/components/toastMsg/ToastPortal.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ToastMsg } from './ToastMsg';
+
+const ToastPortal = () => {
+  const toastRoot = document.getElementById('toast-root');
+  return ReactDOM.createPortal(<ToastMsg />, toastRoot as HTMLElement );
+};
+
+export default ToastPortal;
diff --git a/frontend/src/hooks/useToast.ts b/frontend/src/hooks/useToast.ts
@@ -7,7 +7,8 @@ const useToast = () => {
   const alertToast = (type: string, msg: string) => {
     setToastMsg({
       type,
-      msg
+      msg,
+      key: +new Date(),
     });
   };
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,8 @@ const useToast = () => { @@
       const alertToast = (type: string, msg: string) => {
         setToastMsg({
           type,
-          msg
+          msg,
+          key: +new Date(),
         });
       };
@@ Expand Down @@