129 lines
4.3 KiB
Vue
129 lines
4.3 KiB
Vue
<template>
|
|
<div class="card shadow-none border mt-6">
|
|
<div class="card-body">
|
|
<!-- 댓글 입력 섹션 -->
|
|
<div class="d-flex justify-content-start align-items-top">
|
|
<!-- 프로필섹션 -->
|
|
<!-- <div class="avatar-wrapper">
|
|
<div v-if="!unknown" class="avatar me-4">
|
|
<img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle">
|
|
</div>
|
|
</div> -->
|
|
<!-- 텍스트박스 -->
|
|
<div class="w-100">
|
|
<textarea class="form-control" placeholder="댓글 달기" rows="3" v-model="comment"></textarea>
|
|
<span v-if="commentAlert" class="invalid-feedback d-block text-start ms-2">{{ commentAlert }}</span>
|
|
<span v-else class="invalid-feedback d-block text-start ms-2">{{ textAlert }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 옵션 및 버튼 섹션 -->
|
|
<div class="d-flex justify-content-between flex-wrap mt-4">
|
|
<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>
|
|
</div>
|
|
|
|
<!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
|
|
<div v-if="isCheck" class="d-flex align-items-center flex-grow-1">
|
|
<label class="form-label mb-0 me-3" for="basic-default-password">비밀번호</label>
|
|
<input
|
|
type="password"
|
|
id="basic-default-password"
|
|
class="form-control flex-grow-1"
|
|
v-model="password"
|
|
placeholder="비밀번호 입력"
|
|
/>
|
|
<span v-if="passwordAlert" class="invalid-feedback d-block text-start ms-2">{{ passwordAlert }}</span>
|
|
<span v-else class="invalid-feedback d-block text-start ms-2">{{ passwordAlert2 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 답변 쓰기 버튼 -->
|
|
<div class="ms-auto mt-3 mt-md-0">
|
|
<SaveBtn class="btn btn-primary" @click="handleCommentSubmit"></SaveBtn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineEmits, defineProps, watch, inject } from 'vue';
|
|
import SaveBtn from '../button/SaveBtn.vue';
|
|
|
|
const props = defineProps({
|
|
unknown: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
parentId: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
passwordAlert: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
commentAlert: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
|
|
const $common = inject('common');
|
|
const comment = ref('');
|
|
const password = ref('');
|
|
const isCheck = ref(false);
|
|
const textAlert = ref('');
|
|
const passwordAlert2 = ref('');
|
|
|
|
const emit = defineEmits(['submitComment']);
|
|
|
|
const handleCommentSubmit = () => {
|
|
if (!$common.isNotEmpty(comment.value)) {
|
|
textAlert.value = '댓글을 입력하세요';
|
|
return false;
|
|
} else {
|
|
textAlert.value = '';
|
|
}
|
|
|
|
if (isCheck.value && !$common.isNotEmpty(password.value)) {
|
|
passwordAlert2.value = '비밀번호를 입력하세요';
|
|
return false;
|
|
} else {
|
|
passwordAlert2.value = '';
|
|
}
|
|
|
|
// 댓글 제출
|
|
emit('submitComment', {
|
|
comment: comment.value,
|
|
password: isCheck.value ? password.value : '',
|
|
isCheck: isCheck.value,
|
|
LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정
|
|
});
|
|
|
|
// 제출 후 입력 필드 리셋
|
|
resetCommentForm();
|
|
};
|
|
|
|
// 입력 필드 리셋 함수 추가
|
|
const resetCommentForm = () => {
|
|
comment.value = '';
|
|
password.value = '';
|
|
isCheck.value = false;
|
|
};
|
|
|
|
watch(
|
|
() => props.passwordAlert,
|
|
() => {
|
|
if (!props.passwordAlert) {
|
|
resetCommentForm();
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|