익명이아닐경우비밀번호창안나오게&댓글maxlength설정
This commit is contained in:
parent
dae3ef8ede
commit
a76bfbcc25
@ -16,7 +16,7 @@
|
||||
@updateReaction="handleUpdateReaction"
|
||||
/>
|
||||
<!-- 댓글 비밀번호 입력창 (익명일 경우) -->
|
||||
<div v-if="currentPasswordCommentId === comment.commentId && unknown" class="mt-3 w-25 ms-auto">
|
||||
<div v-if="currentPasswordCommentId === comment.commentId && unknown && comment.author == '익명'" class="mt-3 w-25 ms-auto">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="password"
|
||||
@ -43,20 +43,16 @@
|
||||
</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"/>
|
||||
<BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment"/>
|
||||
<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"
|
||||
>
|
||||
<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 === '익명'"
|
||||
@ -83,115 +79,125 @@
|
||||
</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';
|
||||
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
|
||||
},
|
||||
isDeleted: {
|
||||
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 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,
|
||||
},
|
||||
isDeleted: {
|
||||
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 logPasswordAndEmit = () => {
|
||||
emit('submitPassword', props.comment, props.password);
|
||||
};
|
||||
const localEditedContent = ref(props.comment.content);
|
||||
|
||||
watch(() => props.comment.isEditTextarea, (newVal) => {
|
||||
if (newVal) {
|
||||
localEditedContent.value = props.comment.content;
|
||||
}
|
||||
});
|
||||
// 댓글 입력 창 토글
|
||||
const isComment = ref(false);
|
||||
const toggleComment = () => {
|
||||
isComment.value = !isComment.value;
|
||||
};
|
||||
|
||||
// watch(() => props.comment.isDeleted, () => {
|
||||
// console.log("BoardComment - isDeleted 상태 변경됨:", newVal);
|
||||
// 부모 컴포넌트에 대댓글 추가 요청
|
||||
const submitComment = newComment => {
|
||||
emit('submitComment', { parentId: props.comment.commentId, ...newComment, LOCBRDTYP: newComment.LOCBRDTYP });
|
||||
isComment.value = false;
|
||||
};
|
||||
|
||||
// if (newVal) {
|
||||
// localEditedContent.value = "댓글이 삭제되었습니다."; // UI 반영
|
||||
// props.comment.isEditTextarea = false;
|
||||
// }
|
||||
// });
|
||||
// 좋아요, 싫어요
|
||||
const handleUpdateReaction = reactionData => {
|
||||
emit('updateReaction', {
|
||||
boardId: props.comment.boardId,
|
||||
commentId: props.comment.commentId || reactionData.commentId,
|
||||
...reactionData,
|
||||
});
|
||||
};
|
||||
|
||||
// 수정버튼
|
||||
const submitEdit = () => {
|
||||
emit('submitEdit', props.comment, localEditedContent.value);
|
||||
};
|
||||
// 비밀번호 확인
|
||||
const logPasswordAndEmit = () => {
|
||||
emit('submitPassword', props.comment, props.password);
|
||||
};
|
||||
|
||||
const handleEditClick = () => {
|
||||
emit('editClick', props.comment);
|
||||
}
|
||||
watch(
|
||||
() => props.comment.isEditTextarea,
|
||||
newVal => {
|
||||
if (newVal) {
|
||||
localEditedContent.value = props.comment.content;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const handleReplyEditClick = (comment) => {
|
||||
emit('editClick', comment);
|
||||
}
|
||||
// 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);
|
||||
};
|
||||
|
||||
const handleReplyEditClick = comment => {
|
||||
emit('editClick', comment);
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
</div> -->
|
||||
<!-- 텍스트박스 -->
|
||||
<div class="w-100">
|
||||
<textarea class="form-control" placeholder="댓글 달기" rows="3" v-model="comment"></textarea>
|
||||
<textarea class="form-control" placeholder="댓글 달기" rows="3" :maxlength="maxLength" 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>
|
||||
@ -51,78 +51,81 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineEmits, defineProps, watch, inject } from 'vue';
|
||||
import SaveBtn from '../button/SaveBtn.vue';
|
||||
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' 설정
|
||||
const props = defineProps({
|
||||
unknown: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
parentId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
passwordAlert: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
commentAlert: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
maxLength: {
|
||||
type: Number,
|
||||
default: 500,
|
||||
},
|
||||
});
|
||||
|
||||
// 제출 후 입력 필드 리셋
|
||||
resetCommentForm();
|
||||
};
|
||||
const $common = inject('common');
|
||||
const comment = ref('');
|
||||
const password = ref('');
|
||||
const isCheck = ref(false);
|
||||
const textAlert = ref('');
|
||||
const passwordAlert2 = ref('');
|
||||
|
||||
// 입력 필드 리셋 함수 추가
|
||||
const resetCommentForm = () => {
|
||||
comment.value = '';
|
||||
password.value = '';
|
||||
isCheck.value = false;
|
||||
};
|
||||
const emit = defineEmits(['submitComment']);
|
||||
|
||||
watch(
|
||||
() => props.passwordAlert,
|
||||
() => {
|
||||
if (!props.passwordAlert) {
|
||||
resetCommentForm();
|
||||
const handleCommentSubmit = () => {
|
||||
if (!$common.isNotEmpty(comment.value)) {
|
||||
textAlert.value = '댓글을 입력하세요';
|
||||
return false;
|
||||
} else {
|
||||
textAlert.value = '';
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
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>
|
||||
|
||||
@ -1,17 +1,13 @@
|
||||
<template>
|
||||
<ul class="list-unstyled mt-10">
|
||||
<li
|
||||
v-for="comment in comments"
|
||||
:key="comment.commentId"
|
||||
class="mt-6 border-bottom pb-6"
|
||||
>
|
||||
<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"
|
||||
:isCommentPassword="isCommentPassword"
|
||||
:passwordCommentAlert="passwordCommentAlert || ''"
|
||||
:currentPasswordCommentId="currentPasswordCommentId"
|
||||
:password="password"
|
||||
@ -21,7 +17,7 @@
|
||||
@submitComment="submitComment"
|
||||
@submitEdit="handleSubmitEdit"
|
||||
@cancelEdit="handleCancelEdit"
|
||||
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
|
||||
@updateReaction="reactionData => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
|
||||
@update:password="updatePassword"
|
||||
/>
|
||||
</li>
|
||||
@ -29,96 +25,105 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import BoardComment from './BoardComment.vue'
|
||||
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
|
||||
},
|
||||
});
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'clearPassword','submitEdit', 'update:password']);
|
||||
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,
|
||||
const submitComment = replyData => {
|
||||
emit('submitComment', replyData);
|
||||
};
|
||||
|
||||
emit('updateReaction', updatedReactionData);
|
||||
}
|
||||
const handleUpdateReaction = (reactionData, commentId, boardId) => {
|
||||
const updatedReactionData = {
|
||||
...reactionData,
|
||||
commentId: commentId || reactionData.commentId,
|
||||
boardId: boardId || reactionData.boardId,
|
||||
};
|
||||
|
||||
const submitPassword = (comment, password) => {
|
||||
emit('submitPassword', comment, password);
|
||||
};
|
||||
emit('updateReaction', updatedReactionData);
|
||||
};
|
||||
|
||||
const handleEditClick = (comment) => {
|
||||
if (comment.parentId) {
|
||||
emit('editClick', comment); // 대댓글
|
||||
} else {
|
||||
emit('editClick', comment); // 댓글
|
||||
}
|
||||
};
|
||||
const submitPassword = (comment, password) => {
|
||||
emit('submitPassword', comment, password);
|
||||
};
|
||||
|
||||
const handleSubmitEdit = (comment, editedContent) => {
|
||||
emit("submitEdit", comment, editedContent);
|
||||
};
|
||||
const handleEditClick = comment => {
|
||||
if (comment.parentId) {
|
||||
emit('editClick', comment); // 대댓글
|
||||
} else {
|
||||
emit('editClick', comment); // 댓글
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteClick = (comment) => {
|
||||
if (comment.parentId) {
|
||||
emit('deleteClick', comment); // 대댓글 삭제
|
||||
} else {
|
||||
emit('deleteClick', comment); // 댓글 삭제
|
||||
}
|
||||
};
|
||||
const handleSubmitEdit = (comment, editedContent) => {
|
||||
emit('submitEdit', comment, editedContent);
|
||||
};
|
||||
|
||||
const handleCancelEdit = (comment) => {
|
||||
if (comment.parentId) {
|
||||
emit('cancelEdit', comment); // 대댓글 수정 취소
|
||||
} else {
|
||||
emit('cancelEdit', comment); // 댓글 수정 취소
|
||||
}
|
||||
};
|
||||
const handleDeleteClick = comment => {
|
||||
if (comment.parentId) {
|
||||
emit('deleteClick', comment); // 대댓글 삭제
|
||||
} else {
|
||||
emit('deleteClick', comment); // 댓글 삭제
|
||||
}
|
||||
};
|
||||
|
||||
const updatePassword = (newPassword) => {
|
||||
emit('update:password', newPassword);
|
||||
};
|
||||
const handleCancelEdit = comment => {
|
||||
if (comment.parentId) {
|
||||
emit('cancelEdit', comment); // 대댓글 수정 취소
|
||||
} else {
|
||||
emit('cancelEdit', comment); // 댓글 수정 취소
|
||||
}
|
||||
};
|
||||
|
||||
const updatePassword = newPassword => {
|
||||
emit('update:password', newPassword);
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
const defaultProfile = '/img/icons/icon.png';
|
||||
|
||||
// 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
|
||||
const baseUrl = 'http://localhost:10325/'; // API 서버 URL
|
||||
const baseUrl = import.meta.env.VITE_SERVER; // API 서버 URL
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
|
||||
@ -92,6 +92,7 @@
|
||||
:unknown="unknown"
|
||||
:commentAlert="commentAlert"
|
||||
:passwordAlert="passwordAlert"
|
||||
:maxLength="500"
|
||||
@submitComment="handleCommentSubmit"
|
||||
/>
|
||||
</div>
|
||||
@ -237,7 +238,6 @@
|
||||
const data = response.data.data;
|
||||
|
||||
profileName.value = data.author || '익명';
|
||||
console.log(data.author);
|
||||
authorId.value = data.authorId;
|
||||
boardTitle.value = data.title || '제목 없음';
|
||||
boardContent.value = data.content || '';
|
||||
@ -580,7 +580,7 @@
|
||||
LOCBRDPWD: password.value,
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
});
|
||||
console.log('response: ', response);
|
||||
|
||||
if (response.data.code === 200 && response.data.data === true) {
|
||||
password.value = '';
|
||||
isPassword.value = false;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user