localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

익명이아닐경우비밀번호창안나오게&댓글maxlength설정

Browse Source
This commit is contained in:
nevermoregb 2025-03-10 10:08:40 +09:00
parent dae3ef8ede
commit a76bfbcc25
5 changed files with 283 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/board/BoardComment.vue
View File

@ -16,7 +16,7 @@
@updateReaction="handleUpdateReaction" @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"> <div class="input-group">
<input <input
type="password" type="password"
@ -47,16 +47,12 @@
<!-- <template v-if="isDeleted"> <!-- <template v-if="isDeleted">
<p class="m-0 text-muted">댓글이 삭제되었습니다.</p> <p class="m-0 text-muted">댓글이 삭제되었습니다.</p>
</template> --> </template> -->
<PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/> <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6" />
<BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment"/> <BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment" />
<!-- 대댓글 --> <!-- 대댓글 -->
<ul v-if="comment.children && comment.children.length" class="list-unstyled"> <ul v-if="comment.children && comment.children.length" class="list-unstyled">
<li <li v-for="child in comment.children" :key="child.commentId" class="mt-8 pt-6 ps-10 border-top">
v-for="child in comment.children"
:key="child.commentId"
class="mt-8 pt-6 ps-10 border-top"
>
<BoardComment <BoardComment
:comment="child" :comment="child"
:unknown="child.author === '익명'" :unknown="child.author === '익명'"
@ -83,13 +79,13 @@
</template> </template>
<script setup> <script setup>
import { defineProps, defineEmits, ref, computed, watch } from 'vue'; import { defineProps, defineEmits, ref, computed, watch } from 'vue';
import BoardProfile from './BoardProfile.vue'; import BoardProfile from './BoardProfile.vue';
import BoardCommentArea from './BoardCommentArea.vue'; import BoardCommentArea from './BoardCommentArea.vue';
import PlusButton from '../button/PlusBtn.vue'; import PlusButton from '../button/PlusBtn.vue';
import SaveBtn from '../button/SaveBtn.vue'; import SaveBtn from '../button/SaveBtn.vue';
const props = defineProps({ const props = defineProps({
comment: { comment: {
type: Object, type: Object,
required: true, required: true,
@ -112,11 +108,11 @@ const props = defineProps({
}, },
isEditTextarea: { isEditTextarea: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
isDeleted: { isDeleted: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
isCommentPassword: { isCommentPassword: {
type: Boolean, type: Boolean,
@ -124,74 +120,84 @@ const props = defineProps({
}, },
passwordCommentAlert: { passwordCommentAlert: {
type: String, type: String,
default: '' default: '',
}, },
currentPasswordCommentId: { currentPasswordCommentId: {
type: Number type: Number,
}, },
password:{ password: {
type: String type: String,
}, },
}); });
// emits 정의 // emits 정의
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit', 'update:password']); const emit = defineEmits([
'submitComment',
'updateReaction',
'editClick',
'deleteClick',
'submitPassword',
'submitEdit',
'cancelEdit',
'update:password',
]);
const localEditedContent = ref(props.comment.content); const localEditedContent = ref(props.comment.content);
// 댓글 입력 창 토글 // 댓글 입력 창 토글
const isComment = ref(false); const isComment = ref(false);
const toggleComment = () => { const toggleComment = () => {
isComment.value = !isComment.value; isComment.value = !isComment.value;
}; };
// 부모 컴포넌트에 대댓글 추가 요청 // 부모 컴포넌트에 대댓글 추가 요청
const submitComment = (newComment) => { const submitComment = newComment => {
emit('submitComment', { parentId: props.comment.commentId, ...newComment, LOCBRDTYP: newComment.LOCBRDTYP }); emit('submitComment', { parentId: props.comment.commentId, ...newComment, LOCBRDTYP: newComment.LOCBRDTYP });
isComment.value = false; isComment.value = false;
}; };
// 좋아요, 싫어요 // 좋아요, 싫어요
const handleUpdateReaction = (reactionData) => { const handleUpdateReaction = reactionData => {
emit('updateReaction', { emit('updateReaction', {
boardId: props.comment.boardId, boardId: props.comment.boardId,
commentId: props.comment.commentId || reactionData.commentId, commentId: props.comment.commentId || reactionData.commentId,
...reactionData, ...reactionData,
}); });
};
}; // 비밀번호 확인
const logPasswordAndEmit = () => {
// 비밀번호 확인
const logPasswordAndEmit = () => {
emit('submitPassword', props.comment, props.password); emit('submitPassword', props.comment, props.password);
}; };
watch(() => props.comment.isEditTextarea, (newVal) => { watch(
() => props.comment.isEditTextarea,
newVal => {
if (newVal) { if (newVal) {
localEditedContent.value = props.comment.content; localEditedContent.value = props.comment.content;
} }
}); },
);
// watch(() => props.comment.isDeleted, () => { // watch(() => props.comment.isDeleted, () => {
// console.log("BoardComment - isDeleted 상태 변경됨:", newVal); // console.log("BoardComment - isDeleted 상태 변경됨:", newVal);
// if (newVal) { // if (newVal) {
// localEditedContent.value = "댓글이 삭제되었습니다."; // UI 반영 // localEditedContent.value = "댓글이 삭제되었습니다."; // UI 반영
// props.comment.isEditTextarea = false; // props.comment.isEditTextarea = false;
// } // }
// }); // });
// 수정버튼 // 수정버튼
const submitEdit = () => { const submitEdit = () => {
emit('submitEdit', props.comment, localEditedContent.value); emit('submitEdit', props.comment, localEditedContent.value);
}; };
const handleEditClick = () => { const handleEditClick = () => {
emit('editClick', props.comment); emit('editClick', props.comment);
} };
const handleReplyEditClick = (comment) => { const handleReplyEditClick = comment => {
emit('editClick', comment); emit('editClick', comment);
} };
</script> </script>

45
src/components/board/BoardCommentArea.vue
View File

@ -11,7 +11,7 @@
</div> --> </div> -->
<!-- 텍스트박스 --> <!-- 텍스트박스 -->
<div class="w-100"> <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-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> <span v-else class="invalid-feedback d-block text-start ms-2">{{ textAlert }}</span>
</div> </div>
@ -51,10 +51,10 @@
</template> </template>
<script setup> <script setup>
import { ref, defineEmits, defineProps, watch, inject } from 'vue'; import { ref, defineEmits, defineProps, watch, inject } from 'vue';
import SaveBtn from '../button/SaveBtn.vue'; import SaveBtn from '../button/SaveBtn.vue';
const props = defineProps({ const props = defineProps({
unknown: { unknown: {
type: Boolean, type: Boolean,
default: true, default: true,
@ -71,18 +71,22 @@ const props = defineProps({
type: String, type: String,
default: '', default: '',
}, },
}); maxLength: {
type: Number,
default: 500,
},
});
const $common = inject('common'); const $common = inject('common');
const comment = ref(''); const comment = ref('');
const password = ref(''); const password = ref('');
const isCheck = ref(false); const isCheck = ref(false);
const textAlert = ref(''); const textAlert = ref('');
const passwordAlert2 = ref(''); const passwordAlert2 = ref('');
const emit = defineEmits(['submitComment']); const emit = defineEmits(['submitComment']);
const handleCommentSubmit = () => { const handleCommentSubmit = () => {
if (!$common.isNotEmpty(comment.value)) { if (!$common.isNotEmpty(comment.value)) {
textAlert.value = '댓글을 입력하세요'; textAlert.value = '댓글을 입력하세요';
return false; return false;
@ -107,22 +111,21 @@ const handleCommentSubmit = () => {
// 제출 후 입력 필드 리셋 // 제출 후 입력 필드 리셋
resetCommentForm(); resetCommentForm();
}; };
// 입력 필드 리셋 함수 추가 // 입력 필드 리셋 함수 추가
const resetCommentForm = () => { const resetCommentForm = () => {
comment.value = ''; comment.value = '';
password.value = ''; password.value = '';
isCheck.value = false; isCheck.value = false;
}; };
watch( watch(
() => props.passwordAlert, () => props.passwordAlert,
() => { () => {
if (!props.passwordAlert) { if (!props.passwordAlert) {
resetCommentForm(); resetCommentForm();
} }
} },
); );
</script> </script>

71
src/components/board/BoardCommentList.vue
View File

@ -1,10 +1,6 @@
<template> <template>
<ul class="list-unstyled mt-10"> <ul class="list-unstyled mt-10">
<li <li v-for="comment in comments" :key="comment.commentId" class="mt-6 border-bottom pb-6">
v-for="comment in comments"
:key="comment.commentId"
class="mt-6 border-bottom pb-6"
>
<BoardComment <BoardComment
:unknown="unknown" :unknown="unknown"
:comment="comment" :comment="comment"
@ -21,7 +17,7 @@
@submitComment="submitComment" @submitComment="submitComment"
@submitEdit="handleSubmitEdit" @submitEdit="handleSubmitEdit"
@cancelEdit="handleCancelEdit" @cancelEdit="handleCancelEdit"
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)" @updateReaction="reactionData => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
@update:password="updatePassword" @update:password="updatePassword"
/> />
</li> </li>
@ -29,14 +25,14 @@
</template> </template>
<script setup> <script setup>
import { defineProps, defineEmits } from 'vue'; import { defineProps, defineEmits } from 'vue';
import BoardComment from './BoardComment.vue' import BoardComment from './BoardComment.vue';
const props = defineProps({ const props = defineProps({
comments: { comments: {
type: Array, type: Array,
required: true, required: true,
default: () => [] default: () => [],
}, },
unknown: { unknown: {
type: Boolean, type: Boolean,
@ -60,23 +56,32 @@ const props = defineProps({
}, },
passwordCommentAlert: { passwordCommentAlert: {
type: String, type: String,
default: '' default: '',
}, },
currentPasswordCommentId: { currentPasswordCommentId: {
type: Number type: Number,
}, },
password:{ password: {
type: String 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) => { const submitComment = replyData => {
emit('submitComment', replyData); emit('submitComment', replyData);
}; };
const handleUpdateReaction = (reactionData, commentId, boardId) => { const handleUpdateReaction = (reactionData, commentId, boardId) => {
const updatedReactionData = { const updatedReactionData = {
...reactionData, ...reactionData,
commentId: commentId || reactionData.commentId, commentId: commentId || reactionData.commentId,
@ -84,41 +89,41 @@ const handleUpdateReaction = (reactionData, commentId, boardId) => {
}; };
emit('updateReaction', updatedReactionData); emit('updateReaction', updatedReactionData);
} };
const submitPassword = (comment, password) => { const submitPassword = (comment, password) => {
emit('submitPassword', comment, password); emit('submitPassword', comment, password);
}; };
const handleEditClick = (comment) => { const handleEditClick = comment => {
if (comment.parentId) { if (comment.parentId) {
emit('editClick', comment); // 대댓글 emit('editClick', comment); // 대댓글
} else { } else {
emit('editClick', comment); // 댓글 emit('editClick', comment); // 댓글
} }
}; };
const handleSubmitEdit = (comment, editedContent) => { const handleSubmitEdit = (comment, editedContent) => {
emit("submitEdit", comment, editedContent); emit('submitEdit', comment, editedContent);
}; };
const handleDeleteClick = (comment) => { const handleDeleteClick = comment => {
if (comment.parentId) { if (comment.parentId) {
emit('deleteClick', comment); // 대댓글 삭제 emit('deleteClick', comment); // 대댓글 삭제
} else { } else {
emit('deleteClick', comment); // 댓글 삭제 emit('deleteClick', comment); // 댓글 삭제
} }
}; };
const handleCancelEdit = (comment) => { const handleCancelEdit = comment => {
if (comment.parentId) { if (comment.parentId) {
emit('cancelEdit', comment); // 대댓글 수정 취소 emit('cancelEdit', comment); // 대댓글 수정 취소
} else { } else {
emit('cancelEdit', comment); // 댓글 수정 취소 emit('cancelEdit', comment); // 댓글 수정 취소
} }
}; };
const updatePassword = (newPassword) => { const updatePassword = newPassword => {
emit('update:password', newPassword); emit('update:password', newPassword);
}; };
</script> </script>

2
src/components/board/BoardProfile.vue
View File

@ -40,7 +40,7 @@
const defaultProfile = '/img/icons/icon.png'; const defaultProfile = '/img/icons/icon.png';
// 서버의 이미지 경로 (Vue 환경 변수 사용 가능) // 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
const baseUrl = 'http://localhost:10325/'; // API 서버 URL const baseUrl = import.meta.env.VITE_SERVER; // API 서버 URL
// Props 정의 // Props 정의
const props = defineProps({ const props = defineProps({

4
src/views/board/BoardView.vue
View File

@ -92,6 +92,7 @@
:unknown="unknown" :unknown="unknown"
:commentAlert="commentAlert" :commentAlert="commentAlert"
:passwordAlert="passwordAlert" :passwordAlert="passwordAlert"
:maxLength="500"
@submitComment="handleCommentSubmit" @submitComment="handleCommentSubmit"
/> />
</div> </div>
@ -237,7 +238,6 @@
const data = response.data.data; const data = response.data.data;
profileName.value = data.author || '익명'; profileName.value = data.author || '익명';
console.log(data.author);
authorId.value = data.authorId; authorId.value = data.authorId;
boardTitle.value = data.title || '제목 없음'; boardTitle.value = data.title || '제목 없음';
boardContent.value = data.content || ''; boardContent.value = data.content || '';
@ -580,7 +580,7 @@
LOCBRDPWD: password.value, LOCBRDPWD: password.value,
LOCBRDSEQ: currentBoardId.value, LOCBRDSEQ: currentBoardId.value,
}); });
console.log('response: ', response);
if (response.data.code === 200 && response.data.data === true) { if (response.data.code === 200 && response.data.data === true) {
password.value = ''; password.value = '';
isPassword.value = false; isPassword.value = false;