localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

댓글 수정 삭제 완

Browse Source
This commit is contained in:
kimdaae328 2025-02-21 11:54:54 +09:00
parent 54b3db91ab
commit 8d2799e0a1
4 changed files with 56 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/board/BoardComment.vue
View File

@ -34,7 +34,7 @@
<textarea v-model="localEditedContent" class="form-control"></textarea> <textarea v-model="localEditedContent" class="form-control"></textarea>
<div class="mt-2 d-flex justify-content-end"> <div class="mt-2 d-flex justify-content-end">
<button class="btn btn-secondary me-2" @click="$emit('cancelEdit', comment)">취소</button> <button class="btn btn-secondary me-2" @click="$emit('cancelEdit', comment)">취소</button>
<button class="btn btn-primary" @click="$emit('submitEdit', comment, editedContent)">수정</button> <button class="btn btn-primary" @click="submitEdit">수정</button>
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -88,10 +88,6 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
editedContent: {
type: String,
default: ""
},
isEditTextarea: { isEditTextarea: {
type: Boolean, type: Boolean,
default: false default: false
@ -109,8 +105,8 @@ const props = defineProps({
// emits 정의 // emits 정의
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit']); const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit']);
// const password = ref(''); const password = ref('');
const localEditedContent = ref(props.editedContent); const localEditedContent = ref(props.comment.content);
// 댓글 입력 창 토글 // 댓글 입력 창 토글
const isComment = ref(false); const isComment = ref(false);
@ -118,26 +114,9 @@ const toggleComment = () => {
isComment.value = !isComment.value; isComment.value = !isComment.value;
}; };
// 비밀번호 & 수정 모드 관련 상태
const password = ref('');
const passwordAlert = ref('');
const isPassword = ref(false);
const isEditTextarea = ref(false);
const lastClickedButton = ref("");
const toggleEdit = (status) => {
if (props.unknown) {
isPassword.value = status; // 익명 사용자면 비밀번호 입력창 표시
lastClickedButton.value = "edit";
} else {
isEditTextarea.value = status; // 비밀번호가 필요 없으면 바로 수정 모드
}
};
// 부모 컴포넌트에 대댓글 추가 요청 // 부모 컴포넌트에 대댓글 추가 요청
const submitComment = (newComment) => { const submitComment = (newComment) => {
emit('submitComment', { parentId: props.comment.commentId, ...newComment }); emit('submitComment', { parentId: props.comment.commentId, ...newComment });
isComment.value = false; isComment.value = false;
}; };
@ -151,27 +130,20 @@ const handleUpdateReaction = (reactionData) => {
}; };
// 비밀번호 확인 // 비밀번호 확인
const logPasswordAndEmit = () => { const logPasswordAndEmit = () => {
// console.log("BoardComment.vue - 비밀번호 입력값:", password.value);
emit('submitPassword', props.comment, password.value); emit('submitPassword', props.comment, password.value);
}; };
watch(() => props.comment.isEditTextarea, (newVal) => {
watch(() => props.editedContent, (newValue) => { if (newVal) {
localEditedContent.value = newValue; localEditedContent.value = props.comment.content;
}
}); });
// 댓글 수정 취소
// const cancelEdit = () => {
// isEditTextarea.value = false;
// };
// 댓글 수정 내용 저장 // 수정버튼
const submitEdit = () => { const submitEdit = () => {
emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value }); emit('submitEdit', props.comment, localEditedContent.value);
isEditTextarea.value = false; // 수정 모드 종료
}; };
</script> </script>

10
src/components/board/BoardCommentList.vue
View File

@ -16,7 +16,7 @@
@submitPassword="submitPassword" @submitPassword="submitPassword"
@submitComment="submitComment" @submitComment="submitComment"
@commentDeleted="handleCommentDeleted" @commentDeleted="handleCommentDeleted"
@submitEdit="$emit('submitEdit', comment, editedContent)" @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
@cancelEdit="$emit('cancelEdit', comment)" @cancelEdit="$emit('cancelEdit', comment)"
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)" @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
/> />
@ -52,7 +52,7 @@ const props = defineProps({
} }
}); });
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'submitPassword']); const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'submitPassword', 'clearPassword']);
const submitComment = (replyData) => { const submitComment = (replyData) => {
emit('submitComment', replyData); emit('submitComment', replyData);
@ -68,13 +68,7 @@ const handleUpdateReaction = (reactionData, commentId, boardId) => {
emit('updateReaction', updatedReactionData); emit('updateReaction', updatedReactionData);
} }
const editClick = (data) => {
emit('editClick', data);
};
const submitPassword = (comment, password) => { const submitPassword = (comment, password) => {
// console.log("BoardCommentList.vue - 전달된 비밀번호:", password, "댓글 정보:", comment);
emit('submitPassword', comment, password); emit('submitPassword', comment, password);
}; };
</script> </script>

5
src/components/board/BoardProfile.vue
View File

@ -107,11 +107,6 @@ const deleteClick = () => {
}; };
const handleUpdateReaction = (reactionData) => { const handleUpdateReaction = (reactionData) => {
// console.log("🔥 BoardProfile에서 좋아요/싫어요 이벤트 발생");
// console.log("📌 게시글 ID:", props.boardId);
// console.log("📌 댓글 ID (수정 후):", props.comment?.commentId);
// console.log("📌 reactionData:", reactionData);
emit("updateReaction", { emit("updateReaction", {
boardId: props.boardId, boardId: props.boardId,
commentId: props.comment?.commentId, commentId: props.comment?.commentId,

122
src/views/board/BoardView.vue
View File

@ -253,7 +253,7 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
LOCGOBBAD: isDislike ? 'T' : 'F' LOCGOBBAD: isDislike ? 'T' : 'F'
}); });
console.log("댓글 좋아요 API 응답 데이터:", response.data); // console.log("댓글 좋아요 API 응답 데이터:", response.data);
// 좋아요/싫어요 상태 업데이트를 위해 새로 불러오기 // 좋아요/싫어요 상태 업데이트를 위해 새로 불러오기
await fetchComments(); await fetchComments();
@ -337,14 +337,14 @@ const fetchComments = async (page = 1) => {
navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호 navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
}; };
console.log("📌 댓글 목록:", comments.value); // console.log("📌 댓글 목록:", comments.value);
} catch (error) { } catch (error) {
console.log('댓글 목록 불러오기 오류:', error); console.log('댓글 목록 불러오기 오류:', error);
} }
}; };
const isSubmitting = ref(false);
// 댓글 작성 // 댓글 작성
const handleCommentSubmit = async ({ comment, password }) => { const handleCommentSubmit = async ({ comment, password }) => {
// if (unknown.value && !password) { // if (unknown.value && !password) {
@ -356,22 +356,24 @@ const handleCommentSubmit = async ({ comment, password }) => {
// return; // return;
// } // }
// 중복 실행 방지
if (isSubmitting.value) return;
isSubmitting.value = true;
try { try {
const response = await axios.post(`board/${currentBoardId.value}/comment`, { await axios.post(`board/${currentBoardId.value}/comment`, {
LOCBRDSEQ: currentBoardId.value, LOCBRDSEQ: currentBoardId.value,
LOCCMTRPY: comment, LOCCMTRPY: comment,
LOCCMTPWD: password, LOCCMTPWD: password,
LOCCMTPNT: 1 LOCCMTPNT: 1
}); });
// console.log('서버 응답 전체1212121212:', response.data);
if (response.status === 200) { // if (response.status === 200) {
console.log('댓글 작성 성공:', response.data.message); // console.log('댓글 작성 성공:', response.data.message);
await fetchComments(); // await fetchComments();
} else { // } else {
console.log('댓글 작성 실패:', response.data.message); // console.log('댓글 작성 실패:', response.data.message);
} // }
} catch (error) { } catch (error) {
console.log('댓글 작성 중 오류 발생:', error); console.log('댓글 작성 중 오류 발생:', error);
} }
@ -381,13 +383,6 @@ const handleCommentSubmit = async ({ comment, password }) => {
// 대댓글 작성 // 대댓글 작성
const handleCommentReply = async (reply) => { const handleCommentReply = async (reply) => {
try { try {
console.log('대댓글 작성 요청 데이터:', {
LOCBRDSEQ: currentBoardId.value,
LOCCMTRPY: reply.comment,
LOCCMTPWD: reply.password || null,
LOCCMTPNT: reply.parentId
});
const response = await axios.post(`board/${currentBoardId.value}/comment`, { const response = await axios.post(`board/${currentBoardId.value}/comment`, {
LOCBRDSEQ: currentBoardId.value, LOCBRDSEQ: currentBoardId.value,
LOCCMTRPY: reply.comment, LOCCMTRPY: reply.comment,
@ -395,19 +390,12 @@ const handleCommentReply = async (reply) => {
LOCCMTPNT: reply.parentId LOCCMTPNT: reply.parentId
}); });
// 응답 데이터를 자세히 로그로 확인
console.log('대댓글 작성 응답:', {
status: response.status,
data: response.data,
headers: response.headers
});
if (response.status === 200) { if (response.status === 200) {
if (response.data.code === 200) { // 서버 응답 코드도 확인 if (response.data.code === 200) {
console.log('대댓글 작성 성공:', response.data); // console.log('대댓글 작성 성공:', response.data);
await fetchComments(); // 댓글 목록 새로고침 await fetchComments();
} else { } else {
console.log('대댓글 작성 실패 - 서버 응답:', response.data); // console.log('대댓글 작성 실패 - 서버 응답:', response.data);
alert('대댓글 작성에 실패했습니다.'); alert('대댓글 작성에 실패했습니다.');
} }
} }
@ -496,7 +484,6 @@ const submitPassword = async () => {
passwordAlert.value = "비밀번호를 입력해주세요."; passwordAlert.value = "비밀번호를 입력해주세요.";
return; return;
} }
// console.log("📌 요청 시작: submitPassword 실행됨"); // console.log("📌 요청 시작: submitPassword 실행됨");
try { try {
@ -537,31 +524,29 @@ const submitPassword = async () => {
// 댓글 비밀번호 제출 // 댓글 비밀번호 제출
const submitCommentPassword = async (comment, password) => { const submitCommentPassword = async (comment, password) => {
console.log("BoardView.vue - 최종 비밀번호 전달 확인:", password, "댓글 정보:", comment);
if (!password) { if (!password) {
passwordAlert.value = "비밀번호를 입력해주세요."; passwordAlert.value = "비밀번호를 입력해주세요.";
return; return;
} }
// console.log('코멘트아이디:', comment.commentId, '비번:', password)
// comment.isEditTextarea = true;
//비밀번호 확인 안됨
try { try {
const response = await axios.post(`board/comment/${comment.commentId}/password`, { const response = await axios.post(`board/comment/${comment.commentId}/password`, {
LOCCMTPWD: password, LOCCMTPWD: password,
LOCCMTSEQ: comment.commentId, LOCCMTSEQ: comment.commentId,
}); });
// console.log("응답!!!!!!!!", response); // 서버 응답 전체 확인
// console.log("응답 데이터:", response.data);
if (response.data.code === 200 && response.data.data === true) { if (response.data.code === 200 && response.data.data === true) {
console.log('되는거니') // password = '';
// deleteComment() comment.isCommentPassword = false;
password.value = '';
isPassword.value = false; if (lastCommentClickedButton.value === "edit") {
comment.isEditTextarea.value = true; comment.isEditTextarea = true;
// handleSubmitEdit(comment, comment.content);
} else if (lastCommentClickedButton.value === "delete") {
deleteReplyComment(comment)
}
lastCommentClickedButton.value = null;
} else { } else {
passwordAlert.value = "비밀번호가 일치하지 않습니다."; passwordAlert.value = "비밀번호가 일치하지 않습니다.";
} }
@ -595,47 +580,33 @@ const deletePost = async () => {
}; };
// 댓글 삭제 // 댓글 삭제
// const deleteComment = async () => { const deleteReplyComment = async (comment) => {
// if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return; if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
// try { try {
// console.log("댓글 삭제 요청 시작:"); const response = await axios.delete(`board/comment/${comment.commentId}`, {
// console.log("댓글 ID:", props.comment.commentId); data: { LOCCMTSEQ: comment.commentId }
// console.log("게시글 ID:", props.comment.boardId); });
// console.log("비밀번호 포함 여부:", props.unknown ? "예 (익명 사용자)" : "아니오 (로그인 사용자)");
// const response = await axios.delete(`board/${props.comment.commentId}`, { if (response.data.code === 200) {
// data: { LOCCMTSEQ: props.comment.commentId } await fetchComments();
// }); } else {
alert("댓글 삭제에 실패했습니다.");
// console.log("📌 서버 응답:", response.data); }
} catch (error) {
// if (response.data.code === 200) { alert("댓글 삭제 중 오류가 발생했습니다.");
// console.log("댓글 삭제 성공!"); }
// // emit("commentDeleted", props.comment.commentId); };
// } else {
// console.log("❌ 댓글 삭제 실패:", response.data.message);
// // alert("댓글 삭제에 실패했습니다.");
// }
// } catch (error) {
// console.log("🚨 댓글 삭제 중 오류 발생:", error);
// alert("댓글 삭제 중 오류가 발생했습니다.");
// }
// };
// 댓글 수정 취소 // 댓글 수정 취소
const handleCancelEdit = (comment) => { const handleCancelEdit = (comment) => {
console.log("BoardView.vue - 댓글 수정 취소:", comment);
comment.isEditTextarea = false; comment.isEditTextarea = false;
}; };
// 댓글 수정 확인 // 댓글 수정 확인
const handleSubmitEdit = async (comment, editedContent) => { const handleSubmitEdit = async (comment, editedContent) => {
console.log("BoardView.vue - 댓글 수정:", comment, "수정된 내용:", editedContent);
// editedContent = ref(props.comment.content)
try { try {
await axios.put(`board/comment/${comment.commentId}/edit`, { const response = await axios.put(`board/comment/${comment.commentId}`, {
LOCCMTSEQ: comment.commentId, LOCCMTSEQ: comment.commentId,
LOCCMTRPY: editedContent LOCCMTRPY: editedContent
}); });
@ -648,11 +619,6 @@ const handleSubmitEdit = async (comment, editedContent) => {
} }
}; };
// const submitEdit = () => {
// emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
// isEditTextarea.value = false; // 수정 모드 종료
// };
// 페이지 변경 // 페이지 변경
const handlePageChange = (page) => { const handlePageChange = (page) => {
if (page !== pagination.value.currentPage) { if (page !== pagination.value.currentPage) {