[Mini Project] WeBucks-React

[Mission 6~8] 구현 (추가 구현 사항)
✨ 구현 기간 : 12/1~2

[Mission 6] 커피 리스트 페이지 커피별 좋아요 기능 구현하기

• 리스트 페이지에서 특정 커피의 하트 버튼을 눌렀을 때 그 커피의 하트만 붉게 변해야 합니다. 다시 누르면 하트가 원래대로 돌아옵니다.

✔️ 커피별 좋아요 기능 구현
- 앞선 미션에서 CoffeeCard 라는 컴포넌트를 만들어 나누어주었으므로 컴포넌트 안에서 하트가 작동하게 만들면 됨

[CoffeeCard.js]

function CoffeeCard(props) {

    const [heart, setHeart] = useState(false);

    return (
       <>
          <li>
             <p className="coffee-list__name">
                {props.item.name}
                <i
                  className={heart === true ? 'fas fa-heart' : 'far fa-heart'}
                  onClick={() => setHeart(!heart)}>
                </i>
              </p>
          </li>
       </>
    )
}

[ Result ]

---

[Mission 7] 커피 상세 페이지 댓글 삭제 기능 구현하기

• 각 리뷰별로 삭제 버튼을 만들어서 클릭했을 때 해당 리뷰가 삭제되어야 합니다.

✔️ 댓글 삭제 기능 구현
- 앞선 미션에서 ReviewComment 라는 컴포넌트를 만들어 댓글을 따로 나누어주었으므로 컴포넌트 안에서 기능 구현해주면 됨

function ReviewComment(props) {

    return (
           <i
             className="fas fa-trash"
             onClick={(e) => {
             e.target.parentElement.remove();
             }}>
           </i>
    );
}

[ Result ]

💬   이벤트가 일어날 타겟의 부모 요소를 지워줌으로써 댓글 삭제하는 기능을 구현해주었다.

---

[Mission 8] 커피 상세 페이지 리뷰별 좋아요 기능 구현하기

• 각 리뷰 별로 좋아요 버튼을 만들어서 클릭 했을 때 해당 리뷰만 좋아요 표시가 되어야 합니다. 다시 누르면 좋아요가 취소됩니다.

✔️ 댓글별 좋아요 기능 구현
- 앞선 미션에서 ReviewComment 라는 컴포넌트를 만들어 댓글을 따로 나누어주었으므로 컴포넌트 안에서 기능 구현해주면 됨

function ReviewComment(props) {

    const [heart, setHeart] = useState(false);

    return (
           <i
             className={heart === true ? 'fas fa-heart fheart' : 'far fa-heart'}
             onClick={() => setHeart(!heart)}>
           </i>
    );
}

[ Result ]