댓글 수정 삭제 보완

This commit is contained in:
kimdaae328 2025-02-21 12:29:16 +09:00
parent 8d2799e0a1
commit c88b01f78f
3 changed files with 57 additions and 22 deletions

View File

@ -25,7 +25,7 @@
/>
<button class="btn btn-primary" @click="logPasswordAndEmit">확인</button>
</div>
<span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
<span v-if="passwordCommentAlert" class="invalid-feedback d-block text-start">{{ passwordCommentAlert }}</span>
</div>
@ -96,7 +96,7 @@ const props = defineProps({
type: Boolean,
default: false,
},
passwordAlert: {
passwordCommentAlert: {
type: String,
default: false
}
@ -133,6 +133,7 @@ const handleUpdateReaction = (reactionData) => {
//
const logPasswordAndEmit = () => {
emit('submitPassword', props.comment, password.value);
password.value = "";
};
watch(() => props.comment.isEditTextarea, (newVal) => {

View File

@ -10,7 +10,7 @@
:comment="comment"
:isCommentPassword="comment.isCommentPassword"
:isEditTextarea="comment.isEditTextarea"
:passwordAlert="passwordAlert"
:passwordCommentAlert="passwordCommentAlert"
@editClick="$emit('editClick', comment)"
@deleteClick="$emit('deleteClick', comment)"
@submitPassword="submitPassword"
@ -46,7 +46,7 @@ const props = defineProps({
type: Boolean,
default: false,
},
passwordAlert: {
passwordCommentAlert: {
type: String,
default: false
}

View File

@ -100,7 +100,7 @@
:comments="comments"
:isCommentPassword="isCommentPassword"
:isEditTextarea="isEditTextarea"
:passwordAlert="passwordAlert"
:passwordCommentAlert="passwordCommentAlert"
@editClick="editComment"
@deleteClick="deleteComment"
@updateReaction="handleCommentReaction"
@ -255,7 +255,6 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
// console.log(" API :", response.data);
// /
await fetchComments();
} catch (error) {
@ -361,19 +360,19 @@ const handleCommentSubmit = async ({ comment, password }) => {
isSubmitting.value = true;
try {
await axios.post(`board/${currentBoardId.value}/comment`, {
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
LOCBRDSEQ: currentBoardId.value,
LOCCMTRPY: comment,
LOCCMTPWD: password,
LOCCMTPNT: 1
});
// if (response.status === 200) {
// console.log(' :', response.data.message);
// await fetchComments();
// } else {
// console.log(' :', response.data.message);
// }
if (response.status === 200) {
// console.log(' :', response.data.message);
await fetchComments();
} else {
console.log('댓글 작성 실패:', response.data.message);
}
} catch (error) {
console.log('댓글 작성 중 오류 발생:', error);
}
@ -383,6 +382,13 @@ const handleCommentSubmit = async ({ comment, password }) => {
//
const handleCommentReply = async (reply) => {
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`, {
LOCBRDSEQ: currentBoardId.value,
LOCCMTRPY: reply.comment,
@ -390,12 +396,19 @@ const handleCommentReply = async (reply) => {
LOCCMTPNT: reply.parentId
});
//
console.log('대댓글 작성 응답:', {
status: response.status,
data: response.data,
headers: response.headers
});
if (response.status === 200) {
if (response.data.code === 200) {
// console.log(' :', response.data);
await fetchComments();
if (response.data.code === 200) { //
console.log('대댓글 작성 성공:', response.data);
await fetchComments(); //
} else {
// console.log(' - :', response.data);
console.log('대댓글 작성 실패 - 서버 응답:', response.data);
alert('대댓글 작성에 실패했습니다.');
}
}
@ -428,6 +441,12 @@ const deleteClick = (unknown) => {
//
const editComment = (comment) => {
if (comment.isEditTextarea) {
//
comment.isEditTextarea = false;
return;
}
if (unknown.value) {
toggleCommentPassword(comment, "edit");
} else {
@ -449,12 +468,21 @@ const editComment = (comment) => {
//
const deleteComment = (comment) => {
if (unknown.value) {
toggleCommentPassword(comment, "delete");
if (comment.isEditTextarea) {
// ,
comment.isEditTextarea = false;
comment.isCommentPassword = true;
} else {
//
toggleCommentPassword(comment, "delete");
}
} else {
//
comments.value = comments.value.filter(c => c.commentId !== comment.commentId);
}
};
//
const toggleCommentPassword = (comment, button) => {
if (lastCommentClickedButton.value === button && comment.isCommentPassword) {
comment.isCommentPassword = false;
@ -525,7 +553,7 @@ const submitPassword = async () => {
//
const submitCommentPassword = async (comment, password) => {
if (!password) {
passwordAlert.value = "비밀번호를 입력해주세요.";
passwordCommentAlert.value = "비밀번호를 입력해주세요.";
return;
}
@ -536,7 +564,6 @@ const submitCommentPassword = async (comment, password) => {
});
if (response.data.code === 200 && response.data.data === true) {
// password = '';
comment.isCommentPassword = false;
if (lastCommentClickedButton.value === "edit") {
@ -548,10 +575,10 @@ const submitCommentPassword = async (comment, password) => {
}
lastCommentClickedButton.value = null;
} else {
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
passwordCommentAlert.value = "비밀번호가 일치하지 않습니다.";
}
} catch (error) {
passwordAlert.value = "비밀번호 검증 중 오류가 발생했습니다.";
passwordCommentAlert.value = "비밀번호 검증 중 오류가 발생했습니다.";
}
};
@ -582,24 +609,31 @@ const deletePost = async () => {
//
const deleteReplyComment = async (comment) => {
if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
// console.log(" ID:", comment);
try {
const response = await axios.delete(`board/comment/${comment.commentId}`, {
data: { LOCCMTSEQ: comment.commentId }
});
// console.log(" :", response.data);
if (response.data.code === 200) {
// console.log(" !");
await fetchComments();
} else {
// console.log(" :", response.data.message);
alert("댓글 삭제에 실패했습니다.");
}
} catch (error) {
console.log("댓글 삭제 중 오류 발생:", error);
alert("댓글 삭제 중 오류가 발생했습니다.");
}
};
//
const handleCancelEdit = (comment) => {
console.log("BoardView.vue - 댓글 수정 취소:", comment);
comment.isEditTextarea = false;
};