fix:#9 모달창 애니메이션 및 위치

MJU-Letter · Mar 14, 2024 · 9c36884 · 9c36884
1 parent f4f9d44
commit 9c36884
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 152 deletions.
diff --git a/src/components/molecules/modal/ModalView.tsx b/src/components/molecules/modal/ModalView.tsx
@@ -1,101 +1,55 @@
-import { modalProps } from "@/types/Modal";
-import {
-  Button,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-} from "@nextui-org/react";
-import React, { HTMLAttributes } from "react";
-import { createPortal } from "react-dom";
-
-interface modalViewProps extends HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-
-  isOpen: boolean;
-  onOpen: () => void;
-  onOpenChange: (isOpen: boolean) => void;
-  noBtn?: {
-    info: string;
-    handler?: () => void;
-  };
-  yesBtn?: {
-    info: string;
-    handler?: () => void;
-  };
-}
+import NoButton from "@/components/atoms/button/modal/NoButton";
+import YesButton from "@/components/atoms/button/modal/YesButton";
+import useDeviceType from "@/hooks/useDeviceType";
+import { container } from "@/styles/animations";
+import { ModalViewProps } from "@/types/Modal";
+import { motion } from "framer-motion";
+import React from "react";
 
 const ModalView = ({
   children,
   isOpen,
-  onOpen,
-  onOpenChange,
   noBtn,
   yesBtn,
   ...props
-}: modalViewProps) => {
+}: ModalViewProps) => {
+  const deviceType = useDeviceType();
   return (
     <>
-      <>
-        <Modal
-          classNames={{
-            base: " pb-8 bg-red-50 rounded-16 w-fit min-h-fit overflow-x-hidden z-modal ",
-          }}
-          isDismissable={false}
-          shouldBlockScroll={true}
-          placement="center"
-          isOpen={isOpen}
-          hideCloseButton={true}
-          portalContainer={document.querySelector("main") as HTMLDivElement}
-          onOpenChange={onOpenChange}
-        >
-          <ModalContent>
-            {(onClose) => (
-              <>
-                <ModalBody>{children}</ModalBody>
-                <ModalFooter>
-                  {noBtn && yesBtn && (
-                    <div className="flex items-center w-full justify-center">
-                      <Button
-                        className="mr-8 w-120 h-44 bg-gray-light flex items-center justify-center text-gray-medium-text-2"
-                        onClick={() => {
-                          noBtn.handler && noBtn.handler();
-                          onClose();
-                        }}
-                      >
-                        {noBtn.info}
-                      </Button>
-                      <Button
-                        className="w-120 h-44  bg-main-point text-white flex items-center justify-center"
-                        onClick={() => {
-                          yesBtn.handler && yesBtn.handler();
-                          onClose();
-                        }}
-                      >
-                        {yesBtn.info}
-                      </Button>
-                    </div>
-                  )}
-                  {!noBtn && yesBtn && (
-                    <div>
-                      <Button
-                        className="mt-[-12px] w-248 h-44 bg-main-point text-white flex items-center justify-center"
-                        onClick={() => {
-                          yesBtn.handler && yesBtn.handler();
-                          onClose();
-                        }}
-                      >
-                        {yesBtn.info}
-                      </Button>
-                    </div>
-                  )}
-                </ModalFooter>
-              </>
+      <motion.div
+        variants={container}
+        initial="hidden"
+        animate="show"
+        exit="exit"
+        className={`fixed h-screen flex items-center justify-center bg-[#00000060] z-modal transition-all ${
+          deviceType === "mobile" ? "w-screen" : "w-max px-40"
+        }`}
+      >
+        <div className="rounded-16 min-h-fit bg-white">
+          {children}
+          <div className="my-10">
+            {noBtn && yesBtn && (
+              <div className=" flex items-center w-full justify-center medium-medium">
+                <NoButton info={noBtn.info} handler={() => noBtn.handler()} />
+                <YesButton
+                  isOne={false}
+                  info={yesBtn.info}
+                  handler={() => yesBtn.handler()}
+                />
+              </div>
+            )}
+            {!noBtn && yesBtn && (
+              <div>
+                <YesButton
+                  isOne={true}
+                  info={yesBtn.info}
+                  handler={() => yesBtn.handler()}
+                />
+              </div>
             )}
-          </ModalContent>
-        </Modal>
-      </>
-      ,
+          </div>
+        </div>
+      </motion.div>
     </>
   );
 };

diff --git a/src/components/organisms/navigation/navigation/Navigation.tsx b/src/components/organisms/navigation/navigation/Navigation.tsx
@@ -9,10 +9,15 @@ import { useSearchParams } from "next/navigation";
 import NavigationList from "../navigationList/NavigationList";
 
 import ModalPortal from "@/utils/ModalPortal";
+import { AnimatePresence } from "framer-motion";
 
 const Navigation = () => {
   const [isOpened, setIsOpened] = useState(false);
-
+  if (isOpened) {
+    document.body.style.overflow = "hidden";
+  } else {
+    document.body.style.overflow = "auto";
+  }
   const handleIsOpened = () => {
     setIsOpened(!isOpened);
   };
@@ -27,11 +32,13 @@ const Navigation = () => {
   return (
     <>
       <div className="relative z-header box-border">
-        <ModalPortal>
+        <AnimatePresence>
           {isOpened && (
-            <NavigationList isOpened={isOpened} setIsOpened={setIsOpened} />
+            <ModalPortal>
+              <NavigationList isOpened={isOpened} setIsOpened={setIsOpened} />
+            </ModalPortal>
           )}
-        </ModalPortal>
+        </AnimatePresence>
 
         <div className="fixed z-header  flex items-center w-360 justify-between h-56 py-12 px-16 bg-main-background box-border">
           <Link href={"/"}>

diff --git a/src/components/organisms/navigation/navigationList/NavigationList.tsx b/src/components/organisms/navigation/navigationList/NavigationList.tsx
@@ -1,9 +1,11 @@
 import useDeviceType from "@/hooks/useDeviceType";
+import { container } from "@/styles/animations";
+import { motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
 import React from "react";
-import close from "../../../../../public/icons/close.png";
-import openLink from "../../../../../public/icons/openLink.png";
+import close from "@public/icons/close.png";
+import openLink from "@public/icons/openLink.png";
 
 interface navigationListProps {
   user?: {
@@ -23,54 +25,64 @@ const NavigationList = ({
   const deviceType = useDeviceType();
 
   return (
-    <div
-      className={`${
-        deviceType === "mobile" ? "w-screen" : "w-max pl-150"
-      } fixed h-screen flex bg-[#00000045] z-modal `}
-    >
-      <div
-        className={`${
-          deviceType === "mobile" ? "absolute right-0" : ""
-        } flex flex-col w-240 h-screen bg-main-point`}
+    <>
+      <motion.div
+        variants={container}
+        initial="hidden"
+        animate="show"
+        exit="exit"
+        className={`fixed h-screen  bg-[#00000060] z-modal transition-all ${
+          deviceType === "mobile" ? "w-screen " : "w-max pl-140"
+        }`}
       >
         <div
-          className="mb-24 cursor-pointer"
-          onClick={() => setIsOpened(false)}
+          className={`${
+            deviceType === "mobile" ? "ml-auto" : ""
+          } flex flex-col w-240 h-screen bg-main-point`}
         >
-          <Image className="ml-auto w-24 h-24 m-16" src={close} alt="close" />
-        </div>
-
-        {user ? (
-          <div className="mx-auto w-191 h-40 rounded-8 bg-white text-gray-dark-text-1 gangwon-xl flex items-center justify-center pt-6">
-            {user?.major} {user?.studentId} {user?.name}
+          <div
+            className="mb-24 cursor-pointer"
+            onClick={() => setIsOpened(false)}
+          >
+            <Image className="ml-auto w-24 h-24 m-16" src={close} alt="close" />
           </div>
-        ) : (
-          <Link href={"login"}>
+
+          {user ? (
             <div className="mx-auto w-191 h-40 rounded-8 bg-white text-gray-dark-text-1 gangwon-xl flex items-center justify-center pt-6">
-              로그인 하세요!
-            </div>{" "}
-          </Link>
-        )}
+              {user?.major} {user?.studentId} {user?.name}
+            </div>
+          ) : (
+            <Link href={"login"}>
+              <div className="mx-auto w-191 h-40 rounded-8 bg-white text-gray-dark-text-1 gangwon-xl flex items-center justify-center pt-6">
+                로그인 하세요!
+              </div>{" "}
+            </Link>
+          )}
 
-        <div className="text-white w-191 mx-auto mt-48 ">
-          <Link href={"/"}>
-            <h1 className="large-bold mb-16">홈</h1>
-          </Link>
-          <Link href={"/mypage"}>
-            <h1 className="large-bold pb-24 mb-24 border-b-1">마이페이지</h1>
-          </Link>
-          <Link href={"/setting"}>
-            <h1 className="large-regular mb-16">설정</h1>
-          </Link>
-          <Link href={"/"}>
-            <h1 className="large-regular flex">
-              명지편지에 대해서
-              <Image className="ml-4 w-24 h-24" src={openLink} alt="openLink" />
-            </h1>
-          </Link>
+          <div className="text-white w-191 mx-auto mt-48 ">
+            <Link href={"/"}>
+              <h1 className="large-bold mb-16">홈</h1>
+            </Link>
+            <Link href={"/mypage"}>
+              <h1 className="large-bold pb-24 mb-24 border-b-1">마이페이지</h1>
+            </Link>
+            <Link href={"/setting"}>
+              <h1 className="large-regular mb-16">설정</h1>
+            </Link>
+            <Link href={"/"}>
+              <h1 className="large-regular flex">
+                명지편지에 대해서
+                <Image
+                  className="ml-4 w-24 h-24"
+                  src={openLink}
+                  alt="openLink"
+                />
+              </h1>
+            </Link>
+          </div>
         </div>
-      </div>
-    </div>
+      </motion.div>
+    </>
   );
 };
 

diff --git a/src/components/templates/social/mainDetail/MainDetail.tsx b/src/components/templates/social/mainDetail/MainDetail.tsx
@@ -5,9 +5,9 @@ import BottomFixedBtn from "@/components/atoms/button/bottomFixed/BottomFixed";
 import Letter from "@/components/atoms/letter/Letter";
 import DetailProfile from "@/components/atoms/profile/detailProfile/DetailProfile";
 import WriteModal from "@/components/organisms/modal/letter/writeModal/WriteModal";
-import ModalViewTest from "@/components/molecules/modal/ModalViewTest";
+import ModalView from "@/components/molecules/modal/ModalView";
 import ModalPortal from "@/utils/ModalPortal";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence } from "framer-motion";
 import useModal from "@/hooks/useModal";
 
 const MainDetail = () => {
@@ -27,7 +27,7 @@ const MainDetail = () => {
       <AnimatePresence>
         {isOpen && (
           <ModalPortal>
-            <ModalViewTest
+            <ModalView
               children={<WriteModal />}
               isOpen={isOpen}
               yesBtn={{ info: "작성 완료", handler: handleYesClick }}

diff --git a/src/hooks/useModal.tsx b/src/hooks/useModal.tsx
@@ -8,7 +8,11 @@ const useModal = () => {
   const closeModal = () => {
     setIsOpen(false);
   };
-
+  if (isOpen) {
+    document.body.style.overflow = "hidden";
+  } else {
+    document.body.style.overflow = "auto";
+  }
   return {
     isOpen,
     openModal,

diff --git a/src/types/Modal.ts b/src/types/Modal.ts
@@ -1,18 +1,6 @@
 import { HTMLAttributes } from "react";
 
-export interface modalProps {
-  info?: string | React.ReactNode;
-  noBtn?: {
-    info: string;
-    handler?: () => void;
-  };
-  yesBtn?: {
-    info: string;
-    handler?: () => void;
-  };
-}
-
-export interface ModalViewTestProps extends HTMLAttributes<HTMLDivElement> {
+export interface ModalViewProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   isOpen: boolean;
   noBtn?: {