수정

src/components/editor/QEditor.vue

@@ -57,14 +57,13 @@ 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,
+            type: [String, Object],
             default: () => null,
         },
     });
@@ -111,11 +110,11 @@ onMounted(() => {
         watch([font, fontSize], () => {
             quillInstance.format('font', font.value);
             quillInstance.format('size', fontSize.value);
-
         });
 
         // 초기 데이터가 있을 경우, HTML 형식으로 삽입
         if (props.initialData) {
+            console.log(props.initialData);
             quillInstance.setContents(JSON.parse(props.initialData));
         }
 
@@ -150,7 +149,8 @@ onMounted(() => {
                     formData.append('file', file);
 
                     // 이미지 서버에 업로드 후 URL 받기
-                uploadImageToServer(formData).then(serverImageUrl => {
+                    uploadImageToServer(formData)
+                        .then(serverImageUrl => {
                             const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
                             const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
 
@@ -158,7 +158,8 @@ onMounted(() => {
                             quillInstance.insertEmbed(range.index, 'image', fullImageUrl); // 선택된 위치에 이미지 삽입
 
                             imageUrls.add(fullImageUrl); // 이미지 URL 추가
-                }).catch(e => {
+                        })
+                        .catch(e => {
                             toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
                         });
                 }

src/components/wordDict/DictWrite.vue

@@ -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>
@@ -78,14 +83,10 @@ const addCategoryAlert = ref(false);
     const selectCategory = ref('');
 
     // 제목 상태
-const computedTitle = computed(() => 
+    const computedTitle = computed(() => (wordTitle.value === '' ? props.titleValue : wordTitle.value));
-    wordTitle.value === '' ? props.titleValue : wordTitle.value
-);
 
     // 카테고리 상태
-const selectedCategory = computed(() => 
+    const selectedCategory = computed(() => (selectCategory.value === '' ? props.formValue : selectCategory.value));
-    selectCategory.value === '' ? props.formValue : selectCategory.value
-);
 
     // 카테고리 입력 중복 ref
     const categoryInputRef = ref(null);
@@ -93,23 +94,24 @@ const categoryInputRef = ref(null);
     const props = defineProps({
         dataList: {
             type: Array,
-        default: () => []
+            default: () => [],
         },
         NumValue: {
-        type: Number
+            type: Number,
         },
         formValue: {
-        type:[String, Number]
+            type: [String, Number],
         },
         titleValue: {
             type: String,
-    },contentValue : {
+        },
+        contentValue: {
             type: String,
         },
         isDisabled: {
             type: Boolean,
-        default: false
+            default: false,
-    }
+        },
     });
 
     // 카테고리 입력 창
@@ -120,7 +122,7 @@ const toggleInput = () => {
         showInput.value = !showInput.value;
     };
 
-const onChange = (newValue) => {
+    const onChange = newValue => {
         selectCategory.value = newValue.target.value;
     };
 
@@ -130,7 +132,7 @@ const saveWord = () => {
         let computedTitleTrim;
 
         if (computedTitle.value != undefined) {
-        computedTitleTrim = computedTitle.value.trim()
+            computedTitleTrim = computedTitle.value.trim();
         }
 
         // 용어 체크
@@ -144,9 +146,7 @@ const saveWord = () => {
         // 내용 확인
         let inserts = [];
         if (inserts.length === 0 && content.value?.ops?.length > 0) {
-        inserts = content.value.ops.map(op => 
+            inserts = content.value.ops.map(op => (typeof op.insert === 'string' ? op.insert.trim() : op.insert));
-            typeof op.insert === 'string' ? op.insert.trim() : op.insert
-        );
         }
 
         // 내용 체크
@@ -155,7 +155,6 @@ const saveWord = () => {
             return;
         }
 
-
         const wordData = {
             id: props.NumValue || null,
             title: computedTitle.value,
@@ -164,11 +163,10 @@ const saveWord = () => {
         };
 
         emit('addWord', wordData, addCategory.value);
-}
+    };
-
 
     // 카테고리 focusout 이벤트 핸들러 추가
-const handleCategoryFocusout = (value) => {
+    const handleCategoryFocusout = value => {
         const valueTrim = value.trim();
 
         const existingCategory = props.dataList.find(item => item.label === valueTrim);
@@ -184,8 +182,6 @@ const handleCategoryFocusout = (value) => {
                     inputElement.focus();
                 }
             }, 0);
-
-        
         } else if (existingCategory) {
             addCategoryAlert.value = true;
 
@@ -196,13 +192,10 @@ const handleCategoryFocusout = (value) => {
                     inputElement.focus();
                 }
             }, 0);
-
         } else {
             addCategoryAlert.value = false;
         }
     };
-
-
 </script>
 
 <style scoped>
@@ -212,7 +205,7 @@ const handleCategoryFocusout = (value) => {
 
     @media (max-width: 768px) {
         .btn-margin {
-        margin-top: 2.5rem
+            margin-top: 2.5rem;
         }
     }
 </style>

src/views/board/BoardEdit.vue

@@ -10,25 +10,46 @@
             <div class="col-xl-12">
                 <div class="card-body">
                     <!-- 제목 입력 -->
-                    <FormInput
+                    <FormInput title="제목" name="title" :is-essential="true" :is-alert="titleAlert" v-model="title" />
-                        title="제목"
+
-                        name="title"
+                    <!-- 첨부파일 업로드 -->
-                        :is-essential="true"
+                    <FormFile
-                        :is-alert="titleAlert"
+                        title="첨부파일"
-                        v-model="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 class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">내용을 확인해주세요.</div>
-                                내용을 확인해주세요.
-                            </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>
 
@@ -61,17 +82,17 @@ const content = ref('');
     // 경고 상태
     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 data = response.data.data;
 
             if (!data) {
                 console.error('API에서 게시물 데이터를 반환하지 않았습니다.');
@@ -81,7 +102,7 @@ const fetchBoardDetails = async () => {
             // 데이터 설정
             title.value = data.title || '제목 없음';
             content.value = data.content || '내용 없음';
-
+            contentLoaded.value = true;
         } catch (error) {
             console.error('게시물 가져오기 오류:', error.response || error.message);
         }
@@ -111,7 +132,8 @@ const updateBoard = async () => {
             // 수정 데이터 전송
             const boardData = {
                 LOCBRDTTL: title.value,
-            LOCBRDCON: content.value,
+                LOCBRDCON: JSON.stringify(content.value),
+                LOCBRDSEQ: currentBoardId.value,
             };
 
             await axios.put(`board/${currentBoardId.value}`, boardData);

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.reponse && error.reponse.status === 401) passwordAlert.value = '비밀번호가 일치하지 않습니다.';
-                if (error.response.status === 401) {
+            // if (error.response) {
-                    passwordAlert.value = '비밀번호가 일치하지 않습니다.';
+            //     if (error.response.status === 401) {
-                } else {
+            //         passwordAlert.value = '비밀번호가 일치하지 않습니다.';
-                    passwordAlert.value = error.response.data?.message || '서버 오류가 발생했습니다.';
+            //     } else {
-                }
+            //         passwordAlert.value = error.response.data?.message || '서버 오류가 발생했습니다.';
-            } else if (error.request) {
+            //     }
-                passwordAlert.value = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
+            // } else if (error.request) {
-            } else {
+            //     passwordAlert.value = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
-                passwordAlert.value = '요청 중 알 수 없는 오류가 발생했습니다.';
+            // } else {
-            }
+            //     passwordAlert.value = '요청 중 알 수 없는 오류가 발생했습니다.';
+            // }
         }
     };