[React 영화 소개]하트 토글/ 찜 목록/ wish list

뭐라고 해야할지,, 하트 아이콘,, 찜,,

 

import React from 'react'
import { useState } from "react"
import styled from 'styled-components';

import icon1 from '../../image/icon/icon_heart_1.png'
import icon2 from '../../image/icon/icon_heart_2.png'

function Addwish() {
    const [Wish, setWish] = useState(true); 
    const wishClick = () => {
        setWish(!Wish);
    }
  return (
    <WishIcon onClick={wishClick} isWish={Wish}/>
  )
}

export default Addwish

const WishIcon = styled.button`
    width: 3rem;
    height: 3rem;
    border:none;
    background-image: url(${props => props.isWish ? icon1 : icon2});
    background-size:100%;
    position:absolute;
    top:1rem;
    right:1rem;
`

간단하게 만들었다 데이터를 불러와서 저장하는 것은 이제 해야함

 

일단 모양만

 

간단한 거였는데 이미지를 public 폴더 안에 넣었더니 경로를 못 찾아와서 결국 경로를 src로 바꿨다ㅜ