diff --git a/src/components/atoms/button/modal/YesButton.tsx b/src/components/atoms/button/modal/YesButton.tsx
index 35959a8..50a097c 100644
--- a/src/components/atoms/button/modal/YesButton.tsx
+++ b/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();
diff --git a/src/components/molecules/modal/ModalView.tsx b/src/components/molecules/modal/ModalView.tsx
deleted file mode 100644
index 9724332..0000000
--- a/src/components/molecules/modal/ModalView.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-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="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>
-            )}
-          </div>
-        </div>
-      </motion.div>
-    </>
-  );
-};
-
-export default ModalView;
diff --git a/src/components/organisms/modal/Modal.stories.tsx b/src/components/organisms/modal/Modal.stories.tsx
deleted file mode 100644
index cc7bb50..0000000
--- a/src/components/organisms/modal/Modal.stories.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import Modal from "./Modal";
-
-const meta: Meta<typeof Modal> = {
-  title: "components/organisms/modal/Modal",
-  component: Modal,
-  tags: ["autodocs"],
-  argTypes: {},
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Modal>;
-
-export const twoBtn: Story = {
-  args: {
-    yesBtn: {
-      info: "확인",
-    },
-    info: "안녕하십니까?",
-    noBtn: {
-      info: "취소",
-    },
-  },
-};
-
-export const oneBtn: Story = {
-  args: {
-    yesBtn: {
-      info: "확인",
-    },
-    info: "안녕하십니까? \n 안녕하십니까",
-  },
-};
-
-export const noBtn: Story = {
-  args: {
-    info: "안녕하십니까? \n 안녕하십니까",
-  },
-};
diff --git a/src/components/organisms/modal/Modal.tsx b/src/components/organisms/modal/Modal.tsx
deleted file mode 100644
index b9ec477..0000000
--- a/src/components/organisms/modal/Modal.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import ModalView from "../../molecules/modal/ModalView";
-import { modalProps } from "@/types/Modal";
-import React from "react";
-
-const Modal = ({ info, yesBtn, noBtn }: modalProps) => {
-  return (
-    <div>d</div>
-    // <ModalView>
-    //   <DefaultModal info={info} yesBtn={yesBtn} noBtn={noBtn} />
-    // </ModalView>
-  );
-};
-
-export default Modal;
diff --git a/src/components/organisms/modal/ModalView.tsx b/src/components/organisms/modal/ModalView.tsx
new file mode 100644
index 0000000..8ca13dc
--- /dev/null
+++ b/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;
diff --git a/src/components/organisms/modal/auth/AuthCheckingModalContent.tsx b/src/components/organisms/modal/auth/AuthCheckingModalContent.tsx
deleted file mode 100644
index fffb361..0000000
--- a/src/components/organisms/modal/auth/AuthCheckingModalContent.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-
-interface authCheckingModalProps {
-  name: string;
-  major: string;
-  studentId: string;
-}
-
-const AuthCheckingModal = ({
-  name,
-  major,
-  studentId,
-}: authCheckingModalProps) => {
-  return (
-    <div className="flex flex-col justify-center">
-      <h1 className="medium-medium text-gray-dark-text-1 mb-24">
-        올바른 정보가 맞는지 확인해 주세요.
-      </h1>
-      <h1 className="medium-regular text-gray-dark-text-1">이름: {name}</h1>
-      <h1 className="medium-regular text-gray-dark-text-1 mb-24">
-        학과/학번: {major} {studentId}
-      </h1>
-      <h2 className="small-regular text-gray-medium-text-2 ">
-        * 정보가 다르다면 관리자에게 문의해 주세요.
-      </h2>
-      <h2 className="small-regular text-gray-medium-text-2 ">
-        mjuletter@gmail.com
-      </h2>
-    </div>
-  );
-};
-
-export default AuthCheckingModal;
diff --git a/src/components/organisms/modal/letter/writeModal/WriteModal.tsx b/src/components/organisms/modal/letter/writeModal/WriteModal.tsx
index a1c3a22..7e3befe 100644
--- a/src/components/organisms/modal/letter/writeModal/WriteModal.tsx
+++ b/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";
diff --git a/src/components/organisms/navigation/navigation/Navigation.tsx b/src/components/organisms/navigation/navigation/Navigation.tsx
index 6c194ce..a5e586a 100644
--- a/src/components/organisms/navigation/navigation/Navigation.tsx
+++ b/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);
   };
diff --git a/src/hooks/useModal.tsx b/src/hooks/useModal.tsx
index 1067e4b..dfde030 100644
--- a/src/hooks/useModal.tsx
+++ b/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,