Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front

2025-03-07 12:09:36 +09:00 · 2025-03-07 12:09:36 +09:00 · 73b831a13f
commit 73b831a13f
parent 63dacb4c3c ad6ed9df55
7 changed files with 1059 additions and 963 deletions
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@ -10,12 +10,8 @@
                <div class="profile-detail">
                    <span>{{ date }}</span>
                    <template v-if="showDetail">
-                        <span class="ms-2">
-                            <i class="fa-regular fa-eye"></i> {{ views }}
-                        </span>
-                        <span>
-                            <i class="bx bx-comment"></i> {{ commentNum }}
-                        </span>
+                        <span class="ms-2"> <i class="fa-regular fa-eye"></i> {{ views }} </span>
+                        <span class="ms-1"> <i class="bx bx-comment"></i> {{ commentNum }} </span>
                    </template>
                </div>
            </div>
@ -29,112 +25,104 @@
            </template>

            <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
-            <BoardRecommendBtn
-                v-if="isLike"
-                :boardId="boardId"
-                :comment="comment"
-                @updateReaction="handleUpdateReaction"
-            />
+            <BoardRecommendBtn v-if="isLike" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
        </div>
    </div>
 </template>

 <script setup>
-import { computed, defineProps, defineEmits } from 'vue';
-import DeleteButton from '../button/DeleteBtn.vue';
-import EditButton from '../button/EditBtn.vue';
-import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
+    import { computed, defineProps, defineEmits } from 'vue';
+    import DeleteButton from '../button/DeleteBtn.vue';
+    import EditButton from '../button/EditBtn.vue';
+    import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';

-// 기본 프로필 이미지 경로
-const defaultProfile = "/img/icons/icon.png";
+    // 기본 프로필 이미지 경로
+    const defaultProfile = '/img/icons/icon.png';

-// 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
-const baseUrl = "http://localhost:10325/"; // API 서버 URL
+    // 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
+    const baseUrl = 'http://localhost:10325/'; // API 서버 URL

-// Props 정의
-const props = defineProps({
-    comment: {
-        type: Object,
-        required: false,
-    },
-    boardId: {
-        type: Number,
-        required: false
-    },
-    commentId: {
-        type: Number,
-        required: false,
-    },
-    profileName: {
-        type: String,
-        default: '',
-    },
-    profilePath: {
-        type: String,
-        default: '',
-    },
-    unknown: {
-        type: Boolean,
-        default: true,
-    },
-    showDetail: {
-        type: Boolean,
-        default: true,
-    },
-    isAuthor: {
-        type: Boolean,
-        default: false,
-    },
-    isCommentAuthor: Boolean,
-    isCommentProfile: Boolean,
-    date: {
-        type: String,
-        required: '',
-    },
-    views: {
-        type: Number,
-        default: 0,
-    },
-    commentNum: {
-        type: Number,
-        default: 0,
-    },
-    isLike: {
-        type: Boolean,
-        default: false,
-    }
-});
-
-const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
-
-const isDeletedComment = computed(() => {
-    return props.comment?.content === '삭제된 댓글입니다' &&
-           props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
-});
-
-// 수정
-const editClick = () => {
-    emit('editClick', { ...props.comment, unknown: props.unknown });
-};
-
-// 삭제
-const deleteClick = () => {
-    emit('deleteClick', { ...props.comment, unknown: props.unknown });
-};
-
-// 좋아요/싫어요 업데이트
-const handleUpdateReaction = (reactionData) => {
-    emit("updateReaction", {
-        boardId: props.boardId,
-        commentId: props.comment?.commentId,
-        ...reactionData,
+    // Props 정의
+    const props = defineProps({
+        comment: {
+            type: Object,
+            required: false,
+        },
+        boardId: {
+            type: Number,
+            required: false,
+        },
+        commentId: {
+            type: Number,
+            required: false,
+        },
+        profileName: {
+            type: String,
+            default: '',
+        },
+        profilePath: {
+            type: String,
+            default: '',
+        },
+        unknown: {
+            type: Boolean,
+            default: true,
+        },
+        showDetail: {
+            type: Boolean,
+            default: true,
+        },
+        isAuthor: {
+            type: Boolean,
+            default: false,
+        },
+        isCommentAuthor: Boolean,
+        isCommentProfile: Boolean,
+        date: {
+            type: String,
+            required: '',
+        },
+        views: {
+            type: Number,
+            default: 0,
+        },
+        commentNum: {
+            type: Number,
+            default: 0,
+        },
+        isLike: {
+            type: Boolean,
+            default: false,
+        },
    });
-};

-// 프로필 이미지 경로 설정
-const getProfileImage = (profilePath) => {
-    return profilePath && profilePath.trim()
-      ? `${baseUrl}upload/img/profile/${profilePath}`
-      : defaultProfile;
-  };
+    const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
+
+    const isDeletedComment = computed(() => {
+        return props.comment?.content === '삭제된 댓글입니다' && props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
+    });
+
+    // 수정
+    const editClick = () => {
+        emit('editClick', { ...props.comment, unknown: props.unknown });
+    };
+
+    // 삭제
+    const deleteClick = () => {
+        emit('deleteClick', { ...props.comment, unknown: props.unknown });
+    };
+
+    // 좋아요/싫어요 업데이트
+    const handleUpdateReaction = reactionData => {
+        emit('updateReaction', {
+            boardId: props.boardId,
+            commentId: props.comment?.commentId,
+            ...reactionData,
+        });
+    };
+
+    // 프로필 이미지 경로 설정
+    const getProfileImage = profilePath => {
+        return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
+    };
 </script>
--- a/src/components/button/EditBtn.vue
+++ b/src/components/button/EditBtn.vue
@ -1,30 +1,30 @@
 <template>
-    <button class="btn btn-label-primary btn-icon" @click="toggleText">
-      <i :class="buttonClass"></i>
+    <button class="btn btn-label-primary btn-icon me-1" @click="toggleText">
+        <i :class="buttonClass"></i>
    </button>
 </template>

 <script setup>
-import { ref, defineProps } from 'vue';
+    import { ref, defineProps } from 'vue';

-const props = defineProps({
-  isToggleEnabled: {
-      type: Boolean,
-      default: false,
-  },
-});
+    const props = defineProps({
+        isToggleEnabled: {
+            type: Boolean,
+            default: false,
+        },
+    });

-const buttonClass = ref("bx bx-edit-alt");
+    const buttonClass = ref('bx bx-edit-alt');

-const toggleText = () => {
-  if (props.isToggleEnabled) {
-    buttonClass.value = buttonClass.value === "bx bx-edit-alt" ? "bx bx-x" : "bx bx-edit-alt";
-  }
-};
+    const toggleText = () => {
+        if (props.isToggleEnabled) {
+            buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
+        }
+    };

-const resetButton = () => {
-    buttonClass.value = "bx bx-edit-alt";
-};
+    const resetButton = () => {
+        buttonClass.value = 'bx bx-edit-alt';
+    };

-defineExpose({ resetButton });
+    defineExpose({ resetButton });
 </script>
--- a/src/components/category/CategoryBtn.vue
+++ b/src/components/category/CategoryBtn.vue
@ -1,5 +1,18 @@
 <template>
    <ul class="cate-list list-unstyled d-flex flex-wrap mb-0">
+        <li v-if="showAll" class="mt-2 me-2">
+        <button
+            type="button"
+            class="btn"
+            :class="{
+                'btn-outline-primary': selectedCategory !== 'all',
+                'btn-primary': selectedCategory === 'all'
+            }"
+            @click="selectCategory('all')"
+        >
+        All
+        </button>
+        </li>
        <li v-for="category in lists" :key="category.value" class="mt-2 me-2">
            <button
                type="button"
@ -26,6 +39,10 @@ const props = defineProps({
        type: Array,
        required: true,
    },
+    showAll: {
+        type: Boolean,
+        required: false,
+    },
 });

 // 카테고리 선택
@ -46,9 +63,6 @@ const selectCategory = (cate) => {
        overflow-x: scroll;
        flex-wrap: nowrap !important;

-        li {
-            flex: 0 0 auto;
-        }
    }
 }
 </style>
--- a/src/components/editor/QEditor.vue
+++ b/src/components/editor/QEditor.vue
@ -52,147 +52,148 @@
 </template>

 <script setup>
-import Quill from 'quill';
-import 'quill/dist/quill.snow.css';
-import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
-import $api from '@api';
+    import Quill from 'quill';
+    import 'quill/dist/quill.snow.css';
+    import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
+    import $api from '@api';

-
-const props = defineProps({
-    isAlert: {
-        type: Boolean,
-        default: false,
-    },
-    initialData: {
-        type: String,
-        default: () => null,
-    },
-});
-
-const editor = ref(null);  // 에디터 DOM 참조
-const font = ref('nanum-gothic');  // 기본 폰트
-const fontSize = ref('16px');  // 기본 폰트 크기
-const emit = defineEmits(['update:data']);
-
-onMounted(() => {
-    // 툴바에서 선택할 수 있는 폰트 목록 설정
-    const Font = Quill.import('formats/font');
-    Font.whitelist = ['nanum-gothic', 'd2coding', 'consolas', 'serif', 'monospace'];
-    Quill.register(Font, true);
-
-    // 툴바에서 선택할 수 있는 폰트 크기 목록 설정
-    const Size = Quill.import('attributors/style/size');
-    Size.whitelist = ['12px', '14px', '16px', '18px', '24px', '32px', '48px'];
-    Quill.register(Size, true);
-
-    // Quill 에디터 인스턴스 생성
-    const quillInstance = new Quill(editor.value, {
-        theme: 'snow',
-        placeholder: '내용을 입력해주세요...',
-        modules: {
-            toolbar: {
-                container: '#toolbar',
-            },
-            syntax: true,
+    const props = defineProps({
+        isAlert: {
+            type: Boolean,
+            default: false,
+        },
+        initialData: {
+            type: [String, Object],
+            default: () => null,
        },
    });

-    // 폰트와 폰트 크기 설정
-    quillInstance.format('font', font.value);
-    quillInstance.format('size', fontSize.value);
+    const editor = ref(null); // 에디터 DOM 참조
+    const font = ref('nanum-gothic'); // 기본 폰트
+    const fontSize = ref('16px'); // 기본 폰트 크기
+    const emit = defineEmits(['update:data']);

-    // 텍스트가 변경될 때마다 부모 컴포넌트로 변경된 내용 전달
-    quillInstance.on('text-change', () => {
-        const delta = quillInstance.getContents();  // Delta 포맷으로 내용 가져오기
-        emit('update:data', delta);
-    });
+    onMounted(() => {
+        // 툴바에서 선택할 수 있는 폰트 목록 설정
+        const Font = Quill.import('formats/font');
+        Font.whitelist = ['nanum-gothic', 'd2coding', 'consolas', 'serif', 'monospace'];
+        Quill.register(Font, true);

-    // 폰트나 폰트 크기가 변경될 때 에디터 스타일 업데이트
-    watch([font, fontSize], () => {
+        // 툴바에서 선택할 수 있는 폰트 크기 목록 설정
+        const Size = Quill.import('attributors/style/size');
+        Size.whitelist = ['12px', '14px', '16px', '18px', '24px', '32px', '48px'];
+        Quill.register(Size, true);
+
+        // Quill 에디터 인스턴스 생성
+        const quillInstance = new Quill(editor.value, {
+            theme: 'snow',
+            placeholder: '내용을 입력해주세요...',
+            modules: {
+                toolbar: {
+                    container: '#toolbar',
+                },
+                syntax: true,
+            },
+        });
+
+        // 폰트와 폰트 크기 설정
        quillInstance.format('font', font.value);
        quillInstance.format('size', fontSize.value);

-    });
-
-    // 초기 데이터가 있을 경우, HTML 형식으로 삽입
-    if (props.initialData) {
-        quillInstance.setContents(JSON.parse(props.initialData));
-    }
-
-    // 이미지 업로드 기능 처리
-    let imageUrls = new Set();  // 업로드된 이미지 URL을 추적
-    quillInstance.getModule('toolbar').addHandler('image', () => {
-        selectLocalImage();  // 이미지 버튼 클릭 시 로컬 이미지 선택
-    });
-
-    // 에디터의 텍스트가 변경될 때마다 이미지 처리
-    quillInstance.on('text-change', (delta, oldDelta, source) => {
-        emit('update:data', quillInstance.getContents());
-        delta.ops.forEach(op => {
-            if (op.insert && typeof op.insert === 'object' && op.insert.image) {
-                const imageUrl = op.insert.image;  // 이미지 URL 추출
-                imageUrls.add(imageUrl);  // URL 추가
-            } else if (op.delete) {
-                checkForDeletedImages();  // 삭제된 이미지 확인
-            }
+        // 텍스트가 변경될 때마다 부모 컴포넌트로 변경된 내용 전달
+        quillInstance.on('text-change', () => {
+            const delta = quillInstance.getContents(); // Delta 포맷으로 내용 가져오기
+            emit('update:data', delta);
        });
-    });
-    // 로컬 이미지 파일 선택
-    async function selectLocalImage() {
-        const input = document.createElement('input');
-        input.setAttribute('type', 'file');
-        input.setAttribute('accept', 'image/*');
-        input.click();  // 파일 선택 다이얼로그 열기
-        input.onchange = () => {
-            const file = input.files[0];
-            if (file) {
-                const formData = new FormData();
-                formData.append('file', file);

-                // 이미지 서버에 업로드 후 URL 받기
-                uploadImageToServer(formData).then(serverImageUrl => {
-                    const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
-                    const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
+        // 폰트나 폰트 크기가 변경될 때 에디터 스타일 업데이트
+        watch([font, fontSize], () => {
+            quillInstance.format('font', font.value);
+            quillInstance.format('size', fontSize.value);
+        });

-                    const range = quillInstance.getSelection();
-                    quillInstance.insertEmbed(range.index, 'image', fullImageUrl);  // 선택된 위치에 이미지 삽입
-
-                    imageUrls.add(fullImageUrl);  // 이미지 URL 추가
-                }).catch(e => {
-                    toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
-                });
-            }
-        };
-    }
-    // 이미지 서버 업로드
-    async function uploadImageToServer(formData) {
-        try {
-            const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
-            const imageUrl = response.data.data;
-            return imageUrl;  // 서버에서 받은 이미지 URL 반환
-        } catch (error) {
-            toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
-            throw error;
+        // 초기 데이터가 있을 경우, HTML 형식으로 삽입
+        if (props.initialData) {
+            console.log(props.initialData);
+            quillInstance.setContents(JSON.parse(props.initialData));
        }
-    }

-    // 삭제된 이미지 확인
-    function checkForDeletedImages() {
-        const editorImages = document.querySelectorAll('#editor img');
-        const currentImages = new Set(Array.from(editorImages).map(img => img.src));  // 현재 에디터에 있는 이미지들
-
-        imageUrls.forEach(url => {
-            if (!currentImages.has(url)) {
-                imageUrls.delete(url);
-            }
+        // 이미지 업로드 기능 처리
+        let imageUrls = new Set(); // 업로드된 이미지 URL을 추적
+        quillInstance.getModule('toolbar').addHandler('image', () => {
+            selectLocalImage(); // 이미지 버튼 클릭 시 로컬 이미지 선택
        });
-    }
-});
+
+        // 에디터의 텍스트가 변경될 때마다 이미지 처리
+        quillInstance.on('text-change', (delta, oldDelta, source) => {
+            emit('update:data', quillInstance.getContents());
+            delta.ops.forEach(op => {
+                if (op.insert && typeof op.insert === 'object' && op.insert.image) {
+                    const imageUrl = op.insert.image; // 이미지 URL 추출
+                    imageUrls.add(imageUrl); // URL 추가
+                } else if (op.delete) {
+                    checkForDeletedImages(); // 삭제된 이미지 확인
+                }
+            });
+        });
+        // 로컬 이미지 파일 선택
+        async function selectLocalImage() {
+            const input = document.createElement('input');
+            input.setAttribute('type', 'file');
+            input.setAttribute('accept', 'image/*');
+            input.click(); // 파일 선택 다이얼로그 열기
+            input.onchange = () => {
+                const file = input.files[0];
+                if (file) {
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    // 이미지 서버에 업로드 후 URL 받기
+                    uploadImageToServer(formData)
+                        .then(serverImageUrl => {
+                            const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+                            const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
+
+                            const range = quillInstance.getSelection();
+                            quillInstance.insertEmbed(range.index, 'image', fullImageUrl); // 선택된 위치에 이미지 삽입
+
+                            imageUrls.add(fullImageUrl); // 이미지 URL 추가
+                        })
+                        .catch(e => {
+                            toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
+                        });
+                }
+            };
+        }
+        // 이미지 서버 업로드
+        async function uploadImageToServer(formData) {
+            try {
+                const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
+                const imageUrl = response.data.data;
+                return imageUrl; // 서버에서 받은 이미지 URL 반환
+            } catch (error) {
+                toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
+                throw error;
+            }
+        }
+
+        // 삭제된 이미지 확인
+        function checkForDeletedImages() {
+            const editorImages = document.querySelectorAll('#editor img');
+            const currentImages = new Set(Array.from(editorImages).map(img => img.src)); // 현재 에디터에 있는 이미지들
+
+            imageUrls.forEach(url => {
+                if (!currentImages.has(url)) {
+                    imageUrls.delete(url);
+                }
+            });
+        }
+    });
 </script>
 <style>
-@import 'quill/dist/quill.snow.css';
-.ql-editor {
-    min-height: 300px;
-    font-family: 'Nanum Gothic', sans-serif;
-}
+    @import 'quill/dist/quill.snow.css';
+    .ql-editor {
+        min-height: 300px;
+        font-family: 'Nanum Gothic', sans-serif;
+    }
 </style>
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@ -150,7 +150,6 @@ const saveWord = () => {
            typeof op.insert === 'string' ? op.insert.trim() : op.insert
        );
    }
-
    // 내용 체크
    if(content.value == '' || inserts.join('') === ''){
        wordContentAlert.value = true;
--- a/src/views/board/BoardEdit.vue
+++ b/src/views/board/BoardEdit.vue
@ -10,25 +10,48 @@
            <div class="col-xl-12">
                <div class="card-body">
                    <!-- 제목 입력 -->
-                    <FormInput
-                        title="제목"
-                        name="title"
-                        :is-essential="true"
-                        :is-alert="titleAlert"
-                        v-model="title"
+                    <FormInput title="제목" name="title" :is-essential="true" :is-alert="titleAlert" v-model="title" />
+
+                    <!-- 첨부파일 업로드 -->
+                    <FormFile
+                        title="첨부파일"
+                        name="files"
+                        :is-alert="attachFilesAlert"
+                        @update:data="handleFileUpload"
+                        @update:isValid="isFileValid = $event"
                    />

+                    <!-- 실시간 반영된 파일 개수 표시 -->
+                    <div>
+                        <p class="text-muted mt-1">첨부파일: {{ fileCount }} / 5개</p>
+                        <p v-if="fileError" class="text-danger">{{ fileError }}</p>
+
+                        <ul class="list-group mb-2" v-if="attachFiles.length">
+                            <li
+                                v-for="(file, index) in attachFiles"
+                                :key="index"
+                                class="list-group-item d-flex justify-content-between align-items-center"
+                            >
+                                {{ file.name }}
+                                <button class="close-btn" @click="removeFile(index, file)">✖</button>
+                            </li>
+                        </ul>
+                    </div>
+
                    <!-- 내용 입력 -->
                    <div class="mb-4">
                        <label for="html5-tel-input" class="col-md-2 col-form-label">
                            내용
                            <span class="text-red">*</span>
-                            <div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">
-                                내용을 확인해주세요.
-                            </div>
+                            <div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">내용을 확인해주세요.</div>
                        </label>
                        <div class="col-md-12">
-                            <QEditor v-model="content" />
+                            <QEditor
+                                v-if="contentLoaded"
+                                @update:data="content = $event"
+                                @update:imageUrls="imageUrls = $event"
+                                :initialData="content"
+                            />
                        </div>
                    </div>

@ -48,95 +71,167 @@
 </template>

 <script setup>
-import QEditor from '@c/editor/QEditor.vue';
-import FormInput from '@c/input/FormInput.vue';
-import { ref, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import axios from '@api';
+    import QEditor from '@c/editor/QEditor.vue';
+    import FormInput from '@c/input/FormInput.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';

-// 상태 변수
-const title = ref('');
-const content = ref('');
+    // 상태 변수
+    const title = ref('');
+    const content = ref('');

-// 경고 상태
-const titleAlert = ref(false);
-const contentAlert = ref(false);
+    // 경고 상태
+    const titleAlert = ref(false);
+    const contentAlert = ref(false);
+    const contentLoaded = ref(false);

-// 라우터
-const router = useRouter();
-const route = useRoute();
-const currentBoardId = ref(route.params.id); // 라우트에서 ID 가져오기
-console.log(currentBoardId.value)
-// 게시물 데이터 로드
-const fetchBoardDetails = async () => {
-    try {
-        const response = await axios.get(`board/${currentBoardId.value}`);
-        const data = response.data.data.boardDetail;
+    // 라우터
+    const router = useRouter();
+    const route = useRoute();
+    const currentBoardId = ref(route.params.id); // 라우트에서 ID 가져오기

-        if (!data) {
-            console.error('API에서 게시물 데이터를 반환하지 않았습니다.');
+    // 파일
+    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.hasAttachment && data.attachments.length > 0) {
+                attachFiles.value = addDisplayFileName([...data.attachments]);
+            }
+
+            // 데이터 설정
+            title.value = data.title || '제목 없음';
+            content.value = data.content || '내용 없음';
+            contentLoaded.value = true;
+        } catch (error) {
+            console.error('게시물 가져오기 오류:', error.response || error.message);
+        }
+    };
+
+    // 기존 첨부파일명을 노출
+    const addDisplayFileName = fileInfos =>
+        fileInfos.map(file => ({
+            ...file,
+            name: `${file.originalName}.${file.extension}`,
+        }));
+
+    // 목록 페이지로 이동
+    const goList = () => {
+        router.push('/board');
+    };
+
+    // 게시물 수정
+    const updateBoard = async () => {
+        // 유효성 검사
+        if (!title.value) {
+            titleAlert.value = true;
            return;
        }
+        titleAlert.value = false;

-        // 데이터 설정
-        title.value = data.title || '제목 없음';
-        content.value = data.content || '내용 없음';
+        if (!content.value) {
+            contentAlert.value = true;
+            return;
+        }
+        contentAlert.value = false;

-    } catch (error) {
-        console.error('게시물 가져오기 오류:', error.response || error.message);
-    }
-};
+        try {
+            // 수정 데이터 전송
+            const boardData = {
+                LOCBRDTTL: title.value,
+                LOCBRDCON: JSON.stringify(content.value),
+                LOCBRDSEQ: currentBoardId.value,
+            };

-// 목록 페이지로 이동
-const goList = () => {
-    router.push('/board');
-};
+            if (delFileIdx.value && delFileIdx.value.length > 0) {
+                boardData.delFileIdx = [...delFileIdx.value];
+            }

-// 게시물 수정
-const updateBoard = async () => {
-    // 유효성 검사
-    if (!title.value) {
-        titleAlert.value = true;
-        return;
-    }
-    titleAlert.value = false;
+            const fileArray = newFileFilter(attachFiles);
+            const formData = new FormData();

-    if (!content.value) {
-        contentAlert.value = true;
-        return;
-    }
-    contentAlert.value = false;
+            Object.entries(boardData).forEach(([key, value]) => {
+                formData.append(key, value);
+            });

-    try {
-        // 수정 데이터 전송
-        const boardData = {
-            LOCBRDTTL: title.value,
-            LOCBRDCON: content.value,
-        };
+            fileArray.forEach((file, idx) => {
+                formData.append('files', file);
+            });

-        await axios.put(`board/${currentBoardId.value}`, boardData);
+            await axios.put(`board/${currentBoardId.value}`, formData, { isFormData: true });

-        alert('게시물이 수정되었습니다.');
-        goList();
-    } catch (error) {
-        console.error('게시물 수정 중 오류 발생:', error);
-        alert('게시물 수정에 실패했습니다.');
-    }
-};
+            alert('게시물이 수정되었습니다.');
+            goList();
+        } catch (error) {
+            console.error('게시물 수정 중 오류 발생:', error);
+            alert('게시물 수정에 실패했습니다.');
+        }
+    };

-// 컴포넌트 마운트 시 데이터 로드
-onMounted(() => {
-    if (currentBoardId.value) {
-        fetchBoardDetails();
-    } else {
-        console.error('잘못된 게시물 ID:', currentBoardId.value);
-    }
-});
+    ////////////////// 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) {
+            fetchBoardDetails();
+        } else {
+            console.error('잘못된 게시물 ID:', currentBoardId.value);
+        }
+    });
 </script>

 <style>
-.text-red {
-    color: red;
-    text-align: center;
-}
+    .text-red {
+        color: red;
+        text-align: center;
+    }
 </style>
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue