From dc4ae608ebc02e8467b3ead4af468d9a81eb7f9e Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Mon, 10 Mar 2025 11:22:45 +0900
Subject: [PATCH] =?UTF-8?q?1.=EB=8C=80=EB=8C=93=EA=B8=80=20=EC=8A=AC?=
 =?UTF-8?q?=EB=A1=AF=ED=98=95=ED=83=9C=EB=A1=9C=20=EB=B3=80=EA=B2=BD=202.?=
 =?UTF-8?q?=EB=8C=80=EB=8C=93=EA=B8=80=EC=9D=B5=EB=AA=85=ED=81=B4=EB=A6=AD?=
 =?UTF-8?q?=EC=8B=9C=ED=95=B4=EB=8B=B9=EB=8C=80=EB=8C=93=EA=B8=80=EC=97=90?=
 =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=EC=9E=85=EB=A0=A5=EC=9D=B4?=
 =?UTF-8?q?=EB=82=98=EC=98=A4=EA=B2=8C=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue       |  32 +--
 src/components/board/BoardCommentArea.vue   |   7 +-
 src/components/board/BoardCommentList.vue   |  37 +++-
 src/components/button/BoardRecommendBtn.vue | 207 ++++++++++----------
 4 files changed, 146 insertions(+), 137 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 8dd990e..89fd3ad 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -48,33 +48,9 @@
             <p class="m-0 text-muted">댓글이 삭제되었습니다.</p>
         </template> -->
         <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6" />
-        <BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment" />
+        <BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment" :commnetId="comment.commentId" />
 
-        <!-- 대댓글 -->
-        <ul v-if="comment.children && comment.children.length" class="list-unstyled">
-            <li v-for="child in comment.children" :key="child.commentId" class="mt-8 pt-6 ps-10 border-top">
-                <BoardComment
-                    :comment="child"
-                    :unknown="child.author === '익명'"
-                    :isPlusButton="false"
-                    :isLike="true"
-                    :isCommentProfile="true"
-                    :isCommentAuthor="child.isCommentAuthor"
-                    :isCommentPassword="isCommentPassword"
-                    :currentPasswordCommentId="currentPasswordCommentId"
-                    :passwordCommentAlert="passwordCommentAlert"
-                    :password="password"
-                    @editClick="handleReplyEditClick"
-                    @deleteClick="$emit('deleteClick', child)"
-                    @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
-                    @cancelEdit="$emit('cancelEdit', child)"
-                    @submitComment="submitComment"
-                    @updateReaction="handleUpdateReaction"
-                    @submitPassword="$emit('submitPassword', child, password)"
-                    @update:password="$emit('update:password', $event)"
-                />
-            </li>
-        </ul>
+        <slot name="reply"></slot>
     </div>
 </template>
 
@@ -196,8 +172,4 @@
     const handleEditClick = () => {
         emit('editClick', props.comment);
     };
-
-    const handleReplyEditClick = comment => {
-        emit('editClick', comment);
-    };
 </script>
diff --git a/src/components/board/BoardCommentArea.vue b/src/components/board/BoardCommentArea.vue
index 0c207bb..b304795 100644
--- a/src/components/board/BoardCommentArea.vue
+++ b/src/components/board/BoardCommentArea.vue
@@ -22,8 +22,8 @@
                 <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" type="checkbox" id="inlineCheckbox1" v-model="isCheck" />
-                        <label class="form-check-label" for="inlineCheckbox1">익명</label>
+                        <input class="form-check-input" type="checkbox" :id="`checkboxAnnonymous${commnetId}`" v-model="isCheck" />
+                        <label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label>
                     </div>
 
                     <!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
@@ -75,6 +75,9 @@
             type: Number,
             default: 500,
         },
+        commnetId: {
+            type: Number,
+        },
     });
 
     const $common = inject('common');
diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue
index 87da0cd..65091ae 100644
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@@ -19,7 +19,35 @@
                 @cancelEdit="handleCancelEdit"
                 @updateReaction="reactionData => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
                 @update:password="updatePassword"
-            />
+            >
+                <!-- 대댓글 -->
+                <template #reply>
+                    <ul v-if="comment.children && comment.children.length" class="list-unstyled">
+                        <li v-for="(child, index) in comment.children" :key="child.commentId" class="mt-8 pt-6 ps-10 border-top">
+                            <BoardComment
+                                :comment="child"
+                                :unknown="child.author === '익명'"
+                                :isPlusButton="false"
+                                :isLike="true"
+                                :isCommentProfile="true"
+                                :isCommentAuthor="child.isCommentAuthor"
+                                :isCommentPassword="isCommentPassword"
+                                :currentPasswordCommentId="currentPasswordCommentId"
+                                :passwordCommentAlert="passwordCommentAlert"
+                                :password="password"
+                                @editClick="handleReplyEditClick"
+                                @deleteClick="$emit('deleteClick', child)"
+                                @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
+                                @cancelEdit="$emit('cancelEdit', child)"
+                                @submitComment="submitComment"
+                                @updateReaction="handleUpdateReaction"
+                                @submitPassword="$emit('submitPassword', child, password)"
+                                @update:password="$emit('update:password', $event)"
+                            />
+                        </li>
+                    </ul>
+                </template>
+            </BoardComment>
         </li>
     </ul>
 </template>
@@ -64,6 +92,9 @@
         password: {
             type: String,
         },
+        index: {
+            type: Number,
+        },
     });
 
     const emit = defineEmits([
@@ -126,4 +157,8 @@
     const updatePassword = newPassword => {
         emit('update:password', newPassword);
     };
+
+    const handleReplyEditClick = comment => {
+        emit('editClick', comment);
+    };
 </script>
diff --git a/src/components/button/BoardRecommendBtn.vue b/src/components/button/BoardRecommendBtn.vue
index 8ffa805..3c951bd 100644
--- a/src/components/button/BoardRecommendBtn.vue
+++ b/src/components/button/BoardRecommendBtn.vue
@@ -1,124 +1,123 @@
 <template v-if="isRecommend">
-    <button class="btn btn-label-primary btn-icon" :class="{'clicked': likeClicked, 'big': bigBtn}" @click="handleLike">
+    <button class="btn btn-label-primary btn-icon" :class="{ clicked: likeClicked, big: bigBtn }" @click="handleLike">
         <i class="fa-regular fa-thumbs-up"></i> <span class="num">{{ likeCount }}</span>
     </button>
-    <button class="btn btn-label-danger btn-icon" :class="{'clicked': dislikeClicked, 'big': bigBtn}" @click="handleDislike">
+    <button class="btn btn-label-danger btn-icon" :class="{ clicked: dislikeClicked, big: bigBtn }" @click="handleDislike">
         <i class="fa-regular fa-thumbs-down"></i> <span class="num">{{ dislikeCount }}</span>
     </button>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+    import { ref, computed } from 'vue';
 
-const props = defineProps({
-    comment: {
-        type: Object,
-        default: () => ({}),
-    },
-    likeClicked : {
-        type : Boolean,
-        default : false,
-    },
-    dislikeClicked : {
-        type : Boolean,
-        default : false,
-    },
-    bigBtn : {
-        type :Boolean,
-        default : false,
-    },
-    isRecommend: {
-        type:Boolean,
-        default:true,
-    },
-    boardId: {
-        type: Number,
-        required: true,
-    },
-    commentId: {
-        type: [Number, null],
-        default: null,
-    },
-    likeCount: {
-        type: Number,
-        default: 0,
-    },
-    dislikeCount: {
-        type: Number,
-        default: 0,
-    },
-});
+    const props = defineProps({
+        comment: {
+            type: Object,
+            default: () => ({}),
+        },
+        likeClicked: {
+            type: Boolean,
+            default: false,
+        },
+        dislikeClicked: {
+            type: Boolean,
+            default: false,
+        },
+        bigBtn: {
+            type: Boolean,
+            default: false,
+        },
+        isRecommend: {
+            type: Boolean,
+            default: true,
+        },
+        boardId: {
+            type: Number,
+            required: true,
+        },
+        commentId: {
+            type: [Number, null],
+            default: null,
+        },
+        likeCount: {
+            type: Number,
+            default: 0,
+        },
+        dislikeCount: {
+            type: Number,
+            default: 0,
+        },
+    });
 
-const emit = defineEmits(['updateReaction']);
+    const emit = defineEmits(['updateReaction']);
 
-const likeClicked = ref(props.likeClicked);
-const dislikeClicked = ref(props.dislikeClicked);
-const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount);
-const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount);
+    const likeClicked = ref(props.likeClicked);
+    const dislikeClicked = ref(props.dislikeClicked);
+    const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount);
+    const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount);
 
-const handleLike = () => {
-    const isLike = !likeClicked.value;
-    const isDislike = false; 
+    const handleLike = () => {
+        const isLike = !likeClicked.value;
+        const isDislike = false;
 
-    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
-    likeClicked.value = isLike;
-    dislikeClicked.value = false;
-};
+        emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
+        likeClicked.value = isLike;
+        dislikeClicked.value = false;
+    };
 
-const handleDislike = () => {
-    const isDislike = !dislikeClicked.value;
-    const isLike = false;
-
-    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
-    dislikeClicked.value = isDislike;
-    likeClicked.value = false;
-};
+    const handleDislike = () => {
+        const isDislike = !dislikeClicked.value;
+        const isLike = false;
 
+        emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
+        dislikeClicked.value = isDislike;
+        likeClicked.value = false;
+    };
 </script>
 
 <style scoped>
-.btn + .btn {
-    margin-left: 5px;
-}
-
-.num {
-    margin-left: 5px;
-}
-
-.btn-label-danger.clicked {
-    background-color: #e6381a;
-}
-
-.btn-label-danger.clicked i,
-.btn-label-danger.clicked span {
-    color: #fff;
-}
-
-.btn-label-primary.clicked {
-    background-color: #5f61e6;
-}
-
-.btn-label-primary.clicked i,
-.btn-label-primary.clicked span  {
-    color : #fff;
-}
-
-.btn {
-    width: 55px;
-    height: 30px;
-}
-
-.btn.big {
-    width: 70px;
-    height: 70px;
-    font-size: 18px;
-}
-
-@media screen and  (max-width:450px) {
-    .btn {
-        width: 50px;
-        height: 20px;
-        font-size: 12px;
+    .btn + .btn {
+        margin-left: 5px;
+    }
+
+    .num {
+        margin-left: 5px;
+    }
+
+    .btn-label-danger.clicked {
+        background-color: #e6381a;
+    }
+
+    .btn-label-danger.clicked i,
+    .btn-label-danger.clicked span {
+        color: #fff;
+    }
+
+    .btn-label-primary.clicked {
+        background-color: #5f61e6;
+    }
+
+    .btn-label-primary.clicked i,
+    .btn-label-primary.clicked span {
+        color: #fff;
+    }
+
+    .btn {
+        width: 55px;
+        /* height: 30px; */
+    }
+
+    .btn.big {
+        width: 70px;
+        height: 70px;
+        font-size: 18px;
+    }
+
+    @media screen and (max-width: 450px) {
+        .btn {
+            width: 50px;
+            height: 20px;
+            font-size: 12px;
+        }
     }
-}
 </style>