게시글 수정 화면 작업

src/views/board/BoardEdit.vue

@@ -22,19 +22,21 @@
                     />
 
                     <!-- 실시간 반영된 파일 개수 표시 -->
-                    <p class="text-muted mt-1">첨부파일: {{ fileCount }} / 5개</p>
+                    <div>
-                    <p v-if="fileError" class="text-danger">{{ fileError }}</p>
+                        <p class="text-muted mt-1">첨부파일: {{ fileCount }} / 5개</p>
+                        <p v-if="fileError" class="text-danger">{{ fileError }}</p>
 
-                    <ul class="list-group mt-2" v-if="attachFiles.length">
+                        <ul class="list-group mb-2" v-if="attachFiles.length">
-                        <li
+                            <li
-                            v-for="(file, index) in attachFiles"
+                                v-for="(file, index) in attachFiles"
-                            :key="index"
+                                :key="index"
-                            class="list-group-item d-flex justify-content-between align-items-center"
+                                class="list-group-item d-flex justify-content-between align-items-center"
-                        >
+                            >
-                            {{ file.name }}
+                                {{ file.name }}
-                            <button class="close-btn" @click="removeFile(index)">✖</button>
+                                <button class="close-btn" @click="removeFile(index, file)">✖</button>
-                        </li>
+                            </li>
-                    </ul>
+                        </ul>
+                    </div>
 
                     <!-- 내용 입력 -->
                     <div class="mb-4">
@@ -71,7 +73,8 @@
 <script setup>
     import QEditor from '@c/editor/QEditor.vue';
     import FormInput from '@c/input/FormInput.vue';
-    import { ref, onMounted } from 'vue';
+    import FormFile from '@c/input/FormFile.vue';
+    import { ref, onMounted, computed, watch } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
     import axios from '@api';
 
@@ -82,21 +85,32 @@
     // 경고 상태
     const titleAlert = ref(false);
     const contentAlert = ref(false);
-    const contentLoaded = ref(false); //
+    const contentLoaded = ref(false);
 
     // 라우터
     const router = useRouter();
     const route = useRoute();
     const currentBoardId = ref(route.params.id); // 라우트에서 ID 가져오기
+
+    // 파일
+    const maxFiles = 5;
+    const maxSize = 10 * 1024 * 1024;
+    const attachFiles = ref([]);
+    const fileError = ref('');
+    const attachFilesAlert = ref(false);
+    const isFileValid = ref(true);
+    const delFileIdx = ref([]); // 제외할 기존 첨부파일 ID
+    const additionalFiles = ref([]); // 새로 추가할 첨부파일
+
     // 게시물 데이터 로드
     const fetchBoardDetails = async () => {
         try {
             const response = await axios.get(`board/${currentBoardId.value}`);
             const data = response.data.data;
 
-            if (!data) {
+            // 기존 첨부파일 추가
-                console.error('API에서 게시물 데이터를 반환하지 않았습니다.');
+            if (data.hasAttachment && data.attachments.length > 0) {
-                return;
+                attachFiles.value = addDisplayFileName([...data.attachments]);
             }
 
             // 데이터 설정
@@ -108,6 +122,13 @@
         }
     };
 
+    // 기존 첨부파일명을 노출
+    const addDisplayFileName = fileInfos =>
+        fileInfos.map(file => ({
+            ...file,
+            name: `${file.originalName}.${file.extension}`,
+        }));
+
     // 목록 페이지로 이동
     const goList = () => {
         router.push('/board');
@@ -136,7 +157,22 @@
                 LOCBRDSEQ: currentBoardId.value,
             };
 
-            await axios.put(`board/${currentBoardId.value}`, boardData);
+            if (delFileIdx.value && delFileIdx.value.length > 0) {
+                boardData.delFileIdx = [...delFileIdx.value];
+            }
+
+            const fileArray = newFileFilter(attachFiles);
+            const formData = new FormData();
+
+            Object.entries(boardData).forEach(([key, value]) => {
+                formData.append(key, value);
+            });
+
+            fileArray.forEach((file, idx) => {
+                formData.append('files', file);
+            });
+
+            await axios.put(`board/${currentBoardId.value}`, formData, { isFormData: true });
 
             alert('게시물이 수정되었습니다.');
             goList();
@@ -146,6 +182,43 @@
         }
     };
 
+    ////////////////// fileSection[S] ////////////////////
+    const fileCount = computed(() => attachFiles.value.length);
+
+    const handleFileUpload = files => {
+        const validFiles = files.filter(file => file.size <= maxSize);
+
+        if (files.some(file => file.size > maxSize)) {
+            fileError.value = '파일 크기가 10MB를 초과할 수 없습니다.';
+            return;
+        }
+        if (attachFiles.value.length + validFiles.length > maxFiles) {
+            fileError.value = `최대 ${maxFiles}개의 파일만 업로드할 수 있습니다.`;
+            return;
+        }
+        fileError.value = '';
+        attachFiles.value = [...attachFiles.value, ...validFiles].slice(0, maxFiles);
+    };
+
+    const removeFile = (index, file) => {
+        if (file.id) delFileIdx.value.push(file.id);
+
+        attachFiles.value.splice(index, 1);
+        if (attachFiles.value.length <= maxFiles) {
+            fileError.value = '';
+        }
+    };
+
+    watch(attachFiles, () => {
+        isFileValid.value = attachFiles.value.length <= maxFiles;
+    });
+
+    const newFileFilter = attachFiles => {
+        const copyFiles = [...attachFiles.value];
+        return copyFiles.filter(item => !item.id);
+    };
+    ////////////////// fileSection[E] ////////////////////
+
     // 컴포넌트 마운트 시 데이터 로드
     onMounted(() => {
         if (currentBoardId.value) {