보드 원복복
This commit is contained in:
parent
37c335fc12
commit
bd91e0a72d
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<BoardProfile
|
||||
:unknown="unknown"
|
||||
:unknown="comment.author === '익명'"
|
||||
:isCommentAuthor="isCommentAuthor"
|
||||
:boardId="comment.boardId"
|
||||
:profileName="comment.author"
|
||||
@ -11,7 +11,7 @@
|
||||
:isLike="!isLike"
|
||||
:isCommentPassword="comment.isCommentPassword"
|
||||
:isCommentProfile="true"
|
||||
@editClick="$emit('editClick', comment)"
|
||||
@editClick="aaaa"
|
||||
@deleteClick="$emit('deleteClick', comment)"
|
||||
@updateReaction="handleUpdateReaction"
|
||||
/>
|
||||
@ -29,8 +29,8 @@
|
||||
</div>
|
||||
<span v-if="passwordCommentAlert" class="invalid-feedback d-block text-start">{{ passwordCommentAlert }}</span>
|
||||
</div>
|
||||
<p>authorId:{{ comment.authorId }}</p>
|
||||
<p>코멘트 비교: {{comment.isCommentAuthor}}</p>
|
||||
<!-- <p>authorId:{{ comment.authorId }}</p>
|
||||
<p>코멘트 비교: {{comment.isCommentAuthor}}</p> -->
|
||||
|
||||
|
||||
<div class="mt-6">
|
||||
@ -47,20 +47,29 @@
|
||||
</div>
|
||||
|
||||
<PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
|
||||
<BoardCommentArea v-if="isComment" @submitComment="submitComment"/>
|
||||
<BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment"/>
|
||||
|
||||
<!-- 대댓글 -->
|
||||
<ul v-if="comment.children && comment.children.length" class="list-unstyled">
|
||||
<li
|
||||
v-for="child in comment.children"
|
||||
:key="child.commentId"
|
||||
v-for="child in comment.children"
|
||||
:key="child.commentId"
|
||||
class="mt-8 pt-6 ps-10 border-top"
|
||||
>
|
||||
<!-- <p>대댓글 데이터(JSON): {{ JSON.stringify(child, null, 2) }}</p> -->
|
||||
<!-- <p>comment child: {{ comment.children }}</p> -->
|
||||
<!-- :unknown="child.author === '익명'" -->
|
||||
<BoardComment
|
||||
:comment="child"
|
||||
:unknown="unknown"
|
||||
:unknown="child.author === '익명'"
|
||||
:isPlusButton="false"
|
||||
:isLike="true"
|
||||
:isCommentProfile="true"
|
||||
:isCommentAuthor="child.isCommentAuthor"
|
||||
@editClick="$emit('editClick', $event)"
|
||||
@deleteClick="$emit('deleteClick', child)"
|
||||
@submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
|
||||
@cancelEdit="$emit('cancelEdit', child)"
|
||||
@submitComment="submitComment"
|
||||
@updateReaction="handleUpdateReaction"
|
||||
/>
|
||||
@ -155,4 +164,8 @@ const submitEdit = () => {
|
||||
emit('submitEdit', props.comment, localEditedContent.value);
|
||||
};
|
||||
|
||||
const aaaa = () => {
|
||||
emit('editClick', props.comment);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
rows="3"
|
||||
v-model="comment"
|
||||
></textarea>
|
||||
<span v-if="commentAlert" class="invalid-feedback d-block text-start ms-2">{{ commentAlert }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -42,6 +43,7 @@
|
||||
id="basic-default-password"
|
||||
class="form-control flex-grow-1"
|
||||
v-model="password"
|
||||
placeholder="비밀번호 입력"
|
||||
/>
|
||||
<span v-if="passwordAlert" class="invalid-feedback d-block text-start ms-2">{{ passwordAlert }}</span>
|
||||
</div>
|
||||
@ -74,28 +76,35 @@ const props = defineProps({
|
||||
passwordAlert: {
|
||||
type: String,
|
||||
default: false
|
||||
},
|
||||
commentAlert: {
|
||||
type: String,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const comment = ref('');
|
||||
const password = ref('');
|
||||
const isCheck = ref(false);
|
||||
const emit = defineEmits(['submitComment']);
|
||||
const isCheck = ref(props.unknown);
|
||||
|
||||
const emit = defineEmits(['submitComment']);
|
||||
const LOCBRDTYP = isCheck.value ? '300102' : null;
|
||||
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,
|
||||
isCheck: isCheck.value,
|
||||
LOCBRDTYP, // 익명일 경우 '300102' 설정
|
||||
isCheck: isCheck.value
|
||||
});
|
||||
|
||||
comment.value = '';
|
||||
password.value = '';
|
||||
isCheck.value = false; // 초기화
|
||||
}
|
||||
|
||||
watch(() => props.passwordAlert, () => {
|
||||
if (!props.passwordAlert) {
|
||||
comment.value = '';
|
||||
password.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@ -140,7 +140,6 @@ import { ref, onMounted, computed } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useUserInfoStore } from '@/stores/useUserInfoStore';
|
||||
import axios from '@api';
|
||||
import { formattedDate } from '@/common/formattedDate.js';
|
||||
|
||||
// 게시물 데이터 상태
|
||||
const profileName = ref('');
|
||||
@ -376,63 +375,77 @@ const fetchComments = async (page = 1) => {
|
||||
};
|
||||
|
||||
// 댓글 작성
|
||||
const handleCommentSubmit = async (data) => {
|
||||
const handleCommentSubmit = async (data, isCheck) => {
|
||||
if (!data) {
|
||||
console.error("handleCommentSubmit: data가 undefined입니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
const { comment, password } = data;
|
||||
const LOCBRDTYP = data.LOCBRDTYP || null; // undefined 방지
|
||||
const LOCBRDTYP = data.LOCBRDTYP || null;
|
||||
|
||||
if (!comment || comment.trim() === "") {
|
||||
commentAlert.value = '댓글을 입력해주세요.';
|
||||
return;
|
||||
} else {
|
||||
commentAlert.value = '';
|
||||
}
|
||||
|
||||
if (unknown.value && isCheck && (!password || password.trim() === "")) {
|
||||
passwordAlert.value = "비밀번호를 입력해야 합니다.";
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
LOCCMTRPY: comment,
|
||||
LOCCMTPWD: password,
|
||||
LOCCMTPWD: isCheck ? password : '',
|
||||
LOCCMTPNT: 1,
|
||||
LOCBRDTYP // 익명 여부 전달
|
||||
LOCBRDTYP
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
console.log('댓글 작성 성공:', response.data.message);
|
||||
passwordAlert.value = '';
|
||||
commentAlert.value = '';
|
||||
await fetchComments();
|
||||
} else {
|
||||
console.log('댓글 작성 실패:', response.data.message);
|
||||
console.error('댓글 작성 실패:', response.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('댓글 작성 중 오류 발생:', error);
|
||||
console.error('댓글 작성 중 오류 발생:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 대댓글 추가 (부모 `BoardCommentList`로부터 이벤트 받아서 처리)
|
||||
const handleCommentReply = async (reply) => {
|
||||
try {
|
||||
// 익명 여부 체크 (체크박스가 체크되었을 경우 LOCBRDTYP을 300102로 설정)
|
||||
|
||||
const requestBody = {
|
||||
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
LOCCMTRPY: reply.comment,
|
||||
LOCCMTPWD: reply.password || null,
|
||||
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 editClick = (unknown) => {
|
||||
@ -484,6 +497,7 @@ const editComment = (comment) => {
|
||||
|
||||
// 익명일 경우 비밀번호 입력창 활성화
|
||||
if (unknown.value) {
|
||||
console.log('익명 코멘트인가?')
|
||||
toggleCommentPassword(comment, "edit");
|
||||
}
|
||||
}
|
||||
@ -736,6 +750,14 @@ const handleCommentDeleted = (deletedCommentId) => {
|
||||
console.error("❌ 삭제할 댓글을 찾을 수 없음:", deletedCommentId);
|
||||
};
|
||||
|
||||
|
||||
// 날짜
|
||||
const formattedDate = (dateString) => {
|
||||
if (!dateString) return "날짜 없음";
|
||||
const dateObj = new Date(dateString);
|
||||
return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const formattedBoardDate = computed(() => formattedDate(date.value));
|
||||
|
||||
// 컴포넌트 마운트 시 데이터 로드
|
||||
|
||||
Loading…
Reference in New Issue
Block a user