woowacourse-teams · Gilpop8663 · Nov 20, 2023 · Nov 9, 2023 · Nov 9, 2023 · Nov 9, 2023
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -54,5 +54,6 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="toast-content"></div>
   </body>
 </html>
diff --git a/frontend/src/components/ToastContainer/style.ts b/frontend/src/components/ToastContainer/style.ts
@@ -4,11 +4,14 @@ import { theme } from '@styles/theme';
 
 // 컨테이너를 가로중앙에 위치시키기 위해 left = width * 1/2로 설정
 export const Container = styled.div`
-  width: 80%;
+  width: 100vw;
 
   position: fixed;
   bottom: 20vh;
-  left: 10%;
+  left: auto;
+  right: auto;
+
+  padding: 0 10%;
 
   z-index: ${theme.zIndex.toast};
 

diff --git a/frontend/src/components/common/Drawer/DrawerToastWrapper/index.tsx b/frontend/src/components/common/Drawer/DrawerToastWrapper/index.tsx
@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+
+import { ToastContentId } from '@type/toast';
+
+import * as S from './style';
+
+interface DrawerToastWrapperProps extends HTMLAttributes<HTMLDivElement> {
+  id: ToastContentId;
+  placement: 'left' | 'right';
+}
+
+export default function DrawerToastWrapper({ placement, ...rest }: DrawerToastWrapperProps) {
+  return <S.ToastWrapper {...rest} $placement={placement} />;
+}
diff --git a/frontend/src/components/common/Drawer/DrawerToastWrapper/style.ts b/frontend/src/components/common/Drawer/DrawerToastWrapper/style.ts
@@ -0,0 +1,8 @@
+import { styled } from 'styled-components';
+
+export const ToastWrapper = styled.div<{ $placement: 'left' | 'right' }>`
+  position: absolute;
+  width: 100vw;
+  left: ${({ $placement }) => ($placement === 'left' ? '0' : 'auto')};
+  right: ${({ $placement }) => ($placement === 'right' ? '0' : 'auto')};
+`;
diff --git a/frontend/src/components/common/Drawer/index.tsx b/frontend/src/components/common/Drawer/index.tsx
@@ -1,10 +1,4 @@
-import React, {
-  ForwardedRef,
-  KeyboardEvent,
-  MouseEvent,
-  PropsWithChildren,
-  forwardRef,
-} from 'react';
+import { ForwardedRef, KeyboardEvent, MouseEvent, PropsWithChildren, forwardRef } from 'react';
 
 import * as S from './style';
 

diff --git a/frontend/src/hooks/context/toast.tsx b/frontend/src/hooks/context/toast.tsx
@@ -1,4 +1,7 @@
-import { PropsWithChildren, createContext, useEffect, useRef, useState } from 'react';
+import { PropsWithChildren, createContext, useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { ToastContentId } from '@type/toast';
 
 import ToastContainer from '@components/ToastContainer';
 
@@ -11,17 +14,32 @@ export interface ToastInfo {
 
 interface ToastContextProps {
   addMessage: (message: string) => void;
+  setElementId: (id: ToastContentId) => void;
 }
 
 export const ToastContext = createContext<ToastContextProps>({
   addMessage: (message: string) => {},
+  setElementId: () => {},
 });
 
 export default function ToastProvider({ children }: PropsWithChildren) {
   const [toastList, setToastList] = useState<ToastInfo[]>([]);
+  const [toastElementId, setToastElementId] = useState<ToastContentId>('toast-content');
+  const toastContentEl = document.getElementById(toastElementId);
 
   const timeId = useRef<number | null>(null);
 
+  const addMessage = (message: string) => {
+    if (toastList.find(toast => toast.text === message)) return;
+
+    const id = Date.now();
+    setToastList(toastList => [...toastList, { id, text: message }]);
+  };
+
+  const setElementId = useCallback((id: ToastContentId) => {
+    setToastElementId(id);
+  }, []);
+
   useEffect(() => {
     if (timeId.current) window.clearTimeout(timeId.current);
 
@@ -34,16 +52,9 @@ export default function ToastProvider({ children }: PropsWithChildren) {
     }
   }, [toastList]);
 
-  const addMessage = (message: string) => {
-    if (toastList.find(toast => toast.text === message)) return;
-
-    const id = Date.now();
-    setToastList(toastList => [...toastList, { id, text: message }]);
-  };
-
   return (
-    <ToastContext.Provider value={{ addMessage }}>
-      <ToastContainer toastList={toastList} />
+    <ToastContext.Provider value={{ addMessage, setElementId }}>
+      {toastContentEl && createPortal(<ToastContainer toastList={toastList} />, toastContentEl)}
       {children}
     </ToastContext.Provider>
   );

diff --git a/frontend/src/hooks/query/alarm/useReadAlarm.ts b/frontend/src/hooks/query/alarm/useReadAlarm.ts
@@ -11,7 +11,7 @@ export const useReadAlarm = (type: AlarmType) => {
   const alarmQueryKey = type === 'CONTENT' ? QUERY_KEY.ALARM_CONTENT : QUERY_KEY.ALARM_REPORT;
 
   const { mutate } = useMutation({
-    mutationFn: async (alarmId: number) => await readAlarm(alarmId, type),
+    mutationFn: (alarmId: number) => readAlarm(alarmId, type),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [alarmQueryKey] });
     },

diff --git a/frontend/src/hooks/query/report/useReportAction.ts b/frontend/src/hooks/query/report/useReportAction.ts
@@ -15,8 +15,7 @@ export const useReportAction = () => {
   const { addMessage } = useContext(ToastContext);
 
   const { mutate, isLoading, isSuccess, isError, error } = useMutation({
-    mutationFn: async (reportActionData: ReportActionRequest) =>
-      await reportAction(reportActionData),
+    mutationFn: (reportActionData: ReportActionRequest) => reportAction(reportActionData),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.REPORT] });
     },

diff --git a/frontend/src/hooks/query/report/useReportContent.ts b/frontend/src/hooks/query/report/useReportContent.ts
@@ -15,7 +15,7 @@ export const useReportContent = () => {
   const { addMessage } = useContext(ToastContext);
 
   const { mutate, isLoading } = useMutation({
-    mutationFn: async (reportData: ReportRequest) => await reportContent(reportData),
+    mutationFn: (reportData: ReportRequest) => reportContent(reportData),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.REPORT] });
       addMessage('신고를 완료하였습니다.');

diff --git a/frontend/src/hooks/query/useReportApproveResult.tsx b/frontend/src/hooks/query/useReportApproveResult.tsx
@@ -14,11 +14,11 @@ export const useReportApproveResult = (reportId: number) => {
       suspense: true,
 
       retry: (failCount, error) => {
-        // const fetchError = error as Error;
-        // const status = JSON.parse(fetchError.message).status;
-        // if (status === 404) {
-        //   return false;
-        // }
+        const fetchError = error as Error;
+        const status = JSON.parse(fetchError.message).status;
+        if (status === 404) {
+          return false;
+        }
         return failCount <= 3;
       },
     }

diff --git a/frontend/src/hooks/query/user/useReadLatestAlarm.ts b/frontend/src/hooks/query/user/useReadLatestAlarm.ts
@@ -8,7 +8,7 @@ export const useReadLatestAlarm = () => {
   const queryClient = useQueryClient();
 
   const { mutate } = useMutation({
-    mutationFn: async () => await readLatestAlarm(),
+    mutationFn: readLatestAlarm,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.USER_INFO] });
     },

diff --git a/frontend/src/hooks/query/user/useUpdateUserInfo.ts b/frontend/src/hooks/query/user/useUpdateUserInfo.ts
@@ -14,7 +14,7 @@ export const useUpdateUserInfo = () => {
 
   const LOGGED_IN = true;
   const { mutate, isLoading, isSuccess, isError, error } = useMutation({
-    mutationFn: async (userInfo: UpdateUserInfoRequest) => await updateUserInfo(userInfo),
+    mutationFn: (userInfo: UpdateUserInfoRequest) => updateUserInfo(userInfo),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.USER_INFO, LOGGED_IN] });
 

diff --git a/frontend/src/hooks/query/user/useWithdrawalMembership.ts b/frontend/src/hooks/query/user/useWithdrawalMembership.ts
@@ -14,7 +14,7 @@ export const useWithdrawalMembership = () => {
 
   const LOGGED_IN = true;
   const { mutate, isLoading, isSuccess, isError, error } = useMutation({
-    mutationFn: async () => await withdrawalMembership(),
+    mutationFn: withdrawalMembership,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.USER_INFO, LOGGED_IN] });
       addMessage('회원 탈퇴를 완료했습니다.');

diff --git a/frontend/src/hooks/useDrawer.tsx b/frontend/src/hooks/useDrawer.tsx
@@ -28,7 +28,7 @@ export const useDrawer = (placement: 'left' | 'right') => {
 
     drawerRef.current.style.transform =
       placement === 'left' ? 'translateX(-100%)' : 'translateX(100%)';
-  }, []);
+  }, [placement]);
 
   return { drawerRef, openDrawer, closeDrawer };
 };
diff --git a/frontend/src/pages/HomePage/index.tsx b/frontend/src/pages/HomePage/index.tsx
@@ -14,6 +14,7 @@ import AddButton from '@components/common/AddButton';
 import AppInstallPrompt from '@components/common/AppInstallPrompt';
 import Dashboard from '@components/common/Dashboard';
 import Drawer from '@components/common/Drawer';
+import DrawerToastWrapper from '@components/common/Drawer/DrawerToastWrapper';
 import Layout from '@components/common/Layout';
 import NarrowMainHeader from '@components/common/NarrowMainHeader';
 import Skeleton from '@components/common/Skeleton';
@@ -45,6 +46,7 @@ export default function HomePage() {
     closeDrawer: closeAlarmDrawer,
   } = useDrawer('right');
 
+  const { setElementId } = useContext(ToastContext);
   const { isBannerOpen, closeBanner } = useBannerToggle();
   const { addMessage } = useContext(ToastContext);
   const loggedInfo = useContext(AuthContext).loggedInfo;
@@ -55,15 +57,31 @@ export default function HomePage() {
     if (!loggedInfo.isLoggedIn) return addMessage('알림은 로그인 후 이용할 수 있습니다.');
 
     openAlarmDrawer();
+    setElementId('drawer-alarm-toast-content');
     mutate();
   };
 
+  const handleAlarmDrawerClose = () => {
+    closeAlarmDrawer();
+    setElementId('toast-content');
+  };
+
+  const handleCategoryDrawerOpen = () => {
+    openCategoryDrawer();
+    setElementId('drawer-category-toast-content');
+  };
+
+  const handleCategoryDrawerClose = () => {
+    closeCategoryDrawer();
+    setElementId('toast-content');
+  };
+
   return (
     <Layout isSidebarVisible={true} isMobileDefaultHeaderVisible={false}>
       <S.Container>
         <S.HeaderWrapper>
           <NarrowMainHeader
-            handleCategoryOpenClick={openCategoryDrawer}
+            handleCategoryOpenClick={handleCategoryDrawerOpen}
             handleAlarmOpenClick={handleToolTipOpen}
             isAlarmActive={isAlarmActive ?? false}
           />
@@ -79,21 +97,23 @@ export default function HomePage() {
         )}
         <S.DrawerWrapper>
           <Drawer
-            handleDrawerClose={closeCategoryDrawer}
+            handleDrawerClose={handleCategoryDrawerClose}
             placement="left"
             width="225px"
             ref={categoryDrawerRdf}
           >
+            <DrawerToastWrapper placement="left" id="drawer-category-toast-content" />
             <Dashboard />
           </Drawer>
           <Drawer
-            handleDrawerClose={closeAlarmDrawer}
+            handleDrawerClose={handleAlarmDrawerClose}
             placement="right"
             width="310px"
             ref={alarmDrawerRef}
           >
+            <DrawerToastWrapper id="drawer-alarm-toast-content" placement="right" />
             {loggedInfo.isLoggedIn && (
-              <AlarmContainer closeToolTip={closeAlarmDrawer} style={alarmDrawerStyle} />
+              <AlarmContainer closeToolTip={handleAlarmDrawerClose} style={alarmDrawerStyle} />
             )}
           </Drawer>
         </S.DrawerWrapper>

diff --git a/frontend/src/types/toast.ts b/frontend/src/types/toast.ts
@@ -0,0 +1,6 @@
+export type ToastContentId =
+  | 'toast-content'
+  | 'drawer-category-toast-content'
+  | 'drawer-alarm-toast-content';
+
+export type DrawerToastContentId = Exclude<ToastContentId, 'toast-content'>;