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,12 +25,7 @@
             </template>
 
             <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
-            <BoardRecommendBtn
+            <BoardRecommendBtn v-if="isLike" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
-                v-if="isLike"
-                :boardId="boardId"
-                :comment="comment"
-                @updateReaction="handleUpdateReaction"
-            />
         </div>
     </div>
 </template>
@@ -46,10 +37,10 @@ import EditButton from '../button/EditBtn.vue';
     import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
 
     // 기본 프로필 이미지 경로
-const defaultProfile = "/img/icons/icon.png";
+    const defaultProfile = '/img/icons/icon.png';
 
     // 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
-const baseUrl = "http://localhost:10325/"; // API 서버 URL
+    const baseUrl = 'http://localhost:10325/'; // API 서버 URL
 
     // Props 정의
     const props = defineProps({
@@ -59,7 +50,7 @@ const props = defineProps({
         },
         boardId: {
             type: Number,
-        required: false
+            required: false,
         },
         commentId: {
             type: Number,
@@ -102,14 +93,13 @@ const props = defineProps({
         isLike: {
             type: Boolean,
             default: false,
-    }
+        },
     });
 
     const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
 
     const isDeletedComment = computed(() => {
-    return props.comment?.content === '삭제된 댓글입니다' &&
+        return props.comment?.content === '삭제된 댓글입니다' && props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
-           props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
     });
 
     // 수정
@@ -123,8 +113,8 @@ const deleteClick = () => {
     };
 
     // 좋아요/싫어요 업데이트
-const handleUpdateReaction = (reactionData) => {
+    const handleUpdateReaction = reactionData => {
-    emit("updateReaction", {
+        emit('updateReaction', {
             boardId: props.boardId,
             commentId: props.comment?.commentId,
             ...reactionData,
@@ -132,9 +122,7 @@ const handleUpdateReaction = (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,5 +1,5 @@
 <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>
@@ -14,16 +14,16 @@ const props = defineProps({
         },
     });
 
-const buttonClass = ref("bx bx-edit-alt");
+    const buttonClass = ref('bx bx-edit-alt');
 
     const toggleText = () => {
         if (props.isToggleEnabled) {
-    buttonClass.value = buttonClass.value === "bx bx-edit-alt" ? "bx bx-x" : "bx bx-edit-alt";
+            buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
         }
     };
 
     const resetButton = () => {
-    buttonClass.value = "bx bx-edit-alt";
+        buttonClass.value = 'bx bx-edit-alt';
     };
 
     defineExpose({ resetButton });

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,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>
 
@@ -50,7 +73,8 @@
 <script setup>
     import QEditor from '@c/editor/QEditor.vue';
     import FormInput from '@c/input/FormInput.vue';
-import { ref, onMounted } from 'vue';
+    import FormFile from '@c/input/FormFile.vue';
+    import { ref, onMounted, computed, watch } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
     import axios from '@api';
 
@@ -61,32 +85,50 @@ 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 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 addDisplayFileName = fileInfos =>
+        fileInfos.map(file => ({
+            ...file,
+            name: `${file.originalName}.${file.extension}`,
+        }));
+
     // 목록 페이지로 이동
     const goList = () => {
         router.push('/board');
@@ -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();
@@ -124,6 +182,43 @@ const updateBoard = async () => {
         }
     };
 
+    ////////////////// fileSection[S] ////////////////////
+    const fileCount = computed(() => attachFiles.value.length);
+
+    const handleFileUpload = files => {
+        const validFiles = files.filter(file => file.size <= maxSize);
+
+        if (files.some(file => file.size > maxSize)) {
+            fileError.value = '파일 크기가 10MB를 초과할 수 없습니다.';
+            return;
+        }
+        if (attachFiles.value.length + validFiles.length > maxFiles) {
+            fileError.value = `최대 ${maxFiles}개의 파일만 업로드할 수 있습니다.`;
+            return;
+        }
+        fileError.value = '';
+        attachFiles.value = [...attachFiles.value, ...validFiles].slice(0, maxFiles);
+    };
+
+    const removeFile = (index, file) => {
+        if (file.id) delFileIdx.value.push(file.id);
+
+        attachFiles.value.splice(index, 1);
+        if (attachFiles.value.length <= maxFiles) {
+            fileError.value = '';
+        }
+    };
+
+    watch(attachFiles, () => {
+        isFileValid.value = attachFiles.value.length <= maxFiles;
+    });
+
+    const newFileFilter = attachFiles => {
+        const copyFiles = [...attachFiles.value];
+        return copyFiles.filter(item => !item.id);
+    };
+    ////////////////// fileSection[E] ////////////////////
+
     // 컴포넌트 마운트 시 데이터 로드
     onMounted(() => {
         if (currentBoardId.value) {

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>
@@ -150,18 +162,18 @@ const commentsWithAuthStatus = computed(() => {
             children: comment.children.map(reply => ({
                 ...reply,
                 isCommentAuthor: reply.authorId === currentUserId.value,
-        }))
+            })),
         }));
         return updatedComments;
     });
 
     const attachments = ref([]);
     // 첨부파일 다운로드 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에서 파일 다운로드 링크 생성
@@ -179,21 +191,19 @@ const downloadFile = async (attachment) => {
         }
     };
 
-
-
     const password = ref('');
-const passwordAlert = ref("");
+    const passwordAlert = ref('');
-const passwordCommentAlert = ref("");
+    const passwordCommentAlert = ref('');
     const isPassword = ref(false);
     const isCommentPassword = ref(false);
     const currentPasswordCommentId = ref(null);
-const lastClickedButton = ref("");
+    const lastClickedButton = ref('');
-const lastCommentClickedButton = ref("");
+    const lastCommentClickedButton = ref('');
     const isEditTextarea = ref(false);
     const isDeleted = ref(true);
     const commentAlert = ref('');
 
-const updatePassword = (newPassword) => {
+    const updatePassword = newPassword => {
         password.value = newPassword;
     };
 
@@ -209,19 +219,17 @@ const pagination = ref({
         navigatePages: 10,
         navigatepageNums: [1],
         navigateFirstPage: 1,
-    navigateLastPage: 1
+        navigateLastPage: 1,
     });
 
-
     // 게시물 상세 데이터 불러오기
     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,7 +240,6 @@ const fetchBoardDetails = async () => {
             attachment.value = data.hasAttachment || null;
             commentNum.value = data.commentCount || 0;
             attachments.value = data.attachments || [];
-
         } catch (error) {
             alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
         }
@@ -245,7 +252,7 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
                 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,13 +263,11 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
 
             likeClicked.value = isLike;
             dislikeClicked.value = isDislike;
-
         } catch (error) {
             alert('오류가 발생했습니다.');
         }
     };
 
-
     // 대댓글 좋아요
     const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => {
         if (!commentId) return; // 댓글 ID가 없으면 실행 안 함
@@ -272,11 +277,10 @@ 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('오류가 발생했습니다.');
         }
@@ -289,8 +293,8 @@ const fetchComments = async (page  = 1) => {
             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,27 +426,27 @@ 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();
         }
@@ -465,7 +466,7 @@ const findCommentById = (commentId, commentsList) => {
     };
 
     // 댓글 수정(대댓글 포함)
-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,12 +502,12 @@ const editComment = (comment) => {
 
                 // 비밀번호 입력
                 targetComment.isEditTextarea = false;
-            toggleCommentPassword(comment, "edit");
+                toggleCommentPassword(comment, 'edit');
             }
         } else {
-        alert("수정이 불가능합니다");
+            alert('수정이 불가능합니다');
-    }
         }
+    };
 
     // 모든 댓글의 수정 창 닫기
     const closeAllEditTextareas = () => {
@@ -519,7 +520,7 @@ const closeAllEditTextareas = () => {
     };
 
     // 댓글 삭제 버튼 클릭
-const deleteComment = async (comment) => {
+    const deleteComment = async comment => {
         const isMyComment = comment.authorId === currentUserId.value;
 
         if (unknown.value && !isMyComment) {
@@ -527,7 +528,7 @@ const deleteComment = async (comment) => {
                 comment.isEditTextarea = false;
                 comment.isCommentPassword = true;
             } else {
-            toggleCommentPassword(comment, "delete");
+                toggleCommentPassword(comment, 'delete');
             }
         } else {
             deleteReplyComment(comment);
@@ -549,7 +550,7 @@ const toggleCommentPassword = (comment, button) => {
         lastCommentClickedButton.value = button;
     };
 
-const togglePassword = (button) => {
+    const togglePassword = button => {
         if (lastClickedButton.value === button) {
             isPassword.value = !isPassword.value;
         } else {
@@ -561,48 +562,49 @@ const togglePassword = (button) => {
     // 게시글 비밀번호 제출
     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 if (error.request) {
-        } else {
+            //     passwordAlert.value = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
-            passwordAlert.value = "요청 중 알 수 없는 오류가 발생했습니다.";
+            // } else {
-        }
+            //     passwordAlert.value = '요청 중 알 수 없는 오류가 발생했습니다.';
+            // }
         }
     };
 
     // 댓글 (비밀번호 확인 후)
     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 () => {
-    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,15 +693,15 @@ 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('댓글 삭제 중 오류가 발생했습니다.');
         }
     };
 
@@ -710,39 +710,38 @@ 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);
@@ -750,7 +749,7 @@ const handlePageChange = (page) => {
     };
 
     // 댓글 삭제 (대댓글 포함)
-const handleCommentDeleted = (deletedCommentId) => {
+    const handleCommentDeleted = deletedCommentId => {
         // 댓글 삭제
         const parentIndex = comments.value.findIndex(comment => comment.commentId === deletedCommentId);
 
@@ -770,8 +769,8 @@ const handleCommentDeleted = (deletedCommentId) => {
     };
 
     // 날짜
-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')}`;
     };
@@ -780,7 +779,7 @@ const formattedBoardDate = computed(() => formattedDate(date.value));
 
     // 컴포넌트 마운트 시 데이터 로드
     onMounted(() => {
-    fetchBoardDetails()
+        fetchBoardDetails();
-    fetchComments()
+        fetchComments();
     });
 </script>