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:
dyhj625 2025-02-25 10:04:41 +09:00
parent 84c43d5baf
commit 99d89008ed
3 changed files with 138 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,7 +48,7 @@
<PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
<BoardCommentArea v-if="isComment" @submitComment="submitComment"/>
<!-- 대댓글 -->
<ul v-if="comment.children && comment.children.length" class="list-unstyled">
<li
@ -56,12 +56,12 @@
:key="child.commentId"
class="mt-8 pt-6 ps-10 border-top"
>
<BoardComment
<BoardComment
:comment="child"
:unknown="unknown"
:isPlusButton="false"
:isPlusButton="false"
:isLike="true"
@submitComment="submitComment"
@submitComment="submitComment"
@updateReaction="handleUpdateReaction"
/>
</li>
@ -124,7 +124,8 @@ const toggleComment = () => {
// 부모 컴포넌트에 대댓글 추가 요청
const submitComment = (newComment) => {
emit('submitComment', { parentId: props.comment.commentId, ...newComment });
console.log(newComment)
emit('submitComment', { parentId: props.comment.commentId, ...newComment, LOCBRDTYP: newComment.LOCBRDTYP });
isComment.value = false;
};
@ -141,7 +142,7 @@ const handleUpdateReaction = (reactionData) => {
// 비밀번호 확인
const logPasswordAndEmit = () => {
emit('submitPassword', props.comment, password.value);
password.value = "";
password.value = "";
};
watch(() => props.comment.isEditTextarea, (newVal) => {

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

@ -23,7 +23,7 @@
<!-- 옵션 및 버튼 섹션 -->
<div class="d-flex justify-content-between flex-wrap mt-4">
<div class="d-flex flex-wrap align-items-center">
<!-- 익명 체크박스 (익명게시판일 경우에만)-->
<!-- 익명 체크박스 (익명게시판일 경우에만) -->
<div v-if="unknown" class="form-check form-check-inline mb-0 me-4">
<input
class="form-check-input"
@ -35,7 +35,7 @@
</div>
<!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
<div v-if="isCheck" class="d-flex align-items-center flex-grow-1">
<div v-if="unknown && isCheck" class="d-flex align-items-center flex-grow-1">
<label class="form-label mb-0 me-3" for="basic-default-password">비밀번호</label>
<input
type="password"
@ -50,7 +50,6 @@
<!-- 답변 쓰기 버튼 -->
<div class="ms-auto mt-3 mt-md-0">
<button class="btn btn-primary" @click="handleCommentSubmit">
<!-- <i class="icon-base bx bx-check"></i> -->
확인
</button>
</div>
@ -60,7 +59,7 @@
</template>
<script setup>
import { ref, defineEmits, defineProps, computed, watch } from 'vue';
import { ref, defineEmits, defineProps } from 'vue';
const props = defineProps({
unknown: {
@ -79,23 +78,24 @@ const props = defineProps({
const comment = ref('');
const password = ref('');
const isCheck = ref(props.unknown);
const isCheck = ref(false);
const emit = defineEmits(['submitComment']);
watch(() => props.unknown, (newVal) => {
isCheck.value = newVal;
});
function handleCommentSubmit() {
if (props.unknown && isCheck.value && !password.value) {
alert('익명 댓글을 작성하려면 비밀번호를 입력해야 합니다.');
return;
}
const LOCBRDTYP = isCheck.value ? '300102' : null;
emit('submitComment', {
comment: comment.value,
password: isCheck.value ? password.value : '',
LOCBRDTYP, // 익명일 경우 '300102' 설정
isCheck: isCheck.value
});
comment.value = '';
password.value = '';
isCheck.value = false; // 초기화
}
</script>

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

@ -59,10 +59,10 @@
</ul> -->
</div>
</div>
<!-- HTML 콘텐츠 렌더링 -->
<div class="board-content text-body" style="line-height: 1.6;" v-html="$common.contentToHtml(boardContent)"></div>
<!-- 좋아요 버튼 -->
<div class="row justify-content-center my-10">
<BoardRecommendBtn
@ -78,11 +78,11 @@
</div>
<p>현재 로그인한 사용자 ID: {{ currentUserId }}</p>
<p>게시글 작성자: {{ authorId }}</p>
<p>isAuthor 값: {{ isAuthor }}</p>
<p>isAuthor 값: {{ isAuthor }}</p>
<!-- <p>use이미지:{{userStore.user.img}}</p> -->
<!-- <img :src="`http://localhost:10325/upload/img/profile/${userStore.user.profile}`" alt="Profile Image" class="w-px-40 h-auto rounded-circle"/> -->
<!-- 첨부파일 목록 -->
<!-- <ul v-if="attachments.length" class="attachments mt-4 list-unstyled">
<li v-for="(attachment, index) in attachments" :key="index" class="mb-2">
@ -209,13 +209,13 @@ const fetchBoardDetails = async () => {
// API 응답 데이터 반영
// const boardDetail = data.boardDetail || {};
profileName.value = data.author;
// 익명확인하고 싶을때
// profileName.value = '익명';
authorId.value = data.authorId; //게시글 작성자 id
boardTitle.value = data.title || '제목 없음';
boardContent.value = data.content || '';
@ -225,7 +225,7 @@ const fetchBoardDetails = async () => {
dislikes.value = data.dislikeCount || 0;
attachment.value = data.hasAttachment || null;
commentNum.value = data.commentCount || 0;
} catch (error) {
alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
}
@ -293,7 +293,7 @@ const fetchComments = async (page = 1) => {
});
console.log(response.data.data)
const commentsList = response.data.data.list.map(comment => ({
commentId: comment.LOCCMTSEQ, // 댓글 ID
boardId: comment.LOCBRDSEQ,
@ -366,26 +366,17 @@ const fetchComments = async (page = 1) => {
// const isSubmitting = ref(false);
// 댓글 작성
const handleCommentSubmit = async ({ comment, password }) => {
console.log('댓글')
//비밀번호 입력 안했을시
// if (!password) {
// passwordAlert.value = "비밀번호를 입력해야 합니다.";
// return;
// }
// console.log('비밀번호 눌렀음')
// 중복 실행 방지
// if (isSubmitting.value) return;
// isSubmitting.value = true;
const handleCommentSubmit = async (data) => {
const { comment, password } = data;
const LOCBRDTYP = data.LOCBRDTYP || null; // undefined 방지
try {
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
LOCBRDSEQ: currentBoardId.value,
LOCCMTRPY: comment,
LOCCMTPWD: password,
LOCCMTPNT: 1
LOCCMTPNT: 1,
LOCBRDTYP // 익명 여부 전달
});
if (response.status === 200) {
@ -399,48 +390,121 @@ const handleCommentSubmit = async ({ comment, password }) => {
}
};
// const handleCommentSubmit = async ({ comment, password, LOCBRDTYP }) => {
// console.log('댓글')
// //비밀번호 입력 안했을시
// // if (!password) {
// // passwordAlert.value = "비밀번호를 입력해야 합니다.";
// // return;
// // }
// // console.log('비밀번호 눌렀음')
// // 중복 실행 방지
// // if (isSubmitting.value) return;
// // isSubmitting.value = true;
// try {
// // 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);
// }
// } catch (error) {
// console.log('댓글 작성 중 오류 발생:', error);
// }
// };
// 대댓글 추가 (부모 `BoardCommentList`로부터 이벤트 받아서 처리)
const handleCommentReply = async (reply) => {
try {
// console.log('대댓글 작성 요청 데이터:', {
// LOCBRDSEQ: currentBoardId.value,
// LOCCMTRPY: reply.comment,
// LOCCMTPWD: reply.password || null,
// LOCCMTPNT: reply.parentId
// });
// 익명 여부 체크 (체크박스가 체크되었을 경우 LOCBRDTYP을 300102로 설정)
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
const requestBody = {
LOCBRDSEQ: currentBoardId.value,
LOCCMTRPY: reply.comment,
LOCCMTPWD: reply.password || null,
LOCCMTPNT: reply.parentId
});
// 응답 데이터를 자세히 로그로 확인
// console.log('대댓글 작성 응답:', {
// status: response.status,
// data: response.data,
// headers: response.headers
// });
LOCCMTPNT: reply.parentId,
LOCBRDTYP: reply.isCheck ? "300102" : null
};
console.log(requestBody)
const response = await axios.post(`board/${currentBoardId.value}/comment`, requestBody);
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('대댓글 작성에 실패했습니다.');
}
}
} catch (error) {
console.error('대댓글 작성 중 오류 발생:', error);
console.error('🚨 대댓글 작성 중 오류 발생:', error);
if (error.response) {
console.error('서버 응답 에러:', error.response.data);
console.error('📌 서버 응답 에러:', error.response.data);
}
alert('대댓글 작성 중 오류가 발생했습니다.');
alert('❌ 대댓글 작성 중 오류가 발생했습니다.');
}
}
};
// 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,
// // LOCCMTPWD: reply.password || null,
// // LOCCMTPNT: reply.parentId
// // });
// const requestBody = {
// LOCBRDSEQ: currentBoardId.value,
// LOCCMTRPY: reply.comment,
// LOCCMTPWD: reply.password || null,
// LOCCMTPNT: reply.parentId,
// LOCBRDTYP
// };
// // 응답 데이터를 자세히 로그로 확인
// // console.log('대댓글 작성 응답:', {
// // status: response.status,
// // data: response.data,
// // headers: response.headers
// // });
// const response = await axios.post(`board/${currentBoardId.value}/comment`, requestBody);
// 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) => {
@ -463,7 +527,7 @@ const deleteClick = (unknown) => {
// 댓글 수정 버튼 클릭
const editComment = (comment) => {
const targetComment = comments.value.find(c => c.commentId === comment.commentId);
if (!targetComment) {
return;
}
@ -571,7 +635,7 @@ const submitPassword = async () => {
// 댓글 삭제 (비밀번호 확인 후)
const submitCommentPassword = async (comment, password) => {
if (!password) {
passwordCommentAlert.value = "비밀번호를 입력해주세요.";
return;
@ -586,12 +650,12 @@ const submitCommentPassword = async (comment, password) => {
if (response.data.code === 200 && response.data.data === true) {
passwordCommentAlert.value = "";
comment.isCommentPassword = false;
if (lastCommentClickedButton.value === "edit") {
comment.isEditTextarea = true;
passwordCommentAlert.value = "";
// handleSubmitEdit(comment, comment.content);
// handleSubmitEdit(comment, comment.content);
} else if (lastCommentClickedButton.value === "delete") {
passwordCommentAlert.value = "";
@ -644,7 +708,7 @@ const deleteReplyComment = async (comment) => {
if (response.data.code === 200) {
// console.log("댓글 삭제 성공!");
await fetchComments();
await fetchComments();
} else {
// console.log("댓글 삭제 실패:", response.data.message);
alert("댓글 삭제에 실패했습니다.");
@ -665,7 +729,7 @@ const handleSubmitEdit = async (comment, editedContent) => {
// 수정 성공 시 업데이트
// comment.content = editedContent;
// comment.isEditTextarea = false;
// comment.isEditTextarea = false;
if (response.status === 200) {
// 댓글 목록 새로고침
await fetchComments();