fix:#9 모달 스크롤 수정

src/components/atoms/button/modal/YesButton.tsx

@@ -1,18 +1,10 @@
-import React from "react";
+import React from 'react';
 
-const YesButton = ({
-  info,
-  handler,
-  isOne,
-}: {
-  info: string;
-  handler: () => void;
-  isOne: boolean;
-}) => {
+const YesButton = ({ info, handler, isOne }: { info: string; handler: () => void; isOne: boolean }) => {
   return (
     <button
       className={`transition-opacity duration-500 ease-in-out hover:opacity-50 rounded-8 ${
-        isOne ? "w-280" : "w-120"
+        isOne ? 'w-248' : 'w-120'
       } h-44 bg-main-point text-white flex items-center justify-center`}
       onClick={() => {
         handler();

src/components/organisms/modal/ModalView.tsx

@@ -0,0 +1,39 @@
+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, noBtn, yesBtn, ...props }: ModalViewProps) => {
+  const deviceType = useDeviceType();
+  return (
+    <>
+      <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='mb-16 flex items-center justify-center'>
+            {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 && <YesButton isOne={true} info={yesBtn.info} handler={() => yesBtn.handler()} />}
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};
+
+export default ModalView;

src/components/organisms/modal/letter/writeModal/WriteModal.tsx

@@ -1,4 +1,4 @@
-import ModalView from "@/components/molecules/modal/ModalView";
+import ModalView from "@/components/organisms/modal/ModalView";
 import { COLORS } from "@/constants/letterColors";
 import React, { useState } from "react";
 import LetterModalContent from "./WriteModalContent";

src/components/organisms/navigation/navigation/Navigation.tsx

@@ -13,11 +13,15 @@ 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";
-  }
+  useEffect(() => {
+    if (typeof document !== "undefined") {
+      if (isOpened) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "auto";
+      }
+    }
+  }, [isOpened]);
   const handleIsOpened = () => {
     setIsOpened(!isOpened);
   };

src/hooks/useModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 const useModal = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -8,11 +8,15 @@ const useModal = () => {
   const closeModal = () => {
     setIsOpen(false);
   };
-  if (isOpen) {
-    document.body.style.overflow = "hidden";
-  } else {
-    document.body.style.overflow = "auto";
-  }
+  useEffect(() => {
+    if (typeof document !== "undefined") {
+      if (isOpen) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "auto";
+      }
+    }
+  }, [isOpen]);
   return {
     isOpen,
     openModal,