보드 원복복

src/components/board/BoardComment.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <BoardProfile
-            :unknown="unknown"
+            :unknown="comment.author === '익명'"
             :isCommentAuthor="isCommentAuthor"
             :boardId="comment.boardId"
             :profileName="comment.author"
@@ -11,7 +11,7 @@
             :isLike="!isLike"
             :isCommentPassword="comment.isCommentPassword"
             :isCommentProfile="true"
-            @editClick="$emit('editClick', comment)"
+            @editClick="aaaa"
             @deleteClick="$emit('deleteClick', comment)"
             @updateReaction="handleUpdateReaction"
             />
@@ -29,8 +29,8 @@
             </div>
             <span v-if="passwordCommentAlert" class="invalid-feedback d-block text-start">{{ passwordCommentAlert }}</span>
         </div>
-        <p>authorId:{{ comment.authorId }}</p>
+        <!-- <p>authorId:{{ comment.authorId }}</p>
-        <p>코멘트 비교: {{comment.isCommentAuthor}}</p>
+        <p>코멘트 비교: {{comment.isCommentAuthor}}</p> -->
 
 
         <div class="mt-6">
@@ -47,20 +47,29 @@
         </div>
 
         <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
-        <BoardCommentArea v-if="isComment" @submitComment="submitComment"/>
+        <BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment"/>
 
         <!-- 대댓글 -->
         <ul v-if="comment.children && comment.children.length" class="list-unstyled">
             <li
-            v-for="child in comment.children"
+                v-for="child in comment.children"
-            :key="child.commentId"
+                :key="child.commentId"
                 class="mt-8 pt-6 ps-10 border-top"
             >
+            <!-- <p>대댓글 데이터(JSON): {{ JSON.stringify(child, null, 2) }}</p> -->
+            <!-- <p>comment child: {{ comment.children }}</p> -->
+            <!-- :unknown="child.author === '익명'" -->
                 <BoardComment
                     :comment="child"
-                    :unknown="unknown"
+                    :unknown="child.author === '익명'"
                     :isPlusButton="false"
                     :isLike="true"
+                    :isCommentProfile="true"
+                    :isCommentAuthor="child.isCommentAuthor"
+                    @editClick="$emit('editClick', $event)"
+                    @deleteClick="$emit('deleteClick', child)"
+                    @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
+                    @cancelEdit="$emit('cancelEdit', child)"
                     @submitComment="submitComment"
                     @updateReaction="handleUpdateReaction"
                 />
@@ -155,4 +164,8 @@ const submitEdit = () => {
     emit('submitEdit', props.comment, localEditedContent.value);
 };
 
+const aaaa = () => {
+    emit('editClick', props.comment);
+}
+
 </script>

src/components/board/BoardCommentArea.vue

@@ -17,6 +17,7 @@
                         rows="3"
                         v-model="comment"
                     ></textarea>
+                    <span v-if="commentAlert" class="invalid-feedback d-block text-start ms-2">{{ commentAlert }}</span>
                 </div>
             </div>
 
@@ -42,6 +43,7 @@
                             id="basic-default-password"
                             class="form-control flex-grow-1"
                             v-model="password"
+                            placeholder="비밀번호 입력"
                         />
                         <span v-if="passwordAlert" class="invalid-feedback d-block text-start ms-2">{{ passwordAlert }}</span>
                     </div>
@@ -74,28 +76,35 @@ const props = defineProps({
     passwordAlert: {
         type: String,
         default: false
+    },
+    commentAlert: {
+        type: String,
+        default: false
     }
 });
+
 const comment = ref('');
 const password = ref('');
-const isCheck = ref(false);
+const isCheck = ref(props.unknown);
-const emit = defineEmits(['submitComment']);
 
+const emit = defineEmits(['submitComment']);
+const LOCBRDTYP = isCheck.value ? '300102' : null;
 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,
+        isCheck: isCheck.value,
+        LOCBRDTYP,  // 익명일 경우 '300102' 설정
         isCheck: isCheck.value
     });
-
-    comment.value = '';
-    password.value = '';
-    isCheck.value = false; // 초기화
 }
+
+watch(() => props.passwordAlert, () => {
+    if (!props.passwordAlert) {
+        comment.value = '';
+        password.value = '';
+    }
+});
+
+
 </script>

src/views/board/BoardView.vue

@@ -140,7 +140,6 @@ import { ref, onMounted, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useUserInfoStore } from '@/stores/useUserInfoStore';
 import axios from '@api';
-import { formattedDate } from '@/common/formattedDate.js';
 
 // 게시물 데이터 상태
 const profileName = ref('');
@@ -376,63 +375,77 @@ const fetchComments = async (page  = 1) => {
 };
 
 // 댓글 작성
-const handleCommentSubmit = async (data) => {
+const handleCommentSubmit = async (data, isCheck) => {
+    if (!data) {
+        console.error("handleCommentSubmit: data가 undefined입니다.");
+        return;
+    }
+
     const { comment, password } = data;
-    const LOCBRDTYP = data.LOCBRDTYP || null; // undefined 방지
+    const LOCBRDTYP = data.LOCBRDTYP || null;
+
+    if (!comment || comment.trim() === "") {
+        commentAlert.value = '댓글을 입력해주세요.';
+        return;
+    } else {
+        commentAlert.value = '';
+    }
+
+    if (unknown.value && isCheck && (!password || password.trim() === "")) {
+        passwordAlert.value = "비밀번호를 입력해야 합니다.";
+        return;
+    }
 
     try {
         const response = await axios.post(`board/${currentBoardId.value}/comment`, {
             LOCBRDSEQ: currentBoardId.value,
             LOCCMTRPY: comment,
-            LOCCMTPWD: password,
+            LOCCMTPWD: isCheck ? password : '',
             LOCCMTPNT: 1,
-            LOCBRDTYP // 익명 여부 전달
+            LOCBRDTYP
         });
 
         if (response.status === 200) {
             console.log('댓글 작성 성공:', response.data.message);
+            passwordAlert.value = '';
+            commentAlert.value = '';
             await fetchComments();
         } else {
-            console.log('댓글 작성 실패:', response.data.message);
+            console.error('댓글 작성 실패:', response.data.message);
         }
     } catch (error) {
-        console.log('댓글 작성 중 오류 발생:', error);
+        console.error('댓글 작성 중 오류 발생:', error);
     }
 };
 
-
 // 대댓글 추가 (부모 `BoardCommentList`로부터 이벤트 받아서 처리)
 const handleCommentReply = async (reply) => {
     try {
-        // 익명 여부 체크 (체크박스가 체크되었을 경우 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,
             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) {
+            if (response.data.code === 200) {  // 서버 응답 코드도 확인
-                console.log('✅ 대댓글 작성 성공:', response.data);
+                console.log('대댓글 작성 성공:', response.data);
-                await fetchComments();
+                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 editClick = (unknown) => {
@@ -484,6 +497,7 @@ const editComment = (comment) => {
 
     // 익명일 경우 비밀번호 입력창 활성화
     if (unknown.value) {
+        console.log('익명 코멘트인가?')
         toggleCommentPassword(comment, "edit");
     }
 }
@@ -736,6 +750,14 @@ const handleCommentDeleted = (deletedCommentId) => {
     console.error("❌ 삭제할 댓글을 찾을 수 없음:", deletedCommentId);
 };
 
+
+// 날짜
+const formattedDate = (dateString) => {
+    if (!dateString) return "날짜 없음";
+    const dateObj = new Date(dateString);
+    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')}`;
+};
+
 const formattedBoardDate = computed(() => formattedDate(date.value));
 
 // 컴포넌트 마운트 시 데이터 로드