24_마이페이지>찜

공동구매 상세보기 마지막 버튼을 하기 전에, 찜을 한 김에 마이페이지>찜 부분을 먼저 하려고 한다.

마이페이지>찜 페이지로 가는 방법은 2가지이다.

 

첫 번째 방법) 헤더에 있는 하트 모양(♡) 을 클릭

 

두 번째 방법) 로그인>마이페이지>찜 페이지

아래 화면은 찜한 상품이 없을 때 보여줄 화면을 미리 만들어 둔 것이다.

두 가지 방법 모두, 로그인하지 않고는 접근이 불가능하다.

로그인하지 않은 상태로 헤더에서 하트(♡) 클릭 시, 로그인 폼으로 이동하며 안내 팝업이 뜬다.

 

찜이 없을 때와 찜이 있을 때 목록 띄우는 화면을 나눠놔서 먼저 회원의 찜 개수만 먼저 가져왔다.

찜이 없을 때!

저 하트에 마우스 올리면 색깔 변하게 해놨다 ㅋㅅㅋ

그리고 아까 위에서는 있었던 전체선택/선택삭제버튼은 찜이 없을 때는 없앴다.

 

그리고 찜이 있을 때 예시화면! 현재는 정적인 데이터로 만들어놓은 화면이다.

찜 화면은 3*4 = 12개의 게시물이 보여지고, 그 이후 게시물은 페이지를 넘겨서 볼 수 있도록 구성할 예정이다.

다른 공동구매 목록들과 마찬가지로 마우스를 올리면 『현재 구매된 상품개수/목표개수』를 볼 수 있다.

1) 찜 목록 가져오기 

2) 페이징처리

3) 예전 게시물들 시간 음수로 뜨는거 고치기

4) 블라인드 처리 혹은 신고 승인된 게시물은 내용 뿐 아니라 썸네일도 블라인드 표시해주기 

5) 삭제/전체삭제 

처리를 해주면 된다!

 

예전에 했던 부분과 내용이 같으면 빠르게빠르게 진행!

1) 찜 목록 가져오기

메인이나 최근공구 등의 공동구매 목록에서는 현재 모집 중이고, 블라인드 된 게시물은 보이지 않게 했지만,

찜을 해놓은 게시물은 다 접근가능하다. 물론 내용은 블라인드 되어있다.

찜 목록 가져오는 거지만, 공동구매 목록 가져오는 거와 쿼리문 제외하고는 동일했다.

 

2) 페이징처리

페이징처리는 앞에 공동구매 쪽에서 했던거와 동일하게 진행했다.

 

이렇게 해서 찜 목록 가져오기와 페이징 처리가 완료된 화면이다.

찜 데이터는 insert 쿼리로 예전에 완료되었거나 취소된 게시물, 신고승인된 게시물, 블라인드 처리된 게시물을 넣어놓음

아래 화면은 찜 목록 2페이지이다.

앞에서 했던 공동구매 목록에서는 모집마감일시가 현재시각보다 과거라면 띄우지 않았기 때문에 

시간이 음수일 경우는 처리를 해놓지 않았다.

이제 저것도 바꿀 예정!!

신고가 승인된 게시물과 아직 신고 미처리인 게시물은 모두 내용을 블라인드로 보이게 해 놓았다.

 

3) 예전 게시물들 시간 음수로 뜨는거 고치기

시간 띄워주는 태그에 조건을 하나 더 걸었다. 일/시간/분 중에 음수가 있다면 마감으로 띄우도록!

<c:when test="${buypost.left_day < 0 || buypost.left_hour < 0 || buypost.left_minute < 0 }">
    <span class="timeLeft" id="endTime">
        마감
    </span>
</c:when>

 

4) 블라인드 처리 혹은 신고 승인된 게시물은 내용 뿐 아니라 썸네일도 블라인드 표시해주기 

목록을 가져오는 쿼리에 블라인드게시물 여부 컬럼을 하나 추가했고,

게시물의 사진을 띄워주는 부분에서 분기처리해서 진행했다.

<c:choose>
    <c:when test="${Integer.parseInt(buypost.is_blind) < 1 }">
        <div class="featured__item__pic set-bg" data-setbg="img/buypost/${buypost.goods_photo_name }">
    </c:when>
    <c:otherwise>
        <div class="featured__item__pic set-bg" data-setbg="img/blindpost.png">
    </c:otherwise>
</c:choose>

ㅋㅋㅋㅋㅋㅋㅋ,,,,,,넘나 대충 사진 넣었나 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그림판제작 ㅎ

ㅋㅋㅋㅋㅋ암튼 이런식으로 썸네일까지 띄우기 완성!

 

5) 삭제/전체삭제

이제 『ㅁ전체선택』 을 누르면 해당 페이지의 찜 목록이 전체 선택되고,

<선택삭제> 버튼을 누르면 선택한 목록이 다 삭제되도록 처리만 하면 마이페이지>찜 완성,,!!

 

삭제할 때 찜 코드를 넘겨주기 위해서,

찜 목록 쿼리에 찜 코드를 가져오게 추가해서

해당 게시물의 체크박스의 value 값으로 해당 찜 테이블의 코드를 넣어놓았다.

<input class="form-check-input" type="checkbox" name="wish-check" value="${buypost.wish_code }">

 

전체선택을 체크하면, 해당 페이지 찜 목록이 전체 선택되고,  다시 클릭해서 체크를 없애면 체크가 전체해제된다.

그리고 전체선택을 한 상태에서 개별 목록의 체크를 없애면, 전체선택 안의 체크는 사라지게 처리했다.

체크한 모든 찜 목록을 삭제해야 하므로, 찜 코드를 일단 문자열로 다 넘겨서 컨트롤러에서 문자열 나누고, 쿼리에서 쓸 수 있도록 처리할 예정이다.

// 전체선택 클릭했을 때,
$('.wish-allCheck').click(function()
{
	// 전체선택에 체크되면, 모든 개별 체크박스 체크상태로
    if ($(this).is(':checked')) 
        $('.del-check').prop('checked', true);
    // 전체선택에 체크가 없어지면, 모든 개별 체크박스 체크 해제
    else
        $('.del-check').prop('checked', false);
});

// 개별 체크박스 클릭했을 때,
$('.del-check').click(function()
{
	// 체크된 개별 체크박스의 개수 == 모든 개별 체크박스의 개수라면, 전체선택 체크상태로
    if ($("input:checkbox[name='wish-check']:checked").length == $("input:checkbox[name='wish-check']").length
        $('.wish-allCheck').prop('checked', true);
    else
        $('.wish-allCheck').prop('checked', false);
});

// <선택삭제> 버튼 클릭 시,
$(".wish-deleteBtn").click(function()
{
    let value = "";	
    // 체크되어 있는 체크박스만 돌음
    $("input:checkbox[name='wish-check']:checked").each(function()
    {
        value += this.value;
    });
});

 

<선택삭제>를 클릭했을 때, 선택된 게 없다면 안내팝업을 띄워줬다.

삭제할 것을 선택 후, <선택삭제>를 누르면 안내팝업이 뜬다.

일단 테스트 중이라 value값 받아오는 걸 alert()로 띄워놨다. 잘 받아와짐!

컨트롤러에서 넘어온 값을 받아서 쿼리문 where절의 in() 괄호 안에 넣기 위해 코드뒤에 쉼표를 붙여주었다.

String wishValues = request.getParameter("value");
wishValues = (wishValues.replaceAll("WL", ", WL")).substring(2);

콘솔창으로 확인한 결과! 위의 값을 아래로 바꿨다.

이제 이걸 delete 쿼리문에 넘겨주면 끝!

	<!-- 찜 삭제 -->
	<delete id="deleteWishlist">
		DELETE WISHLIST
		WHERE CODE IN (#{wish_code})	
	</delete>

 

🔥 ㅋ....위에처럼 했는데 삭제가 안됐다,,ㅋ

생각해보니까 #{} 로 넘겨주면 String형태로 앞뒤로 ''가 붙는 것,,,

그래서 앞뒤로 ''가 붙는다고 생각하고 사이사이에만 '와 ,를 넣어주도록 자바 코드를 바꿨다.

WL123WL234WL432 → WL123, WL234, WL432 이렇게 바꾸도록! 

String wishValues = request.getParameter("value");
wishValues = (wishValues.replaceAll("WL", "', 'WL")).substring(4);

 

값은 내가 원하는대로 바꿔지긴 하는데 그래도 삭제가 안됐다....왜지........

그래서 #{}를 ${}로 바꾸고, WL123WL234WL432 → 'WL123, WL234, WL432' 이렇게 바꾸도록 코드를 바꿨다...

 

최종 코드

<!-- 찜 삭제 -->
<delete id="deleteWishlist">
    DELETE WISHLIST
    WHERE CODE IN (${wish_code})	
</delete>

String wishValues = request.getParameter("value");
wishValues = (wishValues.replaceAll("WL", "', 'WL")).substring(3) + "'";

 

결과화면을 보자ㅏ...1개는 뭐 정상적으로 삭제되고, 여러개가 삭제되는지 보면,,!

아래 화면에서 선택 3개를 삭제!

삭제 완료 화면

 

마이페이지>찜 끄읏