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

<template>
    <div>
        <BoardProfile
            :unknown="comment.author === '익명'"
            :isCommentAuthor="isCommentAuthor"
            :boardId="comment.boardId"
            :profileName="displayName"
            :date="comment.createdAt"
            :comment="comment"
            :profileImg="comment.profileImg"
            :showDetail="false"
            :isLike="!isLike"
            :isCommentPassword="isCommentPassword"
            :isCommentProfile="true"
            @editClick="handleEditClick"
            @deleteClick="$emit('deleteClick', comment)"
            @updateReaction="handleUpdateReaction"
        />
        <!-- 댓글 비밀번호 입력창 (익명일 경우) -->
        <div v-if="currentPasswordCommentId === comment.commentId && unknown && comment.author == '익명'" class="mt-3 w-px-200 ms-auto">
            <div class="input-group">
                <input
                    type="password"
                    class="form-control"
                    :value="password"
                    autocomplete="new-password"
                    maxlength="8"
                    placeholder="비밀번호 입력"
                    @input="filterInput"
                />
                <button class="btn btn-primary" @click="logPasswordAndEmit">확인</button>
            </div>
            <span v-if="passwordCommentAlert" class="invalid-feedback d-block text-start">{{ passwordCommentAlert }}</span>
        </div>

        <div class="mt-6">
            <template v-if="comment.isEditTextarea">
                <textarea v-model="localEditedContent" class="form-control"></textarea>
                <span v-if="editCommentAlert" class="invalid-feedback d-block text-start">{{ editCommentAlert }}</span>
                <div class="mt-2 d-flex justify-content-end">
                    <SaveBtn class="btn btn-primary" @click="submitEdit"></SaveBtn>
                </div>
            </template>

            <template v-else>
                <div class="m-0" style="white-space: pre-wrap">{{ comment.content }}</div>
            </template>
        </div>
        <!-- <p>현재 isDeleted 값: {{ isDeleted }}</p> -->

        <!-- <template v-if="isDeleted">
            <p class="m-0 text-muted">댓글이 삭제되었습니다.</p>
        </template> -->
        <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6">
            <i class="icon-base bx bx-plus beforeRotate" :class="{ rotate: isComment }"></i>
        </PlusButton>

        <BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment" :commnetId="comment.commentId" />

        <slot name="reply"></slot>
    </div>
</template>

<script setup>
    import { defineProps, defineEmits, ref, computed, watch, inject } from 'vue';
    import BoardProfile from './BoardProfile.vue';
    import BoardCommentArea from './BoardCommentArea.vue';
    import PlusButton from '../button/PlusBtn.vue';
    import SaveBtn from '../button/SaveBtn.vue';

    const props = defineProps({
        comment: {
            type: Object,
            required: true,
        },
        unknown: {
            type: Boolean,
            default: false,
        },
        nickname: {
            type: String,
            default: '',
        },
        isCommentAuthor: {
            type: Boolean,
            default: false,
        },

        isPlusButton: {
            type: Boolean,
            default: true,
        },
        isLike: {
            type: Boolean,
            default: false,
        },
        isEditTextarea: {
            type: Boolean,
            default: false,
        },
        isDeleted: {
            type: Boolean,
            default: false,
        },
        isCommentPassword: {
            type: Boolean,
            default: false,
        },
        passwordCommentAlert: {
            type: String,
            default: '',
        },
        currentPasswordCommentId: {
            type: Number,
        },
        password: {
            type: String,
        },
        editCommentAlert: String,
    });

    const displayName = computed(() => {
        return props.nickname ? props.nickname : props.comment.author;
    });

    // emits 정의
    const emit = defineEmits([
        'submitComment',
        'updateReaction',
        'editClick',
        'deleteClick',
        'submitPassword',
        'submitEdit',
        'cancelEdit',
        'update:password',
        'inputDetector',
    ]);

    const filterInput = event => {
        event.target.value = event.target.value.replace(/\s/g, ''); // 공백 제거
        emit('update:password', event.target.value);
    };

    const localEditedContent = ref(props.comment.content);

    // 댓글 입력 창 토글
    const isComment = ref(false);
    const toggleComment = () => {
        isComment.value = !isComment.value;
    };

    // 부모 컴포넌트에 대댓글 추가 요청
    const submitComment = newComment => {
        emit('submitComment', { parentId: props.comment.commentId, ...newComment, LOCBRDTYP: newComment.LOCBRDTYP });
        isComment.value = false;
    };

    // 좋아요, 싫어요
    const handleUpdateReaction = reactionData => {
        emit('updateReaction', {
            boardId: props.comment.boardId,
            commentId: props.comment.commentId || reactionData.commentId,
            ...reactionData,
        });
    };

    // 비밀번호 확인
    const logPasswordAndEmit = () => {
        emit('submitPassword', props.comment, props.password);
    };

    watch(
        () => props.comment.isEditTextarea,
        newVal => {
            if (newVal) {
                localEditedContent.value = props.comment.content;
            }
        },
    );

    // text 변화 감지하여 부모에게 전달
    watch(
        () => localEditedContent.value,
        newVal => {
            emit('inputDetector');
        },
    );

    // watch(() => props.comment.isDeleted, () => {
    //     console.log("BoardComment - isDeleted 상태 변경됨:", newVal);

    //     if (newVal) {
    //         localEditedContent.value = "댓글이 삭제되었습니다."; // UI 반영
    //         props.comment.isEditTextarea = false;
    //     }
    // });

    // 수정버튼
    const submitEdit = () => {
        emit('submitEdit', props.comment, localEditedContent.value);
    };

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