Skip to content

Commit

Permalink
Merge pull request #107 from UMC-FITple/feat/#106
Browse files Browse the repository at this point in the history 
[FE]feat디테일 옷장메인수정
  • Loading branch information
@chundang
chundang authored Aug 23, 2024
2 parents 3b41fc1 + a78dab9 commit bbf238b
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 107 deletions.
29 changes: 17 additions & 12 deletions FITple-Frontend/src/components/UserItem/UserItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -41,19 +46,19 @@ const UserItem = ({ ...props }) => {
console.log(isOpen);
};
return (
<Container>
{/* 아이템 이미지 */}
<ImgWrap onClick={navgateToDetail}>
<ItemImg
src={
item.cloth_image ||
"https://search.pstatic.net/common/?src=https%3A%2F%2Fshopping-phinf.pstatic.net%2Fmain_8829244%2F88292446418.jpg&type=f372_372"
}
/>
{item.likes == 1 && <HeartImg src={HeartIcon} />}
</ImgWrap>
<>
{props.data[0] !== "해당 제품은 등록되어 있지 않아요." ? (
<Container>
{/* 아이템 이미지 */}
<ImgWrap>
<ItemImg
src={
item.cloth_image ||
"https://search.pstatic.net/common/?src=https%3A%2F%2Fshopping-phinf.pstatic.net%2Fmain_8829244%2F88292446418.jpg&type=f372_372"
}
/>
{item.likes == 1 && props.$main && <HeartImg src={HeartIcon} />}
</ImgWrap>


{/* 유저정보 */}
<UserInfo {...props}>
Expand Down
23 changes: 16 additions & 7 deletions FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,14 +225,23 @@ function ClothdetailPage() {
return (
<div>
<Parent1>
<ChangeButton onClick={comparePopUpOpen} />
<ChangeButton
onClick={comparePopUpOpen}
src="../assets/changebutton.svg"
/>
{isBookmark ? (
<FilledBookmark onClick={handleBookmark} />
<FilledBookmark
onClick={handleBookmark}
src="../assets/filledbookmark.svg"
/>
) : (
<EmptyBookmark onClick={handleBookmark} />
<EmptyBookmark
onClick={handleBookmark}
src="../assets/emptybookmark.svg"
/>
)}
<Link to="/cloth">
<BackIcon />
<BackIcon src="../assets/BackArrow.svg" />
</Link>
<CurrentCloth>옷장{">"}아우터</CurrentCloth>
</Parent1>
Expand All @@ -259,9 +268,9 @@ function ClothdetailPage() {
</ClothName>

<ClothdebarContainer onClick={toggleEdit}>
<Clothdebar />
<Clothdebar />
<Clothdebar />
<Clothdebar src="../assets/detailbar.svg" />
<Clothdebar src="../assets/detailbar.svg" />
<Clothdebar src="../assets/detailbar.svg" />
{isEdit && (
<EditButtons isEdit={isEdit}>
<Link to="/clothupdate">
Expand Down
29 changes: 9 additions & 20 deletions FITple-Frontend/src/pages/ClothdetailPage/ClothdetailPage.style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ export const ProductDeImagemin = styled.img`
margin-right: 10px;
margin-bottom: 10px;
background-color: #efefef;
background-image: url();
background-position: center;
background-size: cover;
`;
Expand Down Expand Up @@ -99,19 +98,14 @@ export const ClothdebarContainer = styled.div`
background-color: #f0f0f0;
}
`;
export const Clothdebar = styled.div`
export const Clothdebar = styled.img`
//옷 이름 옆 점 세개(추가,수정나오는칸)
background: url(assets/detailbar.svg);
width: 7px;
height: 7px;
margin-bottom: 3px;
`;

export const BackIcon = styled.div`
//뒤로가기 아이콘
width: 15px;
height: 38.83px;
background: url(assets/back.svg);
export const BackIcon = styled.img`
margin-left: 70px;
margin-top: 20px;
`;
Expand Down Expand Up @@ -189,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)};
Expand All @@ -211,16 +205,14 @@ export const EditButton = styled.button`
}
`;

export const FullStar = styled.div`
export const FullStar = styled.img.attrs({ src: "/assets/star8.svg" })`
width: 38px;
height: 37px;
background: url(assets/Star8.svg);
z-index: 1;
`;
export const EmptyStar = styled.div`
export const EmptyStar = styled.img.attrs({ src: "/assets/star5.svg" })`
width: 38px;
height: 37px;
background: url(assets/Star5.svg);
z-index: 1;
`;

Expand Down Expand Up @@ -265,9 +257,8 @@ export const MeasureArea = styled.textarea`
margin-right: 20px;
`;
//비교
export const ChangeButton = styled.div`
export const ChangeButton = styled.img`
position: fixed;
background: url(assets/changebutton.svg);
width: 97px;
height: 97px;
top: 450px;
Expand All @@ -276,9 +267,8 @@ export const ChangeButton = styled.div`
z-index: 1;
`;
// 하얀찜
export const EmptyBookmark = styled.div`
export const EmptyBookmark = styled.img`
position: fixed;
background: url(assets/emptybookmark.svg);
width: 97px;
height: 97px;
top: 550px;
Expand All @@ -287,9 +277,8 @@ export const EmptyBookmark = styled.div`
z-index: 1;
`;
//파란색찜
export const FilledBookmark = styled.div`
export const FilledBookmark = styled.img`
position: fixed;
background: url(assets/filledbookmark.svg);
width: 97px;
height: 97px;
top: 550px;
Expand Down
68 changes: 0 additions & 68 deletions FITple-Frontend/src/pages/ClothmainPage/ClothmainPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,80 +86,12 @@ const ClothmainPage = () => {
</SearchContainer>
</FirstContainer>
<SecondContainer>
{/* <SideBar
onCategoryClick={(categoryId) => fetchClothData(categoryId)} // 카테고리 ID를 그대로 category로 전달
/> */}
<Wrap>
<SideBarWrap>
<SideBar setCategory={setCategory} />
</SideBarWrap>
<ItemListWrap>
<ItemList $main data={clothData} />
{/* <ProductContainer>
{filteredData.map((item) => (
<ProductItem key={item.cloth_id}>
<Imgcontainer>
<Link to={`/clothdetail/${item.cloth_id}`}>
<ProductImage
image={`../../assets/${item.cloth_id}.jpg`} // 수정된 경로
/>
{item.likes > 0 && <FilledHeart />}
</Link>
</Imgcontainer>
<ProductBrand>{item.brand}</ProductBrand>
<ClothdebarContainer
onClick={() => toggleEdit(item.cloth_id)}
>
<Clothdebar />
<Clothdebar />
<Clothdebar /> */}
{/* isEdit 상태를 활용해 Edit 버튼을 보여줌 */}
{/* {isEdit[item.cloth_id] && (
<EditButtons>
<Link to="/clothupdate">
<EditButton>옷 정보 수정하기</EditButton>
</Link>
<EditButton onClick={handleDeleteCloth}>
옷 정보 삭제하기
</EditButton>
</EditButtons>
)}
{isDeletePopupOpen && (
<Modal
isOpen={isDeletePopupOpen}
onRequestClose={() => setisDeletePopupOpen(false)}
style={{
overlay: {
backgroundColor: "rgba(81, 78, 78, 0.162)",
},
content: {
border: "none",
backgroundColor: "transparent",
overflow: "hidden",
},
}}
>
<DeletePopUp
isOpen={isDeletePopupOpen}
onClose={() => setisDeletePopupOpen(false)}
/>
</Modal>
)}
</ClothdebarContainer>
<ProductName>{item.cloth_name}</ProductName>
<ProductDetail>
{item.size} • {item.fit}
</ProductDetail>
</ProductItem>
))}
<Link to="/clothregister">
<PLUSbutton />
</Link>
</ProductContainer> */}
<PLUSbutton onClick={() => goToResister()} />
</ItemListWrap>
</Wrap>
Expand Down

0 comments on commit bbf238b

Please sign in to comment.