Merge branch 'main' into vacation

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" />
 
-        <!-- 대댓글 -->
+        <slot name="reply"></slot>
-        <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>
     </div>
 </template>
 
@@ -196,8 +172,4 @@
     const handleEditClick = () => {
         emit('editClick', props.comment);
     };
-
-    const handleReplyEditClick = comment => {
-        emit('editClick', comment);
-    };
 </script>

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" />
+                        <input class="form-check-input" type="checkbox" :id="`checkboxAnnonymous${commnetId}`" v-model="isCheck" />
-                        <label class="form-check-label" for="inlineCheckbox1">익명</label>
+                        <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');

src/components/board/BoardCommentList.vue

@@ -19,10 +19,38 @@
                 @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>
 
 <script setup>
     import { defineProps, defineEmits } from 'vue';
@@ -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>

src/components/button/BoardRecommendBtn.vue

@@ -1,8 +1,8 @@
 <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>
@@ -73,7 +73,6 @@ const handleDislike = () => {
         dislikeClicked.value = isDislike;
         likeClicked.value = false;
     };
-
 </script>
 
 <style scoped>
@@ -105,7 +104,7 @@ const handleDislike = () => {
 
     .btn {
         width: 55px;
-    height: 30px;
+        /* height: 30px; */
     }
 
     .btn.big {