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

<template>
    <div>
        <BoardProfile
            :unknown="comment.author === '익명'"
            :isCommentAuthor="isCommentAuthor"
            :boardId="comment.boardId"
            :profileName="comment.author"
            :date="comment.createdAt"
            :comment="comment"
            :showDetail="false"
            :isLike="!isLike"
            :isCommentPassword="isCommentPassword"
            :isCommentProfile="true"
            @editClick="handleEditClick"
            @deleteClick="$emit('deleteClick', comment)"
            @updateReaction="handleUpdateReaction"
        />
        <!-- 댓글 비밀번호 입력창 (익명일 경우) -->
        <div v-if="currentPasswordCommentId === comment.commentId && unknown" class="mt-3 w-25 ms-auto">
            <div class="input-group">
                <input
                    type="password"
                    class="form-control"
                    :value="password"
                    placeholder="비밀번호 입력"
                    @input="$emit('update:password', $event.target.value.trim())"
                />
                <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>
                <div class="mt-2 d-flex justify-content-end">
                    <SaveBtn class="btn btn-primary" @click="submitEdit"></SaveBtn>
                </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" :unknown="unknown" @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"
            >
                <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>

<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';
import SaveBtn from '../button/SaveBtn.vue';

const props = defineProps({
    comment: {
        type: Object,
        required: true,
    },
    unknown: {
        type: Boolean,
        default: false,
    },
    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: ''
    },
    currentPasswordCommentId: {
        type: Number
    },
    password:{
        type: String
    },
});

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

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 = () => {
    console.log('비밀번호 확인',props.password)
    emit('submitPassword', props.comment, props.password);
};

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

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

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

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

</script>