인천 일보 아카데미 58~67일 차 개인 프로젝트 - NAVER 지식in 클론 코딩 (10)

• 네이버 지식인 게시판 답변 채택

0123

게시글 채택의 순서

채택을 만들면서 알게 된 부분은 답변을 채택하면

채택되었는지 화면에 표시가 되어야 다른 사용들도 정보활용을 하기 편하고
또한 채택이 중복으로 되면 안 되기 때문에 채택 이후 버튼이 사라져야 합니다.
당연히 채택은 게시글 작성자만 가능해야합니다.
네이버의 경우 사용자가 채택받은 개수를 보여주기 때문에
채택 답변수를 화면에 보여주어야 합니다.
마지막으로 1번째 답변이 채택되는 경우가 아닌 10번째 답변이 채택이 되는 경우
채택이 된 답변은 무조건 답변글의 1번째 답변으로 보여주어야 한다는 것입니다.

 

• boardDetail.jsp - 채택

사용자의 id가 게시글을 작성한 member의 id와 같다면

c태그의 if문을 사용하여 채택 버튼을 보여줍니다

 

또한 채택이 되어있는 게시글의 경우

채택답변을 1번째로 출력하고 채택양식에 맞춰 출력합니다.

Mapper를 통해 쿼리문을 사용하여 채택된 게시글을 1번째로 List에 담았습니다.

<c:if test="${answerDTOList.goodAnswer == 1}">
    <div class="answer-List-area">
        <div class="answer-List-area-box">
            <div class="answer-List-area-item">
                <div class="adoptCheck">
                    <div class="checkText">
                        <span style="color: #fd5f56;font-size: 12px;font-weight: bold;line-height: 1.2;">지식인 채택</span>
                    </div>
                </div>
                <div class="profile-card">
                    <div class="card-inner">
                        <div class="card-info">
                            <div class="profile-info">
                                <strong class="profile-card-name">${answerDTOList.answerWriter}</strong>
                                <div class="profile-item-area">
                                    <div class="profile-item-answer">
                                        <span class="profile-card-answer-count">채택답변수 ${answerDTOList.totalGoodAnswer}</span>
                                    </div>
                                </div>
                            </div>
                            <a href="#" class="thumbnail-area">
                                <div class="thumbnail">
                                    <img src="https://ssl.pstatic.net/static/kin/09renewal/avatar/200x200_m/6_3d.png"
                                         alt="프로필 사진">
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="endContents">
                    <div class="endContents-txt">
                        ${answerDTOList.answerContents}
                    </div>
                    <div class="c-guideline-default">
                        <strong class="c-guideline-title"><i
                                class="icon_notice"></i>알아두세요</strong>
                        <p class="c-guideline__desc">본 답변은 참고 용도로만 활용 가능하며 정확한 정보는
                            관련기관에서
                            확인해보시기
                            바랍니다.</p>
                        <p class="c-guideline__desc">위 답변은 답변작성자가 경험과 지식을 바탕으로 작성한
                            내용입니다.
                            포인트로
                            감사할 때 참고해주세요.</p>
                    </div>
                    <p class="endContent-date-time">
                        <fmt:formatDate
                                value="${answerDTOList.answerCreatedDate}"
                                pattern="yyyy-MM-dd"></fmt:formatDate>
                    </p>
                </div>
                <div class="answerBottom">
                    <div class="answerBottom-left">
                        <button type="button" class="answerBottom-left-comment">
                            <i class="bi bi-chat-square-dots"></i>
                        </button>
                        <c:if test="${sessionScope.memberId != null && sessionScope.memberId == BoardDTO.memberId && BoardDTO.boardGoodAnswer == 0}">
                            <button type="button" id="goodAnswerBtn"
                                    class="answerBottom-left-comment"
                                    style="float: right;"
                                    onclick="goodAnswerUp(${answerDTOList.memberId},${BoardDTO.id},${answerDTOList.id})">
                                <i class="bi bi-hand-thumbs-up"></i>
                            </button>
                        </c:if>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="aiai"></div>
</c:if>

 

• boardDetail.jsp - 채택 script

ajax를 사용해 비동기 처리로 채택이 진행되면

버튼을 지우고 사용자의 채택 답변수를 1증가시킵니다.

채택 디장인까지 함께 변경했으면 좋았겠지만,

당시에는 생각을 못했습니다..

    const goodAnswerUp = (mId, bId, aId) => {
        const memberId = mId;
        답변을 작성한 사용자의 id입니다.
        const boardId = bId;
        해당 게시물의 id입니다.
        const answerId = aId;
        해당 답변의 id입니다.
        const goodAnswerBtn = document.getElementById('goodAnswerBtn');
        채택을 진행하는 버튼의 document 객체
        $.ajax({
            type: "post",
            url: "/board/bestAnswer",
            data: {
                memberId: memberId,
                boardId: boardId,
                answerId: answerId
            },
            success: function (res) {
                alert("답글이 채택되었습니다.");
                goodAnswerBtn.style.display = "none";
                채택이 완료되면 채택버튼의 display를 none으로 변경합니다.
            },
            error: function () {
                alert("삭제되었거나 없는 답글입니다.");
            }
            특정 상황이 아니라면 채택이 되었다는 글을 띄웁니다.
        })
    };

 

• Controller

    채택 ajax에서 사용되는 postmapping
    @PostMapping("/board/bestAnswer")
    public ResponseEntity bestAnswer(@RequestParam("memberId") Long memberId,
                                     @RequestParam("boardId") Long boardId,
                                     @RequestParam("answerId") Long answerId) {
                                     파라미터로 받은 값을 RequestParam을 통해 받습니다.
        BoardDTO boardDTO = boardService.findByBoard(boardId);
        게시판의 id를 토대로 게시판의 정보를 가져옵니다.
        MemberDTO memberDTO = boardService.findById(memberId);
        답변 작성자의 id를 토대로 작성자의 정보를 가져옵니다.
        AnswerDTO answerDTO = boardService.findByAnswer(answerId);
        답변의 id를 토대로 답변 정보를 가져옵니다.
        boardDTO.setBoardGoodAnswer(1);
        해당 게시판의 채택넘버를 1로 바꿉니다.
        memberDTO.setMemberGoodCount(memberDTO.getMemberGoodCount() + 1);
        사용자의 채택 카운트를 1증가시킵니다.

        answerDTO.setGoodAnswer(1L);
        해당 답변의 채택 넘버를 1증가시킵니다.
        memberDTO.setMemberPoint(memberDTO.getMemberPoint() + boardDTO.getBoardPoint());
        게시글에 채택을 받은 사용자의 point를 게시글에 달려있는 point만큼 증가시킵니다.
        memberService.memberPointUpdate(memberDTO);
        사용자의 정보를 update합니다.
        memberService.memberGoodCountUp(memberDTO);
        사용자의 채택 카운트를 증가시킵니다.
        boardService.boardGoodAnswerUp(boardDTO);
        해당 게시글의 채택 답변이 있다고 update합니다.
        boardService.GoodAnswerUp(answerDTO);
        해당 답변이 채택된 답변임을 update합니다
        return new ResponseEntity<>(HttpStatus.OK);
    }

 

• Mapper

    <select id="findByAnswerList" parameterType="answer" resultType="answer">
        SELECT a.*, SUM(b.goodAnswer) AS totalGoodAnswer
        FROM answer_table a
                 INNER JOIN answer_table b ON a.memberId = b.memberId
        WHERE a.boardId = #{boardId}
        GROUP BY a.memberId, a.id order by goodAnswer desc
    </select>

join을 통하여 사용자들의 채택된 답변 갯수를 함께 넘겨줍니다.

정렬 순서는 채택을 기준으로 하였기 떄문에 채택받은 답변이 항상 0번째로 List에 담기게 됩니다.

이부분에서 시간이 상당히 소모되었습니다. sql 공부했는뎅 ㅠㅠ