쇼핑몰 찜하기 구현

1. 찜하기 전엔 빈하트 / 빈하트를 누름과 동시에 찜하기 성공
2. 찜한 후 빨간 하트 / 빨간 하트 누름기ㅘ 동시에 찜하기 취소

찜하기 / 찜하기 취소 버튼

1. 찜하기 버튼에 @click = "liked" 이벤트 발생
2. 찜취소 버튼에 @click = "unliked" 이벤트 발생
3. data에 isShow = true를 추가
4. 찜하기 버튼 처음에 보이게 v-if = "isShow"를 걸어놓음
5. 그리고 v-else를 찜하기 취소 버튼에 넣음
   -> v-if는 true/false의 boolean

// 찜하기
<button 
 type="button" 
 @click="liked" 
 class="ml-4 flex items-center justify-center rounded-md py-3 px-3 text-gray-400 hover:bg-gray-100 hover:text-gray-500"
 v-if="isShow"
 >
 <HeartIcon 
 class="h-6 w-6 flex-shrink-0" 
 aria-hidden="true" />
 <span class="sr-only">찜</span>
</button>

// 찜하기 취소
<button 
 type="button" 
 @click="unliked" 
 class="ml-4 flex items-center justify-center rounded-md py-3 px-3 text-gray-400 hover:bg-gray-100 hover:text-gray-500"
 v-else
>
 <HeartIcon 
 class="h-6 w-6 flex-shrink-0 fill-red-500 text-transparent" 
 aria-hidden="true" 
  />
 <span class="sr-only">찜</span>
</button>

찜하기 목록 불러오기

전체 찜하기 목록을 불러와 for문을 돌려 찜한 목록에 있을 경우 찜하기 취소 버튼이 보여질 수 있도록 함

함수구현(찜하기 ❤)

찜하기를 요청함과 동시에 isShow를 false로 바꾸면
찜하기 버튼은 비활성화 되고 찜하기 취소 버튼이 활성화됨

함수구현(찜하기 취소 💔)

찜하기와 동일한 로직임

---

결론

구현은 했지만 사실 많이 조잡한게 사실
참고로 css로 찜하기 취소 버튼에 fill-red-500을 줘서
빨간하트를 만들었다