125 lines
3.3 KiB
Vue
125 lines
3.3 KiB
Vue
<template>
|
|
<ul class="list-unstyled mt-10">
|
|
<li
|
|
v-for="comment in comments"
|
|
:key="comment.commentId"
|
|
class="mt-6 border-bottom pb-6"
|
|
>
|
|
<BoardComment
|
|
:unknown="unknown"
|
|
:comment="comment"
|
|
:isCommentAuthor="comment.isCommentAuthor"
|
|
:isEditTextarea="comment.isEditTextarea"
|
|
:isDeleted="comment.isDeleted"
|
|
:isCommentPassword="isCommentPassword"
|
|
:passwordCommentAlert="passwordCommentAlert || ''"
|
|
:currentPasswordCommentId="currentPasswordCommentId"
|
|
:password="password"
|
|
@editClick="handleEditClick"
|
|
@deleteClick="handleDeleteClick"
|
|
@submitPassword="submitPassword"
|
|
@submitComment="submitComment"
|
|
@submitEdit="handleSubmitEdit"
|
|
@cancelEdit="handleCancelEdit"
|
|
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
|
|
@update:password="updatePassword"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from 'vue';
|
|
import BoardComment from './BoardComment.vue'
|
|
|
|
const props = defineProps({
|
|
comments: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => []
|
|
},
|
|
unknown: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
isCommentAuthor: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isCommentPassword: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isEditTextarea: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isDeleted: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
passwordCommentAlert: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
currentPasswordCommentId: {
|
|
type: Number
|
|
},
|
|
password:{
|
|
type: String
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'clearPassword','submitEdit', 'update:password']);
|
|
|
|
const submitComment = (replyData) => {
|
|
emit('submitComment', replyData);
|
|
};
|
|
|
|
const handleUpdateReaction = (reactionData, commentId, boardId) => {
|
|
const updatedReactionData = {
|
|
...reactionData,
|
|
commentId: commentId || reactionData.commentId,
|
|
boardId: boardId || reactionData.boardId,
|
|
};
|
|
|
|
emit('updateReaction', updatedReactionData);
|
|
}
|
|
|
|
const submitPassword = (comment, password) => {
|
|
emit('submitPassword', comment, password);
|
|
};
|
|
|
|
const handleEditClick = (comment) => {
|
|
if (comment.parentId) {
|
|
emit('editClick', comment); // 대댓글
|
|
} else {
|
|
emit('editClick', comment); // 댓글
|
|
}
|
|
};
|
|
|
|
const handleSubmitEdit = (comment, editedContent) => {
|
|
emit("submitEdit", comment, editedContent);
|
|
};
|
|
|
|
const handleDeleteClick = (comment) => {
|
|
if (comment.parentId) {
|
|
emit('deleteClick', comment); // 대댓글 삭제
|
|
} else {
|
|
emit('deleteClick', comment); // 댓글 삭제
|
|
}
|
|
};
|
|
|
|
const handleCancelEdit = (comment) => {
|
|
if (comment.parentId) {
|
|
emit('cancelEdit', comment); // 대댓글 수정 취소
|
|
} else {
|
|
emit('cancelEdit', comment); // 댓글 수정 취소
|
|
}
|
|
};
|
|
|
|
const updatePassword = (newPassword) => {
|
|
emit('update:password', newPassword);
|
|
};
|
|
</script>
|