From b4df01f01c03096a1d386bb473448d05eda09bb8 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Fri, 24 Jan 2025 15:35:11 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=A8=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/FormFile.vue | 43 +++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/input/FormFile.vue b/src/components/input/FormFile.vue
index 71070db..bc45bea 100644
--- a/src/components/input/FormFile.vue
+++ b/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 showError = ref(false);
+const MAX_FILE_COUNT = 5; // 최대 파일 개수
+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; // 에러 메시지 표시
-        emits('update:data', []); // 부모 컴포넌트로 빈 배열 전달
-        emits('update:isValid', false); // 유효하지 않은 상태 전달
+        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; // 에러 메시지 숨기기
-        emits('update:data', files); // 부모 컴포넌트로 파일 전달
-        emits('update:isValid', true); // 유효한 상태 전달
+        showError.value = false;
+        fileMsgKey.value = '';
+        emits('update:data', files);
+        emits('update:isValid', true);
     }
 };
+
+const errorMessage = computed(() => (fileMsg[fileMsgKey.value] || ''));
 </script>