댓글 삭제 진행중
This commit is contained in:
parent
917b701663
commit
87acf373d9
@ -14,21 +14,33 @@
|
||||
@deleteClick="deleteClick"
|
||||
@submitPassword="submitPassword"
|
||||
@updateReaction="handleUpdateReaction"
|
||||
@toggleEdit="emit('toggleEdit', comment.commentId, true)"
|
||||
@toggleEdit="toggleEdit(true)"
|
||||
/>
|
||||
<!-- 댓글 비밀번호 입력창 (익명일 경우) -->
|
||||
<div v-if="isPassword && unknown" class="mt-3 w-25 ms-auto">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
v-model="password"
|
||||
placeholder="비밀번호 입력"
|
||||
/>
|
||||
<button class="btn btn-primary" @click="submitPassword">확인</button>
|
||||
</div>
|
||||
<span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-6">
|
||||
<template v-if="isEditTextarea">
|
||||
<textarea v-model="editedContent" class="form-control"></textarea>
|
||||
<div class="mt-2 d-flex justify-content-end">
|
||||
<button class="btn btn-secondary me-2" @click="emit('toggleEdit', comment.commentId, false)">취소</button>
|
||||
<button class="btn btn-secondary me-2" @click="cancelEdit">취소</button>
|
||||
<button class="btn btn-primary" @click="submitEdit">수정</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p class="m-0">{{ comment.content }}</p>
|
||||
<span>{{ comment.commentId }}</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@ -89,7 +101,7 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
// emits 정의
|
||||
const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit', 'editClick']);
|
||||
const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit',]);
|
||||
|
||||
// 댓글 입력 창 토글
|
||||
const isComment = ref(false);
|
||||
@ -97,6 +109,22 @@ 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 });
|
||||
@ -114,16 +142,103 @@ const handleUpdateReaction = (reactionData) => {
|
||||
|
||||
};
|
||||
|
||||
// 수정
|
||||
const editClick = (data) => {
|
||||
emit('editClick', data);
|
||||
// 댓글 수정 버튼 클릭
|
||||
const editClick = () => {
|
||||
if (props.unknown) {
|
||||
console.log('수정')
|
||||
togglePassword("edit");
|
||||
}
|
||||
};
|
||||
|
||||
// 수정
|
||||
const editedContent = ref(props.comment.content);
|
||||
const submitEdit = () => {
|
||||
emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
|
||||
emit('toggleEdit', props.comment.commentId, false); // 수정 모드 종료
|
||||
const deleteClick = () => {
|
||||
if (props.unknown) {
|
||||
console.log('삭제')
|
||||
togglePassword("delete");
|
||||
}
|
||||
};
|
||||
|
||||
const togglePassword = (button) => {
|
||||
if (lastClickedButton.value === button) {
|
||||
isPassword.value = !isPassword.value;
|
||||
} else {
|
||||
isPassword.value = true;
|
||||
}
|
||||
lastClickedButton.value = button;
|
||||
};
|
||||
|
||||
// const deleteComment = async () => {
|
||||
// if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
|
||||
|
||||
// try {
|
||||
// console.log("댓글 삭제 요청 시작:");
|
||||
// console.log("댓글 ID:", props.comment.commentId);
|
||||
// console.log("게시글 ID:", props.comment.boardId);
|
||||
// console.log("비밀번호 포함 여부:", props.unknown ? "예 (익명 사용자)" : "아니오 (로그인 사용자)");
|
||||
|
||||
// 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("댓글 삭제 중 오류가 발생했습니다.");
|
||||
// }
|
||||
// };
|
||||
|
||||
|
||||
// 비밀번호 제출
|
||||
const submitPassword = async () => {
|
||||
if (!password.value) {
|
||||
passwordAlert.value = "비밀번호를 입력해주세요.";
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(props.comment.commentId)
|
||||
|
||||
try {
|
||||
const response = await axios.post(`board/${props.comment.commentId}/password`, {
|
||||
LOCCMTPWD: password.value,
|
||||
LOCCMTSEQ: props.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;
|
||||
// // isEditTextarea.value = true;
|
||||
// } else {
|
||||
// passwordAlert.value = "비밀번호가 일치하지 않습니다.";
|
||||
// }
|
||||
} catch (error) {
|
||||
passwordAlert.value = "비밀번호 검증 중 오류가 발생했습니다.";
|
||||
}
|
||||
};
|
||||
|
||||
const editedContent = ref(props.comment.content);
|
||||
|
||||
// 댓글 수정 취소
|
||||
const cancelEdit = () => {
|
||||
isEditTextarea.value = false;
|
||||
};
|
||||
|
||||
// 댓글 수정 내용 저장
|
||||
const submitEdit = () => {
|
||||
emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
|
||||
isEditTextarea.value = false; // 수정 모드 종료
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@ -43,6 +43,7 @@
|
||||
class="form-control flex-grow-1"
|
||||
v-model="password"
|
||||
/>
|
||||
<!-- <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -85,7 +86,7 @@ watch(() => props.unknown, (newVal) => {
|
||||
function handleCommentSubmit() {
|
||||
emit('submitComment', {
|
||||
comment: comment.value,
|
||||
password: password.value,
|
||||
password: isCheck.value ? password.value : '',
|
||||
});
|
||||
|
||||
comment.value = '';
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
@deleteClick="deleteClick"
|
||||
@submitPassword="submitPassword"
|
||||
@submitComment="submitComment"
|
||||
@commentDeleted="handleCommentDeleted"
|
||||
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
|
||||
/>
|
||||
</li>
|
||||
|
||||
@ -98,11 +98,9 @@
|
||||
<BoardCommentList
|
||||
:unknown="unknown"
|
||||
:comments="comments"
|
||||
:isEditTextarea="isEditTextarea"
|
||||
@editClick="editClick"
|
||||
@deleteClick="deleteClick"
|
||||
@updateReaction="handleCommentReaction"
|
||||
@submitComment="handleCommentReply"
|
||||
@commentDeleted="handleCommentDeleted"
|
||||
/>
|
||||
<Pagination
|
||||
v-if="pagination.pages"
|
||||
@ -149,7 +147,6 @@ const authorId = ref(null); // 작성자 id
|
||||
|
||||
const isAuthor = computed(() => currentUserId.value === authorId.value);
|
||||
|
||||
const isEditTextarea = ref(false);
|
||||
|
||||
const password = ref('');
|
||||
const passwordAlert = ref("");
|
||||
@ -265,15 +262,6 @@ const fetchComments = async (page = 1) => {
|
||||
}
|
||||
});
|
||||
|
||||
// 대댓글
|
||||
// const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
|
||||
// params: {
|
||||
// LOCCMTPNT: 120
|
||||
// }
|
||||
// });
|
||||
|
||||
// console.log(replyResponse.data)
|
||||
|
||||
const commentsList = response.data.data.list.map(comment => ({
|
||||
commentId: comment.LOCCMTSEQ, // 댓글 ID
|
||||
boardId: comment.LOCBRDSEQ,
|
||||
@ -290,18 +278,29 @@ const fetchComments = async (page = 1) => {
|
||||
}));
|
||||
|
||||
for (const comment of commentsList) {
|
||||
// 대댓글 조회
|
||||
if (!comment.commentId) continue;
|
||||
|
||||
const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
|
||||
params: {
|
||||
LOCCMTPNT: comment.parentId // 부모 댓글의 ID를 사용
|
||||
}
|
||||
params: { LOCCMTPNT: comment.commentId }
|
||||
});
|
||||
|
||||
console.log(`대댓글:`, replyResponse.data);
|
||||
|
||||
// 대댓글이 있다면 children 배열에 추가할 수 있습니다
|
||||
|
||||
// console.log(`📌 대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data);
|
||||
|
||||
if (replyResponse.data.data) {
|
||||
comment.children = replyResponse.data.data;
|
||||
comment.children = replyResponse.data.data.map(reply => ({
|
||||
commentId: reply.LOCCMTSEQ,
|
||||
boardId: reply.LOCBRDSEQ,
|
||||
parentId: reply.LOCCMTPNT, // 부모 댓글 ID
|
||||
content: reply.LOCCMTRPY || "내용 없음",
|
||||
createdAtRaw: new Date(reply.LOCCMTRDT),
|
||||
createdAt: formattedDate(reply.LOCCMTRDT),
|
||||
likeCount: reply.likeCount || 0,
|
||||
dislikeCount: reply.dislikeCount || 0,
|
||||
likeClicked: false,
|
||||
dislikeClicked: false
|
||||
}));
|
||||
} else {
|
||||
comment.children = []; // 대댓글이 없으면 빈 배열로 초기화
|
||||
}
|
||||
}
|
||||
|
||||
@ -324,47 +323,34 @@ const fetchComments = async (page = 1) => {
|
||||
navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
|
||||
};
|
||||
|
||||
console.log("📌 댓글 목록:", comments.value);
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.log('댓글 목록 불러오기 오류:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 대댓글 목록 조회
|
||||
// const fetchReplies = async () => {
|
||||
// try {
|
||||
// const response = await axios.get(`board/${currentBoardId.value}/reply`);
|
||||
|
||||
// const replyData = response.data.data || [];
|
||||
|
||||
// return replyData.map(reply => ({
|
||||
// commentId: reply.LOCCMTSEQ, // 대댓글 ID
|
||||
// boardId: reply.LOCBRDSEQ,
|
||||
// parentId: reply.LOCCMTPNT, // 부모 댓글 ID
|
||||
// content: reply.LOCCMTRPY,
|
||||
// createdAtRaw: new Date(reply.LOCCMTRDT), // 정렬용
|
||||
// createdAt: formattedDate(reply.LOCCMTRDT), // 표시용
|
||||
// likeCount: reply.likeCount || 0,
|
||||
// dislikeCount: reply.dislikeCount || 0,
|
||||
// likeClicked: false,
|
||||
// dislikeClicked: false
|
||||
// }));
|
||||
// } catch (error) {
|
||||
// console.error("대댓글 불러오기 오류:", error);
|
||||
// return [];
|
||||
// }
|
||||
// };
|
||||
|
||||
// 댓글 작성
|
||||
const handleCommentSubmit = async ({ comment, password }) => {
|
||||
// if (unknown.value && !password) {
|
||||
// passwordAlert.value = "익명 사용자는 비밀번호를 입력해야 합니다."; // UI에 메시지 표시
|
||||
// return;
|
||||
// }
|
||||
// if (!password) {
|
||||
// passwordAlert.value = "비밀번호를 입력해야 합니다."; // UI에서 경고 표시
|
||||
// return;
|
||||
// }
|
||||
|
||||
|
||||
try {
|
||||
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
LOCCMTRPY: comment,
|
||||
LOCCMTPWD: password || null,
|
||||
LOCCMTPWD: password,
|
||||
LOCCMTPNT: 1
|
||||
});
|
||||
// console.log('서버 응답 전체:', response.data);
|
||||
// console.log('서버 응답 전체1212121212:', response.data);
|
||||
|
||||
if (response.status === 200) {
|
||||
console.log('댓글 작성 성공:', response.data.message);
|
||||
@ -380,23 +366,47 @@ const handleCommentSubmit = async ({ comment, password }) => {
|
||||
|
||||
// 대댓글 작성
|
||||
const handleCommentReply = async (reply) => {
|
||||
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
LOCCMTRPY: reply.comment,
|
||||
LOCCMTPWD: reply.password || null,
|
||||
LOCCMTPNT: reply.parentId
|
||||
});
|
||||
try {
|
||||
console.log('대댓글 작성 요청 데이터:', {
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
LOCCMTRPY: reply.comment,
|
||||
LOCCMTPWD: reply.password || null,
|
||||
LOCCMTPNT: reply.parentId
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
console.log('대댓글 작성 성공:', response.data.message);
|
||||
await fetchComments();
|
||||
} else {
|
||||
console.log('대댓글 작성 실패:', response.data.message);
|
||||
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
LOCCMTRPY: reply.comment,
|
||||
LOCCMTPWD: reply.password || null,
|
||||
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(); // 댓글 목록 새로고침
|
||||
} else {
|
||||
console.log('대댓글 작성 실패 - 서버 응답:', response.data);
|
||||
alert('대댓글 작성에 실패했습니다.');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('대댓글 작성 중 오류 발생:', error);
|
||||
if (error.response) {
|
||||
console.error('서버 응답 에러:', error.response.data);
|
||||
}
|
||||
alert('대댓글 작성 중 오류가 발생했습니다.');
|
||||
}
|
||||
}
|
||||
|
||||
const editClick = (unknown) => {
|
||||
|
||||
if (unknown) {
|
||||
togglePassword("edit");
|
||||
} else {
|
||||
@ -497,6 +507,10 @@ const handlePageChange = (page) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCommentDeleted = (deletedCommentId) => {
|
||||
comments.value = comments.value.filter(comment => comment.commentId !== deletedCommentId);
|
||||
};
|
||||
|
||||
// 날짜
|
||||
const formattedDate = (dateString) => {
|
||||
if (!dateString) return "날짜 없음";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user