From fbc6b17c45d0f1ab59e0670830d9dcbef9ebc39a Mon Sep 17 00:00:00 2001 From: chundang Date: Fri, 23 Aug 2024 14:11:59 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EB=94=94=ED=85=8C=EC=9D=BC=20=EC=98=B7?= =?UTF-8?q?=EC=9E=A5=EB=A9=94=EC=9D=B8=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/UserItem/UserItem.jsx | 7 +- .../pages/ClothdetailPage/ClothdetailPage.jsx | 23 ++- .../ClothdetailPage/ClothdetailPage.style.js | 25 +-- .../src/pages/ClothmainPage/ClothmainPage.jsx | 174 ++++++++---------- .../ClothmainPage/ClothmainPage.style.js | 111 ++++++----- 5 files changed, 177 insertions(+), 163 deletions(-) diff --git a/FITple-Frontend/src/components/UserItem/UserItem.jsx b/FITple-Frontend/src/components/UserItem/UserItem.jsx index 8e29e9c..22fd886 100644 --- a/FITple-Frontend/src/components/UserItem/UserItem.jsx +++ b/FITple-Frontend/src/components/UserItem/UserItem.jsx @@ -20,7 +20,12 @@ import { UserInfo, } from "./UserItem.style"; import { useState } from "react"; +import { useNavigate } from "react-router-dom"; const UserItem = ({ ...props }) => { + const navigate = useNavigate(); + const navgateToDetail = () => { + navigate(`/clothdetail/${item.cloth_id}`); + }; const [isOpen, setIsOpen] = useState(false); // 더미데이터 const dummyItem = { @@ -43,7 +48,7 @@ const UserItem = ({ ...props }) => { return ( {/* 아이템 이미지 */} - + - + {isBookmark ? ( - + ) : ( - + )} - + 옷장{">"}아우터 @@ -272,9 +281,9 @@ function ClothdetailPage() { - - - + + + {isEdit && ( { - 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 ( - - - - - - - + + {/* 위에 컨테이너 */} + + 내 옷 을 검색해보세요. - - - - - {filteredData.length > 0 ? ( - filteredData.map((item) => ( - - - - - {item.likes > 0 && } - - - - {item.brand} - - - - - - - {item.cloth_name} - - {item.size} • {item.fit} - - - )) - ) : ( -

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

- )} - - - - - - + + + + + + + + {/* fetchClothData(categoryId)} // 카테고리 ID를 그대로 category로 전달 + /> */} + + + + + + + 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; -`; From fbdade69db74ac17fe89e09b77a55c51302127ed Mon Sep 17 00:00:00 2001 From: chundang Date: Fri, 23 Aug 2024 14:16:06 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=EB=94=94=ED=85=8C=EC=9D=BC=20=EC=98=B7?= =?UTF-8?q?=EC=9E=A5=EB=A9=94=EC=9D=B8=EC=B5=9C=EC=A2=85=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/ClothdetailPage/ClothdetailPage.style.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.style.js b/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.style.js index 005c58d..0adcbb4 100644 --- a/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.style.js +++ b/FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.style.js @@ -183,8 +183,8 @@ export const Detailbox = styled.div` export const EditButtons = styled.div` display: flex; position: absolute; - right: 390px; - bottom: 330px; + right: 350px; + bottom: 430px; flex-direction: column; justify-content: center; opacity: ${(props) => (props.isEdit ? 1 : 0)};