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-20 15:12:12 +09:00
parent 2226782662
commit f7617e11a6
5 changed files with 96 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,17 +52,6 @@
/>
</li>
</ul>
<!-- <ul class="list-unstyled twoDepth">
<li>
<BoardProfile profileName=곤데리2 :showDetail="false" />
<div class="mt-2">저도 궁금합니다.</div>
<BoardCommentArea v-if="comment" />
</li>
</ul> -->
<!-- <BoardProfile profileName=곤데리 :showDetail="false" />
<div class="mt-2">저도 궁금합니다.</div>
<PlusButton @click="toggleComment"/>
<BoardCommentArea v-if="comment" /> -->
</div>
</template>
@ -73,30 +62,30 @@ import BoardCommentArea from './BoardCommentArea.vue';
import PlusButton from '../button/PlusBtn.vue';
const props = defineProps({
comment: {
type: Object,
required: true,
},
unknown: {
comment: {
type: Object,
required: true,
},
unknown: {
type: Boolean,
default: true,
},
isPlusButton: {
type: Boolean,
default: true,
},
isPlusButton: {
type: Boolean,
default: true,
},
isLike: {
type: Boolean,
default: false,
},
isEditTextarea: {
type: Boolean,
default: false
},
isPassword: {
type: Boolean,
default: false,
},
isLike: {
type: Boolean,
default: false,
},
isEditTextarea: {
type: Boolean,
default: false
},
isPassword: {
type: Boolean,
default: false,
},
});
// emits 정의
@ -117,11 +106,28 @@ const submitComment = (newComment) => {
// 좋아요, 싫어요
const handleUpdateReaction = (reactionData) => {
// console.log('📌 BoardComment.vue에서 좋아요 이벤트 발생:', reactionData);
// if (!reactionData.commentId) {
// console.log("⚠️ reactionData.commentId가 존재하지 않음! 이 값이 null이 되어 덮어씌워질 가능성이 있음.");
// }
// console.log('🟢 BoardComment.vue의 props.comment:', props.comment);
// console.log('🟢 BoardComment.vue의 commentId:', props.comment.commentId);
// console.log('🔍 emit 하기 전 reactionData:', {
// boardId: props.comment.boardId,
// commentId: props.comment.commentId,
// ...reactionData
// });
emit('updateReaction', {
boardId: props.comment.boardId,
commentId: props.comment.commentId,
...reactionData
commentId: props.comment.commentId || reactionData.commentId, // 기존 reactionData에 commentId가 없으면 props.comment.commentId 사용
...reactionData,
});
// console.log('🚀 emit 완료!');
};
// 수정

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

@ -13,9 +13,8 @@
@deleteClick="deleteClick"
@submitPassword="submitPassword"
@submitComment="submitComment"
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId)"
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
/>
<!-- @updateReaction="handleUpdateReaction" -->
</li>
</ul>
</template>
@ -46,17 +45,13 @@ const submitComment = (replyData) => {
emit('submitComment', replyData);
};
const handleUpdateReaction = (reactionData, commentId) => {
// console.log('📢 BoardCommentList에서 이벤트 수신:', reactionData);
// console.log('📌 전달할 댓글 ID>>>>:', commentId);
const handleUpdateReaction = (reactionData, commentId, boardId) => {
const updatedReactionData = {
...reactionData,
commentId: commentId
commentId: commentId || reactionData.commentId,
boardId: boardId || reactionData.boardId,
};
// console.log('🚀 최종 전달할 데이터:', updatedReactionData);
emit('updateReaction', updatedReactionData);
}

5
src/components/board/BoardProfile.vue
View File

@ -31,9 +31,10 @@
<BoardRecommendBtn
v-if="isLike"
:boardId="boardId"
:comment="props.comment"
:comment="comment"
@updateReaction="handleUpdateReaction"
/>
>
</BoardRecommendBtn>
</div>
</div>
</template>

18
src/components/button/BoardRecommendBtn.vue
View File

@ -8,7 +8,7 @@
</template>
<script setup>
import { ref, watch } from 'vue';
import { ref, computed } from 'vue';
const props = defineProps({
comment: {
@ -53,22 +53,13 @@ const emit = defineEmits(['updateReaction']);
const likeClicked = ref(props.likeClicked);
const dislikeClicked = ref(props.dislikeClicked);
const likeCount = ref(props.likeCount);
const dislikeCount = ref(props.dislikeCount);
// 부모에서 likeCount 또는 dislikeCount가 변경되면 로컬 상태를 업데이트
watch(() => props.likeCount, (newVal) => {
likeCount.value = newVal;
});
watch(() => props.dislikeCount, (newVal) => {
dislikeCount.value = newVal;
});
const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount);
const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount);
const handleLike = () => {
const isLike = !likeClicked.value;
const isDislike = false;
// console.log('좋아용')
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
likeClicked.value = isLike;
dislikeClicked.value = false;
@ -77,6 +68,7 @@ const handleLike = () => {
const handleDislike = () => {
const isDislike = !dislikeClicked.value;
const isLike = false;
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
dislikeClicked.value = isDislike;
likeClicked.value = false;

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

@ -101,7 +101,7 @@
:isEditTextarea="isEditTextarea"
@editClick="editClick"
@deleteClick="deleteClick"
@updateReaction="handleUpdateReaction"
@updateReaction="handleCommentReaction"
@submitComment="handleCommentReply"
/>
<Pagination
@ -206,15 +206,13 @@ const fetchBoardDetails = async () => {
// 좋아요, 싫어요
const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
try {
const aa = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
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);
const response = await axios.get(`board/${boardId}`);
const updatedData = response.data.data;
@ -226,11 +224,36 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
dislikeClicked.value = isDislike;
// console.log(updatedData)
// console.log("갱신된 데이터:", updatedData);
} catch (error) {
alert('반응을 업데이트하는 중 오류 발생');
}
};
// 대댓글 좋아요
const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => {
if (!commentId) return; // 댓글 ID가 없으면 실행 안 함
try {
const response = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
LOCBRDSEQ: boardId, // 게시글 ID
LOCCMTSEQ: commentId, // 댓글 ID
LOCGOBGOD: isLike ? 'T' : 'F',
LOCGOBBAD: isDislike ? 'T' : 'F'
});
console.log("댓글 좋아요 API 응답 데이터:", response.data);
// 좋아요/싫어요 상태 업데이트를 위해 새로 불러오기
await fetchComments();
} catch (error) {
alert('댓글 반응을 업데이트하는 중 오류 발생');
}
};
// 댓글 목록 조회
const fetchComments = async (page = 1) => {
try {
@ -240,12 +263,14 @@ const fetchComments = async (page = 1) => {
page
}
});
const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
params: { LOCBRDSEQ: currentBoardId.value }
});
console.log("댓글:", response.data);
console.log("대댓글:", replyResponse.data);
// const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
// params: { LOCBRDSEQ: currentBoardId.value }
// });
// console.log("댓글:", response.data);
// console.log("대댓글:", replyResponse.data);
comments.value = response.data.data.list.map(comment => ({
commentId: comment.LOCCMTSEQ, // 댓글 ID
@ -253,11 +278,17 @@ const fetchComments = async (page = 1) => {
parentId: comment.LOCCMTPNT, // 부모 ID
author: comment.author || "익명 사용자",
content: comment.LOCCMTRPY,
likeCount: comment.likeCount || 0,
dislikeCount: comment.dislikeCount || 0,
likeClicked: comment.likeClicked || false,
dislikeClicked: comment.dislikeClicked || false,
createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
children: [] // 대댓글을 담을 배열
}));
// console.log("변환 후 comments.value:", comments.value);
pagination.value = {
...pagination.value,
currentPage: response.data.data.pageNum, // 현재 페이지 번호
@ -274,6 +305,7 @@ const fetchComments = async (page = 1) => {
navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
};
} catch (error) {
console.log('댓글 목록 불러오기 오류:', error);
}
@ -288,7 +320,7 @@ const handleCommentSubmit = async ({ comment, password }) => {
LOCCMTPWD: password || null,
LOCCMTPNT: 1
});
// console.log('📥 서버 응답 전체:', response.data);
// console.log('서버 응답 전체:', response.data);
if (response.status === 200) {
console.log('댓글 작성 성공:', response.data.message);
@ -301,6 +333,8 @@ const handleCommentSubmit = async ({ comment, password }) => {
}
};
// 대댓글 작성
const handleCommentReply = async (reply) => {
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
LOCBRDSEQ: currentBoardId.value,