126 lines
2.8 KiB
Vue
126 lines
2.8 KiB
Vue
<template v-if="isRecommend">
|
|
<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="{'clicked': dislikeClicked, 'big': bigBtn}" @click="handleDislike">
|
|
<i class="fa-regular fa-thumbs-down"></i> <span class="num">{{ dislikeCount }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue';
|
|
|
|
const props = defineProps({
|
|
likeClicked : {
|
|
type : Boolean,
|
|
default : false,
|
|
},
|
|
dislikeClicked : {
|
|
type : Boolean,
|
|
default : false,
|
|
},
|
|
bigBtn : {
|
|
type :Boolean,
|
|
default : false,
|
|
},
|
|
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 = () => {
|
|
console.log('좋아요',likeCount.value)
|
|
// emit('updateReaction', { type: 'like', boardId: props.boardId, commentId: props.commentId });
|
|
// likeClicked.value = true;
|
|
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike: true, isDislike: false });
|
|
};
|
|
|
|
const handleDislike = () => {
|
|
console.log('싫어요')
|
|
// emit('updateReaction', { type: 'dislike', boardId: props.boardId, commentId: props.commentId });
|
|
// dislikeClicked.value = true;
|
|
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike: false, isDislike: true });
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.btn + .btn {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.num {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.btn-label-danger.clicked {
|
|
background-color: #e6381a;
|
|
}
|
|
|
|
.btn-label-danger.clicked i,
|
|
.btn-label-danger.clicked span {
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-label-primary.clicked {
|
|
background-color: #5f61e6;
|
|
}
|
|
|
|
.btn-label-primary.clicked i,
|
|
.btn-label-primary.clicked span {
|
|
color : #fff;
|
|
}
|
|
|
|
.btn {
|
|
width: 55px;
|
|
height: 30px;
|
|
}
|
|
|
|
.btn.big {
|
|
width: 70px;
|
|
height: 70px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
@media screen and (max-width:450px) {
|
|
.btn {
|
|
width: 50px;
|
|
height: 20px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style>
|