댓글 좋아요 완료
This commit is contained in:
parent
499162639a
commit
5fe85dcd3b
@ -4,6 +4,7 @@
|
||||
:boardId="comment.boardId"
|
||||
:profileName="comment.author"
|
||||
:date="comment.createdAt"
|
||||
:comment="comment"
|
||||
:showDetail="false"
|
||||
:author="true"
|
||||
:isLike="!isLike"
|
||||
@ -85,8 +86,14 @@ const submitComment = (newComment) => {
|
||||
|
||||
// 좋아요, 싫어요
|
||||
const handleUpdateReaction = (reactionData) => {
|
||||
console.log(`🛠 좋아요/싫어요 클릭됨:`, reactionData);
|
||||
// emit('updateReaction', { boardId: props.comment.boardId, commentId: props.comment.id, ...reactionData });
|
||||
// console.log('📌 댓글 comment:', props.comment.commentId);
|
||||
|
||||
emit('updateReaction', {
|
||||
boardId: props.comment.boardId,
|
||||
commentId: props.comment.commentId,
|
||||
...reactionData
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -8,8 +8,9 @@
|
||||
<BoardComment
|
||||
:comment="comment"
|
||||
@submitComment="submitComment"
|
||||
@updateReaction="handleUpdateReaction"
|
||||
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId)"
|
||||
/>
|
||||
<!-- @updateReaction="handleUpdateReaction" -->
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
@ -23,7 +24,7 @@ const props = defineProps({
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['submitComment', 'updateReaction']);
|
||||
@ -32,9 +33,22 @@ const submitComment = (replyData) => {
|
||||
emit('submitComment', replyData);
|
||||
};
|
||||
|
||||
const handleUpdateReaction = (reactionData) => {
|
||||
console.log(`📢 부모 컴포넌트에서 이벤트 수신:`, reactionData);
|
||||
// emit('updateReaction', { boardId: props.comment.boardId, commentId: props.comment.id, ...reactionData });
|
||||
};
|
||||
const handleUpdateReaction = (reactionData, commentId) => {
|
||||
// console.log('📢 BoardCommentList에서 이벤트 수신:', reactionData);
|
||||
// console.log('📌 전달할 댓글 ID>>>>:', commentId);
|
||||
|
||||
// if (commentId) {
|
||||
// console.error("❌");
|
||||
// }
|
||||
|
||||
const updatedReactionData = {
|
||||
...reactionData,
|
||||
commentId: commentId
|
||||
};
|
||||
|
||||
// console.log('🚀 최종 전달할 데이터:', updatedReactionData);
|
||||
|
||||
emit('updateReaction', updatedReactionData);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -42,7 +42,12 @@
|
||||
</div>
|
||||
|
||||
<!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
|
||||
<BoardRecommendBtn v-if="isLike" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
|
||||
<BoardRecommendBtn
|
||||
v-if="isLike"
|
||||
:boardId="boardId"
|
||||
:comment="props.comment"
|
||||
@updateReaction="handleUpdateReaction"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -64,6 +69,10 @@ const lastClickedButton = ref('');
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
comment: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
boardId: {
|
||||
type: Number,
|
||||
required: false
|
||||
@ -201,12 +210,16 @@ const deletePost = async () => {
|
||||
|
||||
|
||||
const handleUpdateReaction = (reactionData) => {
|
||||
// console.log(`🔥 BoardProfile에서 좋아요/싫어요 이벤트 발생`, reactionData);
|
||||
console.log("🔥 좋아요/싫어요 이벤트 발생");
|
||||
console.log("📌 게시글 ID (props.boardId):", props.boardId);
|
||||
console.log("📌 댓글 ID (props.comment?.id):", props.comment?.commentId);
|
||||
console.log("📌 댓글의 게시글 ID (props.comment?.boardId):", props.comment?.boardId);
|
||||
// emit('updateReaction', { boardId: props.comment.boardId, commentId: props.comment.commentId, ...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,
|
||||
...reactionData,
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
@ -11,6 +11,10 @@
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
comment: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
likeClicked : {
|
||||
type : Boolean,
|
||||
default : false,
|
||||
@ -64,7 +68,7 @@ watch(() => props.dislikeCount, (newVal) => {
|
||||
const handleLike = () => {
|
||||
const isLike = !likeClicked.value;
|
||||
const isDislike = false;
|
||||
// console.log("BoardRecommendBtn.vue - commentId:", props.commentId);
|
||||
// console.log('좋아용')
|
||||
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
|
||||
likeClicked.value = isLike;
|
||||
dislikeClicked.value = false;
|
||||
|
||||
@ -74,8 +74,7 @@
|
||||
|
||||
<!-- 댓글 목록 -->
|
||||
<div class="card-footer">
|
||||
<BoardCommentList :comments="comments" @submitComment="handleCommentReply"/>
|
||||
|
||||
<BoardCommentList :comments="comments" @updateReaction="handleUpdateReaction" @submitComment="handleCommentReply" />
|
||||
<Pagination/>
|
||||
</div>
|
||||
</div>
|
||||
@ -149,45 +148,35 @@ const fetchBoardDetails = async () => {
|
||||
|
||||
// 좋아요, 싫어요
|
||||
const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
|
||||
console.log("🔥 좋아요/싫어요 이벤트 발생");
|
||||
console.log("📌 게시글 ID:", boardId);
|
||||
console.log("📌 댓글 ID:", commentId);
|
||||
console.log("📌 댓글 ID (최종):", commentId);
|
||||
|
||||
try {
|
||||
await axios.post(`/board/${boardId}/${commentId}/reaction`, {
|
||||
LOCBRDSEQ: boardId,
|
||||
LOCCMTSEQ: commentId,
|
||||
MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함
|
||||
const aa = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
|
||||
LOCBRDSEQ: boardId, // 게시글 id
|
||||
LOCCMTSEQ: commentId, //댓글 id
|
||||
// MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함
|
||||
LOCGOBGOD: isLike ? 'T' : 'F',
|
||||
LOCGOBBAD: isDislike ? 'T' : 'F'
|
||||
});
|
||||
console.log("📥 API 응답 데이터:", aa.data);
|
||||
|
||||
console.log(commentId)
|
||||
|
||||
if (commentId) {
|
||||
console.log('댓글 좋아요/싫어요 누름 -> commentId:', commentId);
|
||||
await fetchComments();
|
||||
} else {
|
||||
console.log('게시글 좋아요/싫어요 누름 -> boardId:', boardId);
|
||||
const response = await axios.get(`board/${boardId}`);
|
||||
const updatedData = response.data.data;
|
||||
|
||||
const response = await axios.get(`board/${boardId}`);
|
||||
const updatedData = response.data.data;
|
||||
const response2 = await axios.get(`board/${boardId}/comments`);
|
||||
|
||||
likes.value = updatedData.likeCount;
|
||||
dislikes.value = updatedData.dislikeCount;
|
||||
|
||||
likeClicked.value = isLike;
|
||||
dislikeClicked.value = isDislike;
|
||||
console.log('게시글 업데이트된 데이터:', updatedData);
|
||||
}
|
||||
|
||||
// const response = await axios.get(`board/${boardId}`);
|
||||
// const updatedData = response.data.data;
|
||||
// console.log("📥 API 응답 데이터:", response2);
|
||||
|
||||
// likes.value = updatedData.likeCount;
|
||||
// dislikes.value = updatedData.dislikeCount;
|
||||
|
||||
// likeClicked.value = isLike;
|
||||
// dislikeClicked.value = isDislike;
|
||||
likes.value = updatedData.likeCount;
|
||||
dislikes.value = updatedData.dislikeCount;
|
||||
|
||||
likeClicked.value = isLike;
|
||||
dislikeClicked.value = isDislike;
|
||||
// console.log(updatedData)
|
||||
|
||||
} catch (error) {
|
||||
alert('반응을 업데이트하는 중 오류 발생');
|
||||
@ -200,7 +189,7 @@ const fetchComments = async () => {
|
||||
const response = await axios.get(`board/${currentBoardId.value}/comments`, {
|
||||
params: { LOCBRDSEQ: currentBoardId.value }
|
||||
});
|
||||
// console.log("📥 API 응답 데이터:", response.data);
|
||||
console.log("📥 API 응답 데이터:", response.data);
|
||||
|
||||
let allComments = response.data.data.list.map(comment => ({
|
||||
commentId: comment.LOCCMTSEQ, // 댓글 id
|
||||
@ -231,7 +220,7 @@ const fetchComments = async () => {
|
||||
|
||||
comments.value = rootComments;
|
||||
|
||||
console.log("변환된 comments 데이터:", comments.value);
|
||||
// console.log("변환된 comments 데이터:", comments.value);
|
||||
|
||||
} catch (error) {
|
||||
console.error('댓글 목록 불러오기 오류:', error);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user