목표

룩북 섹션의 이미지 클릭 시
해당 이미지 id에 해당하는 tab-img를 change-block에 띄우기

이미지선택 상태함수 생성

 const [selectedImg, setselectedImg] = useState(null);

이미지 선택 이벤트함수 작성

• find 함수를 사용하여 선택한 이미지의 id 값이 일치하는 lookbook 객체를 찾아서 selectedLookbook 변수에 넣는다.
• 현재 선택된 이미지의 tabimg 값을 selectedImg 상태값으로 설정

handleImgClick 함수는 클릭된 이미지의 id 값을 전달받아 해당 이미지의 tabimg를 찾아 상태를 업데이트하도록 구현

     const handleImgClick = (id) => {
        const selectedLookbook = lookbookData.find((lookbook) => lookbook.id === id);
        setselectedImg(selectedLookbook.tabimg);
    };

이벤트 함수 적용

• handleImgClick함수를 호출하여 id를 식별하기 위해 lookbook.id값을 전달한다.

<div className="lookbook-img"
  onClick={() => handleImgClick(lookbook.id)}
> 
 <img
       src={lookbook.img}
       style={{
       width: '100%',
       height: '100%',
       overflow: ' hidden', }}
  ></img>
</div>

tab 이미지 설정

   <div className="change-block">
       {selectedImg && (
      <img
        className="change-img"
       src={selectedImg}
        alt={`Lookbook Tab Image ${lookbook.id}`/>)}
   </div>

+추가사항

• tab-img에서 각 상품들에 마우스 hover시 좌표설정 및 배경색 어둡게 설정, 해당 상품들만 하이라이트 효과로 보여지게 설정

• hover시 이미지옆에 상품명, 가격 표시