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

• 네이버 지식인 게시글 상세 페이지

01

1번 사진이 실제 네이버 지식인 게시글

게시글 상세에서는 생각보다 제약이 많은데

1. 사용자가 로그인이 되어있고 게시글에 답변이 없는 경우에는
답변을 바로 작성할 수 있게 에디터를 보여주어야하고

2. 사용자가 로그인 되어 있고 게시글에 답변이 있는 경우에는
답변 등록 버튼만 보여주고 에디터는 보여주지 않습니다

3. 사용자가 로그인을 하지 않은 상태에서도 답변 등록 버튼만 보여주고
버튼을 누르면 로그인페이지로 넘어갑니다.

4. 게시글 작성자가 보는 경우에는 답변을 등록할 수 없게
버튼 / 에디터를 보여주지 않습니다

 

• boardDetail.jsp

1. 사용자가 로그인이 되어있고 게시글에 답변이 없는 경우

 

지금 생각해보면 스크립트를 사용했다면 더 편했을텐데

왜이렇게했는지 이해가 안갑니다

롬북을 사용하여 c태그 if문을 통해 사용자가 로그인했는지 확인하고

게시글에 답변이 없다면 해당 container를 보여줍니다.

<c:if test="${sessionScope.memberId != null && BoardDTO.boardAnswer == 0}">
    <h3 class="blind">로그인 답변 시작입니다</h3>
    <div class="qna_answer_editor">
        <div class="ckEditorHeaderArea">
            <div class="c-heading-answer--editor-inner">
                <div class="c-heading-answer__profile">
                    <div class="profile-default">
                        <a href="#" class="profile-default--inner">
                            <span class="profile-default__thumbnail">
                                <span class="blind">내 프로필 이미지</span>
                            </span>
                        </a>
                    </div>
                    <div class="c-heading-answer__body">
                        <div class="c-heading-answer__title">
                            <p class="user-info-title">${memberDTO.memberEmail}님,
                            답변해주세요!</p>
                            <c:choose>
                            <c:when test="${BoardDTO.boardPoint != 0}">
                            <div class="c-userinfo">
                                <span class="c-userinfo__item">답변하시면 내공 ${BoardDTO.boardDPoint}점을 답변이 채택되면 내공 ${BoardDTO.boardPoint}점을 드립니다.</span>
                            </div>
                            </c:when>
                            <c:otherwise>
                            <div class="c-userinfo">
                                <span class="c-userinfo__item">답변하시면 내공 ${BoardDTO.boardDPoint}점을 드립니다.</span>
                            </div>
                            </c:otherwise>
                            </c:choose>
                        </div>
                        <div class="answerButtonArea">
                            <div class="button-answer__subdivide">
                                <label for="answerBtn">
                                    <a class="answerRegisterButton"
                                    style="cursor: pointer">
                                    <span class="c-button-default__title">답변등록</span>
                                    </a>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="ckEditor-body">
        <div class="ckEditor-body-inner">
            <div class="ckEditor-size">
                <form action="/answer/save" method="post"
                enctype="multipart/form-data">
                    <textarea id="editor1" name="answerContents"></textarea>
                    <input type="text" name="answerWriter"
                    value="${memberDTO.memberEmail}"
                    style="display: none;">
                    <input type="text" name="boardId" value="${BoardDTO.id}"
                    style="display: none;">
                    <input type="text" name="memberId" value="${memberDTO.id}"
                    style="display: none">
                    <input type="file" name="answerFile" style="display:none;">
                    <input type="submit" id="answerBtn" style="display: none">
                </form>
            </div>
        </div>
    </div>
</div>
</c:if>

 

2. 사용자가 로그인 되어 있고 게시글에 답변이 있는 경우

3. 사용자가 로그인을 하지 않은 상태에서도 답변 등록 버튼만 보여주고 버튼을 누르면 로그인페이지로 넘어갑니다.

 

추가된 부분은 답변하기 버튼입니다

함수호출을 이용하요 사용자가 로그인되어 있는지 확인을 진행하고

로그인이 안되어있다면 로그인페이지로 로그인이 되어 있다면 에디터의 display를 block으로 변경합니다.

<c:if test="${sessionScope.memberId != null && BoardDTO.boardAnswer != 0}">
    <div class="answer-content-Login-box" id="answer-content-Login-box">
        <div id="answerAreaNoLogin1" class="answer-content-noLogin-inner">
            <div class="answer-content-noLogin-inner-txt-box">
                <div class="answer-content-noLogin-inner-txt-item1">
                    <c:choose>
                        <c:when test="${BoardDTO.boardPoint != 0}">
                            <div class="c-userinfo">
                                <span class="c-userinfo__item">답변하시면 내공 ${BoardDTO.boardDPoint}점을 답변이 채택되면 내공 ${BoardDTO.boardPoint}점을 드립니다.</span>
                            </div>
                        </c:when>
                        <c:otherwise>
                            <div class="c-userinfo">
                                <span class="c-userinfo__item">답변하시면 내공 ${BoardDTO.boardDPoint}점을 드립니다.</span>
                            </div>
                        </c:otherwise>
                    </c:choose>
                </div>
                <div class="answer-content-noLogin-inner-txt-item2">
                    <a class="c-userinfo__item2" style="cursor: pointer"><span
                            class="c-button-default__title"
                            onclick="goAnswer()">답변하기</span></a>
                </div>
            </div>
        </div>
    </div>
    <h3 class="blind">로그인 답변 시작입니다</h3>
    <div class="qna_answer_editor" id="editor-On-Off" style="display: none;">
        <div class="ckEditorHeaderArea">
            <div class="c-heading-answer--editor-inner">
                <div class="c-heading-answer__profile">
                    <div class="profile-default">
                        <a href="#" class="profile-default--inner">
                                                <span class="profile-default__thumbnail">
                                                    <span class="blind">내 프로필 이미지</span>
                                                </span>
                        </a>
                    </div>
                    <div class="c-heading-answer__body">
                        <div class="c-heading-answer__title">
                            <p class="user-info-title">${memberDTO.memberEmail}님,
                                답변해주세요!</p>
                            <c:choose>
                                <c:when test="${BoardDTO.boardPoint != 0}">
                                    <div class="c-userinfo">
                                        <span class="c-userinfo__item">답변하시면 내공 ${BoardDTO.boardDPoint}점을 답변이 채택되면 내공 ${BoardDTO.boardPoint}점을 드립니다.</span>
                                    </div>
                                </c:when>
                                <c:otherwise>
                                    <div class="c-userinfo">
                                        <span class="c-userinfo__item">답변하시면 내공 ${BoardDTO.boardDPoint}점을 드립니다.</span>
                                    </div>
                                </c:otherwise>
                            </c:choose>
                        </div>
                        <div class="answerButtonArea">
                            <div class="button-answer__subdivide">
                                <label for="answerBtn1">
                                    <a class="answerRegisterButton"
                                       style="cursor: pointer">
                                        <span class="c-button-default__title">답변등록</span>
                                    </a>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ckEditor-body">
            <div class="ckEditor-body-inner">
                <div class="ckEditor-size">
                    <form action="/answer/save" method="post"
                          enctype="multipart/form-data" onsubmit="return contentsCheck()">
                        <textarea id="editor2" name="answerContents"></textarea>
                        <input type="text" name="answerWriter"
                               value="${memberDTO.memberEmail}"
                               style="display: none;">
                        <input type="text" name="boardId" value="${BoardDTO.id}"
                               style="display: none;">
                        <input type="text" name="memberId" value="${memberDTO.id}"
                               style="display: none">
                        <input type="file" name="answerFile" style="display:none;">
                        <input type="submit" id="answerBtn1" style="display: none;">
                    </form>
                </div>
            </div>
        </div>
    </div>
</c:if>

 

4. 게시글 작성자가 보는 경우에는 답변을 등록할 수 없게

버튼 / 에디터를 보여주지 않습니다

 

위의 모든 태그들을 롬북의 c태그를 사용하여 묶고

세션에 담긴 id값이 게시글 작성자의 id와 같다면이라면 보여주지 않습니다.

 

• Controller

사용자가 게시글을 읽는 경우

조회수가 증가하는 구조로 조회수가 중복으로 올라가는것을 막기위해

쿠키를 사용하여 30분에 한번씩 증가가 가능하도록 만들었습니다.

    게시글 상세 페이지로 넘어갈때 사용하는 GetMapping
    @GetMapping("/board/detail")
    public String boardDetail(@RequestParam(value = "BoardId", required = false, defaultValue = "") Long BoardId,
                              @RequestParam(value = "bestPage", required = false, defaultValue = "1") int bestPage,
                              @RequestParam(value = "DetailPage", required = false, defaultValue = "1") int DetailPage,
                              @RequestParam(value = "q", required = false, defaultValue = "") String q,
                              HttpServletResponse response,
                              HttpServletRequest request,
                              HttpSession session,
                              Model model) {
        
        Cookie oldCookie = null;
        Cookie[] cookies = request.getCookies();
        if (cookies != null) {
            for (Cookie cookie : cookies) {
                if (cookie.getName().equals("BoardHits")) {
                    oldCookie = cookie;
                }
            }
        }

        if (oldCookie != null) {
            if (!oldCookie.getValue().contains("[" + BoardId.toString() + "]")) {
                boardService.boardHitsUp(BoardId);
                oldCookie.setValue(oldCookie.getValue() + "_[" + BoardId + "]");
                oldCookie.setPath("/");
                oldCookie.setMaxAge(3600);
                response.addCookie(oldCookie);
            }
        } else {
            boardService.boardHitsUp(BoardId);
            Cookie newCookie = new Cookie("BoardHits", "[" + BoardId + "]");
            newCookie.setPath("/");
            newCookie.setMaxAge(3600);
            response.addCookie(newCookie);
        }
        
        브라우저로부터 요청된 쿠키를 가져옵니다.
        가져온 쿠키 중에서 "BoardHits"라는 이름을 가진 쿠키를 찾습니다.
        기존의 "BoardHits" 쿠키가 있다면, 해당 쿠키의 값에 현재 게시물의 ID를 추가합니다.
        "BoardHits" 쿠키의 경로, 유효 기간을 설정하고 응답에 쿠키를 추가합니다.
        기존의 "BoardHits" 쿠키가 없다면, 새로운 쿠키를 생성하여 현재 게시물의 ID를 값으로 설정합니다.
        새로운 쿠키의 경로, 유효 기간을 설정하고 응답에 쿠키를 추가합니다.
        게시물의 조회수를 증가시킵니다.

        PageDTO DetailPageDTO = new PageDTO();
        DetailPageDTO.setBoardId(BoardId);
        DetailPageDTO.setPage(DetailPage);
        PageDTO bestPageDTO = new PageDTO();
        bestPageDTO.setPage(bestPage);

        model.addAttribute("answerDTOList", boardService.findByAnswerList(BoardId));
        답변에 대한 List를 담은 model 입니다
        model.addAttribute("bestBoardDTOList", boardService.bestBoardList(bestPageDTO));
        하단의 추천 게시글의 List를 담은 model입니다
        model.addAttribute("CommentList", commentService.commentList(DetailPageDTO));
        코멘트의 List를 담은 model입니다
        model.addAttribute("CommentPaging", commentService.commentPagingParam(DetailPageDTO, q));
        코멘의 페이징정보를 담은 Model입니다.
        model.addAttribute("CommentCount", commentService.commentCount(BoardId));
        코멘트의 갯수를 담은 model입니다.
        model.addAttribute("BoardDTO", boardService.findByBoard(BoardId));
        해당 게시글의 정보를 담은 model입니다.
        model.addAttribute("memberDTO", boardService.findById(session.getAttribute("memberId")));
        로그인된 사용자의 정보를 담은 model입니다.
        return "/boardPage/boardDetail";
    }