95 lines
2.6 KiB
Vue
95 lines
2.6 KiB
Vue
<template>
|
||
<div>
|
||
<BoardProfile :profileName="comment.author" :date="comment.createdAt" :showDetail="false" :author="true" :isChild="isChild" />
|
||
<div class="mt-6">
|
||
<p class="m-0">{{ comment.content }}</p>
|
||
</div>
|
||
<PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
|
||
<BoardComentArea v-if="isComment" @submit="submitComment"/>
|
||
|
||
<!-- 대댓글 -->
|
||
<ul v-if="comment.children && comment.children.length" class="list-unstyled">
|
||
<li
|
||
v-for="child in comment.children"
|
||
:key="child.id"
|
||
class="pt-8 ps-10"
|
||
>
|
||
<BoardComment :comment="child" :isPlusButton="false" :isChild="true" @submitComment="addChildComment" />
|
||
</li>
|
||
</ul>
|
||
<!-- <ul class="list-unstyled twoDepth">
|
||
<li>
|
||
<BoardProfile profileName=곤데리2 :showDetail="false" />
|
||
<div class="mt-2">저도 궁금합니다.</div>
|
||
<BoardComentArea v-if="comment" />
|
||
</li>
|
||
</ul> -->
|
||
<!-- <BoardProfile profileName=곤데리 :showDetail="false" />
|
||
<div class="mt-2">저도 궁금합니다.</div>
|
||
<PlusButton @click="toggleComment"/>
|
||
<BoardComentArea v-if="comment" /> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import BoardProfile from './BoardProfile.vue';
|
||
import BoardComentArea from './BoardComentArea.vue';
|
||
import PlusButton from '../button/PlusBtn.vue';
|
||
import { defineProps, defineEmits, ref } from 'vue';
|
||
|
||
const props = defineProps({
|
||
comment: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
isPlusButton: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
isChild: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
});
|
||
|
||
// emits 정의
|
||
const emit = defineEmits(['submitComment']);
|
||
|
||
// 댓글 입력 창 토글
|
||
const isComment = ref(false);
|
||
const toggleComment = () => {
|
||
isComment.value = !isComment.value;
|
||
};
|
||
|
||
// 부모 컴포넌트에 대댓글 추가 요청
|
||
const addChildComment = (newComment) => {
|
||
console.log("➕ 대댓글 추가됨:", newComment);
|
||
if (!props.comment.children) {
|
||
props.comment.children = []; // ✅ 대댓글 배열이 없으면 생성
|
||
}
|
||
props.comment.children.push(newComment); // ✅ 부모 댓글의 children 배열에 추가
|
||
};
|
||
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* .twoDepth {
|
||
margin-top: 10px;
|
||
padding-left: 40px;
|
||
}
|
||
|
||
.list-unstyled > li ~ li {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.btn-text-primary {
|
||
padding-left: 0;
|
||
}
|
||
.btn-text-primary:hover,
|
||
.btn-text-primary:active,
|
||
.btn-text-primary:focus {
|
||
background-color: transparent
|
||
} */
|
||
</style>
|