23_공동구매 게시물 상세보기 ④ 찜(♡)

① 공동구매에 관련된 정보들 가져오기

② 참여자목록 (참여자들 프로필사진 및 닉네임)

③ 댓글(등록, 수정, 삭제, 고정 처리)

④ 신고팝업, 신고처리(게시물, 댓글)

⑤ 찜(♡) 

⑥ 버튼 관련

 

찜은 쫌 간단하게 끝날 듯?!,,,

---

찜은 공동구매 버튼 옆에 하트(♡)를 클릭하면 할 수 있다.

찜을 하면, 채워진 하트(♥)로

찜을 해제하면, 빈 하트(♡)로 표시할 것이다.

hover 했을 때 CSS도 해놓았다. (마우스 올렸을 때 테두리 색 변화)

클릭 했을 때에는 칠해진 하트로!

- 공동구매 게시물 데이터를 읽어올 때, 회원의 해당 게시물 찜 여부에 따라 하트를 다르게 해야한다.

공동구매 게시물 읽어올 때 해당 회원이 해당 공동구매 게시물을 찜 했는지 확인하는 데이터도 넘겨서, 하트를 다르게 띄우도록 처리!

<!-- 찜  -->
<c:choose>
    <c:when test="${isWishlist > 0 }">
        <a href="#!" class="heart-icon"><i class="fa fa-heart buypost-wish" aria-hidden="true"></i></a>
    </c:when>
    <c:otherwise>
        <a href="#!" class="heart-icon"><i class="fa fa-heart-o buypost-wish" aria-hidden="true"></i></a>
    </c:otherwise>
</c:choose>

 

- 비회원이 누를 경우, 로그인폼+안내메세지 팝업

 

- 빈 하트(♡) 누르면 → 찜 등록

- 채워진 하트(♥) 누르면 → 찜 해제

위의 찜 코드의 <a>태그에 주소를 추가해줬다.

<!-- 찜  -->
<c:choose>
    <c:when test="${isWishlist > 0 }">
        <a href="deletewishlist.lion?code=<%=request.getParameter("code") %>" class="heart-icon"><i class="fa fa-heart buypost-wish" aria-hidden="true"></i></a>
    </c:when>
    <c:otherwise>
        <a href="insertwishlist.lion?code=<%=request.getParameter("code") %>" class="heart-icon"><i class="fa fa-heart-o buypost-wish" aria-hidden="true"></i></a>
    </c:otherwise>
</c:choose>

 

해당 주소로 가면 세션에 있는 회원코드와 넘겨받은 공동구매코드를 사용해서 찜 등록, 찜 해제를 처리한다.

찜 등록

찜 해제

 

아직 『마이페이지>찜』 파트를 안해서 찜을 누르고 해제했을 때 찜 내역을 볼 수가 없기는 한데,,!

공구 상세보기 찜 부분은 완료!