Merge pull request #274 from BY-juun/master

Feature: Overlay Animation 추가 ,Auth Modal 통합, MobileMenu 컴포넌트를 Overlay Context를 이용해 관리

client/Hooks/index.ts

@@ -6,4 +6,4 @@ export { default as useRestoreSrollPos } from "./useRestoreScrollPos";
 export { default as useScrollIntoElement } from "./useScrollIntoElement";
 export { default as useVerticalScrollHandler } from "./useVerticalScrollHandler";
 export { default as useInput } from "./useInput";
-export { default as useModals } from "./useModals";
+export { default as useOverlay } from "./useOverlay";

client/Hooks/useOverlay.ts

@@ -0,0 +1,20 @@
+import { useOverlayDispatchContext } from "@contexts/overlayContex";
+
+const useOverlay = () => {
+  const { open, close } = useOverlayDispatchContext();
+
+  const openOverlay: typeof open = (Component, props) => {
+    open(Component, props);
+  };
+
+  const closeOverlay: typeof close = (Component) => {
+    close(Component);
+  };
+
+  return {
+    openOverlay,
+    closeOverlay,
+  };
+};
+
+export default useOverlay;

client/app/layout.tsx

@@ -4,7 +4,7 @@ import "react-toastify/dist/ReactToastify.css";
 
 import Header from "@components/Header";
 import Providers from "@components/Providers";
-import { Modals } from "@components/shared/Modals";
+import Overlays from "@components/shared/Overlays";
 import MyToastContainer from "@components/shared/MyToastContainer";
 import { PropsWithChildren } from "react";
 import ProgressBar from "@components/shared/ProgressBar";
@@ -31,7 +31,7 @@ const RootLayout = ({ children }: PropsWithChildren) => {
           <Header />
           <section className={styles.layout}>
             {children}
-            <Modals />
+            <Overlays />
             <MyToastContainer />
             <ProgressBar />
           </section>

client/components/Header/AuthButton.tsx

@@ -3,15 +3,15 @@ import styles from "./styles.module.scss";
 import { toast } from "react-toastify";
 import { MESSAGE } from "@constants";
 import { useLogOut } from "@hooks/query";
-import useModals from "@hooks/useModals";
-import { MODALS } from "@components/shared/Modals/Modals";
+import { useOverlay } from "@hooks";
+import { OVERLAYS } from "@components/shared/Overlays/Overlays";
 
 interface AuthButtonProps {
   isLoggedIn: boolean;
 }
 
 const AuthButton = ({ isLoggedIn }: AuthButtonProps) => {
-  const { openModal } = useModals();
+  const { openOverlay } = useOverlay();
 
   const { mutate: logoutMutate } = useLogOut({
     onSuccess: () => toast.success(MESSAGE.LOGOUT_SUCCESS),
@@ -21,7 +21,7 @@ const AuthButton = ({ isLoggedIn }: AuthButtonProps) => {
     if (isLoggedIn) {
       logoutMutate();
     } else {
-      openModal(MODALS.LOGIN);
+      openOverlay(OVERLAYS.AUTH_MODAL, { type: "LOGIN" });
     }
   };
 

client/components/Header/MobileMenuToggleButton.tsx

@@ -1,19 +1,21 @@
 import React from "react";
 import { HiMenu } from "react-icons/hi";
 import styles from "./styles.module.scss";
-import MobileMenu from "./MobileMenu";
-import { useBooleanState } from "@hooks";
+import { useOverlay } from "@hooks";
+import { OVERLAYS } from "@components/shared/Overlays/Overlays";
 
 const MobileMenuToggleButton = () => {
-  const [isOpen, , close, toggleState] = useBooleanState(false);
+  const { openOverlay } = useOverlay();
 
   return (
-    <>
-      <button className={styles.MobileMenuToggleButton} onClick={toggleState}>
-        <HiMenu />
-      </button>
-      <MobileMenu isOpen={isOpen} handleClose={close} />
-    </>
+    <button
+      className={styles.MobileMenuToggleButton}
+      onClick={() => {
+        openOverlay(OVERLAYS.MOBILE_MENU);
+      }}
+    >
+      <HiMenu />
+    </button>
   );
 };
 

client/components/Header/styles.module.scss

@@ -154,55 +154,6 @@
   }
 }
 
-.MobileMenu {
-  gap: 32px;
-  background-color: var(--slight-layer2);
-  transition-duration: 500ms;
-  opacity: 0.95;
-  .Navigator {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 2.5rem;
-    font-size: 25px;
-    font-weight: 700;
-    button {
-      border: none;
-      background: none;
-      font-size: 25px;
-      font-weight: 700;
-      color: var(--bg-element2);
-    }
-  }
-
-  .current {
-    text-decoration-color: var(--primary1);
-    text-underline-offset: 8px;
-    text-decoration-line: underline;
-    text-decoration-thickness: 4px;
-  }
-
-  .closeArea {
-    width: 100%;
-    height: 120px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    button {
-      border: none;
-      background: none;
-      width: 50px;
-      height: 50px;
-      margin-right: 5%;
-      svg {
-        width: 45px;
-        height: 45px;
-        fill: var(--bg-element2);
-      }
-    }
-  }
-}
-
 .themeSVG {
   animation-name: rotateAnimation;
   animation-duration: 0.5s;

client/components/Providers.tsx

@@ -3,7 +3,7 @@
 import React, { PropsWithChildren, useState } from "react";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { ModalProvider } from "@contexts/modalContex";
+import { OverlayProvider } from "@contexts/overlayContex";
 import { ThemeProvider } from "@contexts/themeContext";
 
 function Providers({ children }: PropsWithChildren) {
@@ -12,7 +12,7 @@ function Providers({ children }: PropsWithChildren) {
   return (
     <QueryClientProvider client={client}>
       <ThemeProvider>
-        <ModalProvider>{children}</ModalProvider>
+        <OverlayProvider>{children}</OverlayProvider>
       </ThemeProvider>
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>

client/components/post/TableOfContents/TOCButton.tsx

@@ -6,10 +6,10 @@ import HideByScrollDown from "@components/shared/HideByScrollDown";
 const MARGIN_RIGHT_FOR_HIDE = "-50px";
 
 const TOCButton = () => {
-  const [openModal, setOpenModal] = useState(false);
+  const [openOverlay, setopenOverlay] = useState(false);
 
   const handleClickButton = () => {
-    setOpenModal(true);
+    setopenOverlay(true);
   };
 
   return (
@@ -24,7 +24,7 @@ const TOCButton = () => {
       >
         TOC
       </HideByScrollDown>
-      <TOCModal open={openModal} setOpen={setOpenModal} />
+      <TOCModal open={openOverlay} setOpen={setopenOverlay} />
     </>
   );
 };

client/components/postForm/SeriesSelector/SeriesCreateModalOpenButton.tsx

@@ -1,20 +1,18 @@
-import { useModals } from "@hooks";
+import { useOverlay } from "@hooks";
 import React from "react";
 import styles from "./styles.module.scss";
-import { MODALS } from "@components/shared/Modals/Modals";
+import { OVERLAYS } from "@components/shared/Overlays/Overlays";
 
 const SeriesCreateModalOpenButton = () => {
-  const { openModal } = useModals();
+  const { openOverlay } = useOverlay();
 
   return (
-    <>
-      <button
-        className={styles.SeriesCreateModalOpenButton}
-        onClick={() => openModal(MODALS.SERIES_FORM)}
-      >
-        시리즈 생성
-      </button>
-    </>
+    <button
+      className={styles.SeriesCreateModalOpenButton}
+      onClick={() => openOverlay(OVERLAYS.SERIES_FORM_MODAL)}
+    >
+      시리즈 생성
+    </button>
   );
 };
 

client/components/shared/ModalView/ModalView.tsx

@@ -1,16 +1,32 @@
 import React, { type PropsWithChildren } from "react";
 import styles from "./styles.module.scss";
 import CloseIcon from "@components/Icon/close";
+import classNames from "classnames";
 interface Props {
   title: string;
+  isClose?: boolean;
   onClose: () => void;
 }
 
-const ModalView = ({ children, title, onClose }: PropsWithChildren<Props>) => {
+const ModalView = ({
+  children,
+  title,
+  onClose,
+  isClose,
+}: PropsWithChildren<Props>) => {
   return (
     <div className={styles.ModalWrap}>
-      <div className={styles.Overlay} onClick={onClose} />
-      <div className={styles.Modal}>
+      <div
+        className={classNames(styles.Overlay, {
+          [styles.overlayCloseAnimation]: isClose,
+        })}
+        onClick={onClose}
+      />
+      <div
+        className={classNames(styles.Modal, {
+          [styles.modalCloseAnimation]: isClose,
+        })}
+      >
         <div className={styles.Modal_Header}>
           <h3>{title}</h3>
           <button onClick={onClose}>