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

<template>
    <div>
        <BoardProfile
            :unknown="unknown"
            :isCommentAuthor="isCommentAuthor"
            :boardId="comment.boardId"
            :profileName="comment.author"
            :date="comment.createdAt"
            :comment="comment"
            :showDetail="false"
            :isLike="!isLike"
            :isCommentPassword="comment.isCommentPassword"
            :isCommentProfile="true"
            @editClick="aaaa"
            @deleteClick="$emit('deleteClick', comment)"
            @updateReaction="handleUpdateReaction"
            />
            <!-- :author="true" -->
        <!-- 댓글 비밀번호 입력창 (익명일 경우) -->
        <div v-if="isCommentPassword && unknown" class="mt-3 w-25 ms-auto">
            <div class="input-group">
                <input
                    type="password"
                    class="form-control"
                    v-model="password"
                    placeholder="비밀번호 입력"
                />
                <button class="btn btn-primary" @click="logPasswordAndEmit">확인</button>
            </div>
            <span v-if="passwordCommentAlert" class="invalid-feedback d-block text-start">{{ passwordCommentAlert }}</span>
        </div>
        <p>authorId:{{ comment.authorId }}</p>
        <p>코멘트 비교: {{comment.isCommentAuthor}}</p>


        <div class="mt-6">
            <template v-if="comment.isEditTextarea">
                <textarea v-model="localEditedContent" class="form-control"></textarea>
                <div class="mt-2 d-flex justify-content-end">
                    <button class="btn btn-secondary me-2" @click="$emit('cancelEdit', comment)">취소</button>
                    <button class="btn btn-primary" @click="submitEdit">수정</button>
                </div>
            </template>
            <template v-else>
                <p class="m-0">{{ comment.content }}</p>
            </template>
        </div>

        <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
        <BoardCommentArea v-if="isComment" @submitComment="submitComment"/>
        
        <!-- 대댓글 -->
        <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"
            >
            <!-- <p>대댓글 데이터(JSON): {{ JSON.stringify(child, null, 2) }}</p> -->
            <!-- <p>comment child: {{ comment.children }}</p> -->
                <BoardComment 
                    :comment="child"
                    :unknown="unknown"
                    :isPlusButton="false" 
                    :isLike="true"
                    :isCommentProfile="true"
                    :isCommentAuthor="child.isCommentAuthor"
                    @editClick="$emit('editClick', $event)"
                    @deleteClick="$emit('deleteClick', child)"
                    @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
                    @cancelEdit="$emit('cancelEdit', child)"
                    @submitComment="submitComment" 
                    @updateReaction="handleUpdateReaction"
                />
            </li>
        </ul>
    </div>
</template>

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

const props = defineProps({
    comment: {
        type: Object,
        required: true,
    },
    unknown: {
        type: Boolean,
        default: true,
    },
    isCommentAuthor: {
        type: Boolean,
        default: false,
    },
    isPlusButton: {
        type: Boolean,
        default: true,
    },
    isLike: {
        type: Boolean,
        default: false,
    },
    isEditTextarea: {
        type: Boolean,
        default: false
    },
    isCommentPassword: {
        type: Boolean,
        default: false,
    },
    passwordCommentAlert: {
        type: String,
        default: false
    }
});

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

const password = ref('');
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 });
    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, password.value);
    password.value = ""; 
};

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

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

const aaaa = () => {
    emit('editClick', props.comment);
}

</script>