1.대댓글 슬롯형태로 변경 2.대댓글익명클릭시해당대댓글에비밀번호입력이나오게수정

2025-03-10 11:22:45 +09:00 · 2025-03-10 11:22:45 +09:00 · dc4ae608eb
commit dc4ae608eb
parent 3ac834dd4a
4 changed files with 146 additions and 137 deletions
--- 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>
--- 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');
--- 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>
--- 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>