뷰 포맷팅

src/views/board/BoardView.vue

@@ -9,8 +9,8 @@
                             :boardId="currentBoardId"
                             :profileName="profileName"
                             :views="views"
-                            :likes="likes"
-                            :dislikes="dislikes"
+                            :comments="comments"
+                            :date="formattedDate"
                             class="pb-6 border-bottom"
                         />
                     </div>
@@ -49,8 +49,8 @@
                                 :bigBtn="true"
                                 :boardId="currentBoardId"
                                 :commentId="null"
-                                :likeCount="currentLikeCount"
-                                :dislikeCount="currentDislikeCount"
+                                :likeCount="likes"
+                                :dislikeCount="dislikes"
                                 @updateReaction="handleUpdateReaction"
                             />
                         </div>
@@ -63,7 +63,7 @@
                         </ul> -->
 
                         <!-- 댓글 영역 -->
-                        <BoardComentArea :comments="comments" />
+                        <BoardComentArea />
 
                         <!-- 수정 버튼 -->
                         <!-- <button class="btn btn-primary" @click="goToEditPage">
@@ -87,7 +87,7 @@ import BoardProfile from '@c/board/BoardProfile.vue';
 import BoardCommentList from '@/components/board/BoardCommentList.vue';
 import BoardRecommendBtn from '@/components/button/BoardRecommendBtn.vue';
 import Pagination from '@/components/pagination/Pagination.vue';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import axios from '@api';
 
@@ -95,11 +95,12 @@ import axios from '@api';
 const profileName = ref('익명 사용자');
 const boardTitle = ref('제목 없음');
 const boardContent = ref('');
-const comments = ref([]);
 const attachments = ref([]);
+const date = ref('');
 const views = ref(0);
 const likes = ref(0);
 const dislikes = ref(0);
+const comments = ref(0);
 const attachment = ref(false);
 
 // 라우트에서 ID 가져오기
@@ -122,24 +123,24 @@ const fetchBoardDetails = async () => {
         const boardDetail = data.boardDetail || {};
         // console.log('boardDetail:', boardDetail);
 
+        console.log('API Response:', response.data);
+
         profileName.value = data.author || '익명 사용자';
         boardTitle.value = data.title || '제목 없음';
         boardContent.value = data.content || '';
+        date.value = data.date || '';
         views.value = data.cnt || 0;
         likes.value = data.likeCount || 0;
         dislikes.value = data.dislikeCount || 0;
         attachment.value = data.hasAttachment || null;
+        comments.value = data.commentCount || 0;
+        console.log(date.value)
 
-        attachments.value = data.attachments || [];
-        comments.value = data.comments || [];
     } catch (error) {
         alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
     }
 };
 
-const currentLikeCount = ref(10);
-const currentDislikeCount = ref(2);
-
 // 좋아요, 싫어요
 const handleUpdateReaction = async ({ type, boardId, commentId }) => {
     try {
@@ -151,6 +152,11 @@ const handleUpdateReaction = async ({ type, boardId, commentId }) => {
     }
 };
 
+const formattedDate = computed(() => {
+    const dateObj = new Date(date.value);
+    return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
+  });
+
 // 컴포넌트 마운트 시 데이터 로드
 onMounted(() => {
     fetchBoardDetails();