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-01-28 17:42:22 +09:00
parent 8ceddc8036
commit 0f78a0f8ac
4 changed files with 97 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,13 +8,10 @@
<BoardComment :comment="comment" @submitComment="addComment" />
</li>
</ul>
<Pagination/>
</template>
<script setup>
import { ref } from 'vue';
import Pagination from '../pagination/Pagination.vue';
import BoardComment from './BoardComment.vue'
const comments = ref([

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

@ -38,7 +38,7 @@
<i class='bx bx-trash'></i>
</button> -->
</template>
<BoardRecommendBtn :likeClicked="true" :dislikeClicked="false" :isRecommend="false" />
<BoardRecommendBtn :isRecommend="false" />
</template>
</div>
</div>
@ -50,7 +50,6 @@ import axios from '@api';
import DeleteButton from '../button/DeleteBtn.vue';
import EditButton from '../button/EditBtn.vue';
import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
import { onMounted } from 'vue';
// Vue Router 인스턴스
const router = useRouter();

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

@ -1,14 +1,16 @@
<template v-if="isRecommend">
<button class="btn btn-label-primary btn-icon" :class="likeClicked ? 'clicked' : '', bigBtn ? 'big' : '' ">
<i class="fa-regular fa-thumbs-up"></i> <span class="num">1</span>
<button class="btn btn-label-primary btn-icon" :class="{'clicked': likeClicked, 'big': bigBtn}" @click="handleLike">
<i class="fa-regular fa-thumbs-up"></i> <span class="num">{{ likeCount }}</span>
</button>
<button class="btn btn-label-danger btn-icon" :class="dislikeClicked ? 'clicked' : '', bigBtn ? 'big' : '' ">
<i class="fa-regular fa-thumbs-down"></i> <span class="num">1</span>
<button class="btn btn-label-danger btn-icon" :class="{'clicked': dislikeClicked, 'big': bigBtn}" @click="handleDislike">
<i class="fa-regular fa-thumbs-down"></i> <span class="num">{{ dislikeCount }}</span>
</button>
</template>
<script setup>
defineProps({
import { ref, watch } from 'vue';
const props = defineProps({
likeClicked : {
type : Boolean,
default : false,
@ -24,8 +26,65 @@ defineProps({
isRecommend: {
type:Boolean,
default:true,
}
},
boardId: {
type: Number,
required: true,
},
commentId: {
type: Number,
default: null,
},
likeCount: {
type: Number,
default: 0,
},
dislikeCount: {
type: Number,
default: 0,
},
});
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 handleLike = () => {
likeClicked.value = !likeClicked.value;
likeCount.value += likeClicked.value ? 1 : -1;
emit('updateReaction', { type: 'like', boardId: props.boardId, commentId: props.commentId });
if(likeClicked.value === true){
if(dislikeClicked.value === true) {
dislikeClicked.value = false;
dislikeCount.value += -1
}
}
};
const handleDislike = () => {
dislikeClicked.value = !dislikeClicked.value;
dislikeCount.value += dislikeClicked.value ? 1 : -1;
emit('updateReaction', { type: 'dislike', boardId: props.boardId, commentId: props.commentId });
if(dislikeClicked.value === true){
if(likeClicked.value === true) {
likeClicked.value = false;
likeCount.value += -1
}
}
};
</script>
<style scoped>

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

@ -5,20 +5,26 @@
<div class="card">
<!-- 프로필 헤더 -->
<div class="card-header">
<BoardProfile :boardId="currentBoardId" :profileName="profileName" />
<hr/>
<BoardProfile :boardId="currentBoardId" :profileName="profileName" class="pb-6 border-bottom" />
</div>
<!-- 게시글 내용 -->
<div class="card-body">
<h5 class="mb-4">{{ boardTitle }}</h5>
<!-- HTML 콘텐츠 렌더링 -->
<div class="board-content text-body" style="line-height: 1.6;" v-html="$common.contentToHtml(boardContent)">
<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 :bigBtn="true"/>
<BoardRecommendBtn
:bigBtn="true"
:boardId="currentBoardId"
:commentId="null"
:likeCount="currentLikeCount"
:dislikeCount="currentDislikeCount"
@updateReaction="handleUpdateReaction"
/>
</div>
<!-- 첨부파일 목록 -->
@ -38,6 +44,8 @@
</div>
<div class="card-footer">
<BoardCommentList/>
<Pagination/>
</div>
</div>
</div>
@ -47,19 +55,18 @@
<script setup>
import BoardComentArea from '@c/board/BoardComentArea.vue';
import BoardCommentList from '@/components/board/BoardCommentList.vue';
import BoardProfile from '@c/board/BoardProfile.vue';
import BoardCommentList from '@/components/board/BoardCommentList.vue';
import BoardRecommendBtn from '@/components/button/BoardRecommendBtn.vue';
import Pagination from '@/components/pagination/Pagination.vue';
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from '@api';
import Quill from 'quill';
// 게시물 데이터 상태
const profileName = ref('익명 사용자');
const boardTitle = ref('제목 없음');
const boardContent = ref('');
const convertedContent = ref('내용 없음');
const comments = ref([]);
const attachments = ref([]);
@ -85,7 +92,6 @@ const fetchBoardDetails = async () => {
boardTitle.value = boardDetail.title || '제목 없음';
boardContent.value = boardDetail.content || '';
attachments.value = data.attachments || [];
comments.value = data.comments || [];
} catch (error) {
@ -94,6 +100,23 @@ const fetchBoardDetails = async () => {
}
};
const currentLikeCount = ref(10);
const currentDislikeCount = ref(2);
// 좋아요, 싫어요
const handleUpdateReaction = async ({ type, boardId, commentId }) => {
try {
const cmtId = commentId !== null ? commentId : 0;
console.log(`Sending reaction: type=${type}, boardId=${boardId}, commentId=${cmtId}`);
const response = await axios.post(`/board/${boardId}/${cmtId}/reaction`, { type });
console.log('API Response:', response.data);
} catch (error) {
console.error('반응 업데이트 오류:', error.response ? error.response.data : error);
alert('반응을 업데이트하는 중 오류 발생');
}
};
// 컴포넌트 마운트 시 데이터 로드
onMounted(() => {
fetchBoardDetails();