From 12538f004622209e90caa05979a9b70b3dad5b6b Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Wed, 12 Feb 2025 23:43:38 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8C=93=EA=B8=80=EB=93=B1=EB=A1=9D=20?=
 =?UTF-8?q?=EC=A7=84=ED=96=89=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComentArea.vue  |  33 ++++---
 src/components/board/BoardCommentList.vue |  74 +++++++++-------
 src/components/board/BoardProfile.vue     |  14 +--
 src/views/board/BoardView.vue             | 103 ++++++++++++++--------
 4 files changed, 132 insertions(+), 92 deletions(-)

diff --git a/src/components/board/BoardComentArea.vue b/src/components/board/BoardComentArea.vue
index 52874c9..b437a87 100644
--- a/src/components/board/BoardComentArea.vue
+++ b/src/components/board/BoardComentArea.vue
@@ -24,7 +24,7 @@
             <div class="d-flex justify-content-between flex-wrap mt-4">
                 <div class="d-flex flex-wrap align-items-center">
                     <!-- 익명 체크박스 (익명게시판일 경우에만)-->
-                    <div v-if="isAnonymous" class="form-check form-check-inline mb-0 me-4">
+                    <div v-if="unknown" class="form-check form-check-inline mb-0 me-4">
                         <input
                             class="form-check-input"
                             type="checkbox"
@@ -59,41 +59,38 @@
 </template>
 
 <script setup>
-import { ref, defineEmits, defineProps, computed, watchEffect } from 'vue';
+import { ref, defineEmits, defineProps, computed, watch } from 'vue';
 
 const props = defineProps({
-    profileName: {
-        type: String,
-        default: '익명 사용자',
+    unknown: {
+        type: Boolean,
+        default: true,
     },
+    parentId: {
+        type: Number,
+        default: 0
+    }
 });
 
-const isCheck = ref(false);
 const comment = ref('');
 const password = ref('');
-
-const isAnonymous = computed(() => props.profileName === '익명 사용자');
+const isCheck = ref(false);
 
 const emit = defineEmits(['submit']);
 
-watchEffect(() => {
-    console.log('📢 부모로부터 전달된 profileName:', props.profileName);
-    console.log('🔐 익명 여부(isAnonymous):', isAnonymous.value);
-
-    if (!isAnonymous.value) {
+watch(() => props.unknown, (newVal) => {
+    if (!newVal) {
         isCheck.value = false;
     }
 });
 
 function handleCommentSubmit() {
-    console.log('📝 댓글 내용:', comment.value);
-    console.log('🔐 익명 여부:', isAnonymous.value);
-    console.log('🔑 비밀번호:', password.value);
-
     emit('submit', {
         comment: comment.value,
-        isAnonymous: isAnonymous.value,
         password: password.value,
     });
+
+    comment.value = '';
+    password.value = '';
 }
 </script>
diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue
index 319345c..f1c7116 100644
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@@ -11,38 +11,48 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, defineProps, defineEmits } 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: [],
-  },
-]);
+const props = defineProps({
+    comments: Array
+});
+
+const emit = defineEmits(['reply']);
+
+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>
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 5f77e63..aaf328a 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="d-flex align-items-center flex-wrap">
         <div class="d-flex align-items-center">
-            <div class="avatar me-2" v-if="unknown">
+            <div class="avatar me-2" v-if="!unknown">
                 <img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
             </div>
             <div class="me-2">
@@ -13,7 +13,7 @@
                             <i class="fa-regular fa-eye"></i> {{ views }}
                         </span>
                         <span>
-                            <i class="bx bx-comment"></i> {{ comments }}
+                            <i class="bx bx-comment"></i> {{ commentNum }}
                         </span>
                     </template>
                 </div>
@@ -25,7 +25,7 @@
                     <EditButton @click="handleEdit" />
                     <DeleteButton @click="handleDelete" />
 
-                    <div class="mt-3" v-if="isPassword && unknown">
+                    <div class="mt-3" v-if="isPassword && !unknown">
                         <div class="input-group">
                             <input
                                 type="password"
@@ -40,6 +40,7 @@
                 </div>
             </template>
             <template v-else>
+                <!-- 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부 -->
                 <template v-if="author">
                     <EditButton />
                     <DeleteButton />
@@ -57,7 +58,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, defineProps } from 'vue';
+import { ref, defineProps, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import axios from '@api';
 import DeleteButton from '../button/DeleteBtn.vue';
@@ -79,7 +80,7 @@ const props = defineProps({
     },
     profileName: {
         type: String,
-        default: '익명',
+        default: '익명 사용자',
     },
     unknown: {
         type: Boolean,
@@ -89,6 +90,7 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    // 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
     author: {
         type: Boolean,
         default: false,
@@ -101,7 +103,7 @@ const props = defineProps({
         type: Number,
         default: 0,
     },
-    comments: {
+    commentNum: {
         type: Number,
         default: 0,
     },
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 3174991..fb9a396 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -8,8 +8,10 @@
                         <BoardProfile
                             :boardId="currentBoardId"
                             :profileName="profileName"
+                            :unknown="unknown"
+                            :author="isAuthor"
                             :views="views"
-                            :comments="comments"
+                            :commentNum="commentNum"
                             :date="formattedBoardDate"
                             class="pb-6 border-bottom"
                         />
@@ -65,15 +67,12 @@
                         </ul> -->
 
                         <!-- 댓글 입력 영역 -->
-                        <BoardComentArea :profileName="profileName" @submit="handleCommentSubmit"/>
-
-                        <!-- 수정 버튼 -->
-                        <!-- <button class="btn btn-primary" @click="goToEditPage">
-                            글 수정
-                        </button> -->
+                        <BoardComentArea :profileName="profileName" :unknown="unknown" @submit="handleCommentSubmit"/>
                     </div>
+
+                    <!-- 댓글 목록 -->
                     <div class="card-footer">
-                        <BoardCommentList/>
+                        <BoardCommentList :comments="comments" />
 
                         <Pagination/>
                     </div>
@@ -103,17 +102,16 @@ const likes = ref(0);
 const dislikes = ref(0);
 const likeClicked = ref(false);
 const dislikeClicked = ref(false);
-const comments = ref(0);
+const commentNum = ref(0);
 const attachment = ref(false);
 
-// 라우트에서 ID 가져오기
 const route = useRoute();
 const currentBoardId = ref(Number(route.params.id));
+const unknown = computed(() => profileName.value === '익명 사용자');
+const currentUserId = ref('김자바'); // 현재 로그인한 사용자 id
+const authorId = ref(null); // 작성자 id
 
-// 글 수정 페이지로 이동
-const goToEditPage = () => {
-    router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
-};
+const isAuthor = computed(() => currentUserId.value === authorId.value);
 
 // 게시물 상세 데이터 불러오기
 const fetchBoardDetails = async () => {
@@ -129,6 +127,9 @@ const fetchBoardDetails = async () => {
         // 익명확인하고 싶을때
         // profileName.value = '익명 사용자';
         
+        // 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
+        authorId.value = data.author;
+        
         boardTitle.value = data.title || '제목 없음';
         boardContent.value = data.content || '';
         date.value = data.date || '';
@@ -136,7 +137,7 @@ const fetchBoardDetails = async () => {
         likes.value = data.likeCount || 0;
         dislikes.value = data.dislikeCount || 0;
         attachment.value = data.hasAttachment || null;
-        comments.value = data.commentCount || 0;
+        commentNum.value = data.commentCount || 0;
         
     } catch (error) {
         alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
@@ -145,47 +146,78 @@ const fetchBoardDetails = async () => {
 
 // 좋아요, 싫어요
 const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
-    // console.log(type, boardId)
     try {
-
-        const requestData = {
+        await axios.post(`/board/${boardId}/${commentId}/reaction`, {
             LOCBRDSEQ: boardId,
             LOCCMTSEQ: commentId,
             MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함
             LOCGOBGOD: isLike ? 'T' : 'F',
             LOCGOBBAD: isDislike ? 'T' : 'F'
-        };
-
-        console.log(requestData)
-
-        const postResponse = await axios.post(`/board/${boardId}/${commentId}/reaction`, requestData);
-        // await axios.post(`board/${boardId}/${commentId}/reaction`, { type });
+        });
 
+        
         const response = await axios.get(`board/${boardId}`);
+        console.log(response.data)
         const updatedData = response.data.data;
 
-        console.log('post요청 결과:', postResponse.data);
-        console.log('get요청 결과(좋아요):', response.data.data.likeCount);
-
         likes.value = updatedData.likeCount;
         dislikes.value = updatedData.dislikeCount;
 
         likeClicked.value = isLike;
         dislikeClicked.value = isDislike;
 
-        console.log('반응 결과:', postResponse.data);
-
     } catch (error) {
         alert('반응을 업데이트하는 중 오류 발생');
     }
 };
 
-function handleCommentSubmit(payload) {
-    console.log('댓글 내용:', payload.comment);
-    console.log('익명 여부:', payload.isAnonymous);
-    console.log('비밀번호:', payload.password);
+// 댓글 작성
+const handleCommentSubmit = async ({ comment, password }) => {
+    try {
+        // const payload = {
+        //     LOCBRDSEQ: currentBoardId.value,
+        //     LOCCMTRPY: comment,
+        //     LOCCMTPWD: password || null,
+        //     LOCCMTPNT: 1
+        // };
+        // alert(`댓글 내용: ${comment}`); 
+
+        // console.log('📤 서버로 전송되는 데이터:', payload); // 서버로 보내는 데이터 확인
+        // const response = await axios.post(`board/${currentBoardId.value}/comment`, payload);
+        
+        const response = await axios.post(`board/${currentBoardId.value}/comment`, {
+            LOCBRDSEQ: currentBoardId.value,
+            LOCCMTRPY: comment,
+            LOCCMTPWD: password || null,
+            LOCCMTPNT: 0
+        });
+        console.log('📥 서버 응답 전체:', response);
+        
+
+        if (response.status === 200) {
+            console.log('댓글 작성 성공:', response.data.message);
+            // await fetchComments(); // 댓글 작성 후 목록 갱신
+        } else {
+            console.error('댓글 작성 실패:', response.data.message);
+        }
+    } catch (error) {
+        console.error('댓글 작성 중 오류 발생:', error);
+    }
+};
+
+// 댓글 목록 조회
+// 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 formattedBoardDate = computed(() => {
@@ -193,9 +225,8 @@ const formattedBoardDate = computed(() => {
     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();
+    fetchBoardDetails()
 });
 </script>