diff --git a/components/modal/AddModal.tsx b/components/modal/AddModal.tsx
index 99233f7..035c046 100644
--- a/components/modal/AddModal.tsx
+++ b/components/modal/AddModal.tsx
@@ -43,7 +43,7 @@ const AddModal = ({ list, link }: { list: FolderItemType[]; link: string }) => {
         type="button"
         onClick={handleSubmit}
         width="w-full"
-        height="h-[51px] "
+        height="h-[51px]"
         color="positive"
       >
         추가하기
diff --git a/components/modal/DeleteFolderModal.tsx b/components/modal/DeleteFolderModal.tsx
index f49aa4d..0b73259 100644
--- a/components/modal/DeleteFolderModal.tsx
+++ b/components/modal/DeleteFolderModal.tsx
@@ -1,15 +1,33 @@
+import useModalStore from "@/store/useModalStore";
 import SubmitButton from "../SubMitButton";
 import ModalContainer from "./modalComponents/ModalContainer";
+import { deleteFolder } from "@/lib/api/folder";
+
+const DeleteFolderModal = ({
+  folderName,
+  folderId,
+}: {
+  folderName: string;
+  folderId: number;
+}) => {
+  const { closeModal } = useModalStore();
+  const handleSubmit = async () => {
+    try {
+      await deleteFolder(folderId);
+    } catch (error) {
+      console.log(error, "폴더 삭제 에러");
+    } finally {
+      closeModal();
+    }
+  };
 
-const DeleteFolderModal = ({ folderName }: { folderName: string }) => {
-  console.log("folderName", folderName);
   return (
     <ModalContainer title="폴더 삭제" subtitle={folderName}>
       <SubmitButton
         type="button"
-        // onClick={handleSubmit}
+        onClick={handleSubmit}
         width="w-full"
-        height="h-[51px] "
+        height="h-[51px]"
         color="negative"
       >
         삭제하기
diff --git a/components/modal/EditLink.tsx b/components/modal/EditLink.tsx
index 667019a..4322740 100644
--- a/components/modal/EditLink.tsx
+++ b/components/modal/EditLink.tsx
@@ -21,7 +21,6 @@ const EditLink = ({
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
   };
-
   const handleSubmit = async () => {
     const body = {
       url: value,
diff --git a/components/modal/EditModal.tsx b/components/modal/EditModal.tsx
index 9a24fe3..ebfe434 100644
--- a/components/modal/EditModal.tsx
+++ b/components/modal/EditModal.tsx
@@ -41,7 +41,7 @@ const EditModal = ({ folderName }: { folderName: string }) => {
         type="button"
         // onClick={handleSubmit}
         width="w-full"
-        height="h-[51px] "
+        height="h-[51px]"
         color="positive"
       >
         변경하기
diff --git a/components/modal/modalComponents/ModalContainer.tsx b/components/modal/modalComponents/ModalContainer.tsx
index 9e8138d..ceb606e 100644
--- a/components/modal/modalComponents/ModalContainer.tsx
+++ b/components/modal/modalComponents/ModalContainer.tsx
@@ -1,21 +1,24 @@
 import { IoIosClose } from "react-icons/io";
-import SubmitButton from "../../SubMitButton";
 import { ModalPropType } from "@/types/modalTypes";
 import useModalStore from "@/store/useModalStore";
 import { MouseEvent, useRef } from "react";
 
 const ModalContainer = ({ title, subtitle, children }: ModalPropType) => {
-  const { closeModal } = useModalStore();
+  const { isOpen, closeModal } = useModalStore();
   const modalRef = useRef<HTMLDivElement | null>(null);
   const onClickBackDrop = (e: MouseEvent<HTMLDivElement>) => {
     if (modalRef.current && !modalRef.current.contains(e.target as Node))
       closeModal();
   };
-
+  if (isOpen) {
+    document.body.style.overflow = "hidden";
+  } else {
+    document.body.style.overflow = "auto";
+  }
   return (
     <div
       onClick={onClickBackDrop}
-      className="z-30 absolute top-0 left-0 flex justify-center items-center bg-black/40 h-screen w-screen"
+      className=" z-30 fixed top-0 left-0 flex justify-center items-center bg-black/40 h-screen w-screen"
     >
       <div
         ref={modalRef}
diff --git a/components/modal/modalManager/ModalManager.tsx b/components/modal/modalManager/ModalManager.tsx
index 01a51b4..bc71f00 100644
--- a/components/modal/modalManager/ModalManager.tsx
+++ b/components/modal/modalManager/ModalManager.tsx
@@ -42,7 +42,12 @@ export const Modal = () => {
         />
       );
     case "DeleteFolderModal":
-      return <DeleteFolderModal folderName={props.folderName || "폴더이름"} />;
+      return (
+        <DeleteFolderModal
+          folderName={props.folderName || "폴더이름"}
+          folderId={props.folderId || 1}
+        />
+      );
     case "DeleteLinkModal":
       return (
         <DeleteLinkModal
diff --git a/lib/api/folder.ts b/lib/api/folder.ts
index 90423dd..f2d6b8e 100644
--- a/lib/api/folder.ts
+++ b/lib/api/folder.ts
@@ -25,9 +25,9 @@ export const postFolders = async (body: folderApiProps) => {
 };
 
 // 폴더 조회
-export const getFolder = async (forderId: number) => {
+export const getFolder = async (folderId: number) => {
   try {
-    const res = await axiosInstance.get(`/folders/${forderId}`);
+    const res = await axiosInstance.get(`/folders/${folderId}`);
     if (res.status >= 200 && res.status < 300) return res.data;
   } catch (err) {
     console.error("에러 메시지: ", err instanceof Error ? err.message : err);
@@ -35,9 +35,9 @@ export const getFolder = async (forderId: number) => {
 };
 
 // 폴더 삭제(auth)
-export const deleteFolder = async (forderId: number) => {
+export const deleteFolder = async (folderId: number) => {
   try {
-    const res = await proxy.delete(`/api/folders/${forderId}`);
+    const res = await proxy.delete(`/api/folders/${folderId}`);
     if (res.status >= 200 && res.status < 300) return res.data;
   } catch (err) {
     console.error("에러 메시지: ", err instanceof Error ? err.message : err);
@@ -45,9 +45,9 @@ export const deleteFolder = async (forderId: number) => {
 };
 
 // 폴더 이름 수정(auth)
-export const putFolder = async (forderId: number, body: folderApiProps) => {
+export const putFolder = async (folderId: number, body: folderApiProps) => {
   try {
-    const res = await proxy.put(`/api/folders/${forderId}`, body);
+    const res = await proxy.put(`/api/folders/${folderId}`, body);
     if (res.status >= 200 && res.status < 300) return res.data;
   } catch (err) {
     console.error("에러 메시지: ", err instanceof Error ? err.message : err);
diff --git a/pages/api/folders/[folderId]/index.ts b/pages/api/folders/[folderId]/index.ts
new file mode 100644
index 0000000..51102ed
--- /dev/null
+++ b/pages/api/folders/[folderId]/index.ts
@@ -0,0 +1,41 @@
+import axiosInstance from "@/lib/api/axiosInstanceApi";
+import axios from "axios";
+import { NextApiRequest, NextApiResponse } from "next";
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const token = req.cookies.accessToken;
+  const { folderId } = req.query;
+  const id = Number(folderId);
+
+  console.log("Token:", token);
+  console.log("folderId:", folderId);
+
+  if (!token) {
+    return res.status(401).json({ error: "사용자 정보를 찾을 수 없습니다." });
+  }
+
+  if (isNaN(id)) {
+    return res.status(400).json({ error: "Invalid folderId" });
+  }
+
+  if (req.method === "DELETE") {
+    try {
+      const response = await axiosInstance.delete(`/folders/${id}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      return res.status(204).json({ message: "폴더 삭제 성공" });
+    } catch (error) {
+      if (axios.isAxiosError(error) && error.response) {
+        const status = error.response.status;
+        const message = error.response.data?.message || "알 수 없는 오류 발생";
+        return res.status(status).json({ message });
+      }
+    }
+  } else {
+    return res.status(500).json({ error: "서버 오류 발생" });
+  }
+};
+export default handler;
diff --git a/pages/test/index.tsx b/pages/test/index.tsx
index f672a60..5d57373 100644
--- a/pages/test/index.tsx
+++ b/pages/test/index.tsx
@@ -39,7 +39,15 @@ export default function Test() {
       >
         폴더에 추가 버튼
       </button>
-      <button type="button" onClick={() => openModal("DeleteFolderModal")}>
+      <button
+        type="button"
+        onClick={() =>
+          openModal("DeleteFolderModal", {
+            folderName: "NAME",
+            folderId: 700,
+          })
+        }
+      >
         폴더 삭제 버튼
       </button>
       <button type="button" onClick={() => openModal("DeleteLinkModal")}>
diff --git a/types/modalTypes.ts b/types/modalTypes.ts
index dfded92..e11e432 100644
--- a/types/modalTypes.ts
+++ b/types/modalTypes.ts
@@ -5,6 +5,7 @@ export interface ModalPropType {
   subtitle?: string;
   children?: ReactNode;
   folderName?: string;
+  folderId?: number;
   list?: FolderItemType[];
   link?: string;
   linkId?: number | null;