댓글 쓰기
story.js에서 getStoryItem 함수에
<div class="sl__item__input">
<input type="text" placeholder="댓글 달기..." id="storyCommentInput-1" />
<button type="button" onClick="addComment()">게시</button>
</div>
JavaScript
복사
댓글 달기 관련 소스가 있다
id 부분의 뒤에 1 숫자가 고정되서 id로 변경해준다
<div class="sl__item__input">
<input type="text" placeholder="댓글 달기..." id="storyCommentInput-${image.id}" />
<button type="button" onClick="addComment()">게시</button>
</div>
JavaScript
복사
이미지 댓글의 내용은 id값을 찾아서 넣어주면 된다
근데 유저나 이미지 관련 내용이 없기 때문에 onClick의 addComment에 해당 값을 추가해서 보내준다
<div class="sl__item__input">
<input type="text" placeholder="댓글 달기..." id="storyCommentInput-${image.id}" />
<button type="button" onClick="addComment(${image.id})">게시</button>
</div>
JavaScript
복사
누가 날렸는지는 굳이 보낼 필요가 없는게 로그인 사람이 보내는거니까 세션값을 사용하면 된다
story.js 밑으로 내리다보면 addComment 함수가 보이는데
// (4) 댓글쓰기
function addComment(imageId) {
let commentInput = $("#storyCommentInput-1");
let commentList = $("#storyCommentList-1");
let data = {
content: commentInput.val()
}
if (data.content === "") {
alert("댓글을 작성해주세요!");
return;
}
let content = `
<div class="sl__item__contents__comment" id="storyCommentItem-2"">
<p>
<b>GilDong :</b>
댓글 샘플입니다.
</p>
<button><i class="fas fa-times"></i></button>
</div>
`;
commentList.prepend(content);
commentInput.val("");
}
JavaScript
복사
퍼블이 기본 틀로 만들어둔 함수다. 여기에 imageId를 받아두자
댓글 ajax 성공 하고나서 getStoryItem 함수에
요부분에 append 해줘야한다 그래서 쉽게 찾아갈 수 있게 id값에 1를 또 image.id로 수정해주자
<div id="storyCommentList-${image.id}">
<div class="sl__item__contents__comment" id="storyCommentItem-1">
<p>
<b>Lovely :</b> 부럽습니다.
</p>
<button>
<i class="fas fa-times"></i>
</button>
</div>
</div>
JavaScript
복사
addComment함수로 가서
// (4) 댓글쓰기
function addComment(imageId) {
let commentInput = $(`#storyCommentInput-${imageId}`);
let commentList = $(`#storyCommentList-${imageId}`);
let data = {
content: commentInput.val()
}
alert(data.content)
return;
}
JavaScript
복사
내가 쓴 댓글의 data.content값을 갖고 올 수 있다
append는 뒤에 붙는거고(밑으로) prepend는 앞에 미리 붙는거다(위로)
// (4) 댓글쓰기
function addComment(imageId) {
let commentInput = $(`#storyCommentInput-${imageId}`);
let commentList = $(`#storyCommentList-${imageId}`);
let data = {
imageId :imageId,
content: commentInput.val()
}
//console.log("자바스크립트 data : " , data)
//console.log("통신 JSON data : " , JSON.stringify(data))
if (data.content === "") {
alert("댓글을 작성해주세요!");
return;
}
$.ajax({
type: "post",
url : `/api/comment`,
data: JSON.stringify(data),
contentType :"application/json; charset=utf-8",
dataType: "json"
}).done(res=>{
console.log("성공", res)
}).fail(error=>{
console.log("오류", error)
});
}
JavaScript
복사
이제 통신을 통해 받을 데이터값인 imageId랑 content를 받을 수 있는 데이터 트랜스 오브젝트를 만들어줘야 한다. DTO
그건 다음시간에~