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

폴더 수정/삭제 모달 기능 구현

Author: hongggyelim

components/modal/DeleteFolderModal.tsx

@@ -12,10 +12,11 @@ const DeleteFolderModal = ({
 }) => {
   const { closeModal } = useModalStore();
   const handleSubmit = async () => {
+    // 폴더 내에 링크 개수 0 일때만 삭제 가능 -> 링크 1개 이상이면 error toast 띄우겠습니다.
     try {
       await deleteFolder(folderId);
     } catch (error) {
-      console.log(error, "폴더 삭제 에러");
+      console.log(error, "DeleteFolderModal 폴더 삭제 에러");
     } finally {
       closeModal();
     }

components/modal/EditModal.tsx

@@ -5,41 +5,45 @@ import useModalStore from "@/store/useModalStore";
 import { putFolder } from "@/lib/api/folder";
 import SubmitButton from "../SubMitButton";
 
-const EditModal = ({ folderName }: { folderName: string }) => {
+const EditModal = ({
+  folderName,
+  folderId,
+}: {
+  folderName: string;
+  folderId: number;
+}) => {
   const [value, setValue] = useState("");
 
   const { closeModal } = useModalStore();
 
-  // 폴더 정보를 먼저 가져와야함
-
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
   };
   const handleSubmit = async () => {
     const body = {
       name: value,
     };
-    // if (value !== "") {
-    //   try {
-    //     const res = await putFolder(folderId, body);
-    //     console.log(res);
-    //   } catch (error) {
-    //     console.log(error);
-    //   }
-    // }
+    if (value !== "") {
+      try {
+        await putFolder(folderId, body);
+        console.log("폴더 수정 완료");
+      } catch (error) {
+        console.log(error);
+      }
+    }
     closeModal();
   };
   return (
     <ModalContainer title="폴더 이름 변경">
       <ModalInput
-        placeholder="내용 입력"
+        placeholder={folderName}
         name={folderName}
         value={value}
         onChange={handleChange}
       />
       <SubmitButton
         type="button"
-        // onClick={handleSubmit}
+        onClick={handleSubmit}
         width="w-full"
         height="h-[51px]"
         color="positive"

components/modal/modalManager/ModalManager.tsx

@@ -45,7 +45,7 @@ export const Modal = () => {
       return (
         <DeleteFolderModal
           folderName={props.folderName || "폴더이름"}
-          folderId={props.folderId || 1}
+          folderId={Number(props.folderId)}
         />
       );
     case "DeleteLinkModal":
@@ -56,7 +56,12 @@ export const Modal = () => {
         />
       );
     case "EditModal":
-      return <EditModal folderName={props.folderName || "폴더이름"} />;
+      return (
+        <EditModal
+          folderName={props.folderName || "폴더이름"}
+          folderId={Number(props.folderId)}
+        />
+      );
     case "SNSModal":
       return <SNSModal folderName={props.folderName || "폴더이름"} />;
     case "EditLink":

lib/api/folder.ts

@@ -41,6 +41,7 @@ export const deleteFolder = async (folderId: number) => {
     if (res.status >= 200 && res.status < 300) return res.data;
   } catch (err) {
     console.error("에러 메시지: ", err instanceof Error ? err.message : err);
+    throw err;
   }
 };
 

pages/api/folders/[folderId]/index.ts

@@ -8,34 +8,56 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   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" });
+    return res.status(400).json({ error: "유효하지 않은 폴더 ID 입니다" });
   }
 
-  if (req.method === "DELETE") {
-    try {
-      const response = await axiosInstance.delete(`/folders/${id}`, {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
+  switch (req.method) {
+    case "DELETE":
+      try {
+        await axiosInstance.delete(`/folders/${id}`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+        return res.status(204).json({ message: "폴더 삭제 성공" });
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          console.error("Axios Error:", error); // 여기서 error 객체 전체를 확인
+          if (error.response) {
+            const status = error.response.status;
+            const message =
+              error.response.data?.message || "알 수 없는 오류 발생";
+            console.error("Error Response Data:", error.response.data);
+            return res.status(status).json({ message: message });
+          }
+          console.error("Unknown Error:", error); // Axios 오류가 아닌 경우
+          throw error;
+        }
+        return res.status(500).json({ message: "서버 오류 발생" });
+      }
 
-      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 });
+    case "PUT":
+      try {
+        await axiosInstance.put(`/folders/${id}`, req.body, {
+          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/api/folders/index.ts

@@ -18,7 +18,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
         console.error(err);
         return res
           .status(500)
-          .json({ message: "모든 폴저 조회에 실패했습니다." });
+          .json({ message: "모든 폴더 조회에 실패했습니다." });
       }
 
     case "POST":