[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>
  );
}