파일검증 수정정

src/components/input/FormFile.vue

@@ -1,17 +1,26 @@
 <template>
     <div class="mb-4 row">
-        <label :for="name" class="col-md-2 col-form-label">{{ title }} </label>
+        <label :for="name" class="col-md-2 col-form-label">{{ title }}</label>
         <div class="col-md-10">
-            <input class="form-control" type="file" :id="name" @change="changeHandler" multiple />
+            <input
+                class="form-control"
+                type="file"
+                :id="name"
+                @change="changeHandler"
+                multiple
+            />
+            <div v-if="showError" class="text-danger mt-1">
+                {{ errorMessage }}
+            </div>
         </div>
-        <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">{{ errorMsg }}</div>
     </div>
 </template>
 
 <script setup>
+import { ref ,computed} from 'vue';
 import { fileMsg } from '@/common/msgEnum';
-import { ref } from 'vue';
 
+// Props
 const prop = defineProps({
     title: {
         type: String,
@@ -23,24 +32,57 @@ const prop = defineProps({
         default: 'nameplz',
         required: true,
     },
-    isAlert : {
+    isAlert: {
         type: Boolean,
         default: false,
         required: false,
-    }
+    },
 });
 
-const emits = defineEmits(['update:data']);
+const emits = defineEmits(['update:data', 'update:isValid']);
-const errorMsg = ref(fileMsg.FileMaxSizeMsg);
 
-//파일 검사 하는거 만들어야겠지...
+const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB
+const MAX_FILE_COUNT = 5; // 최대 파일 개수
+const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/png', 'application/pdf']; // 허용된 파일 유형
 
+const showError = ref(false);
+const fileMsgKey = ref(''); // 에러 메시지 키
 
 const changeHandler = (event) => {
     const files = Array.from(event.target.files);
-    emits('update:data', 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;
+        fileMsgKey.value = 'FileMaxSizeMsg';
+        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;
+        fileMsgKey.value = '';
+        emits('update:data', files);
+        emits('update:isValid', true);
+    }
 };
+
+// Computed: 에러 메시지 가져오기
+const errorMessage = computed(() => (fileMsg[fileMsgKey.value] || ''));
 </script>
 
-<style>
+<style scoped>
+.text-danger {
+    font-size: 0.875rem;
+}
 </style>