Merge remote-tracking branch 'origin/main' into board-firstimg

src/components/input/FormFile.vue

@@ -10,14 +10,15 @@
                 multiple
             />
             <div v-if="showError" class="text-danger mt-1">
-                {{ errorMsg }}
+                {{ errorMessage }}
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref ,computed} from 'vue';
+import { fileMsg } from '@/common/msgEnum';
 
 // Props
 const prop = defineProps({
@@ -38,27 +39,43 @@ const prop = defineProps({
     },
 });
 
-// Emits
 const emits = defineEmits(['update:data', 'update:isValid']);
 
-// Constants
 const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB
-const errorMsg = ref('첨부파일의 총 용량이 5MB를 초과합니다.');
+const MAX_FILE_COUNT = 5; // 최대 파일 개수
-const showError = ref(false);
+const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/png', 'application/pdf']; // 허용된 파일 유형
+
+const showError = ref(false);
+const fileMsgKey = ref(''); // 에러 메시지 키
 
-// Change Handler
 const changeHandler = (event) => {
     const files = Array.from(event.target.files);
     const totalSize = files.reduce((sum, file) => sum + file.size, 0);
+    const invalidFiles = files.filter(file => !ALLOWED_FILE_TYPES.includes(file.type));
 
+    // 파일 검증 로직
     if (totalSize > MAX_TOTAL_SIZE) {
-        showError.value = true; // 에러 메시지 표시
+        showError.value = true;
-        emits('update:data', []); // 부모 컴포넌트로 빈 배열 전달
+        fileMsgKey.value = 'FileMaxSizeMsg';
-        emits('update:isValid', false); // 유효하지 않은 상태 전달
+        emits('update:data', []);
+        emits('update:isValid', false);
+    } else if (files.length > MAX_FILE_COUNT) {
+        showError.value = true;
+        fileMsgKey.value = 'FileMaxLengthMsg';
+        emits('update:data', []);
+        emits('update:isValid', false);
+    } else if (invalidFiles.length > 0) {
+        showError.value = true;
+        fileMsgKey.value = 'FileNotTypeMsg';
+        emits('update:data', []);
+        emits('update:isValid', false);
     } else {
-        showError.value = false; // 에러 메시지 숨기기
+        showError.value = false;
-        emits('update:data', files); // 부모 컴포넌트로 파일 전달
+        fileMsgKey.value = '';
-        emits('update:isValid', true); // 유효한 상태 전달
+        emits('update:data', files);
+        emits('update:isValid', true);
     }
 };
+
+const errorMessage = computed(() => (fileMsg[fileMsgKey.value] || ''));
 </script>