localhost-front/src/components/board/BoardCommentList.vue

<template>
    <ul class="list-unstyled mt-10">
        <li v-for="comment in comments" :key="comment.commentId" class="mt-6 border-bottom pb-6">
            <BoardComment
                :unknown="unknown"
                :comment="comment"
                :isCommentAuthor="comment.isCommentAuthor"
                :isEditTextarea="comment.isEditTextarea"
                :isDeleted="isDeleted"
                :isCommentPassword="isCommentPassword"
                :passwordCommentAlert="passwordCommentAlert || ''"
                :currentPasswordCommentId="currentPasswordCommentId"
                :password="password"
                @editClick="handleEditClick"
                @deleteClick="handleDeleteClick"
                @submitPassword="submitPassword"
                @submitComment="submitComment"
                @submitEdit="handleSubmitEdit"
                @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';
    import BoardComment from './BoardComment.vue';

    const props = defineProps({
        comments: {
            type: Array,
            required: true,
            default: () => [],
        },
        unknown: {
            type: Boolean,
            default: true,
        },
        isCommentAuthor: {
            type: Boolean,
            default: false,
        },
        isCommentPassword: {
            type: Boolean,
            default: false,
        },
        isEditTextarea: {
            type: Boolean,
            default: false,
        },
        isDeleted: {
            type: Boolean,
            default: false,
        },
        passwordCommentAlert: {
            type: String,
            default: '',
        },
        currentPasswordCommentId: {
            type: Number,
        },
        password: {
            type: String,
        },
        index: {
            type: Number,
        },
    });

    const emit = defineEmits([
        'submitComment',
        'updateReaction',
        'editClick',
        'deleteClick',
        'submitPassword',
        'clearPassword',
        'submitEdit',
        'update:password',
    ]);

    const submitComment = replyData => {
        emit('submitComment', replyData);
    };

    const handleUpdateReaction = (reactionData, commentId, boardId) => {
        const updatedReactionData = {
            ...reactionData,
            commentId: commentId || reactionData.commentId,
            boardId: boardId || reactionData.boardId,
        };

        emit('updateReaction', updatedReactionData);
    };

    const submitPassword = (comment, password) => {
        emit('submitPassword', comment, password);
    };

    const handleEditClick = comment => {
        if (comment.parentId) {
            emit('editClick', comment); // 대댓글
        } else {
            emit('editClick', comment); // 댓글
        }
    };

    const handleSubmitEdit = (comment, editedContent) => {
        emit('submitEdit', comment, editedContent);
    };

    const handleDeleteClick = comment => {
        if (comment.parentId) {
            emit('deleteClick', comment); // 대댓글 삭제
        } else {
            emit('deleteClick', comment); // 댓글 삭제
        }
    };

    const handleCancelEdit = comment => {
        if (comment.parentId) {
            emit('cancelEdit', comment); // 대댓글 수정 취소
        } else {
            emit('cancelEdit', comment); // 댓글 수정 취소
        }
    };

    const updatePassword = newPassword => {
        emit('update:password', newPassword);
    };

    const handleReplyEditClick = comment => {
        emit('editClick', comment);
    };
</script>