대댓글완료

src/components/board/BoardComentArea.vue

@@ -76,7 +76,7 @@ const comment = ref('');
 const password = ref('');
 const isCheck = ref(false);
 
-const emit = defineEmits(['submit']);
+const emit = defineEmits(['submitComment']);
 
 watch(() => props.unknown, (newVal) => {
     if (!newVal) {
@@ -85,7 +85,7 @@ watch(() => props.unknown, (newVal) => {
 });
 
 function handleCommentSubmit() {
-    emit('submit', {
+    emit('submitComment', {
         comment: comment.value,
         password: password.value,
     });

src/components/board/BoardComment.vue

@@ -5,16 +5,22 @@
             <p class="m-0">{{ comment.content }}</p>
         </div>
         <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
-        <BoardComentArea v-if="isComment" @submit="submitComment"/>
+        <BoardComentArea v-if="isComment" @submitComment="submitComment"/>
 
         <!-- 대댓글 -->
         <ul v-if="comment.children && comment.children.length" class="list-unstyled">
             <li
                 v-for="child in comment.children"
                 :key="child.id"
-                class="pt-8 ps-10"
+                class="mt-8 pt-6 p
+                s-10 border-top"
             >
-                <BoardComment :comment="child" :isPlusButton="false" :isChild="true" @submitComment="addChildComment" />
+                <BoardComment 
+                    :comment="child" 
+                    :isPlusButton="false" 
+                    :isChild="true" 
+                    @submitComment="submitComment" 
+                />
             </li>
         </ul>
         <!-- <ul class="list-unstyled twoDepth">
@@ -32,10 +38,10 @@
 </template>
 
 <script setup>
+import { defineProps, defineEmits, ref } from 'vue';
 import BoardProfile from './BoardProfile.vue';
 import BoardComentArea from './BoardComentArea.vue';
 import PlusButton from '../button/PlusBtn.vue';
-import { defineProps, defineEmits, ref } from 'vue';
 
 const props = defineProps({
   comment: {
@@ -62,33 +68,11 @@ const toggleComment = () => {
 };
 
 // 부모 컴포넌트에 대댓글 추가 요청
-const addChildComment = (newComment) => {
+const submitComment = (newComment) => {
-    console.log("➕ 대댓글 추가됨:", newComment);
+    emit('submitComment', { parentId: props.comment.id, ...newComment });
-    if (!props.comment.children) {
+
-        props.comment.children = []; // ✅ 대댓글 배열이 없으면 생성
+    isComment.value = false;
-    }
-    props.comment.children.push(newComment); // ✅ 부모 댓글의 children 배열에 추가
 };
 
 
 </script>
-
-<style scoped>
-    /* .twoDepth {
-        margin-top: 10px;
-        padding-left: 40px;
-    }
-
-    .list-unstyled > li ~ li {
-        margin-top: 10px;
-    }
-
-    .btn-text-primary {
-        padding-left: 0;
-    }
-    .btn-text-primary:hover,
-    .btn-text-primary:active,
-    .btn-text-primary:focus {
-        background-color: transparent
-    } */
-</style>

src/components/board/BoardCommentList.vue

@@ -3,11 +3,11 @@
         <li
             v-for="comment in comments"
             :key="comment.id"
-            class="mt-8"
+            class="mt-6 border-bottom pb-6"
         >
             <BoardComment
                 :comment="comment"
-                @submitComment="addComment"
+                @submitComment="submitComment"
             />
         </li>
     </ul>
@@ -25,10 +25,10 @@ const props = defineProps({
     }
 });
 
-const emit = defineEmits(['reply']);
+const emit = defineEmits(['submitComment']);
 
-const addComment = (replyData) => {
+const submitComment = (replyData) => {
-    emit('reply', replyData);
+    emit('submitComment', replyData);
 };
 
 </script>

src/views/board/BoardView.vue

@@ -67,13 +67,13 @@
                         </ul> -->
 
                         <!-- 댓글 입력 영역 -->
-                        <BoardComentArea :profileName="profileName" :unknown="unknown" @submit="handleCommentSubmit"/>
+                        <BoardComentArea :profileName="profileName" :unknown="unknown" @submitComment="handleCommentSubmit"/>
                         <!-- <BoardComentArea :profileName="profileName" :unknown="unknown" /> -->
                     </div>
 
                     <!-- 댓글 목록 -->
                     <div class="card-footer">
-                        <BoardCommentList :comments="comments" />
+                        <BoardCommentList :comments="comments" @submitComment="handleCommentReply"/>
 
                         <Pagination/>
                     </div>
@@ -173,20 +173,54 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
     }
 };
 
+// 댓글 목록 조회
+const fetchComments = async () => {
+    try {
+        const response = await axios.get(`board/${currentBoardId.value}/comments`, {
+            params: { LOCBRDSEQ: currentBoardId.value }
+        });
+        console.log("📥 API 응답 데이터:", response.data); 
+
+        let allComments = response.data.data.map(comment => ({
+            id: comment.LOCCMTSEQ, // 댓글 id
+            parentId: comment.LOCCMTPNT, // 부모 id
+            author: comment.MEMBERSEQ || "익명 사용자", // 작성자
+            content: comment.LOCCMTRPY, // 댓글 내용
+            createdAt: formattedDate(comment.LOCCMTRDT), // 생성 날짜
+            children: []
+        }));
+
+        allComments.sort((a, b) => b.id - a.id);
+
+        let commentMap = {};
+        let rootComments = [];
+
+        allComments.forEach(comment => {
+            commentMap[comment.id] = comment; // 모든 댓글을 객체 형태로 저장
+        });
+
+        allComments.forEach(comment => {
+            if (comment.parentId && commentMap[comment.parentId]) {
+                // 부모 댓글이 존재하면, 부모의 children에 추가
+                commentMap[comment.parentId].children.push(comment);
+            } else {
+                // 부모 ID가 없으면 최상위 댓글
+                rootComments.push(comment);
+            }
+        });
+
+        comments.value = rootComments; 
+
+        // console.log("변환된 comments 데이터:", comments.value);
+
+    } catch (error) {
+        console.error('댓글 목록 불러오기 오류:', error);
+    }
+};
+
 // 댓글 작성
 const handleCommentSubmit = async ({ comment, password }) => {
     try {        
-        // const payload = {
-        //     LOCBRDSEQ: currentBoardId.value,
-        //     LOCCMTRPY: comment,
-        //     LOCCMTPWD: password || null,
-        //     LOCCMTPNT: 1
-        // };
-        // alert(`댓글 내용: ${comment}`); 
-
-        // console.log('📤 서버로 전송되는 데이터:', payload); // 서버로 보내는 데이터 확인
-        // const response = await axios.post(`board/${currentBoardId.value}/comment`, payload);
-        
         const response = await axios.post(`board/${currentBoardId.value}/comment`, {
             LOCBRDSEQ: currentBoardId.value,
             LOCCMTRPY: comment,
@@ -207,35 +241,33 @@ const handleCommentSubmit = async ({ comment, password }) => {
     }
 };
 
-// 댓글 목록 조회
+const handleCommentReply = async (reply) => {
-const fetchComments = async () => {
+    // console.log("BoardView에서 대댓글 확인~~~~~~~~~~~~~~~~:", reply);
-    try {
+
-        const response = await axios.get(`board/${currentBoardId.value}/comments`, {
+    // 부모 댓글 찾기
-            params: { LOCBRDSEQ: currentBoardId.value }
+    // const parentComment = comments.value.find(comment => comment.id === reply.parentId);
+    
+    // console.log(parentComment)
+    // if (parentComment) {
+        // console.log('되는거??')
+
+        const response = await axios.post(`board/${currentBoardId.value}/comment`, {
+            LOCBRDSEQ: currentBoardId.value,
+            LOCCMTRPY: reply.comment,
+            LOCCMTPWD: reply.password || null, 
+            LOCCMTPNT: reply.parentId
         });
-        // console.log("📥 API 응답 데이터:", response.data); 
 
-        comments.value = response.data.data.map(comment => ({
+        if (response.status === 200) {
-            id: comment.LOCCMTSEQ, // 고유 ID
+            console.log('대댓글 작성 성공!!!!!!:', response.data.message);
-            author: comment.MEMBERSEQ || "익명 사용자", // 작성자
+            await fetchComments();
-            content: comment.LOCCMTRPY, // 댓글 내용
+        } else {
-            createdAt: formattedDate(comment.LOCCMTRDT), // 생성 날짜
+            console.error('대댓글 작성 실패ㅜㅜㅜ:', response.data.message);
-            children: comment.children ? comment.children.map(child => ({
+        }
-                id: child.LOCCMTSEQ,
+    // } else {
-                author: child.MEMBERSEQ || "익명 사용자",
+    //     console.error(`부모 댓글을 찾을 수 없음: ${reply.parentId}`);
-                content: child.LOCCMTRPY,
+    // }
-                createdAt: formattedDate(child.LOCCMTRDT),
+}
-            })) : []
-        }));
-
-        comments.value.sort((a, b) => b.id - a.id);
-
-        console.log("📌 변환된 comments 데이터:", comments.value);
-
-    } catch (error) {
-        console.error('❌ 댓글 목록 불러오기 오류:', error);
-    }
-};
 
 // 날짜
 const formattedDate = (dateString) => {