From 19ce33e503395102e0bb801cdb0c01059b49ec80 Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Thu, 6 Mar 2025 15:09:36 +0900
Subject: [PATCH] =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/editor/QEditor.vue     | 253 +++++++++++------------
 src/components/wordDict/DictWrite.vue | 277 +++++++++++++-------------
 src/views/board/BoardEdit.vue         | 196 ++++++++++--------
 src/views/board/BoardView.vue         |  27 +--
 4 files changed, 385 insertions(+), 368 deletions(-)

diff --git a/src/components/editor/QEditor.vue b/src/components/editor/QEditor.vue
index 3ff77e9..b66537b 100644
--- 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>
diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue
index ceaa999..a08e901 100644
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@@ -14,13 +14,13 @@
                 />
             </div>
             <div class="col-2 btn-margin" v-if="!isDisabled">
-                <PlusBtn @click="toggleInput"/>
+                <PlusBtn @click="toggleInput" />
             </div>
         </div>
-        
+
         <div class="row" v-if="showInput">
             <div class="col-10">
-                <FormInput 
+                <FormInput
                     ref="categoryInputRef"
                     title="카테고리 입력"
                     name="카테고리"
@@ -44,7 +44,12 @@
         />
     </div>
     <div>
-        <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" :initialData="contentValue"/>
+        <QEditor
+            @update:data="content = $event"
+            @update:imageUrls="imageUrls = $event"
+            :is-alert="wordContentAlert"
+            :initialData="contentValue"
+        />
         <div class="text-end mt-5">
             <button class="btn btn-primary" @click="saveWord">
                 <i class="bx bx-check"></i>
@@ -54,165 +59,153 @@
 </template>
 
 <script setup>
-import { defineProps, computed, ref, defineEmits } from 'vue';
+    import { defineProps, computed, ref, defineEmits } from 'vue';
 
-import QEditor from '@/components/editor/QEditor.vue';
-import FormInput from '@/components/input/FormInput.vue';
-import FormSelect from '@/components/input/FormSelect.vue';
-import PlusBtn from '../button/PlusBtn.vue';
+    import QEditor from '@/components/editor/QEditor.vue';
+    import FormInput from '@/components/input/FormInput.vue';
+    import FormSelect from '@/components/input/FormSelect.vue';
+    import PlusBtn from '../button/PlusBtn.vue';
 
-const emit = defineEmits(['close','addCategory','addWord']);
+    const emit = defineEmits(['close', 'addCategory', 'addWord']);
 
-//용어제목
-const wordTitle = ref('');
-const addCategory = ref('');
-const content = ref('');
-const imageUrls = ref([]);
+    //용어제목
+    const wordTitle = ref('');
+    const addCategory = ref('');
+    const content = ref('');
+    const imageUrls = ref([]);
 
-//용어 Vaildation용
-const wordTitleAlert = ref(false);
-const wordContentAlert = ref(false);
-const addCategoryAlert = ref(false);
+    //용어 Vaildation용
+    const wordTitleAlert = ref(false);
+    const wordContentAlert = ref(false);
+    const addCategoryAlert = ref(false);
 
-//선택 카테고리
-const selectCategory = ref('');
+    //선택 카테고리
+    const selectCategory = ref('');
 
-// 제목 상태
-const computedTitle = computed(() => 
-    wordTitle.value === '' ? props.titleValue : wordTitle.value
-);
+    // 제목 상태
+    const computedTitle = computed(() => (wordTitle.value === '' ? props.titleValue : wordTitle.value));
 
-// 카테고리 상태
-const selectedCategory = computed(() => 
-    selectCategory.value === '' ? props.formValue : selectCategory.value
-);
+    // 카테고리 상태
+    const selectedCategory = computed(() => (selectCategory.value === '' ? props.formValue : selectCategory.value));
 
-// 카테고리 입력 중복 ref
-const categoryInputRef = ref(null);
+    // 카테고리 입력 중복 ref
+    const categoryInputRef = ref(null);
 
-const props = defineProps({
-    dataList: {
-        type: Array,
-        default: () => []
-    },
-    NumValue : {
-        type: Number
-    },
-    formValue : {
-        type:[String, Number]
-    },
-    titleValue : {
-        type:String,
-    },contentValue : {
-        type:String,
-    },
-    isDisabled: { 
-        type: Boolean,
-        default: false
-    }
-});
+    const props = defineProps({
+        dataList: {
+            type: Array,
+            default: () => [],
+        },
+        NumValue: {
+            type: Number,
+        },
+        formValue: {
+            type: [String, Number],
+        },
+        titleValue: {
+            type: String,
+        },
+        contentValue: {
+            type: String,
+        },
+        isDisabled: {
+            type: Boolean,
+            default: false,
+        },
+    });
 
-// 카테고리 입력 창
-const showInput = ref(false);
+    // 카테고리 입력 창
+    const showInput = ref(false);
 
-// 카테고리 입력 토글
-const toggleInput = () => {
-    showInput.value = !showInput.value;
-};
-
-const onChange = (newValue) => {
-    selectCategory.value = newValue.target.value;
-};
-
-//용어 등록
-const saveWord = () => {
-    //validation
-    let computedTitleTrim;
-
-    if(computedTitle.value != undefined){
-        computedTitleTrim = computedTitle.value.trim()
-    }
-    
-    // 용어 체크
-    if(computedTitleTrim == undefined || computedTitleTrim == ''){
-        wordTitleAlert.value = true;
-        return;
-    } else {
-        wordTitleAlert.value = false;
-    }
-
-    // 내용 확인
-    let inserts = [];
-    if (inserts.length === 0 && content.value?.ops?.length > 0) {
-        inserts = content.value.ops.map(op => 
-            typeof op.insert === 'string' ? op.insert.trim() : op.insert
-        );
-    }
-
-    // 내용 체크
-    if(content.value == '' || inserts.join('') === ''){
-        wordContentAlert.value = true;
-        return;
-    }
-    
-
-    const wordData = {
-        id: props.NumValue || null,
-        title: computedTitle.value,
-        category: selectedCategory.value,
-        content: content.value,
+    // 카테고리 입력 토글
+    const toggleInput = () => {
+        showInput.value = !showInput.value;
     };
 
-    emit('addWord', wordData, addCategory.value);
-}
+    const onChange = newValue => {
+        selectCategory.value = newValue.target.value;
+    };
 
+    //용어 등록
+    const saveWord = () => {
+        //validation
+        let computedTitleTrim;
 
-// 카테고리 focusout 이벤트 핸들러 추가
-const handleCategoryFocusout = (value) => {
-    const valueTrim = value.trim();
+        if (computedTitle.value != undefined) {
+            computedTitleTrim = computedTitle.value.trim();
+        }
 
-    const existingCategory = props.dataList.find(item => item.label === valueTrim);
-    
-    // 카테고리 입력시 공백
-    if(valueTrim == ''){
-        addCategoryAlert.value = true;
-        
-        // 공백시 강제 focus
-        setTimeout(() => {
-            const inputElement = categoryInputRef.value?.$el?.querySelector('input');
-            if (inputElement) {
-                inputElement.focus();
-            }
-        }, 0);
+        // 용어 체크
+        if (computedTitleTrim == undefined || computedTitleTrim == '') {
+            wordTitleAlert.value = true;
+            return;
+        } else {
+            wordTitleAlert.value = false;
+        }
 
-        
-    }else if (existingCategory) {
-        addCategoryAlert.value = true;
-        
-        // 중복시 강제 focus
-        setTimeout(() => {
-            const inputElement = categoryInputRef.value?.$el?.querySelector('input');
-            if (inputElement) {
-                inputElement.focus();
-            }
-        }, 0);
+        // 내용 확인
+        let inserts = [];
+        if (inserts.length === 0 && content.value?.ops?.length > 0) {
+            inserts = content.value.ops.map(op => (typeof op.insert === 'string' ? op.insert.trim() : op.insert));
+        }
 
-    } else {
-        addCategoryAlert.value = false;
-    }
-};
+        // 내용 체크
+        if (content.value == '' || inserts.join('') === '') {
+            wordContentAlert.value = true;
+            return;
+        }
 
+        const wordData = {
+            id: props.NumValue || null,
+            title: computedTitle.value,
+            category: selectedCategory.value,
+            content: content.value,
+        };
 
+        emit('addWord', wordData, addCategory.value);
+    };
+
+    // 카테고리 focusout 이벤트 핸들러 추가
+    const handleCategoryFocusout = value => {
+        const valueTrim = value.trim();
+
+        const existingCategory = props.dataList.find(item => item.label === valueTrim);
+
+        // 카테고리 입력시 공백
+        if (valueTrim == '') {
+            addCategoryAlert.value = true;
+
+            // 공백시 강제 focus
+            setTimeout(() => {
+                const inputElement = categoryInputRef.value?.$el?.querySelector('input');
+                if (inputElement) {
+                    inputElement.focus();
+                }
+            }, 0);
+        } else if (existingCategory) {
+            addCategoryAlert.value = true;
+
+            // 중복시 강제 focus
+            setTimeout(() => {
+                const inputElement = categoryInputRef.value?.$el?.querySelector('input');
+                if (inputElement) {
+                    inputElement.focus();
+                }
+            }, 0);
+        } else {
+            addCategoryAlert.value = false;
+        }
+    };
 </script>
 
 <style scoped>
-.dict-w {
-    width: 83%;
-}
-
-@media (max-width: 768px) {
-    .btn-margin {
-        margin-top: 2.5rem
+    .dict-w {
+        width: 83%;
     }
-}
-</style>
\ No newline at end of file
+
+    @media (max-width: 768px) {
+        .btn-margin {
+            margin-top: 2.5rem;
+        }
+    }
+</style>
diff --git a/src/views/board/BoardEdit.vue b/src/views/board/BoardEdit.vue
index 354b75d..94e3c9e 100644
--- a/src/views/board/BoardEdit.vue
+++ b/src/views/board/BoardEdit.vue
@@ -10,25 +10,46 @@
             <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"
                     />
 
+                    <!-- 실시간 반영된 파일 개수 표시 -->
+                    <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">
+                        <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)">✖</button>
+                        </li>
+                    </ul>
+
                     <!-- 내용 입력 -->
                     <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 +69,96 @@
 </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 { ref, onMounted } 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 가져오기
+    // 게시물 데이터 로드
+    const fetchBoardDetails = async () => {
+        try {
+            const response = await axios.get(`board/${currentBoardId.value}`);
+            const data = response.data.data;
 
-        if (!data) {
-            console.error('API에서 게시물 데이터를 반환하지 않았습니다.');
+            if (!data) {
+                console.error('API에서 게시물 데이터를 반환하지 않았습니다.');
+                return;
+            }
+
+            // 데이터 설정
+            title.value = data.title || '제목 없음';
+            content.value = data.content || '내용 없음';
+            contentLoaded.value = true;
+        } catch (error) {
+            console.error('게시물 가져오기 오류:', error.response || error.message);
+        }
+    };
+
+    // 목록 페이지로 이동
+    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');
-};
+            await axios.put(`board/${currentBoardId.value}`, boardData);
 
-// 게시물 수정
-const updateBoard = async () => {
-    // 유효성 검사
-    if (!title.value) {
-        titleAlert.value = true;
-        return;
-    }
-    titleAlert.value = false;
+            alert('게시물이 수정되었습니다.');
+            goList();
+        } catch (error) {
+            console.error('게시물 수정 중 오류 발생:', error);
+            alert('게시물 수정에 실패했습니다.');
+        }
+    };
 
-    if (!content.value) {
-        contentAlert.value = true;
-        return;
-    }
-    contentAlert.value = false;
-
-    try {
-        // 수정 데이터 전송
-        const boardData = {
-            LOCBRDTTL: title.value,
-            LOCBRDCON: content.value,
-        };
-
-        await axios.put(`board/${currentBoardId.value}`, boardData);
-
-        alert('게시물이 수정되었습니다.');
-        goList();
-    } catch (error) {
-        console.error('게시물 수정 중 오류 발생:', error);
-        alert('게시물 수정에 실패했습니다.');
-    }
-};
-
-// 컴포넌트 마운트 시 데이터 로드
-onMounted(() => {
-    if (currentBoardId.value) {
-        fetchBoardDetails();
-    } else {
-        console.error('잘못된 게시물 ID:', currentBoardId.value);
-    }
-});
+    // 컴포넌트 마운트 시 데이터 로드
+    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>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 442114a..d32b3e6 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -229,7 +229,7 @@
             const data = response.data.data;
 
             profileName.value = data.author || '익명';
-
+            console.log(data.author);
             authorId.value = data.authorId;
             boardTitle.value = data.title || '제목 없음';
             boardContent.value = data.content || '';
@@ -569,7 +569,7 @@
         try {
             const response = await axios.post(`board/${currentBoardId.value}/password`, {
                 LOCBRDPWD: password.value,
-                LOCBRDSEQ: 288,
+                LOCBRDSEQ: currentBoardId.value,
             });
 
             if (response.data.code === 200 && response.data.data === true) {
@@ -586,17 +586,18 @@
                 passwordAlert.value = '비밀번호가 일치하지 않습니다.';
             }
         } catch (error) {
-            if (error.response) {
-                if (error.response.status === 401) {
-                    passwordAlert.value = '비밀번호가 일치하지 않습니다.';
-                } else {
-                    passwordAlert.value = error.response.data?.message || '서버 오류가 발생했습니다.';
-                }
-            } else if (error.request) {
-                passwordAlert.value = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
-            } else {
-                passwordAlert.value = '요청 중 알 수 없는 오류가 발생했습니다.';
-            }
+            if (error.reponse && error.reponse.status === 401) passwordAlert.value = '비밀번호가 일치하지 않습니다.';
+            // if (error.response) {
+            //     if (error.response.status === 401) {
+            //         passwordAlert.value = '비밀번호가 일치하지 않습니다.';
+            //     } else {
+            //         passwordAlert.value = error.response.data?.message || '서버 오류가 발생했습니다.';
+            //     }
+            // } else if (error.request) {
+            //     passwordAlert.value = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
+            // } else {
+            //     passwordAlert.value = '요청 중 알 수 없는 오류가 발생했습니다.';
+            // }
         }
     };