diff --git a/FITple-Frontend/data/DeleteApi.jsx b/FITple-Frontend/data/DeleteApi.jsx
new file mode 100644
index 0000000..afe2970
--- /dev/null
+++ b/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; // 에러 발생 시 호출하는 곳에서 처리하도록 던짐
+  }
+};
diff --git a/FITple-Frontend/data/UpdateApi.jsx b/FITple-Frontend/data/UpdateApi.jsx
new file mode 100644
index 0000000..a993aa1
--- /dev/null
+++ b/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;
diff --git a/FITple-Frontend/src/components/DeletePopUp/DeletePopUp.jsx b/FITple-Frontend/src/components/DeletePopUp/DeletePopUp.jsx
index 4b68da8..f5be572 100644
--- a/FITple-Frontend/src/components/DeletePopUp/DeletePopUp.jsx
+++ b/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>
diff --git a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx b/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx
index 6324159..e14e876 100644
--- a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx
+++ b/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>
               )}
diff --git a/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.jsx b/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.jsx
index 738b155..a3f3e15 100644
--- a/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.jsx
+++ b/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.jsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+import { useLocation, useParams, Link, useNavigate } from "react-router-dom";
 import {
   BackIcon,
   SS,
@@ -26,25 +28,72 @@ import {
   CurvedRectangle3,
   StyledButton,
 } from "./ClothupdatePage.style";
-import { useState } from "react";
-import { Link } from "react-router-dom";
+import updateCloth from "../../../data/UpdateApi";
+
+// 카테고리와 핏 옵션을 상수로 관리
+const clothingCategories = [
+  { value: 1, label: "아우터" },
+  { value: 2, label: "상의" },
+  { value: 3, label: "바지" },
+  { value: 4, label: "스커트" },
+  { value: 5, label: "원피스" },
+  { value: 6, label: "신발" },
+];
+
+const fitOptions = [
+  { value: "레귤러", label: "레귤러" },
+  { value: "오버", label: "오버" },
+  { value: "세미오버", label: "세미오버" },
+  { value: "슬림", label: "슬림" },
+];
 
 const ClothupdatePage = () => {
-  //드롭다운
-  const [isToggle, setIsToggle] = useState(false);
-  const [selectedValue, setSelectedValue] = useState("아우터");
-  const handleToggle = () => {
-    setIsToggle(!isToggle);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { clothId } = useParams();
+
+  // detail 페이지에서 전달된 clothData를 state로 받아옴
+  const initialClothData = location.state?.clothData || {};
+
+  const [clothData, setClothData] = useState(initialClothData);
+  const [isCategoryOpen, setIsCategoryOpen] = useState(false);
+  const [isFitOpen, setIsFitOpen] = useState(false);
+  const [rating, setRating] = useState(initialClothData.rating || 0);
+
+  // 카테고리와 핏의 label을 찾기 위한 함수
+  const getLabelByValue = (options, value) => {
+    const option = options.find((opt) => opt.value === value);
+    return option ? option.label : "선택";
+  };
+
+  const handleCategorySelect = (value) => {
+    setClothData((prevData) => ({
+      ...prevData,
+      category: value,
+    }));
+    setIsCategoryOpen(false);
   };
-  const handleSelect = (value) => {
-    setSelectedValue(value);
-    setIsToggle(false);
+
+  const handleFitSelect = (value) => {
+    setClothData((prevData) => ({
+      ...prevData,
+      fit: value,
+    }));
+    setIsFitOpen(false);
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setClothData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
   };
-  //별점
-  const [rating, setRating] = useState(0);
+
   const handleStarClick = (newRating) => {
     setRating(newRating);
   };
+
   const renderStars = () => {
     const stars = [];
     for (let i = 0; i < 5; i++) {
@@ -60,6 +109,25 @@ const ClothupdatePage = () => {
     }
     return stars;
   };
+
+  const handleUpdate = async () => {
+    try {
+      const updatedData = {
+        ...clothData,
+        rating,
+      };
+
+      await updateCloth(clothId, updatedData);
+
+      alert("옷 정보가 성공적으로 수정되었습니다.");
+      navigate(`/clothdetail/${clothId}`);
+    } catch (error) {
+      alert("옷 정보 수정에 실패했습니다. 다시 시도해주세요.");
+    }
+
+    console.log(clothData);
+  };
+
   return (
     <div>
       <Parent1>
@@ -67,7 +135,7 @@ const ClothupdatePage = () => {
           <Link to="/cloth">
             <BackIcon />
           </Link>
-          <ProductDeImage />
+          <ProductDeImage src={clothData.cloth_image} alt="Cloth Image" />
           <Imgcontainer>
             <ProductDeImagemin />
             <ProductDeImagemin />
@@ -81,7 +149,11 @@ const ClothupdatePage = () => {
           <DetailNamebox>
             <DetailName>브랜드</DetailName>
             <CurvedRectangle>
-              <NoteArea>나이키</NoteArea>
+              <NoteArea
+                name="brand_name"
+                value={clothData.brand_name}
+                onChange={handleInputChange}
+              />
             </CurvedRectangle>
           </DetailNamebox>
           <DetailNamebox>
@@ -90,7 +162,11 @@ const ClothupdatePage = () => {
             </DetailName>
 
             <CurvedRectangle>
-              <NoteArea>에센셜 풀집 후디</NoteArea>
+              <NoteArea
+                name="name"
+                value={clothData.name}
+                onChange={handleInputChange}
+              />
             </CurvedRectangle>
           </DetailNamebox>
           <DetailNamebox>
@@ -98,7 +174,11 @@ const ClothupdatePage = () => {
               제품번호<SS>*</SS>
             </DetailName>
             <CurvedRectangle>
-              <NoteArea></NoteArea>
+              <NoteArea
+                name="product_code"
+                value={clothData.product_code}
+                onChange={handleInputChange}
+              />
             </CurvedRectangle>
           </DetailNamebox>
           <DetailNamebox>
@@ -106,59 +186,69 @@ const ClothupdatePage = () => {
               분류<SS>*</SS>
             </DetailName>
             <CurvedRectangle>
-              <Dropdefault>{selectedValue}</Dropdefault>
-              <Toggledown onClick={handleToggle}>&lt;</Toggledown>
+              <Dropdefault>
+                {getLabelByValue(clothingCategories, clothData.category)}
+              </Dropdefault>
+              <Toggledown onClick={() => setIsCategoryOpen(!isCategoryOpen)}>
+                &lt;
+              </Toggledown>
             </CurvedRectangle>
-            <DropdownContainer isToggle={isToggle}>
+            <DropdownContainer isToggle={isCategoryOpen}>
               <DropdownList>
-                <DropdownItem onClick={() => handleSelect("아우터")}>
-                  아우터
-                </DropdownItem>
-                <DropdownItem onClick={() => handleSelect("반소매 상의")}>
-                  반소매 상의
-                </DropdownItem>
-                <DropdownItem onClick={() => handleSelect("긴소매 상의")}>
-                  긴소매 상의
-                </DropdownItem>
-                <DropdownItem onClick={() => handleSelect("슬리브리스 상의")}>
-                  슬리브리스 상의
-                </DropdownItem>
-                <DropdownItem onClick={() => handleSelect("롱팬츠")}>
-                  롱팬츠
-                </DropdownItem>
-                <DropdownItem onClick={() => handleSelect("숏팬츠")}>
-                  숏팬츠
-                </DropdownItem>
-                <DropdownItem onClick={() => handleSelect("스커트")}>
-                  스커트
-                </DropdownItem>
-                <DropdownItem onClick={() => handleSelect("원피스")}>
-                  원피스
-                </DropdownItem>
-                <DropdownItem onClick={() => handleSelect("신발")}>
-                  신발
-                </DropdownItem>
+                {clothingCategories.map((category) => (
+                  <DropdownItem
+                    key={category.value}
+                    onClick={() => handleCategorySelect(category.value)}
+                  >
+                    {category.label}
+                  </DropdownItem>
+                ))}
               </DropdownList>
             </DropdownContainer>
           </DetailNamebox>
           <DetailNamebox>
             <DetailName>사이즈</DetailName>
             <CurvedRectangle>
-              <NoteArea></NoteArea>
+              <NoteArea
+                name="size"
+                value={clothData.size}
+                onChange={handleInputChange}
+              />
             </CurvedRectangle>
           </DetailNamebox>
           <DetailNamebox>
             <DetailName>핏</DetailName>
             <CurvedRectangle>
-              <NoteArea>세미</NoteArea>
+              <Dropdefault>
+                {getLabelByValue(fitOptions, clothData.fit)}
+              </Dropdefault>
+              <Toggledown onClick={() => setIsFitOpen(!isFitOpen)}>
+                &lt;
+              </Toggledown>
             </CurvedRectangle>
+            <DropdownContainer isToggle={isFitOpen}>
+              <DropdownList>
+                {fitOptions.map((fit) => (
+                  <DropdownItem
+                    key={fit.value}
+                    onClick={() => handleFitSelect(fit.value)}
+                  >
+                    {fit.label}
+                  </DropdownItem>
+                ))}
+              </DropdownList>
+            </DropdownContainer>
           </DetailNamebox>
           <DetailNamebox>
             <DetailName>URL</DetailName>
             <CurvedRectangle>
               <Detailbox>
-                <a href="https:://adidas.co.kr/1245">
-                  https:://adidas.co.kr/1245
+                <a
+                  href={clothData.URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {clothData.URL}
                 </a>
               </Detailbox>
             </CurvedRectangle>
@@ -172,7 +262,11 @@ const ClothupdatePage = () => {
           <DetailNamebox>
             <DetailName>메모</DetailName>
             <CurvedRectangle2>
-              <NoteArea>길이는 딱 맞고,팔이 조금 길다.</NoteArea>
+              <NoteArea
+                name="memo"
+                value={clothData.memo}
+                onChange={handleInputChange}
+              />
             </CurvedRectangle2>
           </DetailNamebox>
           <DetailNamebox>
@@ -180,53 +274,81 @@ const ClothupdatePage = () => {
             <MeasureNamebox>
               <MeasureName>총장</MeasureName>
               <CurvedRectangle3>
-                <MeasureArea>40</MeasureArea>
+                <MeasureArea
+                  name="length"
+                  value={clothData.length}
+                  onChange={handleInputChange}
+                />
               </CurvedRectangle3>
               <MeasureName>cm</MeasureName>
             </MeasureNamebox>
             <MeasureNamebox>
               <MeasureName>어깨너비</MeasureName>
               <CurvedRectangle3>
-                <MeasureArea>71</MeasureArea>
+                <MeasureArea
+                  name="shoulder"
+                  value={clothData.shoulder}
+                  onChange={handleInputChange}
+                />
               </CurvedRectangle3>
               <MeasureName>cm</MeasureName>
             </MeasureNamebox>
             <MeasureNamebox>
               <MeasureName>가슴단면</MeasureName>
               <CurvedRectangle3>
-                <MeasureArea>73</MeasureArea>
+                <MeasureArea
+                  name="chest"
+                  value={clothData.chest}
+                  onChange={handleInputChange}
+                />
               </CurvedRectangle3>
               <MeasureName>cm</MeasureName>
             </MeasureNamebox>
             <MeasureNamebox>
               <MeasureName>암홀단면</MeasureName>
               <CurvedRectangle3>
-                <MeasureArea>-</MeasureArea>
+                <MeasureArea
+                  name="armhole"
+                  value={clothData.armhole}
+                  onChange={handleInputChange}
+                />
               </CurvedRectangle3>
               <MeasureName>cm</MeasureName>
             </MeasureNamebox>
             <MeasureNamebox>
               <MeasureName>소매단면</MeasureName>
               <CurvedRectangle3>
-                <MeasureArea>-</MeasureArea>
+                <MeasureArea
+                  name="sleeve"
+                  value={clothData.sleeve}
+                  onChange={handleInputChange}
+                />
               </CurvedRectangle3>
               <MeasureName>cm</MeasureName>
             </MeasureNamebox>
             <MeasureNamebox>
               <MeasureName>소매길이</MeasureName>
               <CurvedRectangle3>
-                <MeasureArea>-</MeasureArea>
+                <MeasureArea
+                  name="sleeve_length"
+                  value={clothData.sleeve_length}
+                  onChange={handleInputChange}
+                />
               </CurvedRectangle3>
               <MeasureName>cm</MeasureName>
             </MeasureNamebox>
             <MeasureNamebox>
               <MeasureName>밑단단면</MeasureName>
               <CurvedRectangle3>
-                <MeasureArea>-</MeasureArea>
+                <MeasureArea
+                  name="hem"
+                  value={clothData.hem}
+                  onChange={handleInputChange}
+                />
               </CurvedRectangle3>
               <MeasureName>cm</MeasureName>
             </MeasureNamebox>
-            <StyledButton>옷 정보 수정하기</StyledButton>
+            <StyledButton onClick={handleUpdate}>옷 정보 수정하기</StyledButton>
           </DetailNamebox>
         </Parent3>
       </Parent1>