파일선택 > 삭제했다가 다시 파일선택시 안들어감

src/components/input/FormFile.vue

@@ -3,7 +3,16 @@
         <label :for="inputId" class="col-md-2 col-form-label">{{ title }}</label>
         <div class="col-md-10">
             <label :for="inputId" class="btn btn-label-primary">파일 선택</label>
-            <input class="form-control" type="file" style="display: none" :id="inputId" ref="fileInput" @change="changeHandler" multiple />
+            <input
+                class="form-control"
+                type="file"
+                style="display: none"
+                :id="inputId"
+                ref="fileInput"
+                :key="autoIncrement"
+                @change="changeHandler"
+                multiple
+            />
             <div v-if="showError" class="text-danger mt-1">
                 {{ errorMessage }}
             </div>
@@ -33,10 +42,14 @@
             required: false,
         },
     });
+    //:key="autoIncrement" 동일한 파일을 첨부하고 비웠다 다시넣으면 안들어가는 현상 대비.
+
     const inputId = computed(() => props.name || 'defaultFileInput');
 
     const emits = defineEmits(['update:data', 'update:isValid']);
 
+    const autoIncrement = ref(props.autoIncrement);
+
     const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB
     const MAX_FILE_COUNT = 5; // 최대 파일 개수
     const ALLOWED_FILE_TYPES = []; // 모든 파일을 허용

src/views/board/BoardEdit.vue

@@ -25,6 +25,7 @@
                         title="첨부파일"
                         name="files"
                         :is-alert="attachFilesAlert"
+                        :key="autoIncrement"
                         @update:data="handleFileUpload"
                         @update:isValid="isFileValid = $event"
                     />
@@ -98,6 +99,7 @@
     // 상태 변수
     const title = ref('');
     const content = ref('');
+    const autoIncrement = ref(0);
 
     // 경고 상태
     const titleAlert = ref(false);
@@ -124,9 +126,8 @@
     const originalPlainText = ref('');
     const originalFiles = ref([]);
 
-
     function extractPlainText(delta) {
-    if (!delta || !Array.isArray(delta.ops)) return '';
+        if (!delta || !Array.isArray(delta.ops)) return '';
         return delta.ops
             .filter(op => typeof op.insert === 'string')
             .map(op => op.insert.trim())
@@ -142,21 +143,17 @@
         const currentAttachedFiles = attachFiles.value.filter(f => f.id);
         const isFilesChanged =
             attachFiles.value.some(f => !f.id) || // id 없는 새 파일이 있는 경우
-            delFileIdx.value.length > 0 ||        // 삭제된 파일이 있는 경우
+            delFileIdx.value.length > 0 || // 삭제된 파일이 있는 경우
             !isSameFiles(
                 attachFiles.value.filter(f => f.id), // 기존 파일(id 있는 것만)
-                originalFiles.value
+                originalFiles.value,
             );
-        console.log(isTitleChanged);
-        console.log(isContentChanged);
-        console.log(isFilesChanged);
         return isTitleChanged || isContentChanged || isFilesChanged;
     });
-    watch(isChanged, (val) => {
+    watch(isChanged, val => {
         console.log('🔄 isChanged changed:', val);
     });
 
-
     // 파일 비교 함수
     function isSameFiles(current, original) {
         if (current.length !== original.length) return false;
@@ -165,10 +162,7 @@
         const sortedOriginal = [...original].sort((a, b) => a.id - b.id);
 
         return sortedCurrent.every((file, idx) => {
-            return (
+            return file.id === sortedOriginal[idx].id && file.name === sortedOriginal[idx].name;
-                file.id === sortedOriginal[idx].id &&
-                file.name === sortedOriginal[idx].name
-            );
         });
     }
 
@@ -203,11 +197,15 @@
         contentLoaded.value = true;
     };
 
-    watch(content, (val) => {
+    watch(
-        if (contentLoaded.value && !originalPlainText.value) {
+        content,
-            originalPlainText.value = extractPlainText(val);
+        val => {
-        }
+            if (contentLoaded.value && !originalPlainText.value) {
-    }, { immediate: true });
+                originalPlainText.value = extractPlainText(val);
+            }
+        },
+        { immediate: true },
+    );
 
     const handleUpdateEditorImg = item => {
         editorUploadedImgList.value = item;
@@ -288,6 +286,7 @@
         if (attachFiles.value.length <= maxFiles) {
             fileError.value = '';
         }
+        autoIncrement.value++;
     };
 
     watch(attachFiles, () => {

src/views/board/BoardWrite.vue

@@ -69,6 +69,7 @@
                         title="첨부파일"
                         name="files"
                         :is-alert="attachFilesAlert"
+                        :key="autoIncrement"
                         @update:data="handleFileUpload"
                         @update:isValid="isFileValid = $event"
                     />
@@ -154,6 +155,8 @@
         }
     };
 
+    const autoIncrement = ref(0);
+
     onMounted(() => {
         fetchCategories();
     });
@@ -180,6 +183,7 @@
         }
         fileError.value = '';
         attachFiles.value = [...attachFiles.value, ...validFiles].slice(0, maxFiles);
+        console.log('attachFiles.value: ', attachFiles.value);
     };
 
     const removeFile = index => {
@@ -187,6 +191,7 @@
         if (attachFiles.value.length <= maxFiles) {
             fileError.value = '';
         }
+        autoIncrement.value++;
     };
 
     watch(attachFiles, () => {