From 8d2799e0a149c097bcc53932b00c7bedab73ed05 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Fri, 21 Feb 2025 11:54:54 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EC=99=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue     |  46 ++------
 src/components/board/BoardCommentList.vue |  10 +-
 src/components/board/BoardProfile.vue     |   5 -
 src/views/board/BoardView.vue             | 124 ++++++++--------------
 4 files changed, 56 insertions(+), 129 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index e0d8618..4f635d4 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -34,7 +34,7 @@
                 <textarea v-model="localEditedContent" class="form-control"></textarea>
                 <div class="mt-2 d-flex justify-content-end">
                     <button class="btn btn-secondary me-2" @click="$emit('cancelEdit', comment)">취소</button>
-                    <button class="btn btn-primary" @click="$emit('submitEdit', comment, editedContent)">수정</button>
+                    <button class="btn btn-primary" @click="submitEdit">수정</button>
                 </div>
             </template>
             <template v-else>
@@ -88,10 +88,6 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
-    editedContent: { 
-        type: String, 
-        default: "" 
-    },
     isEditTextarea: {
         type: Boolean,
         default: false
@@ -109,8 +105,8 @@ const props = defineProps({
 // emits 정의
 const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit']);
 
-// const password = ref('');
-const localEditedContent = ref(props.editedContent);
+const password = ref('');
+const localEditedContent = ref(props.comment.content);
 
 // 댓글 입력 창 토글
 const isComment = ref(false);
@@ -118,26 +114,9 @@ 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 });
-    
     isComment.value = false;
 };
 
@@ -151,27 +130,20 @@ const handleUpdateReaction = (reactionData) => {
 
 };
 
-
 // 비밀번호 확인
 const logPasswordAndEmit = () => {
-    // console.log("BoardComment.vue - 비밀번호 입력값:", password.value);
     emit('submitPassword', props.comment, password.value);
 };
 
-
-watch(() => props.editedContent, (newValue) => {
-    localEditedContent.value = newValue;
+watch(() => props.comment.isEditTextarea, (newVal) => {
+    if (newVal) {
+        localEditedContent.value = props.comment.content;
+    }
 });
-// 댓글 수정 취소
-// const cancelEdit = () => {
-//     isEditTextarea.value = false;
-// };
 
-// 댓글 수정 내용 저장
+// 수정버튼
 const submitEdit = () => {
-    emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
-    isEditTextarea.value = false; // 수정 모드 종료
+    emit('submitEdit', props.comment, localEditedContent.value);
 };
 
-
 </script>
diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue
index 7f3e467..d464529 100644
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@@ -16,7 +16,7 @@
                 @submitPassword="submitPassword"
                 @submitComment="submitComment"
                 @commentDeleted="handleCommentDeleted"
-                @submitEdit="$emit('submitEdit', comment, editedContent)"
+                @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
                 @cancelEdit="$emit('cancelEdit', comment)"
                 @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
             />
@@ -52,7 +52,7 @@ const props = defineProps({
     }
 });
 
-const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'submitPassword']);
+const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'submitPassword', 'clearPassword']);
 
 const submitComment = (replyData) => {
     emit('submitComment', replyData);
@@ -68,13 +68,7 @@ const handleUpdateReaction = (reactionData, commentId, boardId) => {
     emit('updateReaction', updatedReactionData);
 }
 
-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/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 6cbb573..69c1668 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -107,11 +107,6 @@ const deleteClick = () => {
 };
 
 const handleUpdateReaction = (reactionData) => {
-    // console.log("🔥 BoardProfile에서 좋아요/싫어요 이벤트 발생");
-    // console.log("📌 게시글 ID:", props.boardId);
-    // console.log("📌 댓글 ID (수정 후):", props.comment?.commentId);
-    // console.log("📌 reactionData:", reactionData);
-
     emit("updateReaction", {
         boardId: props.boardId,
         commentId:  props.comment?.commentId,
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index b9b8173..3614d4c 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -253,7 +253,7 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
             LOCGOBBAD: isDislike ? 'T' : 'F'
         });
 
-        console.log("댓글 좋아요 API 응답 데이터:", response.data);
+        // console.log("댓글 좋아요 API 응답 데이터:", response.data);
 
         // 좋아요/싫어요 상태 업데이트를 위해 새로 불러오기
         await fetchComments();
@@ -337,14 +337,14 @@ const fetchComments = async (page  = 1) => {
             navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
         };
 
-        console.log("📌 댓글 목록:", comments.value);
+        // console.log("📌 댓글 목록:", comments.value);
 
 
     } catch (error) {
         console.log('댓글 목록 불러오기 오류:', error);
     }
 };
-
+const isSubmitting = ref(false);
 // 댓글 작성
 const handleCommentSubmit = async ({ comment, password }) => {
     // if (unknown.value && !password) {
@@ -356,22 +356,24 @@ const handleCommentSubmit = async ({ comment, password }) => {
     //     return;
     // }
 
+     // 중복 실행 방지
+    if (isSubmitting.value) return;
+    isSubmitting.value = true;
 
-    try {        
-        const response = await axios.post(`board/${currentBoardId.value}/comment`, {
+    try {
+        await axios.post(`board/${currentBoardId.value}/comment`, {
             LOCBRDSEQ: currentBoardId.value,
             LOCCMTRPY: comment,
             LOCCMTPWD: password,
             LOCCMTPNT: 1
         });
-        // console.log('서버 응답 전체1212121212:', response.data);
 
-        if (response.status === 200) {
-            console.log('댓글 작성 성공:', response.data.message);
-            await fetchComments();
-        } else {
-            console.log('댓글 작성 실패:', response.data.message);
-        }
+        // if (response.status === 200) {
+        //     console.log('댓글 작성 성공:', response.data.message);
+        //     await fetchComments();
+        // } else {
+        //     console.log('댓글 작성 실패:', response.data.message);
+        // }
     } catch (error) {
         console.log('댓글 작성 중 오류 발생:', error);
     }
@@ -381,13 +383,6 @@ const handleCommentSubmit = async ({ comment, password }) => {
 // 대댓글 작성
 const handleCommentReply = async (reply) => {
     try {
-        console.log('대댓글 작성 요청 데이터:', {
-            LOCBRDSEQ: currentBoardId.value,
-            LOCCMTRPY: reply.comment,
-            LOCCMTPWD: reply.password || null,
-            LOCCMTPNT: reply.parentId
-        });
-
         const response = await axios.post(`board/${currentBoardId.value}/comment`, {
             LOCBRDSEQ: currentBoardId.value,
             LOCCMTRPY: reply.comment,
@@ -395,19 +390,12 @@ const handleCommentReply = async (reply) => {
             LOCCMTPNT: reply.parentId
         });
 
-        // 응답 데이터를 자세히 로그로 확인
-        console.log('대댓글 작성 응답:', {
-            status: response.status,
-            data: response.data,
-            headers: response.headers
-        });
-
         if (response.status === 200) {
-            if (response.data.code === 200) {  // 서버 응답 코드도 확인
-                console.log('대댓글 작성 성공:', response.data);
-                await fetchComments();  // 댓글 목록 새로고침
+            if (response.data.code === 200) {
+                // console.log('대댓글 작성 성공:', response.data);
+                await fetchComments();
             } else {
-                console.log('대댓글 작성 실패 - 서버 응답:', response.data);
+                // console.log('대댓글 작성 실패 - 서버 응답:', response.data);
                 alert('대댓글 작성에 실패했습니다.');
             }
         }
@@ -496,7 +484,6 @@ const submitPassword = async () => {
         passwordAlert.value = "비밀번호를 입력해주세요.";
         return;
     }
-
     // console.log("📌 요청 시작: submitPassword 실행됨");
 
     try {
@@ -537,31 +524,29 @@ 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;
-            comment.isEditTextarea.value = true;
+            // password = ''; 
+            comment.isCommentPassword = false;
+            
+            if (lastCommentClickedButton.value === "edit") {
+                comment.isEditTextarea = true;
+                // handleSubmitEdit(comment, comment.content);  
+            } else if (lastCommentClickedButton.value === "delete") {
+
+                deleteReplyComment(comment)
+            }
+            lastCommentClickedButton.value = null;
         } else {
             passwordAlert.value = "비밀번호가 일치하지 않습니다.";
         }
@@ -595,47 +580,33 @@ const deletePost = async () => {
 };
 
 // 댓글 삭제
-// const deleteComment = async () => {
-//     if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
+const deleteReplyComment = async (comment) => {
+    if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
 
-//     try {
-//         console.log("댓글 삭제 요청 시작:");
-//         console.log("댓글 ID:", props.comment.commentId);
-//         console.log("게시글 ID:", props.comment.boardId);
-//         console.log("비밀번호 포함 여부:", props.unknown ? "예 (익명 사용자)" : "아니오 (로그인 사용자)");
+    try {
+        const response = await axios.delete(`board/comment/${comment.commentId}`, {
+            data: { LOCCMTSEQ: comment.commentId }
+        });
 
-//         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("댓글 삭제 중 오류가 발생했습니다.");
-//     }
-// };
+        if (response.data.code === 200) {
+            await fetchComments(); 
+        } else {
+            alert("댓글 삭제에 실패했습니다.");
+        }
+    } catch (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`, {
+        const response = await axios.put(`board/comment/${comment.commentId}`, {
             LOCCMTSEQ: comment.commentId,
             LOCCMTRPY: editedContent
         });
@@ -648,11 +619,6 @@ const handleSubmitEdit = async (comment, editedContent) => {
     }
 };
 
-// const submitEdit = () => {
-//     emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
-//     isEditTextarea.value = false; // 수정 모드 종료
-// };
-
 // 페이지 변경
 const handlePageChange = (page) => {
     if (page !== pagination.value.currentPage) {