Merge branch 'boardmodify'

123

src/components/board/BoardProfile.vue

@@ -10,12 +10,8 @@
                 <div class="profile-detail">
                     <span>{{ date }}</span>
                     <template v-if="showDetail">
-                        <span class="ms-2">
+                        <span class="ms-2"> <i class="fa-regular fa-eye"></i> {{ views }} </span>
-                            <i class="fa-regular fa-eye"></i> {{ views }}
+                        <span class="ms-1"> <i class="bx bx-comment"></i> {{ commentNum }} </span>
-                        </span>
-                        <span>
-                            <i class="bx bx-comment"></i> {{ commentNum }}
-                        </span>
                     </template>
                 </div>
             </div>
@@ -29,37 +25,32 @@
             </template>
 
             <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
-            <BoardRecommendBtn
+            <BoardRecommendBtn v-if="isLike" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
-                v-if="isLike"
-                :boardId="boardId"
-                :comment="comment"
-                @updateReaction="handleUpdateReaction"
-            />
         </div>
     </div>
 </template>
 
 <script setup>
-import { computed, defineProps, defineEmits } from 'vue';
+    import { computed, defineProps, defineEmits } from 'vue';
-import DeleteButton from '../button/DeleteBtn.vue';
+    import DeleteButton from '../button/DeleteBtn.vue';
-import EditButton from '../button/EditBtn.vue';
+    import EditButton from '../button/EditBtn.vue';
-import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
+    import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
 
-// 기본 프로필 이미지 경로
+    // 기본 프로필 이미지 경로
-const defaultProfile = "/img/icons/icon.png";
+    const defaultProfile = '/img/icons/icon.png';
 
-// 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
+    // 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
-const baseUrl = "http://localhost:10325/"; // API 서버 URL
+    const baseUrl = 'http://localhost:10325/'; // API 서버 URL
 
-// Props 정의
+    // Props 정의
-const props = defineProps({
+    const props = defineProps({
         comment: {
             type: Object,
             required: false,
         },
         boardId: {
             type: Number,
-        required: false
+            required: false,
         },
         commentId: {
             type: Number,
@@ -102,39 +93,36 @@ const props = defineProps({
         isLike: {
             type: Boolean,
             default: false,
-    }
+        },
-});
+    });
 
-const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
+    const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
 
-const isDeletedComment = computed(() => {
+    const isDeletedComment = computed(() => {
-    return props.comment?.content === '삭제된 댓글입니다' &&
+        return props.comment?.content === '삭제된 댓글입니다' && props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
-           props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
+    });
-});
 
-// 수정
+    // 수정
-const editClick = () => {
+    const editClick = () => {
         emit('editClick', { ...props.comment, unknown: props.unknown });
-};
+    };
 
-// 삭제
+    // 삭제
-const deleteClick = () => {
+    const deleteClick = () => {
         emit('deleteClick', { ...props.comment, unknown: props.unknown });
-};
+    };
 
-// 좋아요/싫어요 업데이트
+    // 좋아요/싫어요 업데이트
-const handleUpdateReaction = (reactionData) => {
+    const handleUpdateReaction = reactionData => {
-    emit("updateReaction", {
+        emit('updateReaction', {
             boardId: props.boardId,
             commentId: props.comment?.commentId,
             ...reactionData,
         });
-};
+    };
 
-// 프로필 이미지 경로 설정
+    // 프로필 이미지 경로 설정
-const getProfileImage = (profilePath) => {
+    const getProfileImage = profilePath => {
-    return profilePath && profilePath.trim()
+        return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
-      ? `${baseUrl}upload/img/profile/${profilePath}`
-      : defaultProfile;
     };
 </script>

src/components/button/EditBtn.vue

@@ -1,30 +1,30 @@
 <template>
-    <button class="btn btn-label-primary btn-icon" @click="toggleText">
+    <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({
+    const props = defineProps({
         isToggleEnabled: {
             type: Boolean,
             default: false,
         },
-});
+    });
 
-const buttonClass = ref("bx bx-edit-alt");
+    const buttonClass = ref('bx bx-edit-alt');
 
-const toggleText = () => {
+    const toggleText = () => {
         if (props.isToggleEnabled) {
-    buttonClass.value = buttonClass.value === "bx bx-edit-alt" ? "bx bx-x" : "bx bx-edit-alt";
+            buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
         }
-};
+    };
 
-const resetButton = () => {
+    const resetButton = () => {
-    buttonClass.value = "bx bx-edit-alt";
+        buttonClass.value = 'bx bx-edit-alt';
-};
+    };
 
-defineExpose({ resetButton });
+    defineExpose({ resetButton });
 </script>

src/components/editor/QEditor.vue

@@ -52,29 +52,28 @@
 </template>
 
 <script setup>
-import Quill from 'quill';
+    import Quill from 'quill';
-import 'quill/dist/quill.snow.css';
+    import 'quill/dist/quill.snow.css';
-import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
+    import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
-import $api from '@api';
+    import $api from '@api';
 
-
+    const props = defineProps({
-const props = defineProps({
         isAlert: {
             type: Boolean,
             default: false,
         },
         initialData: {
-        type: String,
+            type: [String, Object],
             default: () => null,
         },
-});
+    });
 
-const editor = ref(null);  // 에디터 DOM 참조
+    const editor = ref(null); // 에디터 DOM 참조
-const font = ref('nanum-gothic');  // 기본 폰트
+    const font = ref('nanum-gothic'); // 기본 폰트
-const fontSize = ref('16px');  // 기본 폰트 크기
+    const fontSize = ref('16px'); // 기본 폰트 크기
-const emit = defineEmits(['update:data']);
+    const emit = defineEmits(['update:data']);
 
-onMounted(() => {
+    onMounted(() => {
         // 툴바에서 선택할 수 있는 폰트 목록 설정
         const Font = Quill.import('formats/font');
         Font.whitelist = ['nanum-gothic', 'd2coding', 'consolas', 'serif', 'monospace'];
@@ -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');
                         });
                 }
@@ -187,12 +188,12 @@ onMounted(() => {
                 }
             });
         }
-});
+    });
 </script>
 <style>
-@import 'quill/dist/quill.snow.css';
+    @import 'quill/dist/quill.snow.css';
-.ql-editor {
+    .ql-editor {
         min-height: 300px;
         font-family: 'Nanum Gothic', sans-serif;
-}
+    }
 </style>

src/components/wordDict/DictWrite.vue

@@ -14,7 +14,7 @@
                 />
             </div>
             <div class="col-2 btn-margin" v-if="!isDisabled">
-                <PlusBtn @click="toggleInput"/>
+                <PlusBtn @click="toggleInput" />
             </div>
         </div>
 
@@ -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,87 +59,84 @@
 </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 QEditor from '@/components/editor/QEditor.vue';
-import FormInput from '@/components/input/FormInput.vue';
+    import FormInput from '@/components/input/FormInput.vue';
-import FormSelect from '@/components/input/FormSelect.vue';
+    import FormSelect from '@/components/input/FormSelect.vue';
-import PlusBtn from '../button/PlusBtn.vue';
+    import PlusBtn from '../button/PlusBtn.vue';
 
-const emit = defineEmits(['close','addCategory','addWord']);
+    const emit = defineEmits(['close', 'addCategory', 'addWord']);
 
-//용어제목
+    //용어제목
-const wordTitle = ref('');
+    const wordTitle = ref('');
-const addCategory = ref('');
+    const addCategory = ref('');
-const content = ref('');
+    const content = ref('');
-const imageUrls = ref([]);
+    const imageUrls = ref([]);
 
-//용어 Vaildation용
+    //용어 Vaildation용
-const wordTitleAlert = ref(false);
+    const wordTitleAlert = ref(false);
-const wordContentAlert = ref(false);
+    const wordContentAlert = ref(false);
-const addCategoryAlert = ref(false);
+    const addCategoryAlert = ref(false);
 
-//선택 카테고리
+    //선택 카테고리
-const selectCategory = ref('');
+    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
+    // 카테고리 입력 중복 ref
-const categoryInputRef = ref(null);
+    const categoryInputRef = ref(null);
 
-const props = defineProps({
+    const props = defineProps({
         dataList: {
             type: Array,
-        default: () => []
+            default: () => [],
         },
-    NumValue : {
+        NumValue: {
-        type: Number
+            type: Number,
         },
-    formValue : {
+        formValue: {
-        type:[String, Number]
+            type: [String, Number],
         },
-    titleValue : {
+        titleValue: {
-        type:String,
+            type: String,
-    },contentValue : {
+        },
-        type:String,
+        contentValue: {
+            type: String,
         },
         isDisabled: {
             type: Boolean,
-        default: false
+            default: false,
-    }
+        },
-});
+    });
 
-// 카테고리 입력 창
+    // 카테고리 입력 창
-const showInput = ref(false);
+    const showInput = ref(false);
 
-// 카테고리 입력 토글
+    // 카테고리 입력 토글
-const toggleInput = () => {
+    const toggleInput = () => {
         showInput.value = !showInput.value;
-};
+    };
 
-const onChange = (newValue) => {
+    const onChange = newValue => {
         selectCategory.value = newValue.target.value;
-};
+    };
 
-//용어 등록
+    //용어 등록
-const saveWord = () => {
+    const saveWord = () => {
         //validation
         let computedTitleTrim;
 
-    if(computedTitle.value != undefined){
+        if (computedTitle.value != undefined) {
-        computedTitleTrim = computedTitle.value.trim()
+            computedTitleTrim = computedTitle.value.trim();
         }
 
         // 용어 체크
-    if(computedTitleTrim == undefined || computedTitleTrim == ''){
+        if (computedTitleTrim == undefined || computedTitleTrim == '') {
             wordTitleAlert.value = true;
             return;
         } else {
@@ -144,18 +146,15 @@ 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
-        );
         }
 
         // 내용 체크
-    if(content.value == '' || inserts.join('') === ''){
+        if (content.value == '' || inserts.join('') === '') {
             wordContentAlert.value = true;
             return;
         }
 
-
         const wordData = {
             id: props.NumValue || null,
             title: computedTitle.value,
@@ -164,17 +163,16 @@ const saveWord = () => {
         };
 
         emit('addWord', wordData, addCategory.value);
-}
+    };
 
-
+    // 카테고리 focusout 이벤트 핸들러 추가
-// 카테고리 focusout 이벤트 핸들러 추가
+    const handleCategoryFocusout = value => {
-const handleCategoryFocusout = (value) => {
         const valueTrim = value.trim();
 
         const existingCategory = props.dataList.find(item => item.label === valueTrim);
 
         // 카테고리 입력시 공백
-    if(valueTrim == ''){
+        if (valueTrim == '') {
             addCategoryAlert.value = true;
 
             // 공백시 강제 focus
@@ -184,9 +182,7 @@ const handleCategoryFocusout = (value) => {
                     inputElement.focus();
                 }
             }, 0);
-
+        } else if (existingCategory) {
-        
-    }else if (existingCategory) {
             addCategoryAlert.value = true;
 
             // 중복시 강제 focus
@@ -196,23 +192,20 @@ const handleCategoryFocusout = (value) => {
                     inputElement.focus();
                 }
             }, 0);
-
         } else {
             addCategoryAlert.value = false;
         }
-};
+    };
-
-
 </script>
 
 <style scoped>
-.dict-w {
+    .dict-w {
         width: 83%;
-}
-
-@media (max-width: 768px) {
-    .btn-margin {
-        margin-top: 2.5rem
     }
-}
+
+    @media (max-width: 768px) {
+        .btn-margin {
+            margin-top: 2.5rem;
+        }
+    }
 </style>

src/views/board/BoardEdit.vue

@@ -10,25 +10,48 @@
             <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"
                     />
 
+                    <!-- 실시간 반영된 파일 개수 표시 -->
+                    <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 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>
 
@@ -48,52 +71,71 @@
 </template>
 
 <script setup>
-import QEditor from '@c/editor/QEditor.vue';
+    import QEditor from '@c/editor/QEditor.vue';
-import FormInput from '@c/input/FormInput.vue';
+    import FormInput from '@c/input/FormInput.vue';
-import { ref, onMounted } from 'vue';
+    import FormFile from '@c/input/FormFile.vue';
-import { useRoute, useRouter } from 'vue-router';
+    import { ref, onMounted, computed, watch } from 'vue';
-import axios from '@api';
+    import { useRoute, useRouter } from 'vue-router';
+    import axios from '@api';
 
-// 상태 변수
+    // 상태 변수
-const title = ref('');
+    const title = ref('');
-const content = ref('');
+    const content = ref('');
 
-// 경고 상태
+    // 경고 상태
-const titleAlert = ref(false);
+    const titleAlert = ref(false);
-const contentAlert = ref(false);
+    const contentAlert = ref(false);
+    const contentLoaded = ref(false);
 
-// 라우터
+    // 라우터
-const router = useRouter();
+    const router = useRouter();
-const route = useRoute();
+    const route = useRoute();
-const currentBoardId = ref(route.params.id); // 라우트에서 ID 가져오기
+    const currentBoardId = ref(route.params.id); // 라우트에서 ID 가져오기
-console.log(currentBoardId.value)
+
-// 게시물 데이터 로드
+    // 파일
-const fetchBoardDetails = async () => {
+    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.boardDetail;
+            const data = response.data.data;
 
-        if (!data) {
+            // 기존 첨부파일 추가
-            console.error('API에서 게시물 데이터를 반환하지 않았습니다.');
+            if (data.hasAttachment && data.attachments.length > 0) {
-            return;
+                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 goList = () => {
+    const addDisplayFileName = fileInfos =>
+        fileInfos.map(file => ({
+            ...file,
+            name: `${file.originalName}.${file.extension}`,
+        }));
+
+    // 목록 페이지로 이동
+    const goList = () => {
         router.push('/board');
-};
+    };
 
-// 게시물 수정
+    // 게시물 수정
-const updateBoard = async () => {
+    const updateBoard = async () => {
         // 유효성 검사
         if (!title.value) {
             titleAlert.value = true;
@@ -111,10 +153,26 @@ 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);
+            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();
@@ -122,21 +180,58 @@ const updateBoard = async () => {
             console.error('게시물 수정 중 오류 발생:', error);
             alert('게시물 수정에 실패했습니다.');
         }
-};
+    };
 
-// 컴포넌트 마운트 시 데이터 로드
+    ////////////////// fileSection[S] ////////////////////
-onMounted(() => {
+    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 {
+    .text-red {
         color: red;
         text-align: center;
-}
+    }
 </style>

src/views/board/BoardView.vue

@@ -18,6 +18,21 @@
                                 @editClick="editClick"
                                 @deleteClick="deleteClick"
                             />
+
+                            <!-- 비밀번호 입력창 (익명일 경우) -->
+                            <div v-if="isPassword && unknown" class="mt-3 w-25 ms-auto">
+                                <div class="input-group">
+                                    <input
+                                        type="password"
+                                        class="form-control"
+                                        v-model="password"
+                                        placeholder="비밀번호 입력"
+                                        @input="password = password.replace(/\s/g, '')"
+                                    />
+                                    <button class="btn btn-primary" @click="submitPassword">확인</button>
+                                </div>
+                                <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
+                            </div>
                         </div>
                     </div>
 
@@ -31,17 +46,18 @@
 
                             <!-- 첨부파일 다운로드 버튼 -->
                             <div v-if="attachments.length" class="btn-group">
-                                <button type="button" class="btn btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                                <button
+                                    type="button"
+                                    class="btn btn-label-secondary dropdown-toggle"
+                                    data-bs-toggle="dropdown"
+                                    aria-expanded="false"
+                                >
                                     <i class="fa-solid fa-download me-2"></i>
                                     첨부파일 ({{ attachments.length }}개)
                                 </button>
                                 <ul class="dropdown-menu">
                                     <li v-for="(attachment, index) in attachments" :key="index">
-                                        <a
+                                        <a class="dropdown-item" href="#" @click.prevent="downloadFile(attachment)">
-                                            class="dropdown-item"
-                                            href="#"
-                                            @click.prevent="downloadFile(attachment)"
-                                        >
                                             {{ attachment.originalName }}.{{ attachment.extension }}
                                         </a>
                                     </li>
@@ -50,7 +66,7 @@
                         </div>
 
                         <!-- HTML 콘텐츠 렌더링 -->
-                        <div class="board-content text-body" style="line-height: 1.6;" v-html="$common.contentToHtml(boardContent)"></div>
+                        <div class="board-content text-body" style="line-height: 1.6" v-html="$common.contentToHtml(boardContent)"></div>
 
                         <!-- 좋아요 버튼 -->
                         <div class="row justify-content-center my-10">
@@ -97,11 +113,7 @@
                             @submitEdit="handleSubmitEdit"
                             @update:password="updatePassword"
                         />
-                        <Pagination
+                        <Pagination v-if="pagination.pages" v-bind="pagination" @update:currentPage="handlePageChange" />
-                            v-if="pagination.pages"
-                            v-bind="pagination"
-                            @update:currentPage="handlePageChange"
-                        />
                     </div>
                 </div>
             </div>
@@ -110,58 +122,58 @@
 </template>
 
 <script setup>
-import BoardCommentArea from '@/components/board/BoardCommentArea.vue';
+    import BoardCommentArea from '@/components/board/BoardCommentArea.vue';
-import BoardProfile from '@c/board/BoardProfile.vue';
+    import BoardProfile from '@c/board/BoardProfile.vue';
-import BoardCommentList from '@c/board/BoardCommentList.vue';
+    import BoardCommentList from '@c/board/BoardCommentList.vue';
-import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
+    import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
-import Pagination from '@c/pagination/Pagination.vue';
+    import Pagination from '@c/pagination/Pagination.vue';
-import { ref, onMounted, computed } from 'vue';
+    import { ref, onMounted, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+    import { useRoute, useRouter } from 'vue-router';
-import { useUserInfoStore } from '@/stores/useUserInfoStore';
+    import { useUserInfoStore } from '@/stores/useUserInfoStore';
-import axios from '@api';
+    import axios from '@api';
 
-// 게시물 데이터 상태
+    // 게시물 데이터 상태
-const profileName = ref('');
+    const profileName = ref('');
-const boardTitle = ref('제목 없음');
+    const boardTitle = ref('제목 없음');
-const boardContent = ref('');
+    const boardContent = ref('');
-const date = ref('');
+    const date = ref('');
-const views = ref(0);
+    const views = ref(0);
-const likes = ref(0);
+    const likes = ref(0);
-const dislikes = ref(0);
+    const dislikes = ref(0);
-const likeClicked = ref(false);
+    const likeClicked = ref(false);
-const dislikeClicked = ref(false);
+    const dislikeClicked = ref(false);
-const commentNum = ref(0);
+    const commentNum = ref(0);
-const attachment = ref(false);
+    const attachment = ref(false);
-const comments = ref([]);
+    const comments = ref([]);
 
-const route = useRoute();
+    const route = useRoute();
-const router = useRouter();
+    const router = useRouter();
-const userStore = useUserInfoStore();
+    const userStore = useUserInfoStore();
-const currentBoardId = ref(Number(route.params.id));
+    const currentBoardId = ref(Number(route.params.id));
-const unknown = computed(() => profileName.value === '익명');
+    const unknown = computed(() => profileName.value === '익명');
-const currentUserId = computed(() => userStore.user.id); // 현재 로그인한 사용자 id
+    const currentUserId = computed(() => userStore.user.id); // 현재 로그인한 사용자 id
-const authorId = ref(''); // 작성자 id
+    const authorId = ref(''); // 작성자 id
 
-const isAuthor = computed(() => currentUserId.value === authorId.value);
+    const isAuthor = computed(() => currentUserId.value === authorId.value);
-const commentsWithAuthStatus = computed(() => {
+    const commentsWithAuthStatus = computed(() => {
         const updatedComments = comments.value.map(comment => ({
             ...comment,
             isCommentAuthor: comment.authorId === currentUserId.value,
             children: comment.children.map(reply => ({
                 ...reply,
                 isCommentAuthor: reply.authorId === currentUserId.value,
-        }))
+            })),
         }));
         return updatedComments;
-});
+    });
 
-const attachments = ref([]);
+    const attachments = ref([]);
-// 첨부파일 다운로드 URL 생성
+    // 첨부파일 다운로드 URL 생성
-const downloadFile = async (attachment) => {
+    const downloadFile = async attachment => {
         try {
             const response = await axios.get(`board/download`, {
                 params: { path: attachment.path },
-            responseType: 'blob'
+                responseType: 'blob',
             });
 
             // Blob에서 파일 다운로드 링크 생성
@@ -177,27 +189,25 @@ const downloadFile = async (attachment) => {
             console.error('파일 다운로드 오류:', error);
             alert('파일 다운로드 중 오류가 발생했습니다.');
         }
-};
+    };
 
+    const password = ref('');
+    const passwordAlert = ref('');
+    const passwordCommentAlert = ref('');
+    const isPassword = ref(false);
+    const isCommentPassword = ref(false);
+    const currentPasswordCommentId = ref(null);
+    const lastClickedButton = ref('');
+    const lastCommentClickedButton = ref('');
+    const isEditTextarea = ref(false);
+    const isDeleted = ref(true);
+    const commentAlert = ref('');
 
-
+    const updatePassword = newPassword => {
-const password = ref('');
-const passwordAlert = ref("");
-const passwordCommentAlert = ref("");
-const isPassword = ref(false);
-const isCommentPassword = ref(false);
-const currentPasswordCommentId = ref(null);
-const lastClickedButton = ref("");
-const lastCommentClickedButton = ref("");
-const isEditTextarea = ref(false);
-const isDeleted = ref(true);
-const commentAlert = ref('');
-
-const updatePassword = (newPassword) => {
         password.value = newPassword;
-};
+    };
 
-const pagination = ref({
+    const pagination = ref({
         currentPage: 1,
         pages: 1,
         prePage: 0,
@@ -209,19 +219,17 @@ const pagination = ref({
         navigatePages: 10,
         navigatepageNums: [1],
         navigateFirstPage: 1,
-    navigateLastPage: 1
+        navigateLastPage: 1,
-});
+    });
 
-
+    // 게시물 상세 데이터 불러오기
-// 게시물 상세 데이터 불러오기
+    const fetchBoardDetails = async () => {
-const fetchBoardDetails = async () => {
         try {
             const response = await axios.get(`board/${currentBoardId.value}`);
             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 || '';
@@ -232,20 +240,19 @@ const fetchBoardDetails = async () => {
             attachment.value = data.hasAttachment || null;
             commentNum.value = data.commentCount || 0;
             attachments.value = data.attachments || [];
-
         } catch (error) {
             alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
         }
-};
+    };
 
-// 좋아요, 싫어요
+    // 좋아요, 싫어요
-const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
+    const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
         try {
             await axios.post(`/board/${boardId}/${commentId}/reaction`, {
                 LOCBRDSEQ: boardId, // 게시글 id
                 LOCCMTSEQ: commentId, //댓글 id
                 LOCGOBGOD: isLike ? 'T' : 'F',
-            LOCGOBBAD: isDislike ? 'T' : 'F'
+                LOCGOBBAD: isDislike ? 'T' : 'F',
             });
 
             const response = await axios.get(`board/${boardId}`);
@@ -256,15 +263,13 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
 
             likeClicked.value = isLike;
             dislikeClicked.value = isDislike;
-
         } catch (error) {
             alert('오류가 발생했습니다.');
         }
-};
+    };
 
-
+    // 대댓글 좋아요
-// 대댓글 좋아요
+    const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => {
-const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => {
         if (!commentId) return; // 댓글 ID가 없으면 실행 안 함
 
         try {
@@ -272,25 +277,24 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
                 LOCBRDSEQ: boardId, // 게시글 ID
                 LOCCMTSEQ: commentId, // 댓글 ID
                 LOCGOBGOD: isLike ? 'T' : 'F',
-            LOCGOBBAD: isDislike ? 'T' : 'F'
+                LOCGOBBAD: isDislike ? 'T' : 'F',
             });
 
             await fetchComments();
-
         } catch (error) {
             alert('오류가 발생했습니다.');
         }
-};
+    };
 
-// 댓글 목록 조회
+    // 댓글 목록 조회
-const fetchComments = async (page  = 1) => {
+    const fetchComments = async (page = 1) => {
         try {
             // 댓글
             const response = await axios.get(`board/${currentBoardId.value}/comments`, {
                 params: {
                     LOCBRDSEQ: currentBoardId.value,
-                page
+                    page,
-            }
+                },
             });
             const commentsList = response.data.data.list.map(comment => ({
                 commentId: comment.LOCCMTSEQ, // 댓글 ID
@@ -307,7 +311,6 @@ const fetchComments = async (page  = 1) => {
                 createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
                 children: [], // 대댓글을 담을 배열
                 updateAtRaw: comment.LOCCMTUDT,
-
             }));
 
             commentsList.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
@@ -316,7 +319,7 @@ const fetchComments = async (page  = 1) => {
                 if (!comment.commentId) continue;
 
                 const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
-                params: { LOCCMTPNT: comment.commentId }
+                    params: { LOCCMTPNT: comment.commentId },
                 });
 
                 if (replyResponse.data.data) {
@@ -326,13 +329,13 @@ const fetchComments = async (page  = 1) => {
                         commentId: reply.LOCCMTSEQ,
                         boardId: reply.LOCBRDSEQ,
                         parentId: reply.LOCCMTPNT, // 부모 댓글 ID
-                    content: reply.LOCCMTRPY || "내용 없음",
+                        content: reply.LOCCMTRPY || '내용 없음',
                         createdAtRaw: new Date(reply.LOCCMTRDT),
                         createdAt: formattedDate(reply.LOCCMTRDT),
                         likeCount: reply.likeCount || 0,
                         dislikeCount: reply.dislikeCount || 0,
                         likeClicked: false,
-                    dislikeClicked: false
+                        dislikeClicked: false,
                     }));
                 } else {
                     comment.children = []; // 대댓글이 없으면 빈 배열로 초기화
@@ -355,32 +358,30 @@ const fetchComments = async (page  = 1) => {
                 navigatePages: response.data.data.navigatePages, // 몇 개의 페이지 버튼을 보여줄 것인지
                 navigatepageNums: response.data.data.navigatepageNums, // 실제 페이지 번호 목록
                 navigateFirstPage: response.data.data.navigateFirstPage, // 페이지네이션에서 첫 페이지 번호
-            navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
+                navigateLastPage: response.data.data.navigateLastPage, // 페이지네이션에서 마지막 페이지 번호
             };
-
-
         } catch (error) {
             alert('오류가 발생했습니다.');
         }
-};
+    };
 
-// 댓글 작성
+    // 댓글 작성
-const handleCommentSubmit = async (data) => {
+    const handleCommentSubmit = async data => {
         if (!data) {
             return;
         }
 
         const { comment, password, isCheck } = data;
 
-    if (!comment || comment.trim() === "") {
+        if (!comment || comment.trim() === '') {
             commentAlert.value = '댓글을 입력해주세요.';
             return;
         } else {
             commentAlert.value = '';
         }
 
-    if (unknown.value && isCheck && (!password || password.trim() === "")) {
+        if (unknown.value && isCheck && (!password || password.trim() === '')) {
-        passwordAlert.value = "비밀번호를 입력해야 합니다.";
+            passwordAlert.value = '비밀번호를 입력해야 합니다.';
             return;
         }
 
@@ -390,7 +391,7 @@ const handleCommentSubmit = async (data) => {
                 LOCCMTRPY: comment,
                 LOCCMTPWD: isCheck ? password : '',
                 LOCCMTPNT: 1,
-            LOCBRDTYP: isCheck ? "300102" : null
+                LOCBRDTYP: isCheck ? '300102' : null,
             });
 
             if (response.status === 200) {
@@ -398,22 +399,22 @@ const handleCommentSubmit = async (data) => {
                 commentAlert.value = '';
                 await fetchComments();
             } else {
-            alert("댓글 작성을 실패했습니다.")
+                alert('댓글 작성을 실패했습니다.');
             }
         } catch (error) {
-        alert("오류가 발생했습니다.")
+            alert('오류가 발생했습니다.');
         }
-};
+    };
 
-// 대댓글 추가
+    // 대댓글 추가
-const handleCommentReply = async (reply) => {
+    const handleCommentReply = async reply => {
         try {
             const response = await axios.post(`board/${currentBoardId.value}/comment`, {
                 LOCBRDSEQ: currentBoardId.value,
                 LOCCMTRPY: reply.comment,
                 LOCCMTPWD: reply.password || null,
                 LOCCMTPNT: reply.parentId,
-            LOCBRDTYP: reply.isCheck ? "300102" : null
+                LOCBRDTYP: reply.isCheck ? '300102' : null,
             });
 
             if (response.status === 200) {
@@ -425,33 +426,33 @@ const handleCommentReply = async (reply) => {
             }
         } catch (error) {
             if (error.response) {
-            alert("오류가 발생했습니다.");
+                alert('오류가 발생했습니다.');
             }
-        alert("오류가 발생했습니다.");
+            alert('오류가 발생했습니다.');
         }
-}
+    };
 
-// 게시글 수정 버튼 클릭
+    // 게시글 수정 버튼 클릭
-const editClick = (unknown) => {
+    const editClick = unknown => {
         const isUnknown = unknown?.unknown ?? false;
 
         if (isUnknown) {
-        togglePassword("edit");
+            togglePassword('edit');
         } else {
-        router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
+            router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
         }
-};
+    };
 
-// 게시글 삭제 버튼 클릭
+    // 게시글 삭제 버튼 클릭
-const deleteClick = (unknown) => {
+    const deleteClick = unknown => {
         if (unknown) {
-        togglePassword("delete");
+            togglePassword('delete');
         } else {
             deletePost();
         }
-};
+    };
 
-const findCommentById = (commentId, commentsList) => {
+    const findCommentById = (commentId, commentsList) => {
         for (const comment of commentsList) {
             if (comment.commentId === commentId) {
                 return comment; // 부모 댓글일 경우
@@ -462,10 +463,10 @@ const findCommentById = (commentId, commentsList) => {
             }
         }
         return null;
-};
+    };
 
-// 댓글 수정(대댓글 포함)
+    // 댓글 수정(대댓글 포함)
-const editComment = (comment) => {
+    const editComment = comment => {
         password.value = '';
         passwordCommentAlert.value = '';
         currentPasswordCommentId.value = null;
@@ -477,7 +478,7 @@ const editComment = (comment) => {
         }
 
         const isMyComment = comment.authorId === currentUserId.value;
-    const isAnonymous = comment.author === "익명";
+        const isAnonymous = comment.author === '익명';
 
         if (isMyComment) {
             if (targetComment.isEditTextarea) {
@@ -501,25 +502,25 @@ const editComment = (comment) => {
 
                 // 비밀번호 입력
                 targetComment.isEditTextarea = false;
-            toggleCommentPassword(comment, "edit");
+                toggleCommentPassword(comment, 'edit');
             }
         } else {
-        alert("수정이 불가능합니다");
+            alert('수정이 불가능합니다');
         }
-}
+    };
 
-// 모든 댓글의 수정 창 닫기
+    // 모든 댓글의 수정 창 닫기
-const closeAllEditTextareas = () => {
+    const closeAllEditTextareas = () => {
         comments.value.forEach(comment => {
             comment.isEditTextarea = false;
             comment.children.forEach(reply => {
                 reply.isEditTextarea = false;
             });
         });
-};
+    };
 
-// 댓글 삭제 버튼 클릭
+    // 댓글 삭제 버튼 클릭
-const deleteComment = async (comment) => {
+    const deleteComment = async comment => {
         const isMyComment = comment.authorId === currentUserId.value;
 
         if (unknown.value && !isMyComment) {
@@ -527,15 +528,15 @@ const deleteComment = async (comment) => {
                 comment.isEditTextarea = false;
                 comment.isCommentPassword = true;
             } else {
-            toggleCommentPassword(comment, "delete");
+                toggleCommentPassword(comment, 'delete');
             }
         } else {
             deleteReplyComment(comment);
         }
-};
+    };
 
-// 익명 댓글 비밀번호 창 토글
+    // 익명 댓글 비밀번호 창 토글
-const toggleCommentPassword = (comment, button) => {
+    const toggleCommentPassword = (comment, button) => {
         if (lastCommentClickedButton.value === button && currentPasswordCommentId.value === comment.commentId) {
             currentPasswordCommentId.value = null; // 비밀번호 창 닫기
             password.value = '';
@@ -547,62 +548,63 @@ const toggleCommentPassword = (comment, button) => {
         }
 
         lastCommentClickedButton.value = button;
-};
+    };
 
-const togglePassword = (button) => {
+    const togglePassword = button => {
         if (lastClickedButton.value === button) {
             isPassword.value = !isPassword.value;
         } else {
             isPassword.value = true;
         }
         lastClickedButton.value = button;
-};
+    };
 
-// 게시글 비밀번호 제출
+    // 게시글 비밀번호 제출
-const submitPassword = async () => {
+    const submitPassword = async () => {
         if (!password.value.trim()) {
-        passwordAlert.value = "비밀번호를 입력해주세요.";
+            passwordAlert.value = '비밀번호를 입력해주세요.';
             return;
         }
 
         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) {
                 password.value = '';
                 isPassword.value = false;
 
-            if (lastClickedButton.value === "edit") {
+                if (lastClickedButton.value === 'edit') {
-                router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
+                    router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
-            } else if (lastClickedButton.value === "delete") {
+                } else if (lastClickedButton.value === 'delete') {
                     await deletePost();
                 }
                 lastClickedButton.value = null;
             } else {
-            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+                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 {
+            //     passwordAlert.value = '요청 중 알 수 없는 오류가 발생했습니다.';
+            // }
         }
-        } else if (error.request) {
+    };
-            passwordAlert.value = "네트워크 오류가 발생했습니다. 다시 시도해주세요.";
-        } else {
-            passwordAlert.value = "요청 중 알 수 없는 오류가 발생했습니다.";
-        }
-    }
-};
 
-// 댓글 (비밀번호 확인 후)
+    // 댓글 (비밀번호 확인 후)
-const submitCommentPassword = async (comment, password) => {
+    const submitCommentPassword = async (comment, password) => {
         if (!password) {
-        passwordCommentAlert.value = "비밀번호를 입력해주세요.";
+            passwordCommentAlert.value = '비밀번호를 입력해주세요.';
             return;
         }
 
@@ -615,68 +617,66 @@ const submitCommentPassword = async (comment, password) => {
             });
 
             if (response.data.code === 200 && response.data.data === true) {
-            passwordCommentAlert.value = "";
+                passwordCommentAlert.value = '';
                 comment.isCommentPassword = false;
 
                 // 수정
-            if (lastCommentClickedButton.value === "edit") {
+                if (lastCommentClickedButton.value === 'edit') {
-
                     if (targetComment) {
                         // 다른 모든 댓글의 수정 창 닫기
                         closeAllEditTextareas();
 
                         targetComment.isEditTextarea = true;
-                    passwordCommentAlert.value = "";
+                        passwordCommentAlert.value = '';
                         currentPasswordCommentId.value = null;
-
                     } else {
-                    alert("수정 취소를 실패했습니다.");
+                        alert('수정 취소를 실패했습니다.');
                     }
                     //삭제
-            } else if (lastCommentClickedButton.value === "delete") {
+                } else if (lastCommentClickedButton.value === 'delete') {
-                passwordCommentAlert.value = "";
+                    passwordCommentAlert.value = '';
 
-                deleteReplyComment(comment)
+                    deleteReplyComment(comment);
                 }
                 lastCommentClickedButton.value = null;
             } else {
-            passwordCommentAlert.value = "비밀번호가 일치하지 않습니다.";
+                passwordCommentAlert.value = '비밀번호가 일치하지 않습니다.';
             }
         } catch (error) {
             if (error.response?.status === 401) {
-            passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
+                passwordCommentAlert.value = '비밀번호가 일치하지 않습니다';
             }
-        passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
+            passwordCommentAlert.value = '비밀번호가 일치하지 않습니다';
         }
-};
+    };
 
-// 게시글 삭제
+    // 게시글 삭제
-const deletePost = async () => {
+    const deletePost = async () => {
-    if (confirm("정말 삭제하시겠습니까?")) {
+        if (confirm('정말 삭제하시겠습니까?')) {
             try {
                 const response = await axios.delete(`board/${currentBoardId.value}`, {
-                data: { LOCBRDSEQ: currentBoardId.value }
+                    data: { LOCBRDSEQ: currentBoardId.value },
                 });
 
                 if (response.data.code === 200) {
-                alert("게시물이 삭제되었습니다.");
+                    alert('게시물이 삭제되었습니다.');
-                router.push({ name: "BoardList" });
+                    router.push({ name: 'BoardList' });
                 } else {
-                alert("삭제 실패: " + response.data.message);
+                    alert('삭제 실패: ' + response.data.message);
                 }
             } catch (error) {
                 if (error.response) {
-                alert(`삭제 실패: ${error.response.data.message || "서버 오류"}`);
+                    alert(`삭제 실패: ${error.response.data.message || '서버 오류'}`);
                 } else {
-                alert("네트워크 오류가 발생했습니다. 다시 시도해주세요.");
+                    alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
                 }
             }
         }
-};
+    };
 
-// 댓글 삭제 (대댓글 포함)
+    // 댓글 삭제 (대댓글 포함)
-const deleteReplyComment = async (comment) => {
+    const deleteReplyComment = async comment => {
-    if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
+        if (!confirm('정말 이 댓글을 삭제하시겠습니까?')) return;
 
         const targetComment = findCommentById(comment.commentId, comments.value);
 
@@ -684,7 +684,7 @@ const deleteReplyComment = async (comment) => {
 
         try {
             const response = await axios.delete(`board/comment/${comment.commentId}`, {
-            data: { LOCCMTSEQ: comment.commentId }
+                data: { LOCCMTSEQ: comment.commentId },
             });
 
             if (response.data.code === 200) {
@@ -693,64 +693,63 @@ const deleteReplyComment = async (comment) => {
                 if (targetComment) {
                     // console.log('타겟',targetComment)
                     // ✅ 댓글 내용만 "삭제된 댓글입니다."로 변경하고, 구조는 유지
-                targetComment.content = "댓글이 삭제되었습니다.";
+                    targetComment.content = '댓글이 삭제되었습니다.';
-                targetComment.author = "알 수 없음";  // 익명 처리
+                    targetComment.author = '알 수 없음'; // 익명 처리
                     targetComment.isDeleted = true; // ✅ 삭제 상태를 추가
                 }
             } else {
-            alert("댓글 삭제에 실패했습니다.");
+                alert('댓글 삭제에 실패했습니다.');
             }
         } catch (error) {
-        alert("댓글 삭제 중 오류가 발생했습니다.");
+            alert('댓글 삭제 중 오류가 발생했습니다.');
         }
-};
+    };
 
-// 댓글 수정 확인
+    // 댓글 수정 확인
-const handleSubmitEdit = async (comment, editedContent) => {
+    const handleSubmitEdit = async (comment, editedContent) => {
         try {
             const response = await axios.put(`board/comment/${comment.commentId}`, {
                 LOCCMTSEQ: comment.commentId,
-            LOCCMTRPY: editedContent
+                LOCCMTRPY: editedContent,
             });
 
             if (response.status === 200) {
-
                 const targetComment = findCommentById(comment.commentId, comments.value);
                 if (targetComment) {
                     targetComment.content = editedContent; // 댓글 내용 업데이트
                     targetComment.isEditTextarea = false; // 수정 모드 닫기
                 } else {
-                alert("수정할 댓글을 찾을 수 없습니다.");
+                    alert('수정할 댓글을 찾을 수 없습니다.');
                 }
             } else {
-            alert("댓글 수정 실패했습니다.");
+                alert('댓글 수정 실패했습니다.');
             }
         } catch (error) {
-        alert("댓글 수정 중 오류 발생했습니다.");
+            alert('댓글 수정 중 오류 발생했습니다.');
         }
-};
+    };
 
-// 댓글 수정 취소 (대댓글 포함)
+    // 댓글 수정 취소 (대댓글 포함)
-const handleCancelEdit = (comment) => {
+    const handleCancelEdit = comment => {
         const targetComment = findCommentById(comment.commentId, comments.value);
 
         if (targetComment) {
             targetComment.isEditTextarea = false;
         } else {
-        alert("수정 취소를 실패했습니다.");
+            alert('수정 취소를 실패했습니다.');
         }
-};
+    };
 
-// 페이지 변경
+    // 페이지 변경
-const handlePageChange = (page) => {
+    const handlePageChange = page => {
         if (page !== pagination.value.currentPage) {
             pagination.value.currentPage = page;
             fetchComments(page);
         }
-};
+    };
 
-// 댓글 삭제 (대댓글 포함)
+    // 댓글 삭제 (대댓글 포함)
-const handleCommentDeleted = (deletedCommentId) => {
+    const handleCommentDeleted = deletedCommentId => {
         // 댓글 삭제
         const parentIndex = comments.value.findIndex(comment => comment.commentId === deletedCommentId);
 
@@ -767,20 +766,20 @@ const handleCommentDeleted = (deletedCommentId) => {
                 return;
             }
         }
-};
+    };
 
-// 날짜
+    // 날짜
-const formattedDate = (dateString) => {
+    const formattedDate = dateString => {
-    if (!dateString) return "날짜 없음";
+        if (!dateString) return '날짜 없음';
         const dateObj = new Date(dateString);
         return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
-};
+    };
 
-const formattedBoardDate = computed(() => formattedDate(date.value));
+    const formattedBoardDate = computed(() => formattedDate(date.value));
 
-// 컴포넌트 마운트 시 데이터 로드
+    // 컴포넌트 마운트 시 데이터 로드
-onMounted(() => {
+    onMounted(() => {
-    fetchBoardDetails()
+        fetchBoardDetails();
-    fetchComments()
+        fetchComments();
-});
+    });
 </script>