댓글 조회 및 등록

src/components/board/BoardComment.vue

@@ -35,8 +35,7 @@
 import BoardProfile from './BoardProfile.vue';
 import BoardComentArea from './BoardComentArea.vue';
 import PlusButton from '../button/PlusBtn.vue';
-import { ref } from 'vue';
-import { defineEmits } from 'vue';
+import { defineProps, defineEmits, ref } from 'vue';
 
 const props = defineProps({
   comment: {

src/components/board/BoardCommentList.vue

@@ -11,11 +11,15 @@
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits } from 'vue';
+import { defineProps, defineEmits } from 'vue';
 import BoardComment from './BoardComment.vue'
 
 const props = defineProps({
-    comments: Array
+    comments: {
+        type: Array,
+        required: true,
+        default: () => []
+    }
 });
 
 const emit = defineEmits(['reply']);
@@ -24,35 +28,4 @@ const addComment = (replyData) => {
     emit('reply', replyData);
 };
 
-// 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>

src/views/board/BoardView.vue

@@ -68,6 +68,7 @@
 
                         <!-- 댓글 입력 영역 -->
                         <BoardComentArea :profileName="profileName" :unknown="unknown" @submit="handleCommentSubmit"/>
+                        <!-- <BoardComentArea :profileName="profileName" :unknown="unknown" /> -->
                     </div>
 
                     <!-- 댓글 목록 -->
@@ -104,6 +105,7 @@ const likeClicked = ref(false);
 const dislikeClicked = ref(false);
 const commentNum = ref(0);
 const attachment = ref(false);
+const comments = ref([]);
 
 const route = useRoute();
 const currentBoardId = ref(Number(route.params.id));
@@ -206,17 +208,36 @@ const handleCommentSubmit = async ({ comment, password }) => {
 };
 
 // 댓글 목록 조회
-// const fetchComments = async () => {
-//     try {
-//         const response = await axios.get(`board/${currentBoardId.value}/comments`);
-//         if (response.status === 200) {
-//             comments.value = response.data.data || [];
-//             console.log('📋 댓글 목록:', comments.value);
-//         }
-//     } catch (error) {
-//         console.error('댓글 목록 불러오기 오류:', error);
-//     }
-// };
+const fetchComments = async () => {
+    console.log("🚀 fetchComments() 실행됨"); // ✅ 함수 실행 여부 확인
+
+    try {
+        const response = await axios.get(`board/${currentBoardId.value}/comments`, {
+            params: { LOCBRDSEQ: currentBoardId.value }
+        });
+        console.log("📥 API 응답 데이터:", response.data); 
+        
+        comments.value = response.data.data.map(comment => ({
+            id: comment.LOCCMTSEQ, // 고유 ID
+            // author: comment.LOCCMTWRITER || "익명 사용자", // 작성자
+            content: comment.LOCCMTRPY, // 댓글 내용
+            createdAt: comment.LOCCMTUDT, // 생성 날짜
+            children: comment.children ? comment.children.map(child => ({
+                id: child.LOCCMTSEQ,
+                // author: child.LOCCMTWRITER || "익명 사용자",
+                content: child.LOCCMTRPY,
+                createdAt: child.LOCCMTUDT,
+            })) : []
+        }));
+
+        // comments.value.sort((a, b) => b.createdAt - a.createdAt);
+
+        console.log("📌 변환된 comments 데이터:", comments.value);
+
+    } catch (error) {
+        console.error('❌ 댓글 목록 불러오기 오류:', error);
+    }
+};
 
 
 // 날짜
@@ -228,5 +249,6 @@ const formattedBoardDate = computed(() => {
 // 컴포넌트 마운트 시 데이터 로드
 onMounted(() => {
     fetchBoardDetails()
+    fetchComments()
 });
 </script>