피드백 후 개선 사항 2일차
오늘부터는 추가 기능 및 보완에 들어갔다.
- 댓글 수정 기능
- 댓글 수정 시점
(편집됨)보여주기 - 댓글에서 유저 이미지 클릭시 프로필 보기 모달
- 댓글에서 유저 닉네임 클릭시 쪽지 보내기 모달
댓글 수정 기능
미루고 미루던 내 숙원...댓글 수정기능을 오늘 해보기로했다.
원래 굉장히 단순하게 되어있던 부분이었는데,
| comment.js
<span style="font-weight: bold">@${nickname}</span>
<small id="${id}-time">· ${timeBefore}</small><small id="${id}-timeEdit">· ${timeEditBefore} (편집됨)</small>
<br>
<div class="contents style="word-wrap:break-word word-break:break-all">
<div id="${id}-comment" class="text">${comment}</div>
<div id="${id}-editarea" class="edit" style="display:none">
<textarea id="${id}-textarea" class="te-edit" rows="5" maxlength="255"></textarea>
</div>
</div>
<a id="delete${id}" class=" ${enableDelete == true ? '' : 'none'} button has-text-centered is-rounded is-small" style="float:right;" onclick="deleteComment(${id}, ${isAdmin})">삭제</a>
<a id="edit${id}" class=" ${enableDelete == true ? '' : 'none'} button has-text-centered is-rounded is-small" style="float:right;" onclick="editComment(${id})">수정</a>
<a id="submit${id}" class=" button has-text-centered is-rounded is-small" style="display:none" onclick="updateComment(${id})">수정완료</a>
<a id="cancel${id}" class=" button has-text-centered is-rounded is-small" style="display:none" onclick="hideEdits(${id})">취소</a>처럼 ${id}를 사용하여, 각 요소에 넣어주었다.
//댓글 수정 버튼
window.editComment = (id) => {
showEdits(id);
let comment = $(`#${id}-comment`).text();
console.log(comment);
$(`#${id}-textarea`).val(comment);
};
//댓글 수정창
window.showEdits = (id) => {
$(`#${id}-editarea`).show();
$(`#submit${id}`).show();
$(`#cancel${id}`).show();
$(`#${id}-comment`).hide();
$(`#delete${id}`).hide();
$(`#edit${id}`).hide();
};먼저 댓글에서 수정 버튼을 누르면, showEdits을 실행해 textarea가 열려서 다시 댓글을 쓸 수 있게 해줬다.
그 열린 textarea에는 원래 있던 댓글의 comment가 그대로 들어가게 해주었다.
그리고 수정, 삭제 버튼이 사라지고 수정완료, 취소 버튼이 보이게 해줬다.
//댓글 수정 취소 버튼
window.hideEdits = (id) => {
$(`#${id}-editarea`).hide();
$(`#submit${id}`).hide();
$(`#cancel${id}`).hide();
$(`#${id}-comment`).show();
$(`#delete${id}`).show();
$(`#edit${id}`).show();
};댓글 수정에서 취소 버튼을 누르면 showEdits과는 반대로 textarea는 사라지고, 그릭 수정, 삭제 버튼이 보이고수정완료, 취소 버튼이 사라지게 해줬다.
// 댓글 수정완료 버튼 -> 댓글 수정
window.updateComment = (id) => {
let comment = $(`#${id}-textarea`).val();
if (comment == '') {
alert('댓글을 작성해주세요!');
$('#comment').focus();
return;
}
let data = {
//에러 났던 이유가 내가 서버에서 comment가 아니라 content로 해놨었음!
'content': comment
};
let token = Cookies.get('token');
$.ajax({
type: 'PUT',
url: process.env.BACKEND_HOST + '/comment/' + id,
beforeSend: function (xhr) {
xhr.setRequestHeader('Content-type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
},
data: JSON.stringify(data),
success: function () {
alert('댓글이 수정되었습니다');
window.location.reload();
},
error: function (response) {
console.log(response);
if (response.status == 400) {
alert('댓글은 255자 이내로 작성해주세요.');
}
else {
alert('댓글 작성에 실패하였습니다.');
}
}
});
};수정 로직은 내가 원래 구현해줬던 대로 해줬다. : )
댓글 유저 닉네임 클릭시 쪽지 보내기 모달
| commnet.js
function getPostingUserNickname() {
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
let token = Cookies.get('token');
$.ajax({
type: 'GET',
url: process.env.BACKEND_HOST + '/post/' + params['id'],
beforeSend: function (xhr) {
xhr.setRequestHeader('Content-type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
},
data: {},
success: function (response) {
let post = response;
let nickname = post['writer'];
$('#message-create-modal').css('display', 'flex');
$('input[id=receiver_createMessage]').attr('value', nickname);
}
});
}⇧ 기존에 구현되어 있었던 코드이다. 이것을 최대한 활용하려고 했는데 처음에는 아래처럼 잘 나오다가
SONG 쪽지 모달을 닫고 다시 누르거나 다른 사람 닉네임을 누르면 아래처럼 모달에서 닉네임 부분이 빈값이 들어갔다! ㅠㅠ
그래서 형철 튜터님께 다녀왔는데, 방법은 놀랍게도 ajax를 사용하지 않아도 됐다!!!
(사실 생각해보면 당연한건데 나 뭐한거지요~?)
window.getCommentUserMessage = (nickname) => {
$('#message-create-modal').css('display', 'flex');
$('input[id=receiver_createMessage]').val(nickname);
// 더티 플래그(?) html 돔중에 html 요소가 바뀌는 더티 플래그(변경되었다라는 의미)가 생기게된다.
// attr은 더티플래그를 더럽다고 생각해서 안받아오지만, .val은 더티플래그가 찍혀서 html 변경되는 값을 받아온다.
};너무 짧아 진 것 같지만 이게 맞다. 그 유저의 닉네임을 클릭하는거니 그냥 그 유저의 닉네임값을 넣어주기만 하면 되는 것!
처음에는 $('input[id=receiver_createMessage]').attr('value', nickname); 처럼 .attr을 써줬는데, 위 설명과 같이 계속 바뀌는 더티플래그 같은 경우는 attr은 더럽다고 안받아주고, .val을 써서 값을 받아주면 된다고 하셨다.
코딩의 세계란...^ㅡ^............
댓글 유저 닉네임 클릭시 쪽지 보내기 모달
| comment.js
window.getCommentUserProfile = (id) => {
let token = Cookies.get('token');
$('#aTag').empty();
$.ajax({
type: 'GET',
url: process.env.BACKEND_HOST + '/comment/' + id,
beforeSend: function (xhr) {
xhr.setRequestHeader('Content-type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
},
data: {},
success: function (response) {
let user = response;
let id = user['id'];
//서버에서 서비스에서 comments로 리턴해주도록 해놨음!
let profileImage = user['profileImageUrl'];
let nickname = user['nickname'];
let github = user['githubUrl'];
let portfolio = user['portfolioUrl'];
let introduction = user['introduction'];
$('#my_image').attr('src', profileImage);
$('#post-profile-modal').css('display', 'flex');
let htmlTemp = `<div id="${id}">
<span style="font-weight: bold; font-size: x-large"> @<span id="nickname_post" style="font-weight: bold; font-size: x-large">${nickname}</span></span><br>
<span style="font-weight: bold;">Github </span><a id="github_post" href="${github}" target="_blank">${github}</a><br>
<span style="font-weight: bold;">Portfolio </span><a id="portfolio_post" href="${portfolio}" target="_blank">${portfolio}</a><br>
<span style="font-weight: bold;">Introduction </span><br>
<span id="introduction_post" style="font-size: medium;">${introduction}</span>
</div>`;
$('#aTag').append(htmlTemp);
}
});
}; 여기서 유저의 프로필을 조회할 수록 그 조회가 계속 모달안에 쌓여서 점점 길어졌는데, 그 문제는 $('#aTag').empty(); 즉, empty 를 활용해 해결했다.
근데 이것도 그럼 ajax 를 쓸 필요가 없는건가? 🤔 한번 더 생각해봐야겠다.
코베베