댓글 수정의 개요

• 댓글 수정 페이지는 부트스트랩에서 제공하는 모달 기능을 이용해 생성

댓글 수정 뷰 페이지 만들기

1. 수정 버튼과 모달 추가하기

<div id="comments-list">
		{{nickname}}
		// 수정 버튼 삽입 위치
		<!-- Button trigger modal -->
		<button type="button"
		    class="btn btn-primary"
				data-bs-toggle="modal"
				data-bs-target="#exampleModal">수정</button>
</div>

• data-bs-toggle="modal"： 클릭하면 모달이 나타나고 다시 클릭하면 사라짐（토글 역할）
• data-bs-target="#exampleModal"： 해당 id의 모달 실행
• 부트스트랩으로 가서<!—Modal—> 부분도 복사하고 list.mustache 코드의 맨 아래에 붙여 넣기

<div id="comments-list">
（중략）
</div>
<!— Modal —>
<div class="modal fade" id="exampleModal" tabindex="-1"
			aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog,,>
			<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title"
								id="exampleModalLaber,>Modal title</h5>
						<button type="button"
								class="btn-close"
								data-bs-dismiss="modal"
								aria-label="Close,，X/button>
			</div>
			<div class="modal-body">
						...
			</div>
			<div class="modal-footer">
				<button type="button"
					class="btn btn-secondary"
					data-bs-dismiss="modar,>Close</button>
				<button type="button"
					class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>

• 폼 수정

<div id="comments-list">
    {{#commentDtos}}
        <div class="card m-2" id="comments-{{id}}">
            <div class="card-header">
                {{nickname}}
                <!-- Button trigger modal -->
                <button type="button"
                        class="btn btn-sm btn-outline-primary" // 수정 버튼을 흰색 바탕, 파란색 글씨로 변경
                        data-bs-toggle="modal"
                        data-bs-target="#comment-edit-modal"
                        data-bs-id="{{id}}"
                        data-bs-nickname="{{nickname}}"
                        data-bs-body="{{body}}"
                        data-bs-article-id="{{articleId}}">수정</button> // id 변경
 (중략)
<!-- Modal -->
<div class="modal fade" id="comment-edit-modal" tabindex="-1"> // id 변경
		~~aria-labelledby="exampleModalLabel" aria-hidden="true">~~ // 속성 삭제
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">댓글 수정</h5> // 모달 제목 변경
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
						<div class="modal-footer"> // [Close], [Save changes] 버튼 삭제
							<button type="button"
									class=,,btn btn-secondary"
									data-bs-dismiss="modar'>Close</button>
							<button type="button"
									class="btn btn-primdry">Save changes</button>
		        </div>

2. 수정 폼 삽입하기]

• /templates/comments/_new.mustache 파일 상단의 <form>…</form> 코드를 _list.mustache 파일의 모달 본문의 … 부분에 붙여넣기
• 붙여넣은 코드를 댓글 수정 폼으로 변경

<!-- 댓글 수정 폼 -->
<form>
      <!-- 닉네임 입력 -->
      <div class="mb-3">
      <label class="form-label">닉네임</label>
         <input type="text" class="form-control"
             id="edit-comment-nickname"> // id 수정
      </div>
      <!-- 댓글 본문 입력 -->
      <div class="mb-3">
		     <label class="form-label">댓글 내용</label>
         <textarea type="text" class="form-control" rows="3"
                   id="edit-comment-body"></textarea> // id 수정
      </div>
      <!-- 히든 인풋 -->
			~~{{#article}}~~ // 변수 삭제
      <input type="hidden" id="edit-comment-id">  // 히든 인풋 요소 정의
      <input type="hidden" id="edit-comment-article-id"> // 히든 인풋 요소 정의
			~~{{#article}}~~ // 변수 삭제
      <!-- 전송 버튼 -->
      <button type="button" class="btn btn-primary"
        id="comment-update-btn">수정 완료</button>  // id, 제목 수정
</form>

자바스크립트로 댓글 수정하기

1. 트리거 데이터 전달하기

1. data-bs-id 속성을 추가하고 현재 댓글의 {{id}} 값을 저장