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 03:50:17 +09:00
parent 2da40134c3
commit 62361b7ae9
3 changed files with 210 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,15 +9,13 @@
:showDetail="false"
:author="true"
:isLike="!isLike"
:isPassword="isPassword"
@editClick="editClick"
@deleteClick="deleteClick"
@submitPassword="submitPassword"
:isCommentPassword="comment.isCommentPassword"
@editClick="$emit('editClick', comment)"
@deleteClick="$emit('deleteClick', comment)"
@updateReaction="handleUpdateReaction"
@toggleEdit="toggleEdit(true)"
/>
<!-- 댓글 비밀번호 입력창 (익명일 경우) -->
<div v-if="isPassword && unknown" class="mt-3 w-25 ms-auto">
<div v-if="isCommentPassword && unknown" class="mt-3 w-25 ms-auto">
<div class="input-group">
<input
type="password"
@ -25,18 +23,18 @@
v-model="password"
placeholder="비밀번호 입력"
/>
<button class="btn btn-primary" @click="submitPassword">확인</button>
<button class="btn btn-primary" @click="logPasswordAndEmit">확인</button>
</div>
<span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
</div>
<div class="mt-6">
<template v-if="isEditTextarea">
<template v-if="comment.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="cancelEdit">취소</button>
<button class="btn btn-primary" @click="submitEdit">수정</button>
<button class="btn btn-secondary me-2" @click="$emit('cancelEdit', comment)">취소</button>
<button class="btn btn-primary" @click="$emit('submitEdit', comment, editedContent)">수정</button>
</div>
</template>
<template v-else>
@ -68,8 +66,7 @@
</template>
<script setup>
import axios from '@api';
import { defineProps, defineEmits, ref } from 'vue';
import { defineProps, defineEmits, ref, computed, watch } from 'vue';
import BoardProfile from './BoardProfile.vue';
import BoardCommentArea from './BoardCommentArea.vue';
import PlusButton from '../button/PlusBtn.vue';
@ -91,18 +88,29 @@ const props = defineProps({
type: Boolean,
default: false,
},
editedContent: {
type: String,
default: ""
},
isEditTextarea: {
type: Boolean,
default: false
},
isPassword: {
isCommentPassword: {
type: Boolean,
default: false,
},
passwordAlert: {
type: String,
default: false
}
});
// emits 정의
const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit',]);
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit']);
const password = ref('');
// 댓글 입력 창 토글
const isComment = ref(false);
@ -110,22 +118,6 @@ 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 });
@ -143,103 +135,23 @@ const handleUpdateReaction = (reactionData) => {
};
// 댓글 수정 버튼 클릭
const editClick = () => {
if (props.unknown) {
console.log('수정')
togglePassword("edit");
}
// 비밀번호 확인
const logPasswordAndEmit = () => {
// console.log("BoardComment.vue - 비밀번호 입력값:", password.value);
emit('submitPassword', props.comment, password.value);
};
const deleteClick = () => {
if (props.unknown) {
console.log('삭제')
togglePassword("delete");
}
};
// 댓글 수정 취소
// const cancelEdit = () => {
// isEditTextarea.value = false;
// };
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 submitEdit = () => {
// emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
// isEditTextarea.value = false; // 수정 모드 종료
// };
// 비밀번호 제출
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: 288,
});
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>

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

@ -8,13 +8,16 @@
<BoardComment
:unknown="unknown"
:comment="comment"
:isPassword="isPassword"
:isEditTextarea="isEditTextarea"
@editClick="editClick"
@deleteClick="deleteClick"
:isCommentPassword="comment.isCommentPassword"
:isEditTextarea="comment.isEditTextarea"
:passwordAlert="passwordAlert"
@editClick="$emit('editClick', comment)"
@deleteClick="$emit('deleteClick', comment)"
@submitPassword="submitPassword"
@submitComment="submitComment"
@commentDeleted="handleCommentDeleted"
@submitEdit="$emit('submitEdit', comment, editedContent)"
@cancelEdit="$emit('cancelEdit', comment)"
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
/>
</li>
@ -35,17 +38,21 @@ const props = defineProps({
type: Boolean,
default: true,
},
isPassword: {
isCommentPassword: {
type: Boolean,
default: false,
},
isEditTextarea: {
type: Boolean,
default: false,
},
passwordAlert: {
type: String,
default: false
}
});
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick']);
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'submitPassword']);
const submitComment = (replyData) => {
emit('submitComment', replyData);
@ -65,4 +72,9 @@ const editClick = (data) => {
emit('editClick', data);
};
const submitPassword = (comment, password) => {
// console.log("BoardCommentList.vue - 전달된 비밀번호:", password, "댓글 정보:", comment);
emit('submitPassword', comment, password);
};
</script>

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

@ -98,9 +98,17 @@
<BoardCommentList
:unknown="unknown"
:comments="comments"
:isCommentPassword="isCommentPassword"
:isEditTextarea="isEditTextarea"
:passwordAlert="passwordAlert"
@editClick="editComment"
@deleteClick="deleteComment"
@updateReaction="handleCommentReaction"
@submitComment="handleCommentReply"
@submitPassword="submitCommentPassword"
@commentDeleted="handleCommentDeleted"
@cancelEdit="handleCancelEdit"
@submitEdit="handleSubmitEdit"
/>
<Pagination
v-if="pagination.pages"
@ -150,8 +158,12 @@ const isAuthor = computed(() => currentUserId.value === authorId.value);
const password = ref('');
const passwordAlert = ref("");
const passwordCommentAlert = ref("");
const isPassword = ref(false);
const isCommentPassword = ref(false);
const lastClickedButton = ref("");
const lastCommentClickedButton = ref("");
const isEditTextarea = ref(false);
const pagination = ref({
currentPage: 1,
@ -274,7 +286,9 @@ const fetchComments = async (page = 1) => {
dislikeClicked: comment.dislikeClicked || false,
createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
children: [] // 대댓글을 담을 배열
children: [], // 대댓글을 담을 배열
// isCommentPassword: false, // 개별 댓글 비밀번호 입력 상태
// isEditTextarea: false // 개별 댓글 수정 상태
}));
for (const comment of commentsList) {
@ -406,6 +420,7 @@ const handleCommentReply = async (reply) => {
}
}
// 게시글 수정 버튼 클릭
const editClick = (unknown) => {
if (unknown) {
togglePassword("edit");
@ -414,6 +429,7 @@ const editClick = (unknown) => {
}
};
// 게시글 삭제 버튼 클릭
const deleteClick = (unknown) => {
if (unknown) {
togglePassword("delete");
@ -422,6 +438,49 @@ const deleteClick = (unknown) => {
}
};
// 댓글 수정 버튼 클릭
const editComment = (comment) => {
if (unknown.value) {
toggleCommentPassword(comment, "edit");
} else {
comment.isEditTextarea = true;
}
// comments.value.forEach(c => {
// c.isEditTextarea = false;
// c.isCommentPassword = false;
// });
// if (comment.unknown) {
// comment.isCommentPassword = true;
// } else {
// comment.isEditTextarea = true;
// }
}
// 댓글 삭제 버튼 클릭
const deleteComment = (comment) => {
if (unknown.value) {
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;
} else {
// 모든 댓글의 비밀번호 입력창 닫기
comments.value.forEach(c => (c.isCommentPassword = false));
// 현재 선택된 댓글만 비밀번호 입력창 열기
comment.isCommentPassword = true;
}
lastCommentClickedButton.value = button;
};
const togglePassword = (button) => {
if (lastClickedButton.value === button) {
isPassword.value = !isPassword.value;
@ -431,7 +490,7 @@ const togglePassword = (button) => {
lastClickedButton.value = button;
};
// 게시글 비밀번호 제출
const submitPassword = async () => {
if (!password.value) {
passwordAlert.value = "비밀번호를 입력해주세요.";
@ -457,7 +516,7 @@ const submitPassword = async () => {
}
lastClickedButton.value = null;
} else {
passwordAlert.value = "비밀번호가 일치하지 않습니다.????";
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
}
} catch (error) {
// console.log("📌 전체 오류:", error);
@ -476,6 +535,42 @@ 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;
// // isEditTextarea.value = true;
} else {
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
}
} catch (error) {
passwordAlert.value = "비밀번호 검증 중 오류가 발생했습니다.";
}
};
// 게시글 삭제
const deletePost = async () => {
if (confirm("정말 삭제하시겠습니까?")) {
try {
@ -499,6 +594,65 @@ const deletePost = async () => {
}
};
// 댓글 삭제
// 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 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`, {
LOCCMTSEQ: comment.commentId,
LOCCMTRPY: editedContent
});
// 수정 성공 시 업데이트
comment.content = editedContent;
comment.isEditTextarea = false;
} catch (error) {
console.error("댓글 수정 중 오류 발생:", error);
}
};
// const submitEdit = () => {
// emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
// isEditTextarea.value = false; // 수정 모드 종료
// };
// 페이지 변경
const handlePageChange = (page) => {
if (page !== pagination.value.currentPage) {