10-2 : 도서관 대여 서비스 (개인 프로젝트)

[엘리스 AI 트랙] 10주차 - 2

• comment 권한이 있으면 수정하는 기능 추가
• comment 권한이 있으면 삭제하는 기능 추가
• UI 일부 정리

TIL

comment 권한이 있으면 수정하는 기능 추가

• 엘리스 실습 코드를 참고해서 변형했다. → 로그인 한 user가 그 댓글의 user이면 jinja2 를 이용하여 보여준다. html과 js, jinja2 사용법이 헷갈려서 찾아보느라 시간이 조금 걸린 것 같다. html코드에서 js 함수로 jinja2를 이용한 매개변수 여러 개를 넘기는 방법은 아래와 같았다.
  

       {% if g.user._id == comment.user_id %}
        <div id="edit-delete-btns">
          <a href="#" onclick="updateComment('{{comment._id}}', '{{book._id}}');return false;" id='editBtn{{comment._id}}'>수정하기</a>
          <a href="#" onclick="deleteComment('{{comment._id}}', '{{book._id}}');return false;" id='deleteBtn{{comment._id}}'>삭제하기</a>  
        </div>
        {% endif %}

• javascript로 임시 html을 만들어 해당 댓글의 본문을 input박스와 별점 체크 select 태그를 이용해서 바꾸어 주는 부분이다.
  

            function updateComment(commentId, bookId) {
              let rating = $(`#user-rating${commentId}`).text()
              let content = $(`#user-comment${commentId}`).text()
              let tmpHtml = `<form class="row g-2" action="#" onsubmit="postUpdateComment(${commentId}, ${bookId}); return false;">
                                <div class="col-md-7">
                                  <label for="inputCity" class="form-label">댓글 수정</label>
                                  <input type="text" class="form-control" id="userEidContent${commentId}">
                                </div>
                                <div class="col-md-3">
                                  <label for="rating" class="form-label">평가하기</label>
                                  <select id="user-rating${commentId}" class="form-select">
                                    <option selected disabled hidden>별점을 선택하세요.</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                  </select>
                                </div>
                                <div class="col-12">
                                  <button type="submit" class="btn btn-warning">수정 완료</button>
                                </div>
                              </form>`
              $("#edit-area").empty()
              $("#edit-area").append(tmpHtml)
              $(`#editBtn${commentId}`).hide()
              $(`#deleteBtn${commentId}`).hide()
              $(`#userEidContent${commentId}`).val(content)
              $(`#user-rating${commentId}`).children().first().text(rating.length)
            }

• 기존의 댓글을 수정하는 요청은 PATCH로 했다. 그 부분만 수정하는 것이므로!
  • 댓글과 평점이 제대로 입력되었는지 먼저 확인하고 ajax로 데이터를 담아 수정 요청을 보낸다.
  • 오류 핸들링 : 처음에는 comment와 star_rating이 ""인지 검사를 했는데 comment는 아무 입력을 받지 않았는지 상태 검사를 ""로 할 수 있지만, select 태그를 이용한 셀렉트 박스 기능은 아무 선택도 하지 않은 경우 val을 가져오면 null값으로 설정되어 있다.

            function postUpdateComment(commentId, bookId) {
              let star_rating = $(`#user-rating${commentId}`).val()
              let comment = $(`#userEidContent${commentId}`).val()
              
              if (comment == "" || star_rating == null) {
                  alert("댓글과 평점은 필수 항목입니다.");
                  return;
              }
        
              $.ajax({
                  url: '/info/'+bookId,
                  type: 'PATCH',
                  data: {
                      "comment_id": commentId,
                      "comment": comment,
                      "star_rating": star_rating,
                  },
                  success: function (res) {
                      if (res['result'] == 'success') {
                          alert("수정되었습니다.")
                          window.location.reload()
                      }
                  }
              })
            }

• 백엔드 코드
  • 받아온 데이터 이용하여 수정할 코멘트 db에서 검색. 코멘트와 별점, 수정한 시각 수정 후 db에 적용한다.

        @board.route("/info/<int:book_id>", methods=["GET", "POST", "PATCH", "DELETE"])
        def bookInfo(book_id):
        # ... 중략 ...
        	elif method == "PATCH":
        		  # 댓글 수정
        		  comment_id = request.form['comment_id']
        		  comment = request.form['comment']
        		  star_rating = request.form['star_rating']
        		  comment_to_edit = Comment.query.filter(Comment._id == comment_id).first()
        		  comment_to_edit.comment = comment
        		  comment_to_edit.star_rating = star_rating
        		  comment_to_edit.created_at = datetime.now()
        		  db.session.commit()
        		  return jsonify({"result": "success"})

• comment 권한이 있으면 삭제하는 기능 추가
  • 삭제는 아래 코드처럼 비교적 간단하게 구현할 수 있다.
  • 여기서 오류가 발생했던 부분은 comment id와 book id를 구분하지 않아서 오류가 생겼었다. 생각해보면 url에 나와야 하는 부분은 book에 대한 정보이니 book id가, 삭제할 데이터는 해당 코멘트를 특정지어야 하므로 comment id가 되어야 한다.

    function deleteComment(commentId, bookId) {
          $.ajax({
              url: '/info/'+bookId,
              type: 'DELETE',
              data: {
                  'id': commentId,
              },
              success: function (res) {
                  if (res['result'] == 'success') {
                      alert("삭제되었습니다.")
                      window.location.reload()
                  } else {
                      alert("삭제 실패")
                  }
              }
          })
        }

• 백엔드 코드
  • db에서 해당 코멘트 삭제한다!

    @board.route("/info/<int:book_id>", methods=["GET", "POST", "PATCH", "DELETE"])
    def bookInfo(book_id):
    	# ... 중략 ...
    	else:
    		# 댓글 삭제
    		id = request.form["id"]
    		Comment.query.filter(Comment._id == id).delete()
    		db.session.commit()
    		return jsonify({"result": "success"})