139 lines
4.1 KiB
Vue
139 lines
4.1 KiB
Vue
<template>
|
|
<div>
|
|
<BoardProfile
|
|
:unknown="unknown"
|
|
:boardId="comment.boardId"
|
|
:profileName="comment.author"
|
|
:date="comment.createdAt"
|
|
:comment="comment"
|
|
:showDetail="false"
|
|
:author="true"
|
|
:isLike="!isLike"
|
|
:isPassword="isPassword"
|
|
@editClick="editClick"
|
|
@deleteClick="deleteClick"
|
|
@submitPassword="submitPassword"
|
|
@updateReaction="handleUpdateReaction"
|
|
@toggleEdit="emit('toggleEdit', comment.commentId, true)"
|
|
/>
|
|
|
|
|
|
<div class="mt-6">
|
|
<template v-if="isEditTextarea">
|
|
<textarea v-model="editedContent" class="form-control"></textarea>
|
|
<div class="mt-2 d-flex justify-content-end">
|
|
<button class="btn btn-secondary me-2" @click="emit('toggleEdit', comment.commentId, false)">취소</button>
|
|
<button class="btn btn-primary" @click="submitEdit">수정 완료</button>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<p class="m-0">{{ comment.content }}</p>
|
|
</template>
|
|
</div>
|
|
|
|
<PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
|
|
<BoardCommentArea v-if="isComment" @submitComment="submitComment"/>
|
|
|
|
<!-- 대댓글 -->
|
|
<ul v-if="comment.children && comment.children.length" class="list-unstyled">
|
|
<li
|
|
v-for="child in comment.children"
|
|
:key="child.commentId"
|
|
class="mt-8 pt-6 ps-10 border-top"
|
|
>
|
|
<BoardComment
|
|
:comment="child"
|
|
:unknown="unknown"
|
|
:isPlusButton="false"
|
|
:isLike="true"
|
|
@submitComment="submitComment"
|
|
@updateReaction="handleUpdateReaction"
|
|
/>
|
|
</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>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits, ref } from 'vue';
|
|
import BoardProfile from './BoardProfile.vue';
|
|
import BoardCommentArea from './BoardCommentArea.vue';
|
|
import PlusButton from '../button/PlusBtn.vue';
|
|
|
|
const props = defineProps({
|
|
comment: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
unknown: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
isPlusButton: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
isLike: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isEditTextarea: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isPassword: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
// emits 정의
|
|
const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit', 'editClick']);
|
|
|
|
// 댓글 입력 창 토글
|
|
const isComment = ref(false);
|
|
const toggleComment = () => {
|
|
isComment.value = !isComment.value;
|
|
};
|
|
|
|
// 부모 컴포넌트에 대댓글 추가 요청
|
|
const submitComment = (newComment) => {
|
|
emit('submitComment', { parentId: props.comment.commentId, ...newComment });
|
|
|
|
isComment.value = false;
|
|
};
|
|
|
|
// 좋아요, 싫어요
|
|
const handleUpdateReaction = (reactionData) => {
|
|
emit('updateReaction', {
|
|
boardId: props.comment.boardId,
|
|
commentId: props.comment.commentId,
|
|
...reactionData
|
|
});
|
|
};
|
|
|
|
// 수정
|
|
const editClick = (data) => {
|
|
emit('editClick', data);
|
|
};
|
|
|
|
// 수정
|
|
const editedContent = ref(props.comment.content);
|
|
const submitEdit = () => {
|
|
emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
|
|
emit('toggleEdit', props.comment.commentId, false); // 수정 모드 종료
|
|
};
|
|
|
|
</script>
|