게시판 저장 수정정,파일제한 추가

src/components/input/FormFile.vue

@@ -1,17 +1,25 @@
 <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">
+                {{ errorMsg }}
+            </div>
         </div>
-        <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">{{ errorMsg }}</div>
     </div>
 </template>
 
 <script setup>
-import { fileMsg } from '@/common/msgEnum';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
+// Props
 const prop = defineProps({
     title: {
         type: String,
@@ -23,24 +31,34 @@ const prop = defineProps({
         default: 'nameplz',
         required: true,
     },
-    isAlert : {
+    isAlert: {
         type: Boolean,
         default: false,
         required: false,
-    }
+    },
 });
 
-const emits = defineEmits(['update:data']);
-const errorMsg = ref(fileMsg.FileMaxSizeMsg);
-
-//파일 검사 하는거 만들어야겠지...
+// 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);
 
+// Change Handler
 const changeHandler = (event) => {
     const files = Array.from(event.target.files);
-    emits('update:data', files);
+    const totalSize = files.reduce((sum, file) => sum + file.size, 0);
+
+    if (totalSize > MAX_TOTAL_SIZE) {
+        showError.value = true; // 에러 메시지 표시
+        emits('update:data', []); // 부모 컴포넌트로 빈 배열 전달
+        emits('update:isValid', false); // 유효하지 않은 상태 전달
+    } else {
+        showError.value = false; // 에러 메시지 숨기기
+        emits('update:data', files); // 부모 컴포넌트로 파일 전달
+        emits('update:isValid', true); // 유효한 상태 전달
+    }
 };
 </script>
-
-<style>
-</style>

src/components/input/FormInput.vue

@@ -2,7 +2,7 @@
     <div class="mb-2 row">
         <label :for="name" class="col-md-2 col-form-label" :class="isLabel ? 'd-block' : 'd-none'">
             {{ title }}
-            <span :class="isEssential ? 'text-red' : 'none'">*</span>
+            <span v-if="isEssential" class="text-danger">*</span>
         </label>
         <div class="col-md-10">
             <input

src/views/board/BoardWrite.vue

@@ -57,6 +57,7 @@
                         name="files"
                         :is-alert="attachFilesAlert"
                         @update:data="attachFiles = $event"
+                        @update:isValid="isFileValid = $event"
                     />
 
                     <div class="mb-4">
@@ -71,8 +72,17 @@
                     </div>
 
                     <div class="mb-4 d-flex justify-content-end">
-                        <button type="button" class="btn btn-info" @click="goList"><i class='bx bx-left-arrow-alt'></i></button>
-                        <button type="button" class="btn btn-primary ms-1" @click="write"><i class='bx bx-check'></i></button>
+                        <button type="button" class="btn btn-info" @click="goList">
+                            <i class="bx bx-left-arrow-alt"></i>
+                        </button>
+                        <button
+                            type="button"
+                            class="btn btn-primary ms-1"
+                            @click="write"
+                            :disabled="!isFileValid"
+                        >
+                            <i class="bx bx-check"></i>
+                        </button>
                     </div>
                 </div>
             </div>
@@ -94,6 +104,7 @@ const password = ref('');
 const category = ref(0); // 기본값 0
 const content = ref('');
 const attachFiles = ref(null);
+const isFileValid = ref(true); // 파일 유효성 상태 추가
 
 const titleAlert = ref(false);
 const passwordAlert = ref(false);
@@ -112,7 +123,7 @@ const write = async () => {
     passwordAlert.value = category.value === 1 && !password.value;
     contentAlert.value = !content.value;
 
-    if (titleAlert.value || passwordAlert.value || contentAlert.value) {
+    if (titleAlert.value || passwordAlert.value || contentAlert.value || !isFileValid.value) {
         return;
     }
 
@@ -125,7 +136,6 @@ const write = async () => {
         };
 
         const { data: boardResponse } = await axios.post('board', boardData);
-        console.log(boardResponse.data);
         const boardId = boardResponse.data;
 
         if (attachFiles.value && attachFiles.value.length > 0) {