댓글 수정 삭제 완
This commit is contained in:
parent
54b3db91ab
commit
8d2799e0a1
@ -34,7 +34,7 @@
|
||||
<textarea v-model="localEditedContent" class="form-control"></textarea>
|
||||
<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-primary" @click="$emit('submitEdit', comment, editedContent)">수정</button>
|
||||
<button class="btn btn-primary" @click="submitEdit">수정</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
@ -88,10 +88,6 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
editedContent: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
isEditTextarea: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@ -109,8 +105,8 @@ const props = defineProps({
|
||||
// emits 정의
|
||||
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit']);
|
||||
|
||||
// const password = ref('');
|
||||
const localEditedContent = ref(props.editedContent);
|
||||
const password = ref('');
|
||||
const localEditedContent = ref(props.comment.content);
|
||||
|
||||
// 댓글 입력 창 토글
|
||||
const isComment = ref(false);
|
||||
@ -118,26 +114,9 @@ const toggleComment = () => {
|
||||
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) => {
|
||||
emit('submitComment', { parentId: props.comment.commentId, ...newComment });
|
||||
|
||||
isComment.value = false;
|
||||
};
|
||||
|
||||
@ -151,27 +130,20 @@ const handleUpdateReaction = (reactionData) => {
|
||||
|
||||
};
|
||||
|
||||
|
||||
// 비밀번호 확인
|
||||
const logPasswordAndEmit = () => {
|
||||
// console.log("BoardComment.vue - 비밀번호 입력값:", password.value);
|
||||
emit('submitPassword', props.comment, password.value);
|
||||
};
|
||||
|
||||
|
||||
watch(() => props.editedContent, (newValue) => {
|
||||
localEditedContent.value = newValue;
|
||||
watch(() => props.comment.isEditTextarea, (newVal) => {
|
||||
if (newVal) {
|
||||
localEditedContent.value = props.comment.content;
|
||||
}
|
||||
});
|
||||
// 댓글 수정 취소
|
||||
// const cancelEdit = () => {
|
||||
// isEditTextarea.value = false;
|
||||
// };
|
||||
|
||||
// 댓글 수정 내용 저장
|
||||
// 수정버튼
|
||||
const submitEdit = () => {
|
||||
emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
|
||||
isEditTextarea.value = false; // 수정 모드 종료
|
||||
emit('submitEdit', props.comment, localEditedContent.value);
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
@submitPassword="submitPassword"
|
||||
@submitComment="submitComment"
|
||||
@commentDeleted="handleCommentDeleted"
|
||||
@submitEdit="$emit('submitEdit', comment, editedContent)"
|
||||
@submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
|
||||
@cancelEdit="$emit('cancelEdit', comment)"
|
||||
@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) => {
|
||||
emit('submitComment', replyData);
|
||||
@ -68,13 +68,7 @@ const handleUpdateReaction = (reactionData, commentId, boardId) => {
|
||||
emit('updateReaction', updatedReactionData);
|
||||
}
|
||||
|
||||
const editClick = (data) => {
|
||||
emit('editClick', data);
|
||||
};
|
||||
|
||||
const submitPassword = (comment, password) => {
|
||||
// console.log("BoardCommentList.vue - 전달된 비밀번호:", password, "댓글 정보:", comment);
|
||||
emit('submitPassword', comment, password);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
@ -107,11 +107,6 @@ const deleteClick = () => {
|
||||
};
|
||||
|
||||
const handleUpdateReaction = (reactionData) => {
|
||||
// console.log("🔥 BoardProfile에서 좋아요/싫어요 이벤트 발생");
|
||||
// console.log("📌 게시글 ID:", props.boardId);
|
||||
// console.log("📌 댓글 ID (수정 후):", props.comment?.commentId);
|
||||
// console.log("📌 reactionData:", reactionData);
|
||||
|
||||
emit("updateReaction", {
|
||||
boardId: props.boardId,
|
||||
commentId: props.comment?.commentId,
|
||||
|
||||
@ -253,7 +253,7 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
|
||||
LOCGOBBAD: isDislike ? 'T' : 'F'
|
||||
});
|
||||
|
||||
console.log("댓글 좋아요 API 응답 데이터:", response.data);
|
||||
// console.log("댓글 좋아요 API 응답 데이터:", response.data);
|
||||
|
||||
// 좋아요/싫어요 상태 업데이트를 위해 새로 불러오기
|
||||
await fetchComments();
|
||||
@ -337,14 +337,14 @@ const fetchComments = async (page = 1) => {
|
||||
navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
|
||||
};
|
||||
|
||||
console.log("📌 댓글 목록:", comments.value);
|
||||
// console.log("📌 댓글 목록:", comments.value);
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.log('댓글 목록 불러오기 오류:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const isSubmitting = ref(false);
|
||||
// 댓글 작성
|
||||
const handleCommentSubmit = async ({ comment, password }) => {
|
||||
// if (unknown.value && !password) {
|
||||
@ -356,22 +356,24 @@ const handleCommentSubmit = async ({ comment, password }) => {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// 중복 실행 방지
|
||||
if (isSubmitting.value) return;
|
||||
isSubmitting.value = true;
|
||||
|
||||
try {
|
||||
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
|
||||
try {
|
||||
await axios.post(`board/${currentBoardId.value}/comment`, {
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
LOCCMTRPY: comment,
|
||||
LOCCMTPWD: password,
|
||||
LOCCMTPNT: 1
|
||||
});
|
||||
// console.log('서버 응답 전체1212121212:', response.data);
|
||||
|
||||
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);
|
||||
}
|
||||
@ -381,13 +383,6 @@ 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,
|
||||
@ -395,19 +390,12 @@ 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('대댓글 작성에 실패했습니다.');
|
||||
}
|
||||
}
|
||||
@ -496,7 +484,6 @@ const submitPassword = async () => {
|
||||
passwordAlert.value = "비밀번호를 입력해주세요.";
|
||||
return;
|
||||
}
|
||||
|
||||
// console.log("📌 요청 시작: submitPassword 실행됨");
|
||||
|
||||
try {
|
||||
@ -537,31 +524,29 @@ const submitPassword = async () => {
|
||||
|
||||
// 댓글 비밀번호 제출
|
||||
const submitCommentPassword = async (comment, password) => {
|
||||
console.log("BoardView.vue - 최종 비밀번호 전달 확인:", password, "댓글 정보:", comment);
|
||||
if (!password) {
|
||||
passwordAlert.value = "비밀번호를 입력해주세요.";
|
||||
return;
|
||||
}
|
||||
|
||||
// console.log('코멘트아이디:', comment.commentId, '비번:', password)
|
||||
// comment.isEditTextarea = true;
|
||||
|
||||
//비밀번호 확인 안됨
|
||||
try {
|
||||
const response = await axios.post(`board/comment/${comment.commentId}/password`, {
|
||||
LOCCMTPWD: password,
|
||||
LOCCMTSEQ: comment.commentId,
|
||||
});
|
||||
|
||||
// console.log("응답!!!!!!!!", response); // 서버 응답 전체 확인
|
||||
// console.log("응답 데이터:", response.data);
|
||||
|
||||
if (response.data.code === 200 && response.data.data === true) {
|
||||
console.log('되는거니')
|
||||
// deleteComment()
|
||||
password.value = '';
|
||||
isPassword.value = false;
|
||||
comment.isEditTextarea.value = true;
|
||||
// password = '';
|
||||
comment.isCommentPassword = false;
|
||||
|
||||
if (lastCommentClickedButton.value === "edit") {
|
||||
comment.isEditTextarea = true;
|
||||
// handleSubmitEdit(comment, comment.content);
|
||||
} else if (lastCommentClickedButton.value === "delete") {
|
||||
|
||||
deleteReplyComment(comment)
|
||||
}
|
||||
lastCommentClickedButton.value = null;
|
||||
} else {
|
||||
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
|
||||
}
|
||||
@ -595,47 +580,33 @@ const deletePost = async () => {
|
||||
};
|
||||
|
||||
// 댓글 삭제
|
||||
// const deleteComment = async () => {
|
||||
// if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
|
||||
const deleteReplyComment = async (comment) => {
|
||||
if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
|
||||
|
||||
// try {
|
||||
// console.log("댓글 삭제 요청 시작:");
|
||||
// console.log("댓글 ID:", props.comment.commentId);
|
||||
// console.log("게시글 ID:", props.comment.boardId);
|
||||
// console.log("비밀번호 포함 여부:", props.unknown ? "예 (익명 사용자)" : "아니오 (로그인 사용자)");
|
||||
try {
|
||||
const response = await axios.delete(`board/comment/${comment.commentId}`, {
|
||||
data: { LOCCMTSEQ: comment.commentId }
|
||||
});
|
||||
|
||||
// const response = await axios.delete(`board/${props.comment.commentId}`, {
|
||||
// data: { LOCCMTSEQ: props.comment.commentId }
|
||||
// });
|
||||
|
||||
// console.log("📌 서버 응답:", response.data);
|
||||
|
||||
// if (response.data.code === 200) {
|
||||
// console.log("댓글 삭제 성공!");
|
||||
// // emit("commentDeleted", props.comment.commentId);
|
||||
// } else {
|
||||
// console.log("❌ 댓글 삭제 실패:", response.data.message);
|
||||
// // alert("댓글 삭제에 실패했습니다.");
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.log("🚨 댓글 삭제 중 오류 발생:", error);
|
||||
// alert("댓글 삭제 중 오류가 발생했습니다.");
|
||||
// }
|
||||
// };
|
||||
if (response.data.code === 200) {
|
||||
await fetchComments();
|
||||
} else {
|
||||
alert("댓글 삭제에 실패했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
alert("댓글 삭제 중 오류가 발생했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 댓글 수정 취소
|
||||
const handleCancelEdit = (comment) => {
|
||||
console.log("BoardView.vue - 댓글 수정 취소:", comment);
|
||||
comment.isEditTextarea = false;
|
||||
};
|
||||
|
||||
// 댓글 수정 확인
|
||||
const handleSubmitEdit = async (comment, editedContent) => {
|
||||
console.log("BoardView.vue - 댓글 수정:", comment, "수정된 내용:", editedContent);
|
||||
// editedContent = ref(props.comment.content)
|
||||
|
||||
try {
|
||||
await axios.put(`board/comment/${comment.commentId}/edit`, {
|
||||
const response = await axios.put(`board/comment/${comment.commentId}`, {
|
||||
LOCCMTSEQ: comment.commentId,
|
||||
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) => {
|
||||
if (page !== pagination.value.currentPage) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user