feat:[#126] api추가

FITple-Frontend/data/DeleteApi.jsx

@@ -0,0 +1,22 @@
+// closetApi.js
+
+export const deleteCloth = async (clothId) => {
+  try {
+    const response = await fetch(
+      `http://localhost:3000/FITple/my/closet/${clothId}/modify`,
+      {
+        method: "DELETE",
+        credentials: "include", // 세션 쿠키 포함
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to delete the cloth");
+    }
+
+    return response.json(); // 성공 시 응답 데이터를 반환
+  } catch (error) {
+    console.error("Error deleting cloth:", error);
+    throw error; // 에러 발생 시 호출하는 곳에서 처리하도록 던짐
+  }
+};

FITple-Frontend/data/UpdateApi.jsx

@@ -0,0 +1,26 @@
+const updateCloth = async (clothId, updatedData) => {
+  try {
+    const response = await fetch(
+      `http://localhost:3000/FITple/my/closet/${clothId}/modify`,
+      {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include", // 쿠키 등의 인증 정보 포함
+        body: JSON.stringify(updatedData), // 수정할 데이터
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to update the cloth information");
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error updating cloth information:", error);
+    throw error; // 필요에 따라 에러 처리
+  }
+};
+export default updateCloth;

FITple-Frontend/src/components/DeletePopUp/DeletePopUp.jsx

@@ -6,14 +6,26 @@ import {
   PopupButtonContainer,
 } from "./DeletePopUp.style";
 import { useState } from "react";
-
-const DeletePopUp = ({ onClose }) => {
+import { useNavigate } from "react-router-dom";
+import { deleteCloth } from "../../../data/DeleteApi";
+const DeletePopUp = ({ clothId, onClose }) => {
+  console.log("Received clothId:", clothId);
+  const navigate = useNavigate();
   const handlePopupback = () => {
     onClose();
   };
   const [popupdelete, setPopupdelete] = useState(false);
-  const handlePopupdelete = () => {
+  const handlePopupdelete = async () => {
     setPopupdelete(!popupdelete);
+
+    try {
+      await deleteCloth(clothId);
+      alert("옷이 성공적으로 삭제되었습니다.");
+      navigate("/cloth");
+    } catch (error) {
+      console.error("Error deleting cloth:", error);
+      alert("옷 삭제에 실패했습니다.");
+    }
   };
   return (
     <DeletePopup>

FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx

@@ -41,7 +41,6 @@ import CompareSearchPopUp from "../../components/CompareSearchPopUp/CompareSearc
 import CompareLoading from "../../components/CompareLoading/CompareLoading";
 import CompareResult from "../../components/CompareResult/CompareResult";
 import useAuthStore from "../../../data/store/userAuthStore"; // 토큰을 가져오기 위해 zustand의 store import
-
 function ClothdetailPage() {
   const { clothId } = useParams(); // URL에서 clothId 가져오기
   const [clothData, setClothData] = useState(null); // 가져온 데이터를 저장할 상태
@@ -102,7 +101,7 @@ function ClothdetailPage() {
     setIsEdit(!isEdit);
   };
 
-  const handleDeleteCloth = () => {
+  const handleDeleteCloth = async () => {
     setisDeletePopupOpen(!isDeletePopupOpen);
   };
 
@@ -273,7 +272,10 @@ function ClothdetailPage() {
               <Clothdebar src="../assets/detailbar.svg" />
               {isEdit && (
                 <EditButtons isEdit={isEdit}>
-                  <Link to="/clothupdate/:clothId">
+                  <Link
+                    to={`/clothupdate/${clothData.cloth_id}`}
+                    state={{ clothData }}
+                  >
                     <EditButton>옷 정보 수정하기</EditButton>
                   </Link>
                   <EditButton onClick={handleDeleteCloth}>
@@ -297,6 +299,7 @@ function ClothdetailPage() {
                   <DeletePopUp
                     isOpen={isDeletePopupOpen}
                     onClose={() => setisDeletePopupOpen(false)}
+                    clothId={clothData.cloth_id}
                   />
                 </Modal>
               )}