Merge pull request #81 from codeit9-temporary/feature/modalAction

Fix : 모달 백드롭 스타일 수정 / Feat: 폴더 삭제 모달 기능 추가

Author: hongggyelim

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"
       >
         추가하기

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"
       >
         삭제하기

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,

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"
       >
         변경하기

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}

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

lib/api/folder.ts

@@ -25,29 +25,29 @@ 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);
   }
 };
 
 // 폴더 삭제(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);
   }
 };
 
 // 폴더 이름 수정(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);

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;

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")}>

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;