<template>
    <ul class="list-unstyled mt-10">
        <li
            v-for="comment in comments"
            :key="comment.id"
            class="mt-8"
        >
            <BoardComment :comment="comment" @submitComment="addComment" />
        </li>
    </ul>
</template>

<script setup>
import { ref } from 'vue';
import BoardComment from './BoardComment.vue'

const comments = ref([
  {
    id: 1,
    author: '홍길동',
    content: '저도 궁금합니다.',
    children: [
      {
        id: 2,
        author: '사용자1',
        content: '저도요!',
      },
      {
        id: 3,
        author: '사용자2',
        content: '저도..',
      },
    ],
  },
  {
    id: 4,
    author: '사용자4',
    content: '흥미로운 주제네요.',
    children: [],
  },
  {
    id: 5,
    author: '사용자5',
    content: '우오아아아아아앙',
    children: [],
  },
]);
</script>
