refactor: (#738) Drawer와 Toast의 연관 관계가 없도록 변경

woowacourse-teams · Nov 14, 2023 · d1a526b · d1a526b
1 parent 0bf256b
commit d1a526b
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 45 deletions.
diff --git a/frontend/src/components/common/Drawer/Drawer.stories.tsx b/frontend/src/components/common/Drawer/Drawer.stories.tsx
@@ -14,37 +14,25 @@ const meta: Meta<typeof Drawer> = {
 export default meta;
 
 export const LeftSideBar = () => {
-  const { drawerRef, openDrawer, closeDrawer } = useDrawer('left', 'drawer-category-toast-content');
+  const { drawerRef, openDrawer, closeDrawer } = useDrawer('left');
 
   return (
     <div>
       <NarrowMainHeader handleCategoryOpenClick={openDrawer} handleAlarmOpenClick={() => {}} />
-      <Drawer
-        toastContentId="drawer-category-toast-content"
-        width="225px"
-        handleDrawerClose={closeDrawer}
-        placement="left"
-        ref={drawerRef}
-      >
+      <Drawer width="225px" handleDrawerClose={closeDrawer} placement="left" ref={drawerRef}>
         <Dashboard />
       </Drawer>
     </div>
   );
 };
 
 export const RightSideBar = () => {
-  const { drawerRef, openDrawer, closeDrawer } = useDrawer('right', 'drawer-alarm-toast-content');
+  const { drawerRef, openDrawer, closeDrawer } = useDrawer('right');
 
   return (
     <div>
       <NarrowMainHeader handleCategoryOpenClick={openDrawer} handleAlarmOpenClick={() => {}} />
-      <Drawer
-        toastContentId="drawer-alarm-toast-content"
-        width="225px"
-        handleDrawerClose={closeDrawer}
-        placement="right"
-        ref={drawerRef}
-      >
+      <Drawer width="225px" handleDrawerClose={closeDrawer} placement="right" ref={drawerRef}>
         <Dashboard />
       </Drawer>
     </div>

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,21 +1,18 @@
 import { ForwardedRef, KeyboardEvent, MouseEvent, PropsWithChildren, forwardRef } from 'react';
 
-import { DrawerToastContentId } from '@type/toast';
-
 import * as S from './style';
 
 interface DrawerProps extends PropsWithChildren {
   handleDrawerClose: () => void;
   width: string;
   placement: 'left' | 'right';
-  toastContentId: DrawerToastContentId;
 }
 
 const ARIA_MESSAGE =
   '사용자 정보 및 카테고리 정보가 있는 사이드바가 열렸습니다. 사이드바 닫기 버튼을 누르거나 ESC를 누르면 닫을 수 있습니다.';
 
 export default forwardRef(function Drawer(
-  { handleDrawerClose, width, placement, toastContentId, children }: DrawerProps,
+  { handleDrawerClose, width, placement, children }: DrawerProps,
   ref: ForwardedRef<HTMLDialogElement>
 ) {
   const handleCloseClick = (event: MouseEvent<HTMLDialogElement>) => {
@@ -51,7 +48,6 @@ export default forwardRef(function Drawer(
       onClose={handleCloseClick}
       onClick={handleCloseClick}
     >
-      <S.ToastWrapper id={toastContentId} $placement={placement} />
       <S.CloseButton onClick={handleDrawerClose}>사이드바 닫기버튼</S.CloseButton>
       {children}
     </S.Dialog>

diff --git a/frontend/src/components/common/Drawer/style.ts b/frontend/src/components/common/Drawer/style.ts
@@ -32,10 +32,3 @@ export const Dialog = styled.dialog<{
     background-color: rgba(0, 0, 0, 0.35);
   }
 `;
-
-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/hooks/useDrawer.tsx b/frontend/src/hooks/useDrawer.tsx
@@ -1,17 +1,11 @@
-import { useContext, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
-import { DrawerToastContentId } from '@type/toast';
-
-import { ToastContext } from './context/toast';
-
-export const useDrawer = (placement: 'left' | 'right', toastElementId: DrawerToastContentId) => {
+export const useDrawer = (placement: 'left' | 'right') => {
   const drawerRef = useRef<HTMLDialogElement>(null);
-  const { setElementId } = useContext(ToastContext);
 
   const openDrawer = () => {
     if (!drawerRef.current) return;
 
-    setElementId(toastElementId);
     drawerRef.current.showModal();
     drawerRef.current.style.transform = 'translateX(0)';
   };
@@ -21,7 +15,6 @@ export const useDrawer = (placement: 'left' | 'right', toastElementId: DrawerToa
 
     drawerRef.current.style.transform =
       placement === 'left' ? 'translateX(-100%)' : 'translateX(100%)';
-    setElementId('toast-content');
 
     setTimeout(() => {
       if (!drawerRef.current) return;

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';
@@ -38,13 +39,14 @@ export default function HomePage() {
     drawerRef: categoryDrawerRdf,
     openDrawer: openCategoryDrawer,
     closeDrawer: closeCategoryDrawer,
-  } = useDrawer('left', 'drawer-category-toast-content');
+  } = useDrawer('left');
   const {
     drawerRef: alarmDrawerRef,
     openDrawer: openAlarmDrawer,
     closeDrawer: closeAlarmDrawer,
-  } = useDrawer('right', 'drawer-alarm-toast-content');
+  } = 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,23 +97,23 @@ export default function HomePage() {
         )}
         <S.DrawerWrapper>
           <Drawer
-            toastContentId="drawer-category-toast-content"
-            handleDrawerClose={closeCategoryDrawer}
+            handleDrawerClose={handleCategoryDrawerClose}
             placement="left"
             width="225px"
             ref={categoryDrawerRdf}
           >
+            <DrawerToastWrapper placement="left" id="drawer-category-toast-content" />
             <Dashboard />
           </Drawer>
           <Drawer
-            toastContentId="drawer-alarm-toast-content"
-            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>