댓글 수정사항 없으면 submit 버튼 disabled 처리

src/components/board/BoardComment.vue

@@ -38,7 +38,7 @@
                 <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>
+                    <SaveBtn class="btn btn-primary" @click="submitEdit" :isEnabled="disabled"></SaveBtn>
                 </div>
             </template>
 
@@ -142,6 +142,8 @@
     };
 
     const localEditedContent = ref(props.comment.content);
+    const isModifyContent = ref(props.comment.content);
+    const disabled = ref(false);
 
     // 댓글 입력 창 토글
     const isComment = ref(false);
@@ -182,6 +184,11 @@
     watch(
         () => localEditedContent.value,
         newVal => {
+            if (JSON.stringify(isModifyContent.value) == JSON.stringify(newVal)) {
+                disabled.value = false;
+                return;
+            }
+            disabled.value = true;
             emit('inputDetector');
         },
     );

src/components/button/SaveBtn.vue

@@ -1,23 +1,18 @@
 <template>
-    <button
+    <button type="button" class="btn btn-primary ms-1" @click="$emit('click')" :disabled="!isEnabled">
-        type="button"
-        class="btn btn-primary ms-1"
-        @click="$emit('click')"
-        :disabled="!isEnabled"
-    >
         <i class="bx bx-check"></i>
     </button>
 </template>
 
 <script>
-export default {
+    export default {
-    name: "SaveButton",
+        name: 'SaveButton',
-    props: {
+        props: {
-        isEnabled: {
+            isEnabled: {
-            type: Boolean,
+                type: Boolean,
-            default: true, // 기본적으로 활성화
+                default: true, // 기본적으로 활성화
+            },
         },
-    },
+        emits: ['click'],
-    emits: ["click"],
+    };
-};
 </script>