[DIOS] 게시판 비밀댓글 구현

비밀댓글 작성 구현 구상 (요청 보낼때)

1. javaScript로 isSecret 변수 선언 후 아이콘 클릭할때마다 변경값을 저장한다.(나는 boolean 타입으로 지정함)

2. 댓글 작성, 댓글 수정, 대댓글 작성, 대댓글 수정 ajax 요청 보낼때마다 isSecret 값도 같이 컨트롤러 값에 넣어준다.

3. Controller에서 받은 값을 comment.setIsSecret('넘겨받은 값'); 으로 처리하여 값을 저장해준 후 서비스 처리!

4. 각 상황에 맞는 서비스 로직 구현


1. javaScript로 isSecret 변수 선언 후 아이콘 클릭할때마다 변경값을 저장.

let isSecret = false; // 공개여부 기본값을 공개로 설정
const secret = window.document.getElementById('secret');// 부모비밀
    // 부모 공개댓글 => 비밀댓글
    secret?.querySelector('[rel="open"]').addEventListener('click', () => {
        secret.querySelector('[rel="open"]').classList.remove('visible');
        secret.querySelector('[rel="secret"]').classList.add('visible');
        isSecret = true;
    });

// 부모 비밀댓글 => 공개댓글
    secret?.querySelector('[rel="secret"]').addEventListener('click', () => {
        secret.querySelector('[rel="secret"]').classList.remove('visible');
        secret.querySelector('[rel="open"]').classList.add('visible');
        isSecret = false;
    });

html 에 비밀댓글 설정 했을때랑 안했을때를 구분할 아이콘 두개를 삽입 후 javaScript 에서 클릭 이벤트를 걸어주고 각 이벤트 실행문에 공개여부 값을 넣어줬다.


2. 댓글 작성, 댓글 수정, 대댓글 작성, 대댓글 수정 ajax 요청 보낼때마다 isSecret 값도 같이 컨트롤러 값에 넣어준다.

<작성 부분 Ajax> : form.append로 비밀댓글 여부값을 보낸다.

commentForm.onsubmit = e => {
        e.preventDefault()

        if (commentForm['content'].value === '') {
            alert('댓글을 입력해 주세요.');
            commentForm['content'].focus();
            return false;
        }
        Cover.show('댓글을 작성하고 있습니다.\n잠시만 기다려 주세요.');
        const xhr = new XMLHttpRequest();
        const formData = new FormData();
        formData.append('articleIndex', commentForm['aid'].value);
        formData.append('content', commentForm['content'].value);
        formData.append('isSecret', isSecret);

        xhr.open('POST', './read');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                Cover.hide();
                if (xhr.status >= 200 && xhr.status < 300) {
                    const responseObject = JSON.parse(xhr.responseText);
                    switch (responseObject['result']) {
                        case 'success':
                            loadComments();
                            break;
                        default:
                            alert('알 수 없는 이유로 댓글을 작성하지 못하였습니다.\n\n잠시 후 다시 시도해 주세요.');
                    }
                } else {
                    alert('서버와 통신하지 못하였습니다.\n\n잠시 후 다시 시도해 주세요.');
                }
            }
        };
        xhr.send(formData);

    };

}

3. Controller에서 받은 값을 comment.setIsSecret('넘겨받은 값'); 으로 처리하여 값을 저장해준 후 서비스로 넘기기

 

<댓글 작성 Controller>

JS 에서 formData.append 한 값을 매개변수로 받아와서 comment에 set 해준 후 서비스에 보낸다.

@PostMapping(value = "read", produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public String postRead(@SessionAttribute(value = "user", required = false) UserEntity user, CommentEntity comment, @RequestParam(value = "isSecret") boolean isSecret) {
    JSONObject responseObject = new JSONObject();
    comment.setSecret(isSecret);
    if (user == null) {
        responseObject.put("result", CommonResult.FAILURE.name().toLowerCase());
    } else {
        comment.setUserEmail(user.getEmail());
        Enum<?> result = this.bbsService.writeComment(comment);
        responseObject.put("result", result.name().toLowerCase());

    }
    return responseObject.toString();
}

댓글 읽기할때  가져오는 서비스: 비밀댓글을 조회할 수 있는 조건을 성립하면 모든 댓글 열람하고 조건이 충족하지 않을 시, "비밀댓글입니다." 저장해서 가져오기 

public CommentVo[] getComments(int articleIndex, UserEntity signedUser) {
    ArticleEntity article = this.bbsMapper.selectArticleByIndex(articleIndex);
    CommentVo[] getComment = this.bbsMapper.selectCommentByArticleIndex(articleIndex,
            signedUser == null ? null : signedUser.getEmail());
    // 비밀댓글일때
    for (CommentVo comment : getComment) {
        if (comment.getSecret()) {
            if (signedUser != null && (signedUser.isAdmin() || signedUser.getEmail().equals(article.getUserEmail()) || signedUser.getEmail().equals(comment.getUserEmail()))) {
            } else{
                comment.setContent("비밀 댓글입니다.");
            }
        }
    }
    return getComment;
}

 

완성된 모습

'개발 > Project' 카테고리의 다른 글

[DIOS] 상품 삭제  (0) 2023.06.18
[DIOS] 상품 수정 페이지  (0) 2023.06.18
[DIOS] 상품 읽기 페이지  (0) 2023.05.11
[DIOS] 상품 등록 페이지  (2) 2023.02.25
[DIOS] 쇼핑몰 리뷰 < Paging | Pagination > 구현  (2) 2023.01.18