From 92b7d5d4acaf0a1cbca34f9a8930b7245a083bb5 Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Thu, 27 Mar 2025 12:07:59 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B2=A8=EB=B6=80=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/FormFile.vue | 122 ++++++++++++++----------------
 1 file changed, 57 insertions(+), 65 deletions(-)

diff --git a/src/components/input/FormFile.vue b/src/components/input/FormFile.vue
index 833c6b0..f6da5d2 100644
--- a/src/components/input/FormFile.vue
+++ b/src/components/input/FormFile.vue
@@ -2,14 +2,8 @@
     <div class="mb-4 row">
         <label :for="inputId" class="col-md-2 col-form-label">{{ title }}</label>
         <div class="col-md-10">
-            <input
-                class="form-control"
-                type="file"
-                :id="inputId"
-                ref="fileInput"
-                @change="changeHandler"
-                multiple
-            />
+            <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 />
             <div v-if="showError" class="text-danger mt-1">
                 {{ errorMessage }}
             </div>
@@ -18,69 +12,67 @@
 </template>
 
 <script setup>
-import { ref ,computed} from 'vue';
-import { fileMsg } from '@/common/msgEnum';
+    import { ref, computed } from 'vue';
+    import { fileMsg } from '@/common/msgEnum';
 
-// Props
-const props = defineProps({
-    title: {
-        type: String,
-        default: '라벨',
-        required: true,
-    },
-    name: {
-        type: String,
-        default: 'fileInput',
-        required: true,
-    },
-    isAlert: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-});
-const inputId = computed(() => props.name || 'defaultFileInput');
+    // Props
+    const props = defineProps({
+        title: {
+            type: String,
+            default: '라벨',
+            required: true,
+        },
+        name: {
+            type: String,
+            default: 'fileInput',
+            required: true,
+        },
+        isAlert: {
+            type: Boolean,
+            default: false,
+            required: false,
+        },
+    });
+    const inputId = computed(() => props.name || 'defaultFileInput');
 
-const emits = defineEmits(['update:data', 'update:isValid']);
+    const emits = defineEmits(['update:data', 'update:isValid']);
 
-const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB
-const MAX_FILE_COUNT = 5; // 최대 파일 개수
-const ALLOWED_FILE_TYPES = []; // 모든 파일을 허용
+    const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB
+    const MAX_FILE_COUNT = 5; // 최대 파일 개수
+    const ALLOWED_FILE_TYPES = []; // 모든 파일을 허용
 
-const showError = ref(false);
-const fileMsgKey = ref(''); // 에러 메시지 키
+    const showError = ref(false);
+    const fileMsgKey = ref(''); // 에러 메시지 키
 
-const changeHandler = (event) => {
-    const files = Array.from(event.target.files);
-    const totalSize = files.reduce((sum, file) => sum + file.size, 0);
+    const changeHandler = event => {
+        const files = Array.from(event.target.files);
+        const totalSize = files.reduce((sum, file) => sum + file.size, 0);
 
-    // ALLOWED_FILE_TYPES가 비어있으면 모든 파일 허용
-    const invalidFiles = ALLOWED_FILE_TYPES.length > 0
-        ? files.filter(file => !ALLOWED_FILE_TYPES.includes(file.type))
-        : [];
+        // ALLOWED_FILE_TYPES가 비어있으면 모든 파일 허용
+        const invalidFiles = ALLOWED_FILE_TYPES.length > 0 ? 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);
-    }
-};
+        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);
+        }
+    };
 
-const errorMessage = computed(() => (fileMsg[fileMsgKey.value] || ''));
+    const errorMessage = computed(() => fileMsg[fileMsgKey.value] || '');
 </script>