[FE]Feat/#97 옷장 등록 수정 삭제

FITple-Frontend/data/ClothApi.jsx

@@ -1,14 +1,9 @@
 const localhost = "http://localhost:3000";
 
-export const ClothApi = async (category, cursorId, size) => {
+export const ClothApi = async () => {
   try {
     const url = new URL(`${localhost}/FITple/my/closet/main`);
 
-    // 쿼리 파라미터 추가
-    if (category !== undefined) url.searchParams.append("category", category);
-    if (cursorId !== undefined) url.searchParams.append("cursorId", cursorId);
-    if (size !== undefined) url.searchParams.append("size", size);
-
     const response = await fetch(url, {
       method: "GET",
       credentials: "include",

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/App.jsx

@@ -32,7 +32,8 @@ import LayoutMain from "./layout/LayoutMain";
 import ProfileEditPage from "./pages/ProfileEditPage/ProfileEditPage";
 import ChangepwdPage from "./pages/ChangepwdPage/ChangepwdPage";
 import NotFoundPage from "./pages/NotFoundPage/NotFoundPage";
-import SearchTotalPage from "./pages/SearchTotalPage/SearchTotalPage";
+import Modal from "react-modal";
+Modal.setAppElement("#root"); // 모달이 root에 렌더링 되도록 설정
 function App() {
   return (
     <>
@@ -59,7 +60,7 @@ function App() {
           <Route path="/cloth" element={<ClothmainPage />} />
           <Route path="/clothdetail/:clothId" element={<ClothdetailPage />} />
           <Route path="/clothregister" element={<ClothregisterPage />} />
-          <Route path="/clothupdate" element={<ClothupdatePage />} />
+          <Route path="/clothupdate/:clothId" element={<ClothupdatePage />} />
           {/* 프로필페이지 */}
           <Route path="/profile" element={<ProfilePage />} />
           <Route path="/profile/edit" element={<ProfileEditPage />} />

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

@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import {
   Container,
   Text1,
@@ -23,7 +24,9 @@ const RegisterPopUp = ({ onClose }) => {
       <Text2>개인정보 등 민감한 정보는 수정해주세요!</Text2>
       <ButtonContainer>
         <Button onClick={handleClose}>뒤로가기</Button>
-        <Button2 onClick={handleRegister}>등록하기</Button2>
+        <Link to="/cloth">
+          <Button2 onClick={handleRegister}>등록하기</Button2>
+        </Link>
       </ButtonContainer>
     </Container>
   );

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

@@ -16,8 +16,8 @@ const SideBar = ({ setCategory }) => {
   const [selectedCategory, setSelectedCategory] = useState("전체");
 
   const handleCategoryClick = (category) => {
-    setSelectedCategory(category.name);
-    setCategory(category.id);
+    setSelectedCategory(category.name); // 클릭된 카테고리 이름 업데이트
+    setCategory(category.id); // 클릭된 카테고리 ID 업데이트
   };
 
   return (

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

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { useParams, Link } from "react-router-dom";
 import Modal from "react-modal";
+import { deleteCloth } from "../../../data/DeleteApi";
 import {
   BackIcon,
   CurrentCloth,
@@ -43,6 +45,7 @@ import CompareResult from "../../components/CompareResult/CompareResult";
 import useAuthStore from "../../../data/store/userAuthStore"; // 토큰을 가져오기 위해 zustand의 store import
 
 function ClothdetailPage() {
+  const navigate = useNavigate();
   const { clothId } = useParams(); // URL에서 clothId 가져오기
   const [clothData, setClothData] = useState(null); // 가져온 데이터를 저장할 상태
   const [note, setNote] = useState("");
@@ -88,7 +91,21 @@ function ClothdetailPage() {
 
     fetchClothDetail();
   }, [clothId, token]); // clothId 또는 token이 변경될 때마다 데이터를 다시 가져옴
+  const handleDeleteCloth = async () => {
+    try {
+      // 옷 정보 삭제 API 호출
+      await deleteCloth(clothId);
 
+      // 삭제 성공 시 알림 표시 및 메인 페이지로 이동
+      alert("옷 정보가 삭제되었습니다.");
+      navigate("/cloth"); // 삭제 후 메인 페이지로 이동
+    } catch (error) {
+      // 에러 처리
+      alert("옷 정보 삭제에 실패했습니다. 다시 시도해주세요.");
+    } finally {
+      setisDeletePopupOpen(false); // 팝업 닫기
+    }
+  };
   useEffect(() => {
     // 팝업이 열릴 때에도 기본 UI 요소가 사라지지 않도록 관리
     if (popupOpen) {
@@ -102,10 +119,6 @@ function ClothdetailPage() {
     setIsEdit(!isEdit);
   };
 
-  const handleDeleteCloth = () => {
-    setisDeletePopupOpen(!isDeletePopupOpen);
-  };
-
   const handleInputchange = (e) => {
     setNote(e.target.value);
   };
@@ -264,9 +277,13 @@ function ClothdetailPage() {
               <Clothdebar />
               {isEdit && (
                 <EditButtons isEdit={isEdit}>
-                  <Link to="/clothupdate">
+                  <Link
+                    to={`/clothupdate/${clothData.cloth_id}`}
+                    state={{ clothData }} // state는 이렇게 전달합니다.
+                  >
                     <EditButton>옷 정보 수정하기</EditButton>
                   </Link>
+
                   <EditButton onClick={handleDeleteCloth}>
                     옷 정보 삭제하기
                   </EditButton>