[Next.js/JS] 클릭하면 상태 변하는 이미지 버튼 만들기(styled-components)

1. 필요한 이미지와 Image 컴포넌트 import

import IconCheck from "../../../public/img/btn_check_01.svg"
import IconCheckOK from "../../../public/img/btn_check_02.svg"
import Image from "next/image";

 

2. 체크 상태와 이미지를 저장할 userState 생성 및 클릭 함수 생성

    const [isClicked, setIsClicked] = useState(false);
    const [src, setSrc] = useState(IconCheck);

    const handleClick = () => {
        setSrc(src === IconCheck ? IconCheckOK : IconCheck);
        setIsClicked(!isClicked);
    };

 

3. 이미지와 함께 글씨를 같이 써야해서 ImageWrapper를 생성해서 UI 만듦.

const ImageWrapper = styled.div`
  display: flex;
  align-items: center;
  cursor: pointer;
`;

const Text = styled.p`
  margin-left: 14px;
`;



<ImageWrapper onClick={handleClick}>
    <Image src={src}/>
    <Text>테스트</Text>
</ImageWrapper>