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

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

@ -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"
@ -52,11 +52,7 @@
<!-- 대댓글 -->
<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 === '익명'"
@ -112,11 +108,11 @@ const props = defineProps({
},
isEditTextarea: {
type: Boolean,
default: false
default: false,
},
isDeleted: {
type: Boolean,
default: false
default: false,
},
isCommentPassword: {
type: Boolean,
@ -124,18 +120,27 @@ const props = defineProps({
},
passwordCommentAlert: {
type: String,
default: ''
default: '',
},
currentPasswordCommentId: {
type: Number
type: Number,
},
password: {
type: String
type: String,
},
});
// 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);
@ -146,19 +151,18 @@ const toggleComment = () => {
};
// 부모 컴포넌트에 대댓글 추가 요청
const submitComment = (newComment) => {
const submitComment = newComment => {
emit('submitComment', { parentId: props.comment.commentId, ...newComment, LOCBRDTYP: newComment.LOCBRDTYP });
isComment.value = false;
};
// 좋아요, 싫어요
const handleUpdateReaction = (reactionData) => {
const handleUpdateReaction = reactionData => {
emit('updateReaction', {
boardId: props.comment.boardId,
commentId: props.comment.commentId || reactionData.commentId,
...reactionData,
});
};
// 비밀번호 확인
@ -166,11 +170,14 @@ const logPasswordAndEmit = () => {
emit('submitPassword', props.comment, props.password);
};
watch(() => props.comment.isEditTextarea, (newVal) => {
watch(
() => props.comment.isEditTextarea,
newVal => {
if (newVal) {
localEditedContent.value = props.comment.content;
}
});
},
);
// watch(() => props.comment.isDeleted, () => {
// console.log("BoardComment - isDeleted 상태 변경됨:", newVal);
@ -188,10 +195,9 @@ const submitEdit = () => {
const handleEditClick = () => {
emit('editClick', props.comment);
}
};
const handleReplyEditClick = (comment) => {
const handleReplyEditClick = comment => {
emit('editClick', comment);
}
};
</script>

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

@ -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>
@ -71,6 +71,10 @@ const props = defineProps({
type: String,
default: '',
},
maxLength: {
type: Number,
default: 500,
},
});
const $common = inject('common');
@ -122,7 +126,6 @@ watch(
if (!props.passwordAlert) {
resetCommentForm();
}
}
},
);
</script>

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

@ -1,10 +1,6 @@
<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"
@ -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>
@ -30,13 +26,13 @@
<script setup>
import { defineProps, defineEmits } from 'vue';
import BoardComment from './BoardComment.vue'
import BoardComment from './BoardComment.vue';
const props = defineProps({
comments: {
type: Array,
required: true,
default: () => []
default: () => [],
},
unknown: {
type: Boolean,
@ -60,19 +56,28 @@ const props = defineProps({
},
passwordCommentAlert: {
type: String,
default: ''
default: '',
},
currentPasswordCommentId: {
type: Number
type: Number,
},
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);
};
@ -84,13 +89,13 @@ const handleUpdateReaction = (reactionData, commentId, boardId) => {
};
emit('updateReaction', updatedReactionData);
}
};
const submitPassword = (comment, password) => {
emit('submitPassword', comment, password);
};
const handleEditClick = (comment) => {
const handleEditClick = comment => {
if (comment.parentId) {
emit('editClick', comment); // 대댓글
} else {
@ -99,10 +104,10 @@ const handleEditClick = (comment) => {
};
const handleSubmitEdit = (comment, editedContent) => {
emit("submitEdit", comment, editedContent);
emit('submitEdit', comment, editedContent);
};
const handleDeleteClick = (comment) => {
const handleDeleteClick = comment => {
if (comment.parentId) {
emit('deleteClick', comment); // 대댓글 삭제
} else {
@ -110,7 +115,7 @@ const handleDeleteClick = (comment) => {
}
};
const handleCancelEdit = (comment) => {
const handleCancelEdit = comment => {
if (comment.parentId) {
emit('cancelEdit', comment); // 대댓글 수정 취소
} else {
@ -118,7 +123,7 @@ const handleCancelEdit = (comment) => {
}
};
const updatePassword = (newPassword) => {
const updatePassword = newPassword => {
emit('update:password', newPassword);
};
</script>

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

@ -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({

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

@ -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;