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

224
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"
@ -43,20 +43,16 @@
</template> </template>
</div> </div>
<!-- <p>현재 isDeleted 값: {{ isDeleted }}</p> --> <!-- <p>현재 isDeleted 값: {{ isDeleted }}</p> -->
<!-- <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,115 +79,125 @@
</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,
}, },
unknown: { unknown: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
isCommentAuthor: { isCommentAuthor: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
isPlusButton: { isPlusButton: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
isLike: { isLike: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
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,
default: false, default: false,
}, },
passwordCommentAlert: { passwordCommentAlert: {
type: String, type: String,
default: '' default: '',
}, },
currentPasswordCommentId: { currentPasswordCommentId: {
type: Number type: Number,
}, },
password:{ password: {
type: String 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,
}); });
}; // emits 정의
const emit = defineEmits([
'submitComment',
'updateReaction',
'editClick',
'deleteClick',
'submitPassword',
'submitEdit',
'cancelEdit',
'update:password',
]);
// 비밀번호 확인 const localEditedContent = ref(props.comment.content);
const logPasswordAndEmit = () => {
emit('submitPassword', props.comment, props.password);
};
watch(() => props.comment.isEditTextarea, (newVal) => { // 댓글 입력 창 토글
if (newVal) { const isComment = ref(false);
localEditedContent.value = props.comment.content; 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 반영 const handleUpdateReaction = reactionData => {
// props.comment.isEditTextarea = false; emit('updateReaction', {
// } boardId: props.comment.boardId,
// }); commentId: props.comment.commentId || reactionData.commentId,
...reactionData,
});
};
// 수정버튼 // 비밀번호 확인
const submitEdit = () => { const logPasswordAndEmit = () => {
emit('submitEdit', props.comment, localEditedContent.value); emit('submitPassword', props.comment, props.password);
}; };
const handleEditClick = () => { watch(
emit('editClick', props.comment); () => props.comment.isEditTextarea,
} newVal => {
if (newVal) {
localEditedContent.value = props.comment.content;
}
},
);
const handleReplyEditClick = (comment) => { // watch(() => props.comment.isDeleted, () => {
emit('editClick', comment); // 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> </script>

141
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,78 +51,81 @@
</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,
}, },
parentId: { parentId: {
type: Number, type: Number,
default: 0, default: 0,
}, },
passwordAlert: { passwordAlert: {
type: String, type: String,
default: '', default: '',
}, },
commentAlert: { commentAlert: {
type: String, type: String,
default: '', default: '',
}, },
}); maxLength: {
type: Number,
const $common = inject('common'); default: 500,
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 $common = inject('common');
resetCommentForm(); const comment = ref('');
}; const password = ref('');
const isCheck = ref(false);
const textAlert = ref('');
const passwordAlert2 = ref('');
// 입력 필드 리셋 함수 추가 const emit = defineEmits(['submitComment']);
const resetCommentForm = () => {
comment.value = '';
password.value = '';
isCheck.value = false;
};
watch( const handleCommentSubmit = () => {
() => props.passwordAlert, if (!$common.isNotEmpty(comment.value)) {
() => { textAlert.value = '댓글을 입력하세요';
if (!props.passwordAlert) { return false;
resetCommentForm(); } 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>

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

@ -1,17 +1,13 @@
<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"
:isCommentAuthor="comment.isCommentAuthor" :isCommentAuthor="comment.isCommentAuthor"
:isEditTextarea="comment.isEditTextarea" :isEditTextarea="comment.isEditTextarea"
:isDeleted="isDeleted" :isDeleted="isDeleted"
:isCommentPassword="isCommentPassword" :isCommentPassword="isCommentPassword"
:passwordCommentAlert="passwordCommentAlert || ''" :passwordCommentAlert="passwordCommentAlert || ''"
:currentPasswordCommentId="currentPasswordCommentId" :currentPasswordCommentId="currentPasswordCommentId"
:password="password" :password="password"
@ -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,96 +25,105 @@
</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,
default: true, default: true,
}, },
isCommentAuthor: { isCommentAuthor: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
isCommentPassword: { isCommentPassword: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
isEditTextarea: { isEditTextarea: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
isDeleted: { isDeleted: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
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 updatedReactionData = {
...reactionData,
commentId: commentId || reactionData.commentId,
boardId: boardId || reactionData.boardId,
}; };
emit('updateReaction', updatedReactionData); const handleUpdateReaction = (reactionData, commentId, boardId) => {
} const updatedReactionData = {
...reactionData,
commentId: commentId || reactionData.commentId,
boardId: boardId || reactionData.boardId,
};
const submitPassword = (comment, password) => { emit('updateReaction', updatedReactionData);
emit('submitPassword', comment, password); };
};
const handleEditClick = (comment) => { const submitPassword = (comment, password) => {
if (comment.parentId) { emit('submitPassword', comment, password);
emit('editClick', comment); // 대댓글 };
} else {
emit('editClick', comment); // 댓글
}
};
const handleSubmitEdit = (comment, editedContent) => { const handleEditClick = comment => {
emit("submitEdit", comment, editedContent); if (comment.parentId) {
}; emit('editClick', comment); // 대댓글
} else {
emit('editClick', comment); // 댓글
}
};
const handleDeleteClick = (comment) => { const handleSubmitEdit = (comment, editedContent) => {
if (comment.parentId) { emit('submitEdit', comment, editedContent);
emit('deleteClick', comment); // 대댓글 삭제 };
} else {
emit('deleteClick', comment); // 댓글 삭제
}
};
const handleCancelEdit = (comment) => { const handleDeleteClick = comment => {
if (comment.parentId) { if (comment.parentId) {
emit('cancelEdit', comment); // 대댓글 수정 취소 emit('deleteClick', comment); // 대댓글 삭제
} else { } else {
emit('cancelEdit', comment); // 댓글 수정 취소 emit('deleteClick', comment); // 댓글 삭제
} }
}; };
const updatePassword = (newPassword) => { const handleCancelEdit = comment => {
emit('update:password', newPassword); if (comment.parentId) {
}; emit('cancelEdit', comment); // 대댓글 수정 취소
} else {
emit('cancelEdit', comment); // 댓글 수정 취소
}
};
const updatePassword = 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;