From 99d89008ed6c49014df651a69cada0c61c6e1150 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 25 Feb 2025 10:04:41 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8C=93=EA=B8=80=EA=B3=BC=20=EB=8C=80?=
 =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EC=9D=B5=EB=AA=85=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue     |  13 +-
 src/components/board/BoardCommentArea.vue |  24 +--
 src/views/board/BoardView.vue             | 174 +++++++++++++++-------
 3 files changed, 138 insertions(+), 73 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 0dafc9a..4e82bb7 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -48,7 +48,7 @@
 
         <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
         <BoardCommentArea v-if="isComment" @submitComment="submitComment"/>
-        
+
         <!-- 대댓글 -->
         <ul v-if="comment.children && comment.children.length" class="list-unstyled">
             <li
@@ -56,12 +56,12 @@
             :key="child.commentId"
                 class="mt-8 pt-6 ps-10 border-top"
             >
-                <BoardComment 
+                <BoardComment
                     :comment="child"
                     :unknown="unknown"
-                    :isPlusButton="false" 
+                    :isPlusButton="false"
                     :isLike="true"
-                    @submitComment="submitComment" 
+                    @submitComment="submitComment"
                     @updateReaction="handleUpdateReaction"
                 />
             </li>
@@ -124,7 +124,8 @@ const toggleComment = () => {
 
 // 부모 컴포넌트에 대댓글 추가 요청
 const submitComment = (newComment) => {
-    emit('submitComment', { parentId: props.comment.commentId, ...newComment });
+    console.log(newComment)
+    emit('submitComment', { parentId: props.comment.commentId, ...newComment, LOCBRDTYP: newComment.LOCBRDTYP });
     isComment.value = false;
 };
 
@@ -141,7 +142,7 @@ const handleUpdateReaction = (reactionData) => {
 // 비밀번호 확인
 const logPasswordAndEmit = () => {
     emit('submitPassword', props.comment, password.value);
-    password.value = ""; 
+    password.value = "";
 };
 
 watch(() => props.comment.isEditTextarea, (newVal) => {
diff --git a/src/components/board/BoardCommentArea.vue b/src/components/board/BoardCommentArea.vue
index 30e9084..f1a4294 100644
--- a/src/components/board/BoardCommentArea.vue
+++ b/src/components/board/BoardCommentArea.vue
@@ -23,7 +23,7 @@
             <!-- 옵션 및 버튼 섹션 -->
             <div class="d-flex justify-content-between flex-wrap mt-4">
                 <div class="d-flex flex-wrap align-items-center">
-                    <!-- 익명 체크박스 (익명게시판일 경우에만)-->
+                    <!-- 익명 체크박스 (익명게시판일 경우에만) -->
                     <div v-if="unknown" class="form-check form-check-inline mb-0 me-4">
                         <input
                             class="form-check-input"
@@ -35,7 +35,7 @@
                     </div>
 
                     <!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
-                    <div v-if="isCheck" class="d-flex align-items-center flex-grow-1">
+                    <div v-if="unknown && isCheck" class="d-flex align-items-center flex-grow-1">
                         <label class="form-label mb-0 me-3" for="basic-default-password">비밀번호</label>
                         <input
                             type="password"
@@ -50,7 +50,6 @@
                 <!-- 답변 쓰기 버튼 -->
                 <div class="ms-auto mt-3 mt-md-0">
                     <button class="btn btn-primary" @click="handleCommentSubmit">
-                        <!-- <i class="icon-base bx bx-check"></i> -->
                         확인
                     </button>
                 </div>
@@ -60,7 +59,7 @@
 </template>
 
 <script setup>
-import { ref, defineEmits, defineProps, computed, watch } from 'vue';
+import { ref, defineEmits, defineProps } from 'vue';
 
 const props = defineProps({
     unknown: {
@@ -79,23 +78,24 @@ const props = defineProps({
 
 const comment = ref('');
 const password = ref('');
-const isCheck = ref(props.unknown);
-
+const isCheck = ref(false);
 const emit = defineEmits(['submitComment']);
 
-watch(() => props.unknown, (newVal) => {
-    isCheck.value = newVal;
-});
-
 function handleCommentSubmit() {
+    if (props.unknown && isCheck.value && !password.value) {
+        alert('익명 댓글을 작성하려면 비밀번호를 입력해야 합니다.');
+        return;
+    }
+    const LOCBRDTYP = isCheck.value ? '300102' : null;
     emit('submitComment', {
         comment: comment.value,
         password: isCheck.value ? password.value : '',
+        LOCBRDTYP,  // 익명일 경우 '300102' 설정
+        isCheck: isCheck.value
     });
 
     comment.value = '';
     password.value = '';
+    isCheck.value = false; // 초기화
 }
-
-
 </script>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index d2b37b4..c7a5dcc 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -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
@@ -78,11 +78,11 @@
                         </div>
                         <p>현재 로그인한 사용자 ID: {{ currentUserId }}</p>
                         <p>게시글 작성자: {{ authorId }}</p>
-                        <p>isAuthor 값: {{ isAuthor }}</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">
@@ -209,13 +209,13 @@ const fetchBoardDetails = async () => {
 
         // API 응답 데이터 반영
         // const boardDetail = data.boardDetail || {};
-        
+
         profileName.value = data.author;
-        
+
         // 익명확인하고 싶을때
         // profileName.value = '익명';
-        
-        
+
+
         authorId.value = data.authorId; //게시글 작성자 id
         boardTitle.value = data.title || '제목 없음';
         boardContent.value = data.content || '';
@@ -225,7 +225,7 @@ const fetchBoardDetails = async () => {
         dislikes.value = data.dislikeCount || 0;
         attachment.value = data.hasAttachment || null;
         commentNum.value = data.commentCount || 0;
-        
+
     } catch (error) {
         alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
     }
@@ -293,7 +293,7 @@ const fetchComments = async (page  = 1) => {
         });
 
         console.log(response.data.data)
-        
+
         const commentsList = response.data.data.list.map(comment => ({
             commentId: comment.LOCCMTSEQ, // 댓글 ID
             boardId: comment.LOCBRDSEQ,
@@ -366,26 +366,17 @@ const fetchComments = async (page  = 1) => {
 // const isSubmitting = ref(false);
 
 // 댓글 작성
-const handleCommentSubmit = async ({ comment, password }) => {
-    console.log('댓글')
-    //비밀번호 입력 안했을시
-    // if (!password) {
-    //     passwordAlert.value = "비밀번호를 입력해야 합니다.";
-    //     return;
-    // }
-
-    // console.log('비밀번호 눌렀음')
-
-     // 중복 실행 방지
-    // if (isSubmitting.value) return;
-    // isSubmitting.value = true;
+const handleCommentSubmit = async (data) => {
+    const { comment, password } = data;
+    const LOCBRDTYP = data.LOCBRDTYP || null; // undefined 방지
 
     try {
         const response = await axios.post(`board/${currentBoardId.value}/comment`, {
             LOCBRDSEQ: currentBoardId.value,
             LOCCMTRPY: comment,
             LOCCMTPWD: password,
-            LOCCMTPNT: 1
+            LOCCMTPNT: 1,
+            LOCBRDTYP // 익명 여부 전달
         });
 
         if (response.status === 200) {
@@ -399,48 +390,121 @@ const handleCommentSubmit = async ({ comment, password }) => {
     }
 };
 
+// const handleCommentSubmit = async ({ comment, password, LOCBRDTYP }) => {
+//     console.log('댓글')
+//     //비밀번호 입력 안했을시
+//     // if (!password) {
+//     //     passwordAlert.value = "비밀번호를 입력해야 합니다.";
+//     //     return;
+//     // }
+
+//     // console.log('비밀번호 눌렀음')
+
+//      // 중복 실행 방지
+//     // if (isSubmitting.value) return;
+//     // isSubmitting.value = true;
+
+//     try {
+//         // const response = await axios.post(`board/${currentBoardId.value}/comment`, {
+//         //     LOCBRDSEQ: currentBoardId.value,
+//         //     LOCCMTRPY: comment,
+//         //     LOCCMTPWD: password,
+//         //     LOCCMTPNT: 1
+//         // });
+
+//         if (response.status === 200) {
+//             console.log('댓글 작성 성공:', response.data.message);
+//             await fetchComments();
+//         } else {
+//             console.log('댓글 작성 실패:', response.data.message);
+//         }
+//     } catch (error) {
+//         console.log('댓글 작성 중 오류 발생:', error);
+//     }
+// };
+
 
 // 대댓글 추가 (부모 `BoardCommentList`로부터 이벤트 받아서 처리)
 const handleCommentReply = async (reply) => {
     try {
-        // console.log('대댓글 작성 요청 데이터:', {
-        //     LOCBRDSEQ: currentBoardId.value,
-        //     LOCCMTRPY: reply.comment,
-        //     LOCCMTPWD: reply.password || null,
-        //     LOCCMTPNT: reply.parentId
-        // });
+        // 익명 여부 체크 (체크박스가 체크되었을 경우 LOCBRDTYP을 300102로 설정)
 
-        const response = await axios.post(`board/${currentBoardId.value}/comment`, {
+        const requestBody = {
             LOCBRDSEQ: currentBoardId.value,
             LOCCMTRPY: reply.comment,
             LOCCMTPWD: reply.password || null,
-            LOCCMTPNT: reply.parentId
-        });
-
-        // 응답 데이터를 자세히 로그로 확인
-        // console.log('대댓글 작성 응답:', {
-        //     status: response.status,
-        //     data: response.data,
-        //     headers: response.headers
-        // });
+            LOCCMTPNT: reply.parentId,
+            LOCBRDTYP: reply.isCheck ? "300102" : null
+        };
+        console.log(requestBody)
+        const response = await axios.post(`board/${currentBoardId.value}/comment`, requestBody);
 
         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('대댓글 작성에 실패했습니다.');
             }
         }
     } catch (error) {
-        console.error('대댓글 작성 중 오류 발생:', error);
+        console.error('🚨 대댓글 작성 중 오류 발생:', error);
         if (error.response) {
-            console.error('서버 응답 에러:', error.response.data);
+            console.error('📌 서버 응답 에러:', error.response.data);
         }
-        alert('대댓글 작성 중 오류가 발생했습니다.');
+        alert('❌ 대댓글 작성 중 오류가 발생했습니다.');
     }
-}
+};
+
+// 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,
+//         //     LOCCMTPWD: reply.password || null,
+//         //     LOCCMTPNT: reply.parentId
+//         // });
+//         const requestBody = {
+//             LOCBRDSEQ: currentBoardId.value,
+//             LOCCMTRPY: reply.comment,
+//             LOCCMTPWD: reply.password || null,
+//             LOCCMTPNT: reply.parentId,
+//             LOCBRDTYP
+//         };
+
+//         // 응답 데이터를 자세히 로그로 확인
+//         // console.log('대댓글 작성 응답:', {
+//         //     status: response.status,
+//         //     data: response.data,
+//         //     headers: response.headers
+//         // });
+
+//         const response = await axios.post(`board/${currentBoardId.value}/comment`, requestBody);
+//         if (response.status === 200) {
+//             if (response.data.code === 200) {  // 서버 응답 코드도 확인
+//                 console.log('대댓글 작성 성공:', response.data);
+//                 await fetchComments();  // 댓글 목록 새로고침
+//             } else {
+//                 console.log('대댓글 작성 실패 - 서버 응답:', response.data);
+//                 alert('대댓글 작성에 실패했습니다.');
+//             }
+//         }
+//     } catch (error) {
+//         console.error('대댓글 작성 중 오류 발생:', error);
+//         if (error.response) {
+//             console.error('서버 응답 에러:', error.response.data);
+//         }
+//         alert('대댓글 작성 중 오류가 발생했습니다.');
+//     }
+// }
 
 // 게시글 수정 버튼 클릭
 const editClick = (unknown) => {
@@ -463,7 +527,7 @@ const deleteClick = (unknown) => {
 // 댓글 수정 버튼 클릭
 const editComment = (comment) => {
     const targetComment = comments.value.find(c => c.commentId === comment.commentId);
-    
+
     if (!targetComment) {
         return;
     }
@@ -571,7 +635,7 @@ const submitPassword = async () => {
 
 // 댓글 삭제 (비밀번호 확인 후)
 const submitCommentPassword = async (comment, password) => {
-    
+
     if (!password) {
         passwordCommentAlert.value = "비밀번호를 입력해주세요.";
         return;
@@ -586,12 +650,12 @@ const submitCommentPassword = async (comment, password) => {
         if (response.data.code === 200 && response.data.data === true) {
             passwordCommentAlert.value = "";
             comment.isCommentPassword = false;
-            
+
             if (lastCommentClickedButton.value === "edit") {
                 comment.isEditTextarea = true;
                 passwordCommentAlert.value = "";
-                
-                // handleSubmitEdit(comment, comment.content);  
+
+                // handleSubmitEdit(comment, comment.content);
             } else if (lastCommentClickedButton.value === "delete") {
                 passwordCommentAlert.value = "";
 
@@ -644,7 +708,7 @@ const deleteReplyComment = async (comment) => {
 
         if (response.data.code === 200) {
             // console.log("댓글 삭제 성공!");
-            await fetchComments(); 
+            await fetchComments();
         } else {
             // console.log("댓글 삭제 실패:", response.data.message);
             alert("댓글 삭제에 실패했습니다.");
@@ -665,7 +729,7 @@ const handleSubmitEdit = async (comment, editedContent) => {
 
         // 수정 성공 시 업데이트
         // comment.content = editedContent;
-        // comment.isEditTextarea = false; 
+        // comment.isEditTextarea = false;
         if (response.status === 200) {
             // 댓글 목록 새로고침
             await fetchComments();