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

댓글 수정시 공백체크

Browse Source
This commit is contained in:
nevermoregb 2025-03-14 01:53:35 +09:00
parent 2ec81f274d
commit 84f5cf4412
3 changed files with 42 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,7 @@
<div class="mt-6">
<template v-if="comment.isEditTextarea">
<textarea v-model="localEditedContent" class="form-control"></textarea>
<span v-if="editCommentAlert" class="invalid-feedback d-block text-start">{{ editCommentAlert }}</span>
<div class="mt-2 d-flex justify-content-end">
<SaveBtn class="btn btn-primary" @click="submitEdit"></SaveBtn>
</div>
@ -60,7 +61,7 @@
</template>
<script setup>
import { defineProps, defineEmits, ref, computed, watch } from 'vue';
import { defineProps, defineEmits, ref, computed, watch, inject } from 'vue';
import BoardProfile from './BoardProfile.vue';
import BoardCommentArea from './BoardCommentArea.vue';
import PlusButton from '../button/PlusBtn.vue';
@ -109,6 +110,7 @@
password: {
type: String,
},
editCommentAlert: String,
});
// emits 정의
@ -121,6 +123,7 @@
'submitEdit',
'cancelEdit',
'update:password',
'inputDetector',
]);
const filterInput = event => {
@ -165,6 +168,14 @@
},
);
// text 변화 감지하여 부모에게 전달
watch(
() => localEditedContent.value,
newVal => {
emit('inputDetector');
},
);
// watch(() => props.comment.isDeleted, () => {
// console.log("BoardComment - isDeleted 상태 변경됨:", newVal);

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

@ -11,14 +11,16 @@
:passwordCommentAlert="passwordCommentAlert || ''"
:currentPasswordCommentId="currentPasswordCommentId"
:password="password"
:editCommentAlert="editCommentAlert[comment.commentId]"
@editClick="handleEditClick"
@deleteClick="handleDeleteClick"
@submitPassword="submitPassword"
@submitComment="submitComment"
@submitEdit="handleSubmitEdit"
@submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
@cancelEdit="handleCancelEdit"
@updateReaction="reactionData => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
@update:password="updatePassword"
@inputDetector="$emit('inputDetector')"
>
<!-- 대댓글 -->
<template #reply>
@ -35,14 +37,16 @@
:currentPasswordCommentId="currentPasswordCommentId"
:passwordCommentAlert="passwordCommentAlert"
:password="password"
:editCommentAlert="editCommentAlert[child.commentId]"
@editClick="handleReplyEditClick"
@deleteClick="$emit('deleteClick', child)"
@submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
@submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent, child.commentId)"
@cancelEdit="$emit('cancelEdit', child)"
@submitComment="submitComment"
@updateReaction="handleUpdateReaction"
@submitPassword="$emit('submitPassword', child, password)"
@update:password="$emit('update:password', $event)"
@inputDetector="$emit('inputDetector')"
/>
</li>
</ul>
@ -95,6 +99,7 @@
index: {
type: Number,
},
editCommentAlert: Object,
});
const emit = defineEmits([
@ -106,6 +111,7 @@
'clearPassword',
'submitEdit',
'update:password',
'inputDetector',
]);
const submitComment = replyData => {

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

@ -109,6 +109,7 @@
:passwordCommentAlert="passwordCommentAlert"
:currentPasswordCommentId="currentPasswordCommentId"
:password="password"
:editCommentAlert="editCommentAlert"
@editClick="editComment"
@deleteClick="deleteComment"
@updateReaction="handleCommentReaction"
@ -118,6 +119,7 @@
@cancelEdit="handleCancelEdit"
@submitEdit="handleSubmitEdit"
@update:password="updatePassword"
@inputDetector="inputDetector"
/>
<Pagination v-if="pagination.pages" v-bind="pagination" @update:currentPage="handlePageChange" />
</div>
@ -133,11 +135,13 @@
import BoardCommentList from '@c/board/BoardCommentList.vue';
import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
import Pagination from '@c/pagination/Pagination.vue';
import { ref, onMounted, computed } from 'vue';
import { ref, onMounted, computed, inject } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserInfoStore } from '@/stores/useUserInfoStore';
import { useToastStore } from '@s/toastStore';
import axios from '@api';
const $common = inject('common');
// 게시물 데이터 상태
const profileName = ref('');
const boardTitle = ref('제목 없음');
@ -161,6 +165,7 @@
const unknown = computed(() => profileName.value === '익명');
const currentUserId = computed(() => userStore?.user?.id); // 현재 로그인한 사용자 id
const authorId = ref(''); // 작성자 id
const editCommentAlert = ref({}); //댓글, 대댓글 오류 메세지 객체
const isAuthor = computed(() => currentUserId.value === authorId.value);
const commentsWithAuthStatus = computed(() => {
@ -234,6 +239,7 @@
const inputCheck = () => {
passwordAlert.value = '';
};
// 게시물 상세 데이터 불러오기
const fetchBoardDetails = async () => {
const response = await axios.get(`board/${currentBoardId.value}`);
@ -437,6 +443,11 @@
}
};
// 댓글, 대댓글 오류 메세지 초기화
const inputDetector = () => {
editCommentAlert.value = {};
};
// 게시글 수정 버튼 클릭
const editClick = unknown => {
const isUnknown = unknown?.unknown ?? false;
@ -721,6 +732,7 @@
// 댓글 수정 확인
const handleSubmitEdit = async (comment, editedContent) => {
if (!checkValidation(comment, editedContent)) return;
togglePassword();
try {
const response = await axios.put(`board/comment/${comment.commentId}`, {
@ -744,6 +756,15 @@
}
};
// 유효성 체크하여 해당 댓글, 대댓글에 오류메세지 전달.
const checkValidation = (comment, content) => {
if (!$common.isNotEmpty(content)) {
editCommentAlert.value[comment.commentId] = '내용을 입력하세요';
return false;
}
return true;
};
// 댓글 수정 취소 (대댓글 포함)
const handleCancelEdit = comment => {
const targetComment = findCommentById(comment.commentId, comments.value);