일기 작성 어떤 아이콘을 선택

일기 작성 페이지에서 

아이콘을 눌렀을때 이미지가 변경 되도록 수정

 

기존 

아무런 효과가 없음 사용자가 선택을 했는지 안했는지 확인 하기 어려움

 

수정

사용자가 선택 했을 때 이미지가 변경 됨

 const imgRef_t0 = useRef<HTMLImageElement>(null);
  
 const handleImageClick = (item: string) => {
    setWalkNums(walkNums + 1);
    if (imgRef_t0.current) {
      if (
        imgRef_t0.current.src.includes("img_icon1-1.png")
      ) {
        imgRef_t0.current.src =
          "이미지";
        setBtnTopSelect([item]);
      } else {
        imgRef_t0.current.src =
          "이미지";
        setBtnTopSelect([]);
      }
    }
  };


 <button
    className="mt-2.5"
    type="button"
    onClick={() => handleImageClick(item.name)}
  >
    <img
      ref={imgRef_t0}
      src={item.imgurl}
      alt={item.name}
    />
  </button>

1. DOM에 접근

2. 접근해서 해당 이미지가 있는지에 따라 이미지 변경