22_공동구매 게시물 상세보기 ③ 신고(팝업, 게시물/댓글신고)

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

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

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

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

⑤ 찜(♡) 

⑥ 버튼 관련

 

고럼 이제 신고 관련 작업 ㄱㄱ~~

---

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

공동구매 게시물에서 [신고] 가 두 군데 있다.

위에 게시물 아래 있는 [신고]는 해당 공동구매 게시물을 신고하는 것이고,

댓글 옆에 있는 [신고]는 해당 댓글을 신고하는 것이다.

공동구매 게시물 & 공동구매 댓글 신고 팝업은 동일하다.

 

④-1) 신고 팝업

신고팝업 레이아웃은 네이버 신고 팝업을 참고,,!!

원래 게시물/댓글 팝업창까지 아예 똑같이 가려고, 팝업창에 보이는 작성자-제목에 대한 정보는 없었는데 그래도 있어야 할 것 같아서 추가했다...ㅎㅎ

 

게시물 → 작성자 & 제목

댓글    → 작성자 & 내용   을 띄울 예정이다.

밑에 라디오버튼 옆에는 신고 대분류 카테고리이고, 아코디언 형식으로 클릭하면 소분류에 대한 설명이 적혀있다.

 

그럼 일단 팝업 내용 가져오는 거 부터 시작!

게시물/댓글의 공통 부분인 대분류/소분류 카테고리 내용은 가져오는 건 뭐 쉬운데..

가져온 데이터를 부트스트랩 아코디언에 넣었는데...아코디언이 안열렸어서 ㅎㅎ,,ㅋㅋ 

그래도 css 적용하면서도 겪었어서 jstl 변수를 사용해서 빠르게 진행했다,,,!!

<div class="accordion" id="accordionExample">
    <c:set var="num" value="0"/>
    <c:forEach var="main" items="${reportMaincateList }">
    <c:set var="num" value="${num+1 }"/>
    <div class="accordion-item">
        <h2 class="accordion-header" id="heading${num }">
            <button class="accordion-button" type="button"
                data-bs-toggle="collapse" data-bs-target="#collapse${num }"
                aria-expanded="true" aria-controls="collapse${num }">
                <input class="form-check-input report-radio" type="radio" name="main-cate-code">
                <span class="main-cate">${main.name }</span>
                <i class="fa-solid fa-angle-down report-down"></i>
            </button>
        </h2>
        <div id="collapse${num }" class="accordion-collapse collapse"
            aria-labelledby="heading${num }" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <p class="report-content">
                    <c:forEach var="sub" items="${reportSubcateList }">
                        <c:if test="${sub.main_cate_code == main.code }">
                            - ${sub.name }<br />
                        </c:if>
                    </c:forEach>
                </p>
            </div>
        </div>
    </div>
    </c:forEach>
</div>

 

 

게시물일 때와 댓글일 때 다르게 내용을 띄우려면, 현재 신고하려는 항목의 종류를 알아야 하고,

게시물/댓글의 정보를 가져오려면 각각의 게시물코드, 댓글코드가 필요하다.

그래서 공동구매 게시물에서 게시물 아래의 <신고>를 클릭했을 때에는 '게시물신고 + 공동구매게시물코드'를,

댓글 옆의 <신고>를 클릭했을 때에는 '댓글신고 + 댓글코드'를 주소로 넘겨줬다.

<!-- 게시물의 <신고> -->
<a class="report" href="javascript:report()" data-value="buypost" data-code="<%=request.getParameter("code")%>">신고</a>

<!-- 댓글의 <신고> -->
<a class="report reply-report" href="javascript:report()" data-value="reply" data-code="${reply.code }">신고</a>

// 신고
$('.report').click(function()
{
    type = $(this).data('value');
    code = $(this).data('code');
});

function report()
{	
    window.open("reportbuypost.lion?type="+type+"&code="+code, "_blank", "top=150,left=550,width=505,height=770");
}

 

그래서 신고 팝업창에서는 신고 종류와 게시물/댓글 코드를 받아서 팝업의 제목과 신고내용을 띄워준다.

제목은 jquery를 사용해서 처리했고, 신고내용은 jsp의 스크립트릿 영역을 통해 java를 사용했다.

- 신고 팝업 제목 (jquery 사용)

<div class="report-title">
    <h2 id="buypost">공동구매 게시물 신고</h2>
    <h2 id="reply">공동구매 댓글 신고</h2>
    <hr class="report-line"/>
</div>

let type = '<%=request.getParameter("type")%>';
if (type === 'buypost')
{
    $('h2#buypost').css('display', 'block');
    $('#report-buypost-title').css('display', 'block');

    $('h2#reply').css('display', 'none');
    $('#report-reply-content').css('display', 'none');
}
else if (type === 'reply')
{
    $('h2#reply').css('display', 'block');
    $('#report-reply-content').css('display', 'block');

    $('h2#buypost').css('display', 'none');
    $('#report-buypost-title').css('display', 'none');

}

 

- 팝업의 신고내용 (JSP의 scriptlet 사용)

<div class="report-info">
    작성자 <span class="bar">|</span> ${report.nickname } <br />
    <% 
    String type = request.getParameter("type");
    if (type.equals("buypost"))
    {
    %>					
        <span id="report-buypost-title">제&nbsp;&nbsp;&nbsp;목 <span class="bar">|</span> ${report.title }</span>
    <%
    }
    else
    {
    %>
        <span id="report-reply-content">내&nbsp;&nbsp;&nbsp;용 <span class="bar">|</span> ${report.content }</span>
    <%
    }
    %>
    <hr class="report-line"/>
</div>

 

내용 띄우기까지 끝낸 신고 팝업이다.

먼저, 게시물 신고 팝업

댓글 신고 팝업

 

④-2) 신고 처리

누군가 이미 신고를 접수했고, 아직 처리되지 않아 블라인드 처리된 게시물/댓글은 중복 신고가 불가능하다.

어차피 미처리된 게시물의 경우에는 블라인드 처리가 될 거라 중복 신고가 불가하지만 코드상으로는 작성해놓았다.

신고되어 블라인드 처리된 게시물의 경우에는 메인/카테고리/최근공구/마감임박/검색 시에도 나오지 않는다.

찜을 해뒀거나, 참여/취소한 이력이 있다면 블라인드 게시물에도 접근할 수는 있다. 물론 블라인드 처리되어 있음!

 

신고 항목을 선택하고 <신고하기> 를 누르면,

게시물이라면 해당 회원이 해당 게시물 또는 댓글을 신고한 이력이 있는지 확인하고, 없다면 게시물 신고 처리 테이블로, 댓글이면 댓글 신고 처리 테이블로 insert 시켜주면 된다.

 

이것도 먼저, 아무것도 선택하지 않고 신고하기를 누르면 항목 선택하라는 알림창이 뜬다.

let cate = $("input[name='main-cate-code']:checked").val();
if (cate == null)
    alert('항목을 선택해주세요.');

제대로 항목을 선택하고 <신고하기>를 누르면, 안내팝업이 뜨고

<신고>를 누르면, 신고가 정상적으로 접수된다.

 

이렇게 신고가 접수되면, 관리자가 처리하기 전까지는 블라인드 처리를 해놓을 예정이다.

블라인드 컨텐츠는 <신고>버튼이 보이지 않으므로 신고가 불가능하지만, 어떻게 접근해서 <신고>를 한다고 해도

아래와 같은 안내 팝업이 뜨면서 신고가 불가능하게 해놓았다.

블라인드 처리해야 할 게시물인지 확인하고 그에 대한 반응을 주소값으로 넘겨줘서 처리했다.

    let response = '<%=request.getParameter("res")%>';
    if (response === 'ok')
    {
        Swal.fire({
                title: '신고가 접수되었습니다.',
                icon: 'success',
                confirmButtonText: '확인'
            }).then(() => {
                opener.parent.location.reload();
                window.close();
            });
    }
    else if (response === 'disable')
    {
        Swal.fire({
            title: '신고 처리 중인 컨텐츠 입니다.',
             icon: 'warning',
            iconColor: '#f27474',
            confirmButtonText: '확인'
        }).then(() => {
            opener.parent.location.reload();
            window.close();
        });
    }

 

 

 

댓글도 게시물과 동일하다.

컨트롤러에서 신고한 컨텐츠가 게시물인지, 댓글인지에 따라 다른 쿼리문을 실행하고,

다시 신고 팝업으로 redirect 하도록 처리해놨다.

	// 신고접수
	@RequestMapping("/insertreportbuypost.lion")
	public String insertReportBuypost(HttpServletRequest request, Model model) 
	{
			:
            :
		
		IBuypostDAO dao = sqlSession.getMapper(IBuypostDAO.class);
		
		String type = request.getParameter("type");
		String code = request.getParameter("code");
		String main_cate_code = request.getParameter("cate");
		HashMap<String, String> params = new HashMap<String, String>();
		params.put("member_code", member_code);
		params.put("main_cate_code", main_cate_code);
		if (type.equalsIgnoreCase("buypost"))
		{
			params.put("buypost_code", code);
			
			// 블라인드 게시물이면 신고 X
			if (dao.isBlindBuypost(code) > 0)
				model.addAttribute("res", "disable");
			else
			{
				dao.insertReportBuypost(params);
				model.addAttribute("res", "ok");
			}
		}
		else if (type.equalsIgnoreCase("reply"))
		{
			params.put("reply_code", code);
			
			// 블라인드 댓글이면 신고 X
			if (dao.isBlindBuypostReply(code) > 0)
				model.addAttribute("res", "disable");
			else
			{
				dao.insertReportBuypostReply(params);
				model.addAttribute("res", "ok");
			}
		}
		
		return "redirect:reportbuypost.lion?type="+type+"&code="+code;
	}

 

④-3) 미처리 신고 블라인드 처리

이제 미처리 신고의 경우에는 블라인드 처리를 해줘야 한다.

게시물이 신고당했을 경우에는 해당 게시물 전체가 블라인드 처리되고,

댓글이 신고당했을 경우에는 해당 댓글만 블라인드 처리되게 할 것이다.

 

먼저, 댓글부터!!

댓글 목록을 띄워주는 뷰에 블라인드 여부를 나타내는 컬럼을 추가해줬다.

댓글 목록을 불러오면서 블라인드해야되는 댓글은 블라인드 처리해서 화면에 띄울 계획이다.

 

신고할 댓글이다.

해당 댓글을 신고하고 나면, 아래와 같이 내용이 블라인드 되고, <신고> 버튼도 없어진다.

 

그 다음, 공동구매 게시물

게시물은 블라인드 게시물인지 체크해서 블라인드 처리해야 하는 게시물이면 전체 내용을 다 블라인드하고,

아니면 내용을 띄워주게 했다.

아래 게시물을 신고해보면,

블라인드 처리되어 나온다.

 

 

공동구매 게시물/댓글 신고 파트 끝!