From a935bcf4d5922283ad015c66de6241e776d43bd9 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Mon, 24 Feb 2025 14:04:17 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=9D=B5?=
 =?UTF-8?q?=EB=AA=85=20=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/BoardComment.vue     | 16 ++++--
 src/components/board/BoardCommentArea.vue |  6 +-
 src/components/board/BoardCommentList.vue |  7 ++-
 src/components/board/BoardProfile.vue     |  9 ++-
 src/views/board/BoardView.vue             | 68 +++++++++++++++--------
 5 files changed, 73 insertions(+), 33 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 932c36f..2bcdc10 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -2,6 +2,7 @@
     <div>
         <BoardProfile
             :unknown="unknown"
+            :isCommentAuthor="isCommentAuthor"
             :boardId="comment.boardId"
             :profileName="comment.author"
             :date="comment.createdAt"
@@ -10,6 +11,7 @@
             :author="true"
             :isLike="!isLike"
             :isCommentPassword="comment.isCommentPassword"
+            :isCommentProfile="true"
             @editClick="$emit('editClick', comment)"
             @deleteClick="$emit('deleteClick', comment)"
             @updateReaction="handleUpdateReaction"
@@ -27,7 +29,9 @@
             </div>
             <span v-if="passwordCommentAlert" class="invalid-feedback d-block text-start">{{ passwordCommentAlert }}</span>
         </div>
-        
+        <p>authorId:{{ comment.authorId }}</p>
+        <p>코멘트 비교: {{comment.isCommentAuthor}}</p>
+
 
         <div class="mt-6">
             <template v-if="comment.isEditTextarea">
@@ -77,9 +81,13 @@ const props = defineProps({
         required: true,
     },
     unknown: {
-            type: Boolean,
-            default: true,
-        },
+        type: Boolean,
+        default: true,
+    },
+    isCommentAuthor: {
+        type: Boolean,
+        default: false,
+    },
     isPlusButton: {
         type: Boolean,
         default: true,
diff --git a/src/components/board/BoardCommentArea.vue b/src/components/board/BoardCommentArea.vue
index 27ada9c..30e9084 100644
--- a/src/components/board/BoardCommentArea.vue
+++ b/src/components/board/BoardCommentArea.vue
@@ -43,7 +43,7 @@
                             class="form-control flex-grow-1"
                             v-model="password"
                         />
-                        <!-- <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span> -->
+                        <span v-if="passwordAlert" class="invalid-feedback d-block text-start ms-2">{{ passwordAlert }}</span>
                     </div>
                 </div>
 
@@ -70,6 +70,10 @@ const props = defineProps({
     parentId: {
         type: Number,
         default: 0
+    },
+    passwordAlert: {
+        type: String,
+        default: false
     }
 });
 
diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue
index 9cd3425..9813d9b 100644
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@@ -8,6 +8,7 @@
             <BoardComment
                 :unknown="unknown"
                 :comment="comment"
+                :isCommentAuthor="comment.isCommentAuthor"
                 :isCommentPassword="comment.isCommentPassword" 
                 :isEditTextarea="comment.isEditTextarea"
                 :passwordCommentAlert="passwordCommentAlert"
@@ -38,6 +39,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    isCommentAuthor: {
+        type: Boolean,
+        default: false,
+    },
     isCommentPassword: {
         type: Boolean,
         default: false,
@@ -52,7 +57,7 @@ const props = defineProps({
     }
 });
 
-const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'submitPassword', 'clearPassword']);
+const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'clearPassword']);
 
 const submitComment = (replyData) => {
     emit('submitComment', replyData);
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 766bc31..a550136 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -22,7 +22,8 @@
         <!-- 버튼 영역 -->
         <div class="ms-auto text-end">
             <!-- 수정, 삭제 버튼 -->
-            <template v-if="author || showDetail">
+            <!-- <template v-if="isAuthor || showDetail"> -->
+            <template v-if="isCommentProfile ? isCommentAuthor : isAuthor">
                 <EditButton @click.stop="editClick" />
                 <DeleteButton @click.stop="deleteClick" />
             </template>
@@ -49,7 +50,7 @@ import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
 const props = defineProps({
     comment: {
         type: Object,
-        required: true,
+        required: false,
     },
     boardId: {
         type: Number,
@@ -72,10 +73,12 @@ const props = defineProps({
         default: true,
     },
     // 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
-    author: {
+    isAuthor: {
         type: Boolean,
         default: false,
     },
+    isCommentAuthor: Boolean,  // 댓글 작성자인지 여부
+    isCommentProfile: Boolean, // 현재 컴포넌트가 댓글용인지 여부
     date: {
         type: String,
         required: true,
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 8c50fe6..268d358 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -10,14 +10,14 @@
                                 :boardId="currentBoardId"
                                 :profileName="profileName"
                                 :unknown="unknown"
-                                :author="isAuthor"
                                 :views="views"
                                 :commentNum="commentNum"
                                 :date="formattedBoardDate"
                                 :isLike="false"
+                                :isAuthor="isAuthor"
                                 @editClick="editClick"
                                 @deleteClick="deleteClick"
-                            />
+                                />
 
                             <!-- 비밀번호 입력창 (익명일 경우) -->
                             <div v-if="isPassword && unknown" class="mt-3 w-25 ms-auto">
@@ -59,10 +59,10 @@
                                 </ul> -->
                             </div>
                         </div>
-
+                        
                         <!-- HTML 콘텐츠 렌더링 -->
                         <div class="board-content text-body" style="line-height: 1.6;" v-html="$common.contentToHtml(boardContent)"></div>
-
+                        
                         <!-- 좋아요 버튼 -->
                         <div class="row justify-content-center my-10">
                             <BoardRecommendBtn
@@ -74,9 +74,15 @@
                                 :likeClicked="likeClicked"
                                 :dislikeClicked="dislikeClicked"
                                 @updateReaction="handleUpdateReaction"
-                            />
+                                />
                         </div>
+                        <p>현재 로그인한 사용자 ID: {{ currentUserId }}</p>
+                        <p>게시글 작성자: {{ authorId }}</p>
+                        <p>isAuthor 값: {{ isAuthor }}</p>  
+                        <!-- <p>use이미지:{{userStore.user.img}}</p> -->
+                        <!-- <img :src="`http://localhost:10325/upload/img/profile/${userStore.user.profile}`" alt="Profile Image" class="w-px-40 h-auto rounded-circle"/> -->
 
+                            
                         <!-- 첨부파일 목록 -->
                         <!-- <ul v-if="attachments.length" class="attachments mt-4 list-unstyled">
                             <li v-for="(attachment, index) in attachments" :key="index" class="mb-2">
@@ -88,6 +94,7 @@
                         <BoardCommentArea
                             :profileName="profileName"
                             :unknown="unknown"
+                            :passwordAlert="passwordAlert"
                             @submitComment="handleCommentSubmit"
                         />
                         <!-- <BoardCommentArea :profileName="profileName" :unknown="unknown" /> -->
@@ -97,7 +104,7 @@
                     <div class="card-footer">
                         <BoardCommentList
                             :unknown="unknown"
-                            :comments="comments"
+                            :comments="commentsWithAuthStatus"
                             :isCommentPassword="isCommentPassword"
                             :isEditTextarea="isEditTextarea"
                             :passwordCommentAlert="passwordCommentAlert"
@@ -130,6 +137,7 @@ import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
 import Pagination from '@c/pagination/Pagination.vue';
 import { ref, onMounted, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { useUserInfoStore } from '@/stores/useUserInfoStore';
 import axios from '@api';
 
 // 게시물 데이터 상태
@@ -148,12 +156,21 @@ const comments = ref([]);
 
 const route = useRoute();
 const router = useRouter();
+const userStore = useUserInfoStore();
 const currentBoardId = ref(Number(route.params.id));
 const unknown = computed(() => profileName.value === '익명');
-const currentUserId = ref('김자바'); // 현재 로그인한 사용자 id
-const authorId = ref(null); // 작성자 id
+const currentUserId = computed(() => userStore.user.id); // 현재 로그인한 사용자 id
+const authorId = ref(''); // 작성자 id
 
 const isAuthor = computed(() => currentUserId.value === authorId.value);
+const commentsWithAuthStatus = computed(() => {
+    const updatedComments = comments.value.map(comment => ({
+        ...comment,
+        isCommentAuthor: comment.authorId === currentUserId.value
+    }));
+    // console.log("✅ commentsWithAuthStatus 업데이트됨:", updatedComments);
+    return updatedComments;
+});
 
 
 const password = ref('');
@@ -187,17 +204,18 @@ const fetchBoardDetails = async () => {
         const response = await axios.get(`board/${currentBoardId.value}`);
         const data = response.data.data;
 
+        console.log(data)
+
         // API 응답 데이터 반영
         // const boardDetail = data.boardDetail || {};
         
         profileName.value = data.author || '익명';
         
         // 익명확인하고 싶을때
-        // profileName.value = 'null;
+        // profileName.value = '익명';
         
-        // 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
-        authorId.value = data.author;
         
+        authorId.value = data.authorId; //게시글 작성자 id
         boardTitle.value = data.title || '제목 없음';
         boardContent.value = data.content || '';
         date.value = data.date || '';
@@ -262,7 +280,7 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
     }
 };
 
-// 댓글 목록 조회 (대댓글 포함)
+// 댓글 목록 조회
 const fetchComments = async (page  = 1) => {
     try {
         // 댓글
@@ -272,12 +290,15 @@ const fetchComments = async (page  = 1) => {
                 page
             }
         });
+
+        console.log(response.data.data)
         
         const commentsList = response.data.data.list.map(comment => ({
             commentId: comment.LOCCMTSEQ, // 댓글 ID
             boardId: comment.LOCBRDSEQ,
             parentId: comment.LOCCMTPNT, // 부모 ID
             author: comment.author || '익명',
+            authorId: comment.authorId,
             content: comment.LOCCMTRPY,
             likeCount: comment.likeCount || 0,
             dislikeCount: comment.dislikeCount || 0,
@@ -286,8 +307,6 @@ const fetchComments = async (page  = 1) => {
             createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
             createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
             children: [], // 대댓글을 담을 배열
-            // isCommentPassword: false, // 개별 댓글 비밀번호 입력 상태
-            // isEditTextarea: false // 개별 댓글 수정 상태
         }));
 
         for (const comment of commentsList) {
@@ -297,7 +316,7 @@ const fetchComments = async (page  = 1) => {
                 params: { LOCCMTPNT: comment.commentId }
             });
 
-            // console.log(`대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data);
+            console.log(`대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data);
 
             if (replyResponse.data.data) {
                 comment.children = replyResponse.data.data.map(reply => ({
@@ -343,21 +362,22 @@ const fetchComments = async (page  = 1) => {
         console.log('댓글 목록 불러오기 오류:', error);
     }
 };
-const isSubmitting = ref(false);
+// const isSubmitting = ref(false);
+
 // 댓글 작성
 const handleCommentSubmit = async ({ comment, password }) => {
-    // if (unknown.value && !password) {
-    //     passwordAlert.value = "익명 사용자는 비밀번호를 입력해야 합니다."; // UI에 메시지 표시
-    //     return;
-    // }
+    console.log('댓글')
+    //비밀번호 입력 안했을시
     // if (!password) {
-    //     passwordAlert.value = "비밀번호를 입력해야 합니다."; // UI에서 경고 표시
+    //     passwordAlert.value = "비밀번호를 입력해야 합니다.";
     //     return;
     // }
 
+    // console.log('비밀번호 눌렀음')
+
      // 중복 실행 방지
-    if (isSubmitting.value) return;
-    isSubmitting.value = true;
+    // if (isSubmitting.value) return;
+    // isSubmitting.value = true;
 
     try {
         const response = await axios.post(`board/${currentBoardId.value}/comment`, {
@@ -368,7 +388,7 @@ const handleCommentSubmit = async ({ comment, password }) => {
         });
 
         if (response.status === 200) {
-            // console.log('댓글 작성 성공:', response.data.message);
+            console.log('댓글 작성 성공:', response.data.message);
             await fetchComments();
         } else {
             console.log('댓글 작성 실패:', response.data.message);