[Wikea] 제품과 디지털 쇼룸 이미지 데이터 다르게 불러오기
구현 기능
- listHeader의 제품과 디지털쇼룸 클릭 시, 불러오는 이미지 데이터를 변경하도록 구현했다. 제품 이미지가 기본값이며 디지털 쇼룸에 해당하는 이미지가 없으면 일반 제품 이미지를 보여준다.
- 마우스를 상품 위로 호버하면, 이미지 변경되며 장바구니&찜 아이콘이 출력되고, 상품에서 벗어나면 기존 상태로 돌아간다.
- 유저가 위시리스트에 저장한 상품을 아이콘 상태로 확인할 수 있다.
구현 코드
다음 두 가지 기능은 useState를 사용하여 구현했다.
1)
'제품'을 클릭할 경우, setListState 값을 0으로 지정한다.
'디지털 쇼룸'을 클릭할 경우, setListState 값을 1로 지정한다.
기본적으로 제품에서는 데이터에서 받아온 이미지 배열에 담긴 [0]번 index의 이미지 주소값을 불러오고, 디지털 쇼룸에서는 이미지 배열의 [1]번 index의 이미지 주소값을 불러온다.
List.jsx
function List({ title, data }) {
const [listState, setListState] = useState(0);
return (
<ListWrapper active={listState === 1}>
<h1>{title}</h1>
<div>
<ul>
<li>
<ButtonRound>전체 상품</ButtonRound>
</li>
<li>
<ButtonRound gray>정렬</ButtonRound>
</li>
<li>
<ButtonRound gray>가격</ButtonRound>
</li>
</ul>
<div>
<span>{`${data.length}개`}</span>
<b onClick={() => setListState(0)}>제품</b>
<b onClick={() => setListState(1)}>디지털 쇼룸</b>
</div>
</div>
<ListContainer>
{data.map((item) => (
<ListItem listState={listState} data={item} key={item.id} />
))}
</ListContainer>
</ListWrapper>
);
}
2)
[1]번째 이미지 주소를 가지고 있지 않은 제품이 있기 때문에 다음과 같이 조건을 걸어 처리해준다.
listState가 0이고, data.images[1] 값이 있을 경우,
img 주소를 받아와 화면에 출력하는데 hover가 있으면, 데이터에 담긴 이미지의 [1]번째 담긴 주소값을, hover 하지 않을 경우, [0]번째 인덱스에 담긴 주소값을 받아온다.
data.images[1]값이 없을 경우엔, images[0]의 값을 받아준다.
그리고 listState가 0이 아닐 경우(=1일 경우),
위에서 상수로 지정한 imgIndex값, data.images[1]에 값이 있으면 1을 담고, 없으면 0을 담아 이미지의 인덱스 값으로 넣어준다.
ListItem.jsx
function ImageBox({ data, listState, hover }) {
const imgIndex = data.images[1] ? 1 : 0;
return (
<div>
{listState === 0 ? (
data.images[1] ? (
<img
src={hover ? data.images[1].src : data.images[0].src}
alt={data.summary}
/>
) : (
<img src={data.images[0].src} alt={data.summary} />
)
) : (
<img src={data.images[imgIndex].src} alt={data.summary} />
)}
</div>
);
}
호버의 경우, onEnter(), onLeave() 두 가지 함수를 만들어주었다.
export default function ListItem({ data, listState }) {
const [hover, setHover] = useState(false);
const onEnter = () => {
setHover(true);
};
const onLeave = () => {
setHover(false);
};
const iconStyle = {
opacity: hover ? 1 : 0,
};
return (
<ListItemContainer>
<ListItemBox hover={hover} onMouseEnter={onEnter} onMouseLeave={onLeave}>
<i style={iconStyle}>
<RiHeartLine />
</i>
<ImageBox data={data} listState={listState} hover={hover} />
<article>
<h2>{data.title}</h2>
<span>{data.summary}</span>
<div>
<span>₩</span>
<strong>{data.price.toLocaleString()}</strong>
</div>
<ButtonCart />
</article>
</ListItemBox>
</ListItemContainer>
);
}
Author And Source
이 문제에 관하여([Wikea] 제품과 디지털 쇼룸 이미지 데이터 다르게 불러오기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@letthere/제품과-디지털-쇼룸-이미지-데이터-다르게-불러오기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)