diff --git a/src/components/input/FormFile.vue b/src/components/input/FormFile.vue
index f6da5d2..d14e39c 100644
--- a/src/components/input/FormFile.vue
+++ b/src/components/input/FormFile.vue
@@ -3,7 +3,16 @@
-
+
{{ errorMessage }}
@@ -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 = []; // 모든 파일을 허용
diff --git a/src/views/board/BoardEdit.vue b/src/views/board/BoardEdit.vue
index 8be6961..c13a1cf 100644
--- a/src/views/board/BoardEdit.vue
+++ b/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 (
- file.id === sortedOriginal[idx].id &&
- file.name === sortedOriginal[idx].name
- );
+ return file.id === sortedOriginal[idx].id && file.name === sortedOriginal[idx].name;
});
}
@@ -203,11 +197,15 @@
contentLoaded.value = true;
};
- watch(content, (val) => {
- if (contentLoaded.value && !originalPlainText.value) {
- originalPlainText.value = extractPlainText(val);
- }
- }, { immediate: true });
+ watch(
+ content,
+ val => {
+ if (contentLoaded.value && !originalPlainText.value) {
+ 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, () => {
diff --git a/src/views/board/BoardWrite.vue b/src/views/board/BoardWrite.vue
index b622870..101a4c6 100644
--- a/src/views/board/BoardWrite.vue
+++ b/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, () => {