댓글 수정시 공백체크

src/components/board/BoardComment.vue

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

src/components/board/BoardCommentList.vue

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

src/views/board/BoardView.vue

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