From 62361b7ae92372f16ba8d7ea2391486487281fd8 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Fri, 21 Feb 2025 03:50:17 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EB=B9=84=EB=B0=80?=
 =?UTF-8?q?=EB=B2=88=ED=98=B8=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     | 158 +++++----------------
 src/components/board/BoardCommentList.vue |  24 +++-
 src/views/board/BoardView.vue             | 160 +++++++++++++++++++++-
 3 files changed, 210 insertions(+), 132 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index c072bbe..242b311 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -9,15 +9,13 @@
             :showDetail="false"
             :author="true"
             :isLike="!isLike"
-            :isPassword="isPassword"
-            @editClick="editClick"
-            @deleteClick="deleteClick"
-            @submitPassword="submitPassword"
+            :isCommentPassword="comment.isCommentPassword"
+            @editClick="$emit('editClick', comment)"
+            @deleteClick="$emit('deleteClick', comment)"
             @updateReaction="handleUpdateReaction"
-            @toggleEdit="toggleEdit(true)"
         />
         <!-- 댓글 비밀번호 입력창 (익명일 경우) -->
-        <div v-if="isPassword && unknown" class="mt-3 w-25 ms-auto">
+        <div v-if="isCommentPassword && unknown" class="mt-3 w-25 ms-auto">
             <div class="input-group">
                 <input
                     type="password"
@@ -25,18 +23,18 @@
                     v-model="password"
                     placeholder="비밀번호 입력"
                 />
-                <button class="btn btn-primary" @click="submitPassword">확인</button>
+                <button class="btn btn-primary" @click="logPasswordAndEmit">확인</button>
             </div>
             <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
         </div>
         
 
         <div class="mt-6">
-            <template v-if="isEditTextarea">
+            <template v-if="comment.isEditTextarea">
                 <textarea v-model="editedContent" class="form-control"></textarea>
                 <div class="mt-2 d-flex justify-content-end">
-                    <button class="btn btn-secondary me-2" @click="cancelEdit">취소</button>
-                    <button class="btn btn-primary" @click="submitEdit">수정</button>
+                    <button class="btn btn-secondary me-2" @click="$emit('cancelEdit', comment)">취소</button>
+                    <button class="btn btn-primary" @click="$emit('submitEdit', comment, editedContent)">수정</button>
                 </div>
             </template>
             <template v-else>
@@ -68,8 +66,7 @@
 </template>
 
 <script setup>
-import axios from '@api';
-import { defineProps, defineEmits, ref } from 'vue';
+import { defineProps, defineEmits, ref, computed, watch } from 'vue';
 import BoardProfile from './BoardProfile.vue';
 import BoardCommentArea from './BoardCommentArea.vue';
 import PlusButton from '../button/PlusBtn.vue';
@@ -91,18 +88,29 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    editedContent: { 
+        type: String, 
+        default: "" 
+    },
     isEditTextarea: {
         type: Boolean,
         default: false
     },
-    isPassword: {
+    isCommentPassword: {
         type: Boolean,
         default: false,
     },
+    passwordAlert: {
+        type: String,
+        default: false
+    }
 });
 
 // emits 정의
-const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit',]);
+const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit']);
+
+const password = ref('');
+
 
 // 댓글 입력 창 토글
 const isComment = ref(false);
@@ -110,22 +118,6 @@ const toggleComment = () => {
     isComment.value = !isComment.value;
 };
 
-// 비밀번호 & 수정 모드 관련 상태
-const password = ref('');
-const passwordAlert = ref('');
-const isPassword = ref(false);
-const isEditTextarea = ref(false);
-const lastClickedButton = ref("");
-
-const toggleEdit = (status) => {
-    if (props.unknown) {
-        isPassword.value = status; // 익명 사용자면 비밀번호 입력창 표시
-        lastClickedButton.value = "edit";
-    } else {
-        isEditTextarea.value = status; // 비밀번호가 필요 없으면 바로 수정 모드
-    }
-};
-
 // 부모 컴포넌트에 대댓글 추가 요청
 const submitComment = (newComment) => {
     emit('submitComment', { parentId: props.comment.commentId, ...newComment });
@@ -143,103 +135,23 @@ const handleUpdateReaction = (reactionData) => {
 
 };
 
-// 댓글 수정 버튼 클릭
-const editClick = () => {
-    if (props.unknown) {
-        console.log('수정')
-        togglePassword("edit");
-    }
+
+// 비밀번호 확인
+const logPasswordAndEmit = () => {
+    // console.log("BoardComment.vue - 비밀번호 입력값:", password.value);
+    emit('submitPassword', props.comment, password.value);
 };
 
-const deleteClick = () => {
-    if (props.unknown) {
-        console.log('삭제')
-        togglePassword("delete");
-    }
-};
+// 댓글 수정 취소
+// const cancelEdit = () => {
+//     isEditTextarea.value = false;
+// };
 
-const togglePassword = (button) => {
-    if (lastClickedButton.value === button) {
-        isPassword.value = !isPassword.value;
-    } else {
-        isPassword.value = true;
-    }
-    lastClickedButton.value = button;
-};
-
-// const deleteComment = async () => {
-//     if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
-
-//     try {
-//         console.log("댓글 삭제 요청 시작:");
-//         console.log("댓글 ID:", props.comment.commentId);
-//         console.log("게시글 ID:", props.comment.boardId);
-//         console.log("비밀번호 포함 여부:", props.unknown ? "예 (익명 사용자)" : "아니오 (로그인 사용자)");
-
-//         const response = await axios.delete(`board/${props.comment.commentId}`, {
-//             data: { LOCCMTSEQ: props.comment.commentId }
-//         });
-
-//         console.log("📌 서버 응답:", response.data);
-
-//         if (response.data.code === 200) {
-//             console.log("댓글 삭제 성공!");
-//             // emit("commentDeleted", props.comment.commentId);
-//         } else {
-//             console.log("❌ 댓글 삭제 실패:", response.data.message);
-//             // alert("댓글 삭제에 실패했습니다.");
-//         }
-//     } catch (error) {
-//         console.log("🚨 댓글 삭제 중 오류 발생:", error);
-//         alert("댓글 삭제 중 오류가 발생했습니다.");
-//     }
+// 댓글 수정 내용 저장
+// const submitEdit = () => {
+//     emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
+//     isEditTextarea.value = false; // 수정 모드 종료
 // };
 
 
-// 비밀번호 제출
-const submitPassword = async () => {
-    if (!password.value) {
-        passwordAlert.value = "비밀번호를 입력해주세요.";
-        return;
-    }
-
-    console.log(props.comment.commentId)
-
-    try {
-        const response = await axios.post(`board/${props.comment.commentId}/password`, {
-            LOCCMTPWD: password.value,
-            LOCCMTSEQ: 288,
-        });
-
-        console.log("응답!!!!!!!!", response);  // 서버 응답 전체 확인
-        console.log("응답 데이터:", response.data);
-
-        if (response.data.code === 200 && response.data.data === true) {
-            console.log('되는거니')
-        //     deleteComment()
-        //     // password.value = ''; 
-        //     // isPassword.value = false;
-        //     // isEditTextarea.value = true;
-        } else {
-            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
-        }
-    } catch (error) {
-        passwordAlert.value = "비밀번호 검증 중 오류가 발생했습니다.";
-    }
-};
-
-const editedContent = ref(props.comment.content);
-
-// 댓글 수정 취소
-const cancelEdit = () => {
-    isEditTextarea.value = false;
-};
-
-// 댓글 수정 내용 저장
-const submitEdit = () => {
-    emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
-    isEditTextarea.value = false; // 수정 모드 종료
-};
-
-
 </script>
diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue
index 6d39c2a..7f3e467 100644
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@@ -8,13 +8,16 @@
             <BoardComment
                 :unknown="unknown"
                 :comment="comment"
-                :isPassword="isPassword"
-                :isEditTextarea="isEditTextarea"
-                @editClick="editClick"
-                @deleteClick="deleteClick"
+                :isCommentPassword="comment.isCommentPassword" 
+                :isEditTextarea="comment.isEditTextarea"
+                :passwordAlert="passwordAlert"
+                @editClick="$emit('editClick', comment)"
+                @deleteClick="$emit('deleteClick', comment)"
                 @submitPassword="submitPassword"
                 @submitComment="submitComment"
                 @commentDeleted="handleCommentDeleted"
+                @submitEdit="$emit('submitEdit', comment, editedContent)"
+                @cancelEdit="$emit('cancelEdit', comment)"
                 @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
             />
         </li>
@@ -35,17 +38,21 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
-    isPassword: {
+    isCommentPassword: {
         type: Boolean,
         default: false,
     },
     isEditTextarea: {
         type: Boolean,
         default: false,
+    },
+    passwordAlert: {
+        type: String,
+        default: false
     }
 });
 
-const emit = defineEmits(['submitComment', 'updateReaction', 'editClick']);
+const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'submitPassword']);
 
 const submitComment = (replyData) => {
     emit('submitComment', replyData);
@@ -65,4 +72,9 @@ const editClick = (data) => {
     emit('editClick', data);
 };
 
+const submitPassword = (comment, password) => {
+    // console.log("BoardCommentList.vue - 전달된 비밀번호:", password, "댓글 정보:", comment);
+    emit('submitPassword', comment, password);
+};
+
 </script>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 5905b9d..76bb9a9 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -98,9 +98,17 @@
                         <BoardCommentList
                             :unknown="unknown"
                             :comments="comments"
+                            :isCommentPassword="isCommentPassword"
+                            :isEditTextarea="isEditTextarea"
+                            :passwordAlert="passwordAlert"
+                            @editClick="editComment"
+                            @deleteClick="deleteComment"
                             @updateReaction="handleCommentReaction"
                             @submitComment="handleCommentReply"
+                            @submitPassword="submitCommentPassword"
                             @commentDeleted="handleCommentDeleted"
+                            @cancelEdit="handleCancelEdit"
+                            @submitEdit="handleSubmitEdit"
                         />
                         <Pagination
                             v-if="pagination.pages"
@@ -150,8 +158,12 @@ const isAuthor = computed(() => currentUserId.value === authorId.value);
 
 const password = ref('');
 const passwordAlert = ref("");
+const passwordCommentAlert = ref("");
 const isPassword = ref(false);
+const isCommentPassword = ref(false);
 const lastClickedButton = ref("");
+const lastCommentClickedButton = ref("");
+const isEditTextarea = ref(false);
 
 const pagination = ref({
     currentPage: 1,
@@ -274,7 +286,9 @@ const fetchComments = async (page  = 1) => {
             dislikeClicked: comment.dislikeClicked || false,
             createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
             createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
-            children: [] // 대댓글을 담을 배열
+            children: [], // 대댓글을 담을 배열
+            // isCommentPassword: false, // 개별 댓글 비밀번호 입력 상태
+            // isEditTextarea: false // 개별 댓글 수정 상태
         }));
 
         for (const comment of commentsList) {
@@ -406,6 +420,7 @@ const handleCommentReply = async (reply) => {
     }
 }
 
+// 게시글 수정 버튼 클릭
 const editClick = (unknown) => {
     if (unknown) {
         togglePassword("edit");
@@ -414,6 +429,7 @@ const editClick = (unknown) => {
     }
 };
 
+// 게시글 삭제 버튼 클릭
 const deleteClick = (unknown) => {
     if (unknown) {
         togglePassword("delete");
@@ -422,6 +438,49 @@ const deleteClick = (unknown) => {
     }
 };
 
+// 댓글 수정 버튼 클릭
+const editComment = (comment) => {
+    if (unknown.value) {
+        toggleCommentPassword(comment, "edit");
+    } else {
+        comment.isEditTextarea = true;
+    }
+
+    // comments.value.forEach(c => {
+    //     c.isEditTextarea = false;
+    //     c.isCommentPassword = false;
+    // });
+
+    // if (comment.unknown) {  
+    //     comment.isCommentPassword = true;
+    // } else {
+    //     comment.isEditTextarea = true;
+    // }
+}
+
+// 댓글 삭제 버튼 클릭
+const deleteComment = (comment) => {
+    if (unknown.value) {
+        toggleCommentPassword(comment, "delete");
+    } else {
+        comments.value = comments.value.filter(c => c.commentId !== comment.commentId);
+    }
+};
+
+const toggleCommentPassword = (comment, button) => {
+    if (lastCommentClickedButton.value === button && comment.isCommentPassword) {
+        comment.isCommentPassword = false;
+    } else {
+        // 모든 댓글의 비밀번호 입력창 닫기
+        comments.value.forEach(c => (c.isCommentPassword = false));
+
+        // 현재 선택된 댓글만 비밀번호 입력창 열기
+        comment.isCommentPassword = true;
+    }
+
+    lastCommentClickedButton.value = button;
+};
+
 const togglePassword = (button) => {
     if (lastClickedButton.value === button) {
         isPassword.value = !isPassword.value;
@@ -431,7 +490,7 @@ const togglePassword = (button) => {
     lastClickedButton.value = button;
 };
 
-
+// 게시글 비밀번호 제출
 const submitPassword = async () => {
     if (!password.value) {
         passwordAlert.value = "비밀번호를 입력해주세요.";
@@ -457,7 +516,7 @@ const submitPassword = async () => {
             }
             lastClickedButton.value = null;
         } else {
-            passwordAlert.value = "비밀번호가 일치하지 않습니다.????";
+            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
         }
     } catch (error) {
         // console.log("📌 전체 오류:", error);
@@ -476,6 +535,42 @@ const submitPassword = async () => {
     }
 };
 
+// 댓글 비밀번호 제출
+const submitCommentPassword = async (comment, password) => {
+    console.log("BoardView.vue - 최종 비밀번호 전달 확인:", password, "댓글 정보:", comment);
+    if (!password) {
+        passwordAlert.value = "비밀번호를 입력해주세요.";
+        return;
+    }
+
+    console.log('코멘트아이디:', comment.commentId, '비번:', password)
+    comment.isEditTextarea = true;
+
+    //비밀번호 확인 안됨
+    try {
+        const response = await axios.post(`board/comment/${comment.commentId}/password`, {
+            LOCCMTPWD: password,
+            LOCCMTSEQ: comment.commentId,
+        });
+
+        console.log("응답!!!!!!!!", response);  // 서버 응답 전체 확인
+        console.log("응답 데이터:", response.data);
+
+        if (response.data.code === 200 && response.data.data === true) {
+            console.log('되는거니')
+        //     deleteComment()
+        //     // password.value = ''; 
+        //     // isPassword.value = false;
+        //     // isEditTextarea.value = true;
+        } else {
+            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+        }
+    } catch (error) {
+        passwordAlert.value = "비밀번호 검증 중 오류가 발생했습니다.";
+    }
+};
+
+// 게시글 삭제
 const deletePost = async () => {
     if (confirm("정말 삭제하시겠습니까?")) {
         try {
@@ -499,6 +594,65 @@ const deletePost = async () => {
     }
 };
 
+// 댓글 삭제
+// const deleteComment = async () => {
+//     if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
+
+//     try {
+//         console.log("댓글 삭제 요청 시작:");
+//         console.log("댓글 ID:", props.comment.commentId);
+//         console.log("게시글 ID:", props.comment.boardId);
+//         console.log("비밀번호 포함 여부:", props.unknown ? "예 (익명 사용자)" : "아니오 (로그인 사용자)");
+
+//         const response = await axios.delete(`board/${props.comment.commentId}`, {
+//             data: { LOCCMTSEQ: props.comment.commentId }
+//         });
+
+//         console.log("📌 서버 응답:", response.data);
+
+//         if (response.data.code === 200) {
+//             console.log("댓글 삭제 성공!");
+//             // emit("commentDeleted", props.comment.commentId);
+//         } else {
+//             console.log("❌ 댓글 삭제 실패:", response.data.message);
+//             // alert("댓글 삭제에 실패했습니다.");
+//         }
+//     } catch (error) {
+//         console.log("🚨 댓글 삭제 중 오류 발생:", error);
+//         alert("댓글 삭제 중 오류가 발생했습니다.");
+//     }
+// };
+
+// 댓글 수정 취소
+const handleCancelEdit = (comment) => {
+    console.log("BoardView.vue - 댓글 수정 취소:", comment);
+    comment.isEditTextarea = false;
+};
+
+// 댓글 수정 확인
+const handleSubmitEdit = async (comment, editedContent) => {
+    console.log("BoardView.vue - 댓글 수정:", comment, "수정된 내용:", editedContent);
+    // editedContent = ref(props.comment.content)
+
+    try {
+        await axios.put(`board/comment/${comment.commentId}/edit`, {
+            LOCCMTSEQ: comment.commentId,
+            LOCCMTRPY: editedContent
+        });
+
+        // 수정 성공 시 업데이트
+        comment.content = editedContent;
+        comment.isEditTextarea = false; 
+    } catch (error) {
+        console.error("댓글 수정 중 오류 발생:", error);
+    }
+};
+
+// const submitEdit = () => {
+//     emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
+//     isEditTextarea.value = false; // 수정 모드 종료
+// };
+
 // 페이지 변경
 const handlePageChange = (page) => {
     if (page !== pagination.value.currentPage) {