From aec813bb929fe53bcb87915c6835bfe41643a1e8 Mon Sep 17 00:00:00 2001
From: ckx6954 <ckx6954@local-host.co.kr>
Date: Tue, 17 Dec 2024 10:32:12 +0900
Subject: [PATCH] =?UTF-8?q?file=20props,emit=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/FormFile.vue | 23 +++++++++++++++++++++--
 src/views/board/BoardWrite.vue    |  3 ++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/input/FormFile.vue b/src/components/input/FormFile.vue
index e0d026a..1546c48 100644
--- a/src/components/input/FormFile.vue
+++ b/src/components/input/FormFile.vue
@@ -1,13 +1,32 @@
 <template>
     <div class="mb-4 row">
-        <label for="html5-email-input" class="col-md-2 col-form-label"> 첨부파일 </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="formFileMultiple" multiple />
+            <input class="form-control" type="file" :id="name" @change="changeHandler" multiple />
         </div>
     </div>
 </template>
 
 <script setup>
+const prop = defineProps({
+    title: {
+        type: String,
+        default: '라벨',
+        required: true,
+    },
+    name: {
+        type: String,
+        default: 'nameplz',
+        required: true,
+    },
+});
+
+const emits = defineEmits(['update:data']);
+
+const changeHandler = (event) => {
+    const files = Array.from(event.target.files);
+    emits('update:data', files);
+};
 </script>
 
 <style>
diff --git a/src/views/board/BoardWrite.vue b/src/views/board/BoardWrite.vue
index 78542b4..58f8879 100644
--- a/src/views/board/BoardWrite.vue
+++ b/src/views/board/BoardWrite.vue
@@ -15,7 +15,7 @@
 
                     <FormInput title="비밀번호" name="pw" type="password" :is-essential="true" @update:data="password = $event" />
 
-                    <FormFile />
+                    <FormFile title="첨부파일" name="files" @update:data="attachFiles = $event" />
 
                     <div class="mb-4">
                         <label for="html5-tel-input" class="col-md-2 col-form-label">
@@ -50,6 +50,7 @@ const title = ref('');
 const password = ref('');
 const category = ref('');
 const content = ref('');
+const attachFiles = ref(null);
 </script>
 
 <style>