글수정

src/views/board/BoardEdit.vue

@@ -70,7 +70,7 @@
                         <button type="button" class="btn btn-info right" @click="goBack">
                             <i class="bx bx-left-arrow-alt"></i>
                         </button>
-                        <button type="button" class="btn btn-primary ms-1" @click="updateBoard">
+                        <button type="button" class="btn btn-primary ms-1" :disabled="!isChanged" @click="updateBoard">
                             <i class="bx bx-check"></i>
                         </button>
                     </div>
@@ -120,6 +120,58 @@
     const editorUploadedImgList = ref([]);
     const editorDeleteImgList = ref([]);
 
+    const originalTitle = ref('');
+    const originalPlainText = ref('');
+    const originalFiles = ref([]);
+
+
+    function extractPlainText(delta) {
+    if (!delta || !Array.isArray(delta.ops)) return '';
+        return delta.ops
+            .filter(op => typeof op.insert === 'string')
+            .map(op => op.insert.trim())
+            .join(' ')
+            .trim();
+    }
+
+    const isChanged = computed(() => {
+        const isTitleChanged = title.value !== originalTitle.value;
+        const currentPlainText = extractPlainText(content.value);
+        const isContentChanged = currentPlainText !== originalPlainText.value;
+
+        const currentAttachedFiles = attachFiles.value.filter(f => f.id);
+        const isFilesChanged =
+            attachFiles.value.some(f => !f.id) || // id 없는 새 파일이 있는 경우
+            delFileIdx.value.length > 0 ||        // 삭제된 파일이 있는 경우
+            !isSameFiles(
+                attachFiles.value.filter(f => f.id), // 기존 파일(id 있는 것만)
+                originalFiles.value
+            );
+        console.log(isTitleChanged);
+        console.log(isContentChanged);
+        console.log(isFilesChanged);
+        return isTitleChanged || isContentChanged || isFilesChanged;
+    });
+    watch(isChanged, (val) => {
+        console.log('🔄 isChanged changed:', val);
+    });
+
+
+    // 파일 비교 함수
+    function isSameFiles(current, original) {
+        if (current.length !== original.length) return false;
+
+        const sortedCurrent = [...current].sort((a, b) => a.id - b.id);
+        const sortedOriginal = [...original].sort((a, b) => a.id - b.id);
+
+        return sortedCurrent.every((file, idx) => {
+            return (
+                file.id === sortedOriginal[idx].id &&
+                file.name === sortedOriginal[idx].name
+            );
+        });
+    }
+
     // 게시물 데이터 로드
     const fetchBoardDetails = async () => {
         // 수정 데이터 전송
@@ -139,15 +191,24 @@
         const boardData = data.data;
         // 기존 첨부파일 추가
         if (boardData.hasAttachment && boardData.attachments.length > 0) {
-            attachFiles.value = addDisplayFileName([...boardData.attachments]);
+            const formatted = addDisplayFileName([...boardData.attachments]);
+            attachFiles.value = formatted;
+            originalFiles.value = formatted;
         }
 
         // 데이터 설정
         title.value = boardData.title || '제목 없음';
         content.value = boardData.content || '내용 없음';
+        originalTitle.value = title.value;
         contentLoaded.value = true;
     };
 
+    watch(content, (val) => {
+        if (contentLoaded.value && !originalPlainText.value) {
+            originalPlainText.value = extractPlainText(val);
+        }
+    }, { immediate: true });
+
     const handleUpdateEditorImg = item => {
         editorUploadedImgList.value = item;
     };