1차 프로젝트 Day 4🔥
(meeting log와 구현한 이벤트/ 새로운 기능 정리)
아래 굵은 글씨 부분이 내가 구현한 /구현할 부분
쉬운 것 부터 어려운 순서대로!!🤗
class Product extends React.Component {
render() {
return (
<main className = "Product"></main>
)}}
class Product extends React.Component {
constructor(props) {
super(props);
this. state= {
imageSrc= this.props.imageUrl,
hovered: false,
colorHovered: false
}
}
import { Link } from "react-router-dom";
"/shopping/man"
로 이동해야 하면 클릭해야 하는 이벤트에 아래를 적용 시켜 준다. <Link to="/shopping/man">
<div className="imgs"></div>
</Link>
const {
mouseOutHandler,
mouseOverHandler,
colorMouseOut,
colorMouseOver,
} = this;
const { imageSrc, hovered, colorHovered } = this.state;
const { name, price, colors } = this.props;
opacity
값을 1 혹은 0
으로 줌으로서 mouseon했을 때/mouseout했을 때
보여주고자 하는 이미지를 height값에 영향 주지 않고 적용할 수 있다..show
or .hide
라는 클래스를 새로 만들어 주고 .hide {
opacity: 0;
}
.show {
opacity: 1;
}
.color-and-add {
display: flex;
justify-content: space-between;
margin-top: 10px;
<div
className={
colorHovered || hovered
? "color-and-add show"
: "color-and-add hide"
}
>
-여기서 className에 state 값에 or을 준 이유는 버튼에 중복으로 mouseover 이벤트가 일어나는걸 방지하기위해 mouseover이벤트를 버튼과 버튼이외의 부분으로 나누었기 때문에 그 부분일 경우 다 를 포함하고 싶어서 or로 적용해 주었다.
onMouseEnter={this.clickhandler}
이런 식으로 적용 했었는데 만약 이벤트가 일어 났을 때 데이터를 넘겨줘서, state를 변경시켜줘야 하는 경우라면 인자로 넘겨 주어야한다. <div className="color-options">
{colors.map((color) => {
return (
<img
onMouseEnter={() => colorMouseOver(color.imageUrl)}
onMouseLeave={colorMouseOut}
alt=""
className="color-option"
src={color.colorImage}
/>
:before
는 해당 클래스 외 에 적용하려는 css를 의미하고 항상 content가 있어야 하는데 우리는 밑줄만 원하는거라서 content : ""
라고 적용한다. .quick-add-hovered {
font-family: MierA-Demi;
font-size: 11px;
letter-spacing: 1px;
line-height: 15.4px;
background-color: transparent;
text-decoration: none;
padding: 5.5px 0px 5px 0px;
cursor: pointer;
border: none;
outline: none;
position: relative;
transition: 0.3s;
}
.quick-add-hovered::before {
content: "";
border-bottom: 0.5px solid black; //밑줄 굵기
padding: 0 0.1px; //밑 줄 호버 전 길이
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
transition: 0.3s; //애니메이션이 구현되는 duration
}
.quick-add-hovered:hover::before {
width: 100%; //hover 했을 때의 밑줄 길이
}
제품 리스트 페이지에서 상품을 클릭하면 상세 이미지가 나오는 것 까지는 이전에 true or false로 해결하였다. 하지만 mouseover 된 상태에서 색깔 버튼을 누르면 그 색상의 옷 이미지로 변신하는 기능을 구현하려고 하니 이미지가 2개 이상 들어가는 것이었다....자 그럼 이제 true false로 적용된 이벤트를 버리고, 각각의 버튼 이미지에 또 mouseover 이벤트를 줘서 구현을 해야한다.
여기서 문제는 mouseEnter이 적용되는 구간에 또다른 mouseEnter를 입히게 되는건데, 그렇게 되면 중복 이벤트가 발생되면서 중첩이 되서 값이 계속 바뀌는 상황이 난다. 이걸 해결하기 위해 하나의 mouseover이벤트가 일어날때는 다른 mouseover이벤트가 일어나지 않게 적용해야한다.
비루한 그림이지만 이렇게 mouseenter이벤트가 전체에 걸려있는 상황에, 아래 작은버튼에도 mouseenter이벤트를 걸어주면 저렇게 빨간 부분처럼 겹치는 상황이 생겨서 이벤트가 잘 안먹힐 수 있다.
<해결 코드>
if (colorHovered) return;
colorMouseOver = (img) => {
this.setState({ imageSrc: img, colorHovered: true });
};
this.state = {
imageSrc: this.props.imageUrl,
hovered: false,
colorHovered: false,
};
}
mouseOverHandler = () => {
const { colorHovered } = this.state;
if (colorHovered) return;
this.setState({ imageSrc: this.props.imageHovered, hovered: true });
};
mouseOutHandler = () => {
const { colorHovered } = this.state;
if (colorHovered) return;
this.setState({ imageSrc: this.props.imageUrl, hovered: false });
};
colorMouseOver = (img) => {
this.setState({ imageSrc: img, colorHovered: true });
};
colorMouseOut = () => {
this.setState({ imgSrc: this.props.imageUrl, colorHovered: false });
};