[기초 API 구현 2] - 댓글 수정 버튼

박성규·2022년 6월 1일
0

[스프링 부트]

목록 보기
31/38
post-thumbnail
  1. js
function commentchange(n){
            commentchangeval = n
            $("#changediv3").show()
        }
        function changecomment(){
            let commentid = $('#'+ commentchangeval).text()
            let commentchange = $("#commentchange").val()

            let jsonData = { // Body에 첨부할 json 데이터
                "id":commentid,
                "comment":commentchange
            };
            $.ajax({
                type: "PATCH",
                url: '/notice/comment/change',
                contentType: "application/json",
                data: JSON.stringify(jsonData),
                success: function (response) {
                    alert("댓글이 수정 되었습니다.")
                    window.location.reload()
                }
            })
        }

2.Controller

@PatchMapping("/notice/comment/change")
    public String commentChange(@RequestBody CommentChangeDto commentChangeDto){
        noticeService.commentChange(commentChangeDto);
        return "1";
    }

3.Dto

package com.spring.loginprac.dto;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;

@NoArgsConstructor
@AllArgsConstructor
@Getter
@Setter
public class CommentChangeDto {
    private Long id;
    private String comment;
}

4.Service

ublic void commentChange(CommentChangeDto commentChangeDto) {
        Comment comment = commentRepository.findById(commentChangeDto.getId())
                .orElseThrow(() -> new NullPointerException("해당 아이디가 존재하지 않습니다."));
        comment.setComment(commentChangeDto.getComment());
        commentRepository.save(comment);
    }

수정하기 버튼을 누르면 수정할 수 있는 texarea가 나타나고 수정할 값을 입력 받는다.
입력을 받게 되면 CommentChagneDto에 값을 담아두고 저장한다.

트러블슈팅
만약 하나의 글에 같은사람의 댓글이 두개가 있을 경우 처리가 되지 않았다.

내가 최초에 설계했던 구조는 comment entity의 id값을 담아놓는 p태그를 display none 처리를 하고 해당 클래스의 값을 불러오는 형태였다

하지만 같은사람의 댓글이 여러개일 경우 클래스가 중복이 가능하기에 값이 겹쳐져서 날라왔다.

그래서 반복문을 돌 때 p태그에 반복하는 i의 값을 id로 담아주고,
수정하기 버튼을 누를때마다 변수에 현재 for문의 i값을 담고 그 값으로 호출했다.,

프론트단의 트러블이었지만 오랜만에 아이디어를 떠올리기 위해 생각을 해서 써봤다.

0개의 댓글

관련 채용 정보