From 744a3c5b54ffa9a2294c472a46daa462a565c560 Mon Sep 17 00:00:00 2001 From: Yeon dong Date: Fri, 23 Aug 2024 08:49:27 +0900 Subject: [PATCH] =?UTF-8?q?Revert=20"[FE]Feat/#97=20=EC=98=B7=EC=9E=A5=20?= =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=EC=88=98=EC=A0=95=20=EC=82=AD=EC=A0=9C"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FITple-Frontend/data/ClothApi.jsx | 7 +- FITple-Frontend/data/DeleteApi.jsx | 22 -- FITple-Frontend/data/UpdateApi.jsx | 26 -- FITple-Frontend/src/App.jsx | 5 +- .../RegisterPopUp/RegisterPopUp.jsx | 5 +- .../src/components/SideBar/SideBar.jsx | 4 +- .../pages/ClothdetailPage/ClothdetailPage.jsx | 27 +- .../src/pages/ClothmainPage/ClothmainPage.jsx | 231 ++++++++++------- .../ClothmainPage/ClothmainPage.style.js | 111 ++++---- .../pages/ClothupdatePage/ClothupdatePage.jsx | 238 +++++------------- .../ClothupdatePage/ClothupdatePage.style.js | 11 +- 11 files changed, 289 insertions(+), 398 deletions(-) delete mode 100644 FITple-Frontend/data/DeleteApi.jsx delete mode 100644 FITple-Frontend/data/UpdateApi.jsx diff --git a/FITple-Frontend/data/ClothApi.jsx b/FITple-Frontend/data/ClothApi.jsx index 698fbf8..f959fa0 100644 --- a/FITple-Frontend/data/ClothApi.jsx +++ b/FITple-Frontend/data/ClothApi.jsx @@ -1,9 +1,14 @@ const localhost = "http://localhost:3000"; -export const ClothApi = async () => { +export const ClothApi = async (category, cursorId, size) => { 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", diff --git a/FITple-Frontend/data/DeleteApi.jsx b/FITple-Frontend/data/DeleteApi.jsx deleted file mode 100644 index afe2970..0000000 --- a/FITple-Frontend/data/DeleteApi.jsx +++ /dev/null @@ -1,22 +0,0 @@ -// 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 deleted file mode 100644 index a993aa1..0000000 --- a/FITple-Frontend/data/UpdateApi.jsx +++ /dev/null @@ -1,26 +0,0 @@ -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/App.jsx b/FITple-Frontend/src/App.jsx index aa93944..a9e49c0 100644 --- a/FITple-Frontend/src/App.jsx +++ b/FITple-Frontend/src/App.jsx @@ -32,8 +32,7 @@ import LayoutMain from "./layout/LayoutMain"; import ProfileEditPage from "./pages/ProfileEditPage/ProfileEditPage"; import ChangepwdPage from "./pages/ChangepwdPage/ChangepwdPage"; import NotFoundPage from "./pages/NotFoundPage/NotFoundPage"; -import Modal from "react-modal"; -Modal.setAppElement("#root"); // 모달이 root에 렌더링 되도록 설정 +import SearchTotalPage from "./pages/SearchTotalPage/SearchTotalPage"; function App() { return ( <> @@ -60,7 +59,7 @@ function App() { } /> } /> } /> - } /> + } /> {/* 프로필페이지 */} } /> } /> diff --git a/FITple-Frontend/src/components/RegisterPopUp/RegisterPopUp.jsx b/FITple-Frontend/src/components/RegisterPopUp/RegisterPopUp.jsx index 0328cb8..dfab76c 100644 --- a/FITple-Frontend/src/components/RegisterPopUp/RegisterPopUp.jsx +++ b/FITple-Frontend/src/components/RegisterPopUp/RegisterPopUp.jsx @@ -1,4 +1,3 @@ -import { Link } from "react-router-dom"; import { Container, Text1, @@ -24,9 +23,7 @@ const RegisterPopUp = ({ onClose }) => { 개인정보 등 민감한 정보는 수정해주세요! - - 등록하기 - + 등록하기 ); diff --git a/FITple-Frontend/src/components/SideBar/SideBar.jsx b/FITple-Frontend/src/components/SideBar/SideBar.jsx index 68e578b..730a88c 100644 --- a/FITple-Frontend/src/components/SideBar/SideBar.jsx +++ b/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); // 클릭된 카테고리 ID 업데이트 + setSelectedCategory(category.name); + setCategory(category.id); }; return ( diff --git a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx b/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx index 426a7f9..87737ab 100644 --- a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx +++ b/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx @@ -1,8 +1,6 @@ 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, @@ -45,7 +43,6 @@ 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(""); @@ -91,21 +88,7 @@ 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) { @@ -119,6 +102,10 @@ function ClothdetailPage() { setIsEdit(!isEdit); }; + const handleDeleteCloth = () => { + setisDeletePopupOpen(!isDeletePopupOpen); + }; + const handleInputchange = (e) => { setNote(e.target.value); }; @@ -277,13 +264,9 @@ function ClothdetailPage() { {isEdit && ( - + 옷 정보 수정하기 - 옷 정보 삭제하기 diff --git a/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.jsx b/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.jsx index 0774d9f..8b6efa9 100644 --- a/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.jsx +++ b/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.jsx @@ -1,117 +1,170 @@ import { useState, useEffect } from "react"; import SideBar from "../../components/SideBar/SideBar"; import { - MainProductDetail as ProductDetail, - MainProductImage as ProductImage, - MainProductItem as ProductItem, - MainProductName as ProductName, - MainProductBrand as ProductBrand, - MainProductContainer as ProductContainer, - MainParent as Parent, - MainFilledHeart as FilledHeart, - MainImgContainer as Imgcontainer, - MainPLUSbutton as PLUSbutton, - MainClothdebarContainer as ClothdebarContainer, - MainClothdebar as Clothdebar, - MainSearchBar as SearchBar, - MainSearchIcon as SearchIcon, - MainSearchContainer as SerchContainer, - MainSerchTitle as SerchTitle, - MainSerchTitle2 as SerchTitle2, - MainSerchTitleContainer as SerchTitleContainer, - MainSideBarWrapper as SideBarWrapper, + ProductDetail, + ProductImage, + ProductItem, + ProductName, + ProductBrand, + ProductContainer, + Parent, + FilledHeart, + Imgcontainer, + PLUSbutton, + EditButtons, + EditButton, + ClothdebarContainer, + Clothdebar, + SearchBar, + SerchTitle, + SerchTitle2, + SerchTitleContainer, + Container, + FirstContainer, + SecondContainer, + SearchContainer, + SearchBarWrap, + SearchImg, + SideBarWrap, + Wrap, + ItemListWrap, } from "./ClothmainPage.style"; import { Link } from "react-router-dom"; +import Modal from "react-modal"; +import DeletePopUp from "../../components/DeletePopUp/DeletePopUp"; +import { ClothApi } from "../../../data/ClothApi"; +import SearchIcon from "../../../assets/search.svg"; +import ItemList from "../../components/ItemList/ItemList"; +import { useNavigate } from "react-router-dom"; const ClothmainPage = () => { - const [filteredData, setFilteredData] = useState([]); - const [category, setCategory] = useState(undefined); // 선택된 카테고리 상태 + const [category, setCategory] = useState(undefined); + const [isEdit, setIsEdit] = useState({}); + const [clothData, SetClothData] = useState([]); + const [isDeletePopupOpen, setisDeletePopupOpen] = useState(false); - // Fetch data from the API - const fetchClothData = async (category) => { - try { - const url = new URL(`http://localhost:3000/FITple/my/closet/main`); + const navigate = useNavigate(); - // 선택된 카테고리가 있을 때만 쿼리스트링에 category 추가 - if (category !== undefined) { - url.searchParams.append("category", category); - } - - const response = await fetch(url, { - method: "GET", - credentials: "include", - }); + const toggleEdit = (clothId) => { + setIsEdit((prev) => ({ + ...prev, + [clothId]: !prev[clothId], // 현재 clothId의 값을 반전시킴 + })); + }; - if (response.ok) { - const data = await response.json(); + const goToResister = () => { + navigate("/clothregister"); + }; - if (data.result && Array.isArray(data.result.clothData)) { - setFilteredData(data.result.clothData); // 데이터 설정 - } else { - console.error("Unexpected response format:", data.result); - setFilteredData([]); // 데이터가 배열이 아닌 경우 빈 배열 설정 - } - } else { - console.error("Failed to fetch cloth data:", response.statusText); - } - } catch (error) { - console.error("Failed to fetch cloth data:", error); - } + const handleDeleteCloth = () => { + setisDeletePopupOpen(!isDeletePopupOpen); }; - // 선택된 카테고리가 변경될 때마다 데이터를 다시 로드 + // Api 데이터 가져오기 + const getClothData = async () => { + const response = await ClothApi(category); + SetClothData(response.result.clothData); + console.log("옷장확인", response.result.clothData); + }; useEffect(() => { - fetchClothData(category); + getClothData(); }, [category]); return ( - - - - - - - + + {/* 위에 컨테이너 */} + + 내 옷 을 검색해보세요. - - - + + + + + + + + {/* fetchClothData(categoryId)} // 카테고리 ID를 그대로 category로 전달 + /> */} + + + + + + + {/* + {filteredData.map((item) => ( + + + + + {item.likes > 0 && } + + - {filteredData.length > 0 ? ( - filteredData.map((item) => ( - - - - - {item.likes > 0 && } - - + {item.brand} + toggleEdit(item.cloth_id)} + > + + + */} + {/* isEdit 상태를 활용해 Edit 버튼을 보여줌 */} + {/* {isEdit[item.cloth_id] && ( + + + 옷 정보 수정하기 + - {item.brand} - - - - - + + 옷 정보 삭제하기 + + + )} + {isDeletePopupOpen && ( + setisDeletePopupOpen(false)} + style={{ + overlay: { + backgroundColor: "rgba(81, 78, 78, 0.162)", + }, + content: { + border: "none", + backgroundColor: "transparent", + overflow: "hidden", + }, + }} + > + setisDeletePopupOpen(false)} + /> + + )} + - {item.cloth_name} - - {item.size} • {item.fit} - - - )) - ) : ( -

해당 카테고리에 옷이 없습니다.

- )} + {item.cloth_name} - - - - - + + {item.size} • {item.fit} + + + ))} + + + + */} + goToResister()} /> + + + + ); }; diff --git a/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.style.js b/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.style.js index 732a5a8..da279b7 100644 --- a/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.style.js +++ b/FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.style.js @@ -1,7 +1,25 @@ import styled from "styled-components"; -export const MainProductItem = styled.div` +export const Container = styled.div` + min-height: 100vh; +`; + +export const FirstContainer = styled.div` + display: flex; + justify-content: center; +`; +export const SecondContainer = styled.div``; +export const SearchBarWrap = styled.div` + box-sizing: border-box; + width: 400px; + height: 44px; + position: relative; + display: flex; + align-items: center; +`; +export const ProductItem = styled.div` width: 250px; height: 250px; + top: 50px; background: #fff; border-radius: 20px; display: flex; @@ -11,53 +29,55 @@ export const MainProductItem = styled.div` padding: 20px; margin-bottom: 10px; `; -export const MainProductBrand = styled.div` +export const ProductBrand = styled.div` font-size: 20px; font-weight: 600; font-family: "SUIT Variable", sans-serif; color: #000000; `; -export const MainProductImage = styled.img` +export const ProductImage = styled.img` width: 200px; height: 200px; border-radius: 20px; + border-color: gray; background-color: #d9d9d9; - background-position: center; - background-size: cover; + object-fit: cover; margin-bottom: 10px; `; -export const MainImgContainer = styled.div` + +export const Imgcontainer = styled.div` display: flex; position: relative; `; -export const MainProductName = styled.div` +export const ProductName = styled.div` font-size: 20px; font-weight: 800; - margin-bottom: 10px; + margin-bottom: 10px; /* 하단 여백 */ `; -export const MainProductDetail = styled.div` +export const ProductDetail = styled.div` font-size: 18px; color: #666; `; -export const MainProductContainer = styled.div` - display: flex; - flex-wrap: wrap; - justify-content: flex-start; +export const ProductContainer = styled.div` + display: flex; /* flexbox 레이아웃 사용 */ + flex-wrap: wrap; /* 여러 줄로 나열 가능 */ + justify-content: flex-start; /* 아이템 사이 공간 최대한 활용 */ width: 90%; margin-bottom: auto; + overflow: hidden; `; -export const MainParent = styled.div` +export const Parent = styled.div` display: flex; align-items: flex-start; margin-left: 140px; `; -export const MainFilledHeart = styled.div` +export const FilledHeart = styled.div` background: url(assets/filledheart.svg); position: absolute; top: 20px; @@ -66,8 +86,21 @@ export const MainFilledHeart = styled.div` height: 30.58px; z-index: 1; `; +export const SideBarWrap = styled.div` + margin-right: 110px; +`; +export const Wrap = styled.div` + display: flex; + justify-content: center; + width: 100%; + padding-top: 40px; +`; +export const ItemListWrap = styled.div` + width: 1096px; + margin-bottom: 100px; +`; -export const MainPLUSbutton = styled.div` +export const PLUSbutton = styled.div` background: url(assets/plus.svg); position: fixed; width: 97px; @@ -82,6 +115,7 @@ export const EditButtons = styled.div` position: relative; flex-direction: column; justify-content: center; + display: ${(props) => (props.isEdit ? "flex" : "none")}; z-index: 1; `; export const EditButton = styled.button` @@ -98,7 +132,7 @@ export const EditButton = styled.button` background-color: #626262; } `; -export const MainClothdebarContainer = styled.div` +export const ClothdebarContainer = styled.div` display: flex; flex-direction: column; position: absolute; @@ -107,7 +141,7 @@ export const MainClothdebarContainer = styled.div` margin-left: 180px; margin-top: 210px; `; -export const MainClothdebar = styled.div` +export const Clothdebar = styled.div` //옷 이름 옆 점 세개(추가,수정나오는칸) background: url(assets/detailbar.svg); width: 7px; @@ -129,57 +163,46 @@ export const LoadMoreButton = styled.div` `; //검색창 만들기 -export const MainSearchContainer = styled.div` +export const SearchContainer = styled.div` display: flex; - position: relative; flex-direction: column; justify-content: center; align-items: center; - width: 100%; - height: 90px; - margin-bottom: 20px; - margin-right: 100px; + width: fit-content; `; -export const MainSearchIcon = styled.div` - background: url(assets/search.svg); - position: absolute; +export const SearchImg = styled.img` width: 30px; height: 30px; - left: 350px; - top: 60px; + position: absolute; + left: 16px; `; - -export const MainSearchBar = styled.input` - width: 400px; - height: 50px; +export const SearchBar = styled.input` + box-sizing: border-box; + width: 100%; + height: 100%; border: 1px solid #838383; - border-radius: 10px; - padding-left: 50px; - font-size: 20px; - font-family: "SUIT Variable", sans-serif; + border-radius: 30px; + font-size: 16px; + padding-left: 62px; color: #000000; `; -export const MainSerchTitleContainer = styled.div` +export const SerchTitleContainer = styled.div` display: flex; justify-content: center; align-items: center; width: 100%; height: 90px; `; -export const MainSerchTitle = styled.div` +export const SerchTitle = styled.div` font-size: 24px; font-weight: 800; font-family: "SUIT Variable", sans-serif; color: #0276fe; `; -export const MainSerchTitle2 = styled.div` +export const SerchTitle2 = styled.div` font-size: 24px; font-weight: 800; font-family: "SUIT Variable", sans-serif; color: #000000; `; -export const MainSideBarWrapper = styled.div` - display: flex; - margin-top: 100px; -`; diff --git a/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.jsx b/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.jsx index 5cc2694..738b155 100644 --- a/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.jsx +++ b/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.jsx @@ -1,5 +1,3 @@ -import { useState } from "react"; -import { useLocation, useParams, Link, useNavigate } from "react-router-dom"; import { BackIcon, SS, @@ -28,72 +26,25 @@ import { CurvedRectangle3, StyledButton, } from "./ClothupdatePage.style"; -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: "슬림" }, -]; +import { useState } from "react"; +import { Link } from "react-router-dom"; const ClothupdatePage = () => { - 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 [isToggle, setIsToggle] = useState(false); + const [selectedValue, setSelectedValue] = useState("아우터"); + const handleToggle = () => { + setIsToggle(!isToggle); }; - - 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++) { @@ -109,23 +60,6 @@ const ClothupdatePage = () => { } return stars; }; - - const handleUpdate = async () => { - try { - const updatedData = { - ...clothData, - cloth_image: clothData.cloth_image, // 이미지 필드를 명시적으로 포함 - rating, - }; - await updateCloth(clothId, updatedData); - alert("옷 정보가 성공적으로 수정되었습니다."); - navigate(`/clothdetail/${clothId}`); // 수정 후 상세 페이지로 이동 - } catch (error) { - alert("옷 정보 수정에 실패했습니다. 다시 시도해주세요."); - } - console.log(clothData); - }; - return (
@@ -133,7 +67,7 @@ const ClothupdatePage = () => { - + @@ -147,11 +81,7 @@ const ClothupdatePage = () => { 브랜드 - + 나이키 @@ -160,11 +90,7 @@ const ClothupdatePage = () => { - + 에센셜 풀집 후디 @@ -172,11 +98,7 @@ const ClothupdatePage = () => { 제품번호* - + @@ -184,69 +106,59 @@ const ClothupdatePage = () => { 분류* - - {getLabelByValue(clothingCategories, clothData.category)} - - setIsCategoryOpen(!isCategoryOpen)}> - < - + {selectedValue} + < - + - {clothingCategories.map((category) => ( - handleCategorySelect(category.value)} - > - {category.label} - - ))} + handleSelect("아우터")}> + 아우터 + + handleSelect("반소매 상의")}> + 반소매 상의 + + handleSelect("긴소매 상의")}> + 긴소매 상의 + + handleSelect("슬리브리스 상의")}> + 슬리브리스 상의 + + handleSelect("롱팬츠")}> + 롱팬츠 + + handleSelect("숏팬츠")}> + 숏팬츠 + + handleSelect("스커트")}> + 스커트 + + handleSelect("원피스")}> + 원피스 + + handleSelect("신발")}> + 신발 + 사이즈 - + 핏 - - {getLabelByValue(fitOptions, clothData.fit)} - - setIsFitOpen(!isFitOpen)}> - < - + 세미 - - - {fitOptions.map((fit) => ( - handleFitSelect(fit.value)} - > - {fit.label} - - ))} - - URL - - {clothData.URL} + + https:://adidas.co.kr/1245 @@ -260,11 +172,7 @@ const ClothupdatePage = () => { 메모 - + 길이는 딱 맞고,팔이 조금 길다. @@ -272,81 +180,53 @@ const ClothupdatePage = () => { 총장 - + 40 cm 어깨너비 - + 71 cm 가슴단면 - + 73 cm 암홀단면 - + - cm 소매단면 - + - cm 소매길이 - + - cm 밑단단면 - + - cm - 옷 정보 수정하기 + 옷 정보 수정하기 diff --git a/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.style.js b/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.style.js index b61ba0e..b6689b6 100644 --- a/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.style.js +++ b/FITple-Frontend/src/pages/ClothupdatePage/ClothupdatePage.style.js @@ -47,7 +47,7 @@ export const ProductDeImage = styled.img` border-color: gray; border-radius: 10px; background-color: #efefef; - + background-image: url(); background-position: center; background-size: cover; `; @@ -229,13 +229,13 @@ export const CurvedRectangle3 = styled.div` height: 20px; border: 1px solid #efefef; border-radius: 16px; - padding: 15px; + padding: 10px; margin-top: 20px; margin-left: 10px; margin-right: 10px; background-color: #efefef; `; -export const MeasureArea = styled.input` +export const MeasureArea = styled.textarea` width: 100%; height: 100%; resize: none; @@ -245,9 +245,8 @@ export const MeasureArea = styled.input` font-size: 15px; font-weight: bold; background-color: transparent; - padding: 5px; - text-align: center; /* 텍스트 중앙 정렬 */ - box-sizing: border-box; /* 패딩을 포함한 크기 계산 */ + margin-left: 130px; + margin-right: 20px; `; export const StyledButton = styled.button` width: 500px;