From 6ac3d587f8d8f980afa79796108ba0e466982493 Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Thu, 6 Mar 2025 12:15:37 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EA=B0=84?=
 =?UTF-8?q?=EA=B2=A9=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardProfile.vue | 196 ++++++++++++--------------
 1 file changed, 92 insertions(+), 104 deletions(-)

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

From d74c0ddacbbb1dde914037fef1761dca39c6ef02 Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Thu, 6 Mar 2025 12:21:50 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EA=B0=84=EA=B2=A9=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=EC=9E=85=EB=A0=A5=EC=B0=BD=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/EditBtn.vue |   38 +-
 src/views/board/BoardView.vue     | 1252 ++++++++++++++---------------
 2 files changed, 644 insertions(+), 646 deletions(-)

diff --git a/src/components/button/EditBtn.vue b/src/components/button/EditBtn.vue
index d3437b0..a5d2496 100644
--- a/src/components/button/EditBtn.vue
+++ b/src/components/button/EditBtn.vue
@@ -1,30 +1,30 @@
 <template>
-    <button class="btn btn-label-primary btn-icon" @click="toggleText">
-      <i :class="buttonClass"></i>
+    <button class="btn btn-label-primary btn-icon me-1" @click="toggleText">
+        <i :class="buttonClass"></i>
     </button>
 </template>
 
 <script setup>
-import { ref, defineProps } from 'vue';
+    import { ref, defineProps } from 'vue';
 
-const props = defineProps({
-  isToggleEnabled: {
-      type: Boolean,
-      default: false,
-  },
-});
+    const props = defineProps({
+        isToggleEnabled: {
+            type: Boolean,
+            default: false,
+        },
+    });
 
-const buttonClass = ref("bx bx-edit-alt");
+    const buttonClass = ref('bx bx-edit-alt');
 
-const toggleText = () => {
-  if (props.isToggleEnabled) {
-    buttonClass.value = buttonClass.value === "bx bx-edit-alt" ? "bx bx-x" : "bx bx-edit-alt";
-  }
-};
+    const toggleText = () => {
+        if (props.isToggleEnabled) {
+            buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
+        }
+    };
 
-const resetButton = () => {
-    buttonClass.value = "bx bx-edit-alt";
-};
+    const resetButton = () => {
+        buttonClass.value = 'bx bx-edit-alt';
+    };
 
-defineExpose({ resetButton });
+    defineExpose({ resetButton });
 </script>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 84bb8b2..442114a 100644
--- a/src/views/board/BoardView.vue
+++ b/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
-                                            class="dropdown-item"
-                                            href="#"
-                                            @click.prevent="downloadFile(attachment)"
-                                        >
+                                        <a 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
-                            v-if="pagination.pages"
-                            v-bind="pagination"
-                            @update:currentPage="handlePageChange"
-                        />
+                        <Pagination v-if="pagination.pages" v-bind="pagination" @update:currentPage="handlePageChange" />
                     </div>
                 </div>
             </div>
@@ -110,677 +122,663 @@
 </template>
 
 <script setup>
-import BoardCommentArea from '@/components/board/BoardCommentArea.vue';
-import BoardProfile from '@c/board/BoardProfile.vue';
-import BoardCommentList from '@c/board/BoardCommentList.vue';
-import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
-import Pagination from '@c/pagination/Pagination.vue';
-import { ref, onMounted, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useUserInfoStore } from '@/stores/useUserInfoStore';
-import axios from '@api';
+    import BoardCommentArea from '@/components/board/BoardCommentArea.vue';
+    import BoardProfile from '@c/board/BoardProfile.vue';
+    import BoardCommentList from '@c/board/BoardCommentList.vue';
+    import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
+    import Pagination from '@c/pagination/Pagination.vue';
+    import { ref, onMounted, computed } from 'vue';
+    import { useRoute, useRouter } from 'vue-router';
+    import { useUserInfoStore } from '@/stores/useUserInfoStore';
+    import axios from '@api';
 
-// 게시물 데이터 상태
-const profileName = ref('');
-const boardTitle = ref('제목 없음');
-const boardContent = ref('');
-const date = ref('');
-const views = ref(0);
-const likes = ref(0);
-const dislikes = ref(0);
-const likeClicked = ref(false);
-const dislikeClicked = ref(false);
-const commentNum = ref(0);
-const attachment = ref(false);
-const comments = ref([]);
+    // 게시물 데이터 상태
+    const profileName = ref('');
+    const boardTitle = ref('제목 없음');
+    const boardContent = ref('');
+    const date = ref('');
+    const views = ref(0);
+    const likes = ref(0);
+    const dislikes = ref(0);
+    const likeClicked = ref(false);
+    const dislikeClicked = ref(false);
+    const commentNum = ref(0);
+    const attachment = ref(false);
+    const comments = ref([]);
 
-const route = useRoute();
-const router = useRouter();
-const userStore = useUserInfoStore();
-const currentBoardId = ref(Number(route.params.id));
-const unknown = computed(() => profileName.value === '익명');
-const currentUserId = computed(() => userStore.user.id); // 현재 로그인한 사용자 id
-const authorId = ref(''); // 작성자 id
-
-const isAuthor = computed(() => currentUserId.value === authorId.value);
-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([]);
-// 첨부파일 다운로드 URL 생성
-const downloadFile = async (attachment) => {
-    try {
-        const response = await axios.get(`board/download`, {
-            params: { path: attachment.path },
-            responseType: 'blob'
-        });
-
-        // Blob에서 파일 다운로드 링크 생성
-        const url = window.URL.createObjectURL(new Blob([response.data]));
-        const link = document.createElement('a');
-        link.href = url;
-        link.setAttribute('download', attachment.originalName + '.' + attachment.extension);
-        document.body.appendChild(link);
-        link.click();
-        link.remove();
-        window.URL.revokeObjectURL(url);
-    } catch (error) {
-        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) => {
-    password.value = newPassword;
-};
-
-const pagination = ref({
-    currentPage: 1,
-    pages: 1,
-    prePage: 0,
-    nextPage: 1,
-    isFirstPage: true,
-    isLastPage: false,
-    hasPreviousPage: false,
-    hasNextPage: false,
-    navigatePages: 10,
-    navigatepageNums: [1],
-    navigateFirstPage: 1,
-    navigateLastPage: 1
-});
-
-
-// 게시물 상세 데이터 불러오기
-const fetchBoardDetails = async () => {
-    try {
-        const response = await axios.get(`board/${currentBoardId.value}`);
-        const data = response.data.data;
-
-
-        profileName.value = data.author || '익명';
-
-        authorId.value = data.authorId;
-        boardTitle.value = data.title || '제목 없음';
-        boardContent.value = data.content || '';
-        date.value = data.date || '';
-        views.value = data.cnt || 0;
-        likes.value = data.likeCount || 0;
-        dislikes.value = data.dislikeCount || 0;
-        attachment.value = data.hasAttachment || null;
-        commentNum.value = data.commentCount || 0;
-        attachments.value = data.attachments || [];
-
-    } catch (error) {
-        alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
-    }
-};
-
-// 좋아요, 싫어요
-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'
-        });
-
-        const response = await axios.get(`board/${boardId}`);
-        const updatedData = response.data.data;
-
-        likes.value = updatedData.likeCount;
-        dislikes.value = updatedData.dislikeCount;
-
-        likeClicked.value = isLike;
-        dislikeClicked.value = isDislike;
-
-    } catch (error) {
-        alert('오류가 발생했습니다.');
-    }
-};
-
-
-// 대댓글 좋아요
-const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => {
-    if (!commentId) return; // 댓글 ID가 없으면 실행 안 함
-
-    try {
-        const response = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
-            LOCBRDSEQ: boardId,  // 게시글 ID
-            LOCCMTSEQ: commentId, // 댓글 ID
-            LOCGOBGOD: isLike ? 'T' : 'F',
-            LOCGOBBAD: isDislike ? 'T' : 'F'
-        });
-
-        await fetchComments();
-
-    } catch (error) {
-        alert('오류가 발생했습니다.');
-    }
-};
-
-// 댓글 목록 조회
-const fetchComments = async (page  = 1) => {
-    try {
-        // 댓글
-        const response = await axios.get(`board/${currentBoardId.value}/comments`, {
-            params: {
-                LOCBRDSEQ: currentBoardId.value,
-                page
-            }
-        });
-        const commentsList = response.data.data.list.map(comment => ({
-            commentId: comment.LOCCMTSEQ, // 댓글 ID
-            boardId: comment.LOCBRDSEQ,
-            parentId: comment.LOCCMTPNT, // 부모 ID
-            author: comment.author || '익명',
-            authorId: comment.authorId,
-            content: comment.LOCCMTRPY,
-            likeCount: comment.likeCount || 0,
-            dislikeCount: comment.dislikeCount || 0,
-            likeClicked: comment.likeClicked || false,
-            dislikeClicked: comment.dislikeClicked || false,
-            createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
-            createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
-            children: [], // 대댓글을 담을 배열
-            updateAtRaw: comment.LOCCMTUDT,
+    const route = useRoute();
+    const router = useRouter();
+    const userStore = useUserInfoStore();
+    const currentBoardId = ref(Number(route.params.id));
+    const unknown = computed(() => profileName.value === '익명');
+    const currentUserId = computed(() => userStore.user.id); // 현재 로그인한 사용자 id
+    const authorId = ref(''); // 작성자 id
 
+    const isAuthor = computed(() => currentUserId.value === authorId.value);
+    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;
+    });
 
-        commentsList.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
-
-        for (const comment of commentsList) {
-            if (!comment.commentId) continue;
-
-            const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
-                params: { LOCCMTPNT: comment.commentId }
+    const attachments = ref([]);
+    // 첨부파일 다운로드 URL 생성
+    const downloadFile = async attachment => {
+        try {
+            const response = await axios.get(`board/download`, {
+                params: { path: attachment.path },
+                responseType: 'blob',
             });
 
-            if (replyResponse.data.data) {
-                comment.children = replyResponse.data.data.map(reply => ({
-                    author: reply.author || '익명',
-                    authorId: reply.authorId,
-                    commentId: reply.LOCCMTSEQ,
-                    boardId: reply.LOCBRDSEQ,
-                    parentId: reply.LOCCMTPNT, // 부모 댓글 ID
-                    content: reply.LOCCMTRPY || "내용 없음",
-                    createdAtRaw: new Date(reply.LOCCMTRDT),
-                    createdAt: formattedDate(reply.LOCCMTRDT),
-                    likeCount: reply.likeCount || 0,
-                    dislikeCount: reply.dislikeCount || 0,
-                    likeClicked: false,
-                    dislikeClicked: false
-                }));
-            } else {
-                comment.children = []; // 대댓글이 없으면 빈 배열로 초기화
-            }
+            // Blob에서 파일 다운로드 링크 생성
+            const url = window.URL.createObjectURL(new Blob([response.data]));
+            const link = document.createElement('a');
+            link.href = url;
+            link.setAttribute('download', attachment.originalName + '.' + attachment.extension);
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+            window.URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error('파일 다운로드 오류:', error);
+            alert('파일 다운로드 중 오류가 발생했습니다.');
         }
+    };
 
-        // 최종적으로 댓글 목록 업데이트
-        comments.value = commentsList;
+    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('');
 
-        pagination.value = {
-            ...pagination.value,
-            currentPage: response.data.data.pageNum,  // 현재 페이지 번호
-            pages: response.data.data.pages,  // 전체 페이지 수
-            prePage: response.data.data.prePage, // 이전 페이지
-            nextPage: response.data.data.nextPage, // 다음 페이지
-            isFirstPage: response.data.data.isFirstPage, // 첫 페이지 여부
-            isLastPage: response.data.data.isLastPage, // 마지막 페이지 여부
-            hasPreviousPage: response.data.data.hasPreviousPage, // 이전 페이지 존재 여부
-            hasNextPage: response.data.data.hasNextPage, // 다음 페이지 존재 여부
-            navigatePages: response.data.data.navigatePages, // 몇 개의 페이지 버튼을 보여줄 것인지
-            navigatepageNums: response.data.data.navigatepageNums, // 실제 페이지 번호 목록
-            navigateFirstPage: response.data.data.navigateFirstPage, // 페이지네이션에서 첫 페이지 번호
-            navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
-        };
+    const updatePassword = newPassword => {
+        password.value = newPassword;
+    };
 
+    const pagination = ref({
+        currentPage: 1,
+        pages: 1,
+        prePage: 0,
+        nextPage: 1,
+        isFirstPage: true,
+        isLastPage: false,
+        hasPreviousPage: false,
+        hasNextPage: false,
+        navigatePages: 10,
+        navigatepageNums: [1],
+        navigateFirstPage: 1,
+        navigateLastPage: 1,
+    });
 
-    } catch (error) {
-        alert('오류가 발생했습니다.');
-    }
-};
+    // 게시물 상세 데이터 불러오기
+    const fetchBoardDetails = async () => {
+        try {
+            const response = await axios.get(`board/${currentBoardId.value}`);
+            const data = response.data.data;
 
-// 댓글 작성
-const handleCommentSubmit = async (data) => {
-    if (!data) {
-        return;
-    }
+            profileName.value = data.author || '익명';
 
-    const { comment, password, isCheck } = data;
+            authorId.value = data.authorId;
+            boardTitle.value = data.title || '제목 없음';
+            boardContent.value = data.content || '';
+            date.value = data.date || '';
+            views.value = data.cnt || 0;
+            likes.value = data.likeCount || 0;
+            dislikes.value = data.dislikeCount || 0;
+            attachment.value = data.hasAttachment || null;
+            commentNum.value = data.commentCount || 0;
+            attachments.value = data.attachments || [];
+        } catch (error) {
+            alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
+        }
+    };
 
-    if (!comment || comment.trim() === "") {
-        commentAlert.value = '댓글을 입력해주세요.';
-        return;
-    } else {
-        commentAlert.value = '';
-    }
+    // 좋아요, 싫어요
+    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',
+            });
 
-    if (unknown.value && isCheck && (!password || password.trim() === "")) {
-        passwordAlert.value = "비밀번호를 입력해야 합니다.";
-        return;
-    }
+            const response = await axios.get(`board/${boardId}`);
+            const updatedData = response.data.data;
 
-    try {
-        const response = await axios.post(`board/${currentBoardId.value}/comment`, {
-            LOCBRDSEQ: currentBoardId.value,
-            LOCCMTRPY: comment,
-            LOCCMTPWD: isCheck ? password : '',
-            LOCCMTPNT: 1,
-            LOCBRDTYP: isCheck ? "300102" : null
-        });
+            likes.value = updatedData.likeCount;
+            dislikes.value = updatedData.dislikeCount;
+
+            likeClicked.value = isLike;
+            dislikeClicked.value = isDislike;
+        } catch (error) {
+            alert('오류가 발생했습니다.');
+        }
+    };
+
+    // 대댓글 좋아요
+    const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => {
+        if (!commentId) return; // 댓글 ID가 없으면 실행 안 함
+
+        try {
+            const response = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
+                LOCBRDSEQ: boardId, // 게시글 ID
+                LOCCMTSEQ: commentId, // 댓글 ID
+                LOCGOBGOD: isLike ? 'T' : 'F',
+                LOCGOBBAD: isDislike ? 'T' : 'F',
+            });
 
-        if (response.status === 200) {
-            passwordAlert.value = '';
-            commentAlert.value = '';
             await fetchComments();
-        } else {
-            alert("댓글 작성을 실패했습니다.")
+        } catch (error) {
+            alert('오류가 발생했습니다.');
         }
-    } catch (error) {
-        alert("오류가 발생했습니다.")
-    }
-};
+    };
 
-// 대댓글 추가
-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
-        });
+    // 댓글 목록 조회
+    const fetchComments = async (page = 1) => {
+        try {
+            // 댓글
+            const response = await axios.get(`board/${currentBoardId.value}/comments`, {
+                params: {
+                    LOCBRDSEQ: currentBoardId.value,
+                    page,
+                },
+            });
+            const commentsList = response.data.data.list.map(comment => ({
+                commentId: comment.LOCCMTSEQ, // 댓글 ID
+                boardId: comment.LOCBRDSEQ,
+                parentId: comment.LOCCMTPNT, // 부모 ID
+                author: comment.author || '익명',
+                authorId: comment.authorId,
+                content: comment.LOCCMTRPY,
+                likeCount: comment.likeCount || 0,
+                dislikeCount: comment.dislikeCount || 0,
+                likeClicked: comment.likeClicked || false,
+                dislikeClicked: comment.dislikeClicked || false,
+                createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
+                createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
+                children: [], // 대댓글을 담을 배열
+                updateAtRaw: comment.LOCCMTUDT,
+            }));
 
-        if (response.status === 200) {
-            if (response.data.code === 200) {
-                await fetchComments();
-            } else {
-                alert('대댓글 작성을 실패했습니다.');
+            commentsList.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
+
+            for (const comment of commentsList) {
+                if (!comment.commentId) continue;
+
+                const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
+                    params: { LOCCMTPNT: comment.commentId },
+                });
+
+                if (replyResponse.data.data) {
+                    comment.children = replyResponse.data.data.map(reply => ({
+                        author: reply.author || '익명',
+                        authorId: reply.authorId,
+                        commentId: reply.LOCCMTSEQ,
+                        boardId: reply.LOCBRDSEQ,
+                        parentId: reply.LOCCMTPNT, // 부모 댓글 ID
+                        content: reply.LOCCMTRPY || '내용 없음',
+                        createdAtRaw: new Date(reply.LOCCMTRDT),
+                        createdAt: formattedDate(reply.LOCCMTRDT),
+                        likeCount: reply.likeCount || 0,
+                        dislikeCount: reply.dislikeCount || 0,
+                        likeClicked: false,
+                        dislikeClicked: false,
+                    }));
+                } else {
+                    comment.children = []; // 대댓글이 없으면 빈 배열로 초기화
+                }
             }
+
+            // 최종적으로 댓글 목록 업데이트
+            comments.value = commentsList;
+
+            pagination.value = {
+                ...pagination.value,
+                currentPage: response.data.data.pageNum, // 현재 페이지 번호
+                pages: response.data.data.pages, // 전체 페이지 수
+                prePage: response.data.data.prePage, // 이전 페이지
+                nextPage: response.data.data.nextPage, // 다음 페이지
+                isFirstPage: response.data.data.isFirstPage, // 첫 페이지 여부
+                isLastPage: response.data.data.isLastPage, // 마지막 페이지 여부
+                hasPreviousPage: response.data.data.hasPreviousPage, // 이전 페이지 존재 여부
+                hasNextPage: response.data.data.hasNextPage, // 다음 페이지 존재 여부
+                navigatePages: response.data.data.navigatePages, // 몇 개의 페이지 버튼을 보여줄 것인지
+                navigatepageNums: response.data.data.navigatepageNums, // 실제 페이지 번호 목록
+                navigateFirstPage: response.data.data.navigateFirstPage, // 페이지네이션에서 첫 페이지 번호
+                navigateLastPage: response.data.data.navigateLastPage, // 페이지네이션에서 마지막 페이지 번호
+            };
+        } catch (error) {
+            alert('오류가 발생했습니다.');
         }
-    } catch (error) {
-        if (error.response) {
-            alert("오류가 발생했습니다.");
+    };
+
+    // 댓글 작성
+    const handleCommentSubmit = async data => {
+        if (!data) {
+            return;
         }
-        alert("오류가 발생했습니다.");
-    }
-}
 
-// 게시글 수정 버튼 클릭
-const editClick = (unknown) => {
-    const isUnknown = unknown?.unknown ?? false;
+        const { comment, password, isCheck } = data;
 
-    if (isUnknown) {
-        togglePassword("edit");
-    } else {
-        router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
-    }
-};
-
-// 게시글 삭제 버튼 클릭
-const deleteClick = (unknown) => {
-    if (unknown) {
-        togglePassword("delete");
-    } else {
-        deletePost();
-    }
-};
-
-const findCommentById = (commentId, commentsList) => {
-    for (const comment of commentsList) {
-        if (comment.commentId === commentId) {
-            return comment; // 부모 댓글일 경우
-        }
-        if (comment.children && comment.children.length) {
-            const found = findCommentById(commentId, comment.children);
-            if (found) return found; // 대댓글일 경우
-        }
-    }
-    return null;
-};
-
-// 댓글 수정(대댓글 포함)
-const editComment = (comment) => {
-    password.value = '';
-    passwordCommentAlert.value = '';
-    currentPasswordCommentId.value = null;
-
-    const targetComment = findCommentById(comment.commentId, comments.value);
-
-    if (!targetComment) {
-        return;
-    }
-
-    const isMyComment = comment.authorId === currentUserId.value;
-    const isAnonymous = comment.author === "익명";
-
-    if (isMyComment) {
-        if (targetComment.isEditTextarea) {
-            // 수정창이 열려 있는 상태에서 다시 수정 버튼을 누르면 초기화
-            targetComment.isEditTextarea = false;
-            currentPasswordCommentId.value = comment.commentId;
-        } else {
-            // 다른 모든 댓글의 수정창 닫기
-            closeAllEditTextareas();
-
-            // 현재 댓글만 수정 모드 활성화
-            targetComment.isEditTextarea = true;
-        }
-    } else if (isAnonymous) {
-        if (currentPasswordCommentId.value === comment.commentId) {
-            // 이미 비밀번호 입력 중이면 유지
+        if (!comment || comment.trim() === '') {
+            commentAlert.value = '댓글을 입력해주세요.';
             return;
         } else {
-            // 다른 모든 댓글의 수정창 닫기
-            closeAllEditTextareas();
-
-            // 비밀번호 입력
-            targetComment.isEditTextarea = false;
-            toggleCommentPassword(comment, "edit");
+            commentAlert.value = '';
         }
-    } else {
-        alert("수정이 불가능합니다");
-    }
-}
 
-// 모든 댓글의 수정 창 닫기
-const closeAllEditTextareas = () => {
-    comments.value.forEach(comment => {
-        comment.isEditTextarea = false;
-        comment.children.forEach(reply => {
-            reply.isEditTextarea = false;
-        });
-    });
-};
-
-// 댓글 삭제 버튼 클릭
-const deleteComment = async (comment) => {
-    const isMyComment = comment.authorId === currentUserId.value;
-
-    if (unknown.value && !isMyComment) {
-        if (comment.isEditTextarea) {
-            comment.isEditTextarea = false;
-            comment.isCommentPassword = true;
-        } else {
-            toggleCommentPassword(comment, "delete");
+        if (unknown.value && isCheck && (!password || password.trim() === '')) {
+            passwordAlert.value = '비밀번호를 입력해야 합니다.';
+            return;
         }
-    } else {
-        deleteReplyComment(comment);
-    }
-};
 
-// 익명 댓글 비밀번호 창 토글
-const toggleCommentPassword = (comment, button) => {
-    if (lastCommentClickedButton.value === button && currentPasswordCommentId.value === comment.commentId) {
-        currentPasswordCommentId.value = null; // 비밀번호 창 닫기
-        password.value = '';
-        passwordCommentAlert.value = '';
-    } else {
-        currentPasswordCommentId.value = comment.commentId; // 비밀번호 창 열기
-        password.value = '';
-        passwordCommentAlert.value = '';
-    }
-
-    lastCommentClickedButton.value = button;
-};
-
-const togglePassword = (button) => {
-    if (lastClickedButton.value === button) {
-        isPassword.value = !isPassword.value;
-    } else {
-        isPassword.value = true;
-    }
-    lastClickedButton.value = button;
-};
-
-// 게시글 비밀번호 제출
-const submitPassword = async () => {
-    if (!password.value.trim()) {
-        passwordAlert.value = "비밀번호를 입력해주세요.";
-        return;
-    }
-
-    try {
-        const response = await axios.post(`board/${currentBoardId.value}/password`, {
-            LOCBRDPWD: password.value,
-            LOCBRDSEQ: 288,
-        });
-
-        if (response.data.code === 200 && response.data.data === true) {
-            password.value = '';
-            isPassword.value = false;
-
-            if (lastClickedButton.value === "edit") {
-                router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
-            } else if (lastClickedButton.value === "delete") {
-                await deletePost();
-            }
-            lastClickedButton.value = null;
-        } else {
-            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
-        }
-    } catch (error) {
-        if (error.response) {
-            if (error.response.status === 401) {
-                passwordAlert.value = "비밀번호가 일치하지 않습니다.";
-            } else {
-                passwordAlert.value = error.response.data?.message || "서버 오류가 발생했습니다.";
-            }
-        } else if (error.request) {
-            passwordAlert.value = "네트워크 오류가 발생했습니다. 다시 시도해주세요.";
-        } else {
-            passwordAlert.value = "요청 중 알 수 없는 오류가 발생했습니다.";
-        }
-    }
-};
-
-// 댓글 (비밀번호 확인 후)
-const submitCommentPassword = async (comment, password) => {
-    if (!password) {
-        passwordCommentAlert.value = "비밀번호를 입력해주세요.";
-        return;
-    }
-
-    const targetComment = findCommentById(comment.commentId, comments.value);
-
-    try {
-        const response = await axios.post(`board/comment/${comment.commentId}/password`, {
-            LOCCMTPWD: password,
-            LOCCMTSEQ: comment.commentId,
-        });
-
-        if (response.data.code === 200 && response.data.data === true) {
-            passwordCommentAlert.value = "";
-            comment.isCommentPassword = false;
-
-            // 수정
-            if (lastCommentClickedButton.value === "edit") {
-
-                if (targetComment) {
-                    // 다른 모든 댓글의 수정 창 닫기
-                    closeAllEditTextareas();
-
-                    targetComment.isEditTextarea = true;
-                    passwordCommentAlert.value = "";
-                    currentPasswordCommentId.value = null;
-
-                } else {
-                    alert("수정 취소를 실패했습니다.");
-                }
-            //삭제
-            } else if (lastCommentClickedButton.value === "delete") {
-                passwordCommentAlert.value = "";
-
-                deleteReplyComment(comment)
-            }
-            lastCommentClickedButton.value = null;
-        } else {
-            passwordCommentAlert.value = "비밀번호가 일치하지 않습니다.";
-        }
-    } catch (error) {
-        if (error.response?.status === 401) {
-            passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
-        }
-        passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
-    }
-};
-
-// 게시글 삭제
-const deletePost = async () => {
-    if (confirm("정말 삭제하시겠습니까?")) {
         try {
-            const response = await axios.delete(`board/${currentBoardId.value}`, {
-                data: { LOCBRDSEQ: currentBoardId.value }
+            const response = await axios.post(`board/${currentBoardId.value}/comment`, {
+                LOCBRDSEQ: currentBoardId.value,
+                LOCCMTRPY: comment,
+                LOCCMTPWD: isCheck ? password : '',
+                LOCCMTPNT: 1,
+                LOCBRDTYP: isCheck ? '300102' : null,
             });
 
-            if (response.data.code === 200) {
-                alert("게시물이 삭제되었습니다.");
-                router.push({ name: "BoardList" });
+            if (response.status === 200) {
+                passwordAlert.value = '';
+                commentAlert.value = '';
+                await fetchComments();
             } else {
-                alert("삭제 실패: " + response.data.message);
+                alert('댓글 작성을 실패했습니다.');
+            }
+        } catch (error) {
+            alert('오류가 발생했습니다.');
+        }
+    };
+
+    // 대댓글 추가
+    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,
+            });
+
+            if (response.status === 200) {
+                if (response.data.code === 200) {
+                    await fetchComments();
+                } else {
+                    alert('대댓글 작성을 실패했습니다.');
+                }
             }
         } catch (error) {
             if (error.response) {
-                alert(`삭제 실패: ${error.response.data.message || "서버 오류"}`);
-            } else {
-                alert("네트워크 오류가 발생했습니다. 다시 시도해주세요.");
+                alert('오류가 발생했습니다.');
             }
+            alert('오류가 발생했습니다.');
         }
-    }
-};
+    };
 
-// 댓글 삭제 (대댓글 포함)
-const deleteReplyComment = async (comment) => {
-    if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
+    // 게시글 수정 버튼 클릭
+    const editClick = unknown => {
+        const isUnknown = unknown?.unknown ?? false;
 
-    const targetComment = findCommentById(comment.commentId, comments.value);
-
-    // console.log('잘되니?',comment)
-
-    try {
-        const response = await axios.delete(`board/comment/${comment.commentId}`, {
-            data: { LOCCMTSEQ: comment.commentId }
-        });
-
-        if (response.data.code === 200) {
-            await fetchComments();
-
-            if (targetComment) {
-                // console.log('타겟',targetComment)
-                // ✅ 댓글 내용만 "삭제된 댓글입니다."로 변경하고, 구조는 유지
-                targetComment.content = "댓글이 삭제되었습니다.";
-                targetComment.author = "알 수 없음";  // 익명 처리
-                targetComment.isDeleted = true;  // ✅ 삭제 상태를 추가
-            }
+        if (isUnknown) {
+            togglePassword('edit');
         } else {
-            alert("댓글 삭제에 실패했습니다.");
+            router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
         }
-    } catch (error) {
-        alert("댓글 삭제 중 오류가 발생했습니다.");
-    }
-};
+    };
 
-// 댓글 수정 확인
-const handleSubmitEdit = async (comment, editedContent) => {
-    try {
-        const response = await axios.put(`board/comment/${comment.commentId}`, {
-            LOCCMTSEQ: comment.commentId,
-            LOCCMTRPY: editedContent
-        });
-
-        if (response.status === 200) {
-
-            const targetComment = findCommentById(comment.commentId, comments.value);
-            if (targetComment) {
-                targetComment.content = editedContent; // 댓글 내용 업데이트
-                targetComment.isEditTextarea = false; // 수정 모드 닫기
-            } else {
-                alert("수정할 댓글을 찾을 수 없습니다.");
-            }
+    // 게시글 삭제 버튼 클릭
+    const deleteClick = unknown => {
+        if (unknown) {
+            togglePassword('delete');
         } else {
-            alert("댓글 수정 실패했습니다.");
+            deletePost();
         }
-    } catch (error) {
-        alert("댓글 수정 중 오류 발생했습니다.");
-    }
-};
+    };
 
-// 댓글 수정 취소 (대댓글 포함)
-const handleCancelEdit = (comment) => {
-    const targetComment = findCommentById(comment.commentId, comments.value);
+    const findCommentById = (commentId, commentsList) => {
+        for (const comment of commentsList) {
+            if (comment.commentId === commentId) {
+                return comment; // 부모 댓글일 경우
+            }
+            if (comment.children && comment.children.length) {
+                const found = findCommentById(commentId, comment.children);
+                if (found) return found; // 대댓글일 경우
+            }
+        }
+        return null;
+    };
 
-    if (targetComment) {
-        targetComment.isEditTextarea = false;
-    } else {
-        alert("수정 취소를 실패했습니다.");
-    }
-};
+    // 댓글 수정(대댓글 포함)
+    const editComment = comment => {
+        password.value = '';
+        passwordCommentAlert.value = '';
+        currentPasswordCommentId.value = null;
 
-// 페이지 변경
-const handlePageChange = (page) => {
-    if (page !== pagination.value.currentPage) {
-        pagination.value.currentPage = page;
-        fetchComments(page);
-    }
-};
+        const targetComment = findCommentById(comment.commentId, comments.value);
 
-// 댓글 삭제 (대댓글 포함)
-const handleCommentDeleted = (deletedCommentId) => {
-    // 댓글 삭제
-    const parentIndex = comments.value.findIndex(comment => comment.commentId === deletedCommentId);
-
-    if (parentIndex !== -1) {
-        comments.value.splice(parentIndex, 1);
-        return;
-    }
-
-    // 대댓글 삭제
-    for (let parent of comments.value) {
-        const childIndex = parent.children.findIndex(child => child.commentId === deletedCommentId);
-        if (childIndex !== -1) {
-            parent.children.splice(childIndex, 1);
+        if (!targetComment) {
             return;
         }
-    }
-};
 
-// 날짜
-const formattedDate = (dateString) => {
-    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 isMyComment = comment.authorId === currentUserId.value;
+        const isAnonymous = comment.author === '익명';
 
-const formattedBoardDate = computed(() => formattedDate(date.value));
+        if (isMyComment) {
+            if (targetComment.isEditTextarea) {
+                // 수정창이 열려 있는 상태에서 다시 수정 버튼을 누르면 초기화
+                targetComment.isEditTextarea = false;
+                currentPasswordCommentId.value = comment.commentId;
+            } else {
+                // 다른 모든 댓글의 수정창 닫기
+                closeAllEditTextareas();
 
-// 컴포넌트 마운트 시 데이터 로드
-onMounted(() => {
-    fetchBoardDetails()
-    fetchComments()
-});
+                // 현재 댓글만 수정 모드 활성화
+                targetComment.isEditTextarea = true;
+            }
+        } else if (isAnonymous) {
+            if (currentPasswordCommentId.value === comment.commentId) {
+                // 이미 비밀번호 입력 중이면 유지
+                return;
+            } else {
+                // 다른 모든 댓글의 수정창 닫기
+                closeAllEditTextareas();
+
+                // 비밀번호 입력
+                targetComment.isEditTextarea = false;
+                toggleCommentPassword(comment, 'edit');
+            }
+        } else {
+            alert('수정이 불가능합니다');
+        }
+    };
+
+    // 모든 댓글의 수정 창 닫기
+    const closeAllEditTextareas = () => {
+        comments.value.forEach(comment => {
+            comment.isEditTextarea = false;
+            comment.children.forEach(reply => {
+                reply.isEditTextarea = false;
+            });
+        });
+    };
+
+    // 댓글 삭제 버튼 클릭
+    const deleteComment = async comment => {
+        const isMyComment = comment.authorId === currentUserId.value;
+
+        if (unknown.value && !isMyComment) {
+            if (comment.isEditTextarea) {
+                comment.isEditTextarea = false;
+                comment.isCommentPassword = true;
+            } else {
+                toggleCommentPassword(comment, 'delete');
+            }
+        } else {
+            deleteReplyComment(comment);
+        }
+    };
+
+    // 익명 댓글 비밀번호 창 토글
+    const toggleCommentPassword = (comment, button) => {
+        if (lastCommentClickedButton.value === button && currentPasswordCommentId.value === comment.commentId) {
+            currentPasswordCommentId.value = null; // 비밀번호 창 닫기
+            password.value = '';
+            passwordCommentAlert.value = '';
+        } else {
+            currentPasswordCommentId.value = comment.commentId; // 비밀번호 창 열기
+            password.value = '';
+            passwordCommentAlert.value = '';
+        }
+
+        lastCommentClickedButton.value = button;
+    };
+
+    const togglePassword = button => {
+        if (lastClickedButton.value === button) {
+            isPassword.value = !isPassword.value;
+        } else {
+            isPassword.value = true;
+        }
+        lastClickedButton.value = button;
+    };
+
+    // 게시글 비밀번호 제출
+    const submitPassword = async () => {
+        if (!password.value.trim()) {
+            passwordAlert.value = '비밀번호를 입력해주세요.';
+            return;
+        }
+
+        try {
+            const response = await axios.post(`board/${currentBoardId.value}/password`, {
+                LOCBRDPWD: password.value,
+                LOCBRDSEQ: 288,
+            });
+
+            if (response.data.code === 200 && response.data.data === true) {
+                password.value = '';
+                isPassword.value = false;
+
+                if (lastClickedButton.value === 'edit') {
+                    router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
+                } else if (lastClickedButton.value === 'delete') {
+                    await deletePost();
+                }
+                lastClickedButton.value = null;
+            } else {
+                passwordAlert.value = '비밀번호가 일치하지 않습니다.';
+            }
+        } catch (error) {
+            if (error.response) {
+                if (error.response.status === 401) {
+                    passwordAlert.value = '비밀번호가 일치하지 않습니다.';
+                } else {
+                    passwordAlert.value = error.response.data?.message || '서버 오류가 발생했습니다.';
+                }
+            } else if (error.request) {
+                passwordAlert.value = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
+            } else {
+                passwordAlert.value = '요청 중 알 수 없는 오류가 발생했습니다.';
+            }
+        }
+    };
+
+    // 댓글 (비밀번호 확인 후)
+    const submitCommentPassword = async (comment, password) => {
+        if (!password) {
+            passwordCommentAlert.value = '비밀번호를 입력해주세요.';
+            return;
+        }
+
+        const targetComment = findCommentById(comment.commentId, comments.value);
+
+        try {
+            const response = await axios.post(`board/comment/${comment.commentId}/password`, {
+                LOCCMTPWD: password,
+                LOCCMTSEQ: comment.commentId,
+            });
+
+            if (response.data.code === 200 && response.data.data === true) {
+                passwordCommentAlert.value = '';
+                comment.isCommentPassword = false;
+
+                // 수정
+                if (lastCommentClickedButton.value === 'edit') {
+                    if (targetComment) {
+                        // 다른 모든 댓글의 수정 창 닫기
+                        closeAllEditTextareas();
+
+                        targetComment.isEditTextarea = true;
+                        passwordCommentAlert.value = '';
+                        currentPasswordCommentId.value = null;
+                    } else {
+                        alert('수정 취소를 실패했습니다.');
+                    }
+                    //삭제
+                } else if (lastCommentClickedButton.value === 'delete') {
+                    passwordCommentAlert.value = '';
+
+                    deleteReplyComment(comment);
+                }
+                lastCommentClickedButton.value = null;
+            } else {
+                passwordCommentAlert.value = '비밀번호가 일치하지 않습니다.';
+            }
+        } catch (error) {
+            if (error.response?.status === 401) {
+                passwordCommentAlert.value = '비밀번호가 일치하지 않습니다';
+            }
+            passwordCommentAlert.value = '비밀번호가 일치하지 않습니다';
+        }
+    };
+
+    // 게시글 삭제
+    const deletePost = async () => {
+        if (confirm('정말 삭제하시겠습니까?')) {
+            try {
+                const response = await axios.delete(`board/${currentBoardId.value}`, {
+                    data: { LOCBRDSEQ: currentBoardId.value },
+                });
+
+                if (response.data.code === 200) {
+                    alert('게시물이 삭제되었습니다.');
+                    router.push({ name: 'BoardList' });
+                } else {
+                    alert('삭제 실패: ' + response.data.message);
+                }
+            } catch (error) {
+                if (error.response) {
+                    alert(`삭제 실패: ${error.response.data.message || '서버 오류'}`);
+                } else {
+                    alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
+                }
+            }
+        }
+    };
+
+    // 댓글 삭제 (대댓글 포함)
+    const deleteReplyComment = async comment => {
+        if (!confirm('정말 이 댓글을 삭제하시겠습니까?')) return;
+
+        const targetComment = findCommentById(comment.commentId, comments.value);
+
+        // console.log('잘되니?',comment)
+
+        try {
+            const response = await axios.delete(`board/comment/${comment.commentId}`, {
+                data: { LOCCMTSEQ: comment.commentId },
+            });
+
+            if (response.data.code === 200) {
+                await fetchComments();
+
+                if (targetComment) {
+                    // console.log('타겟',targetComment)
+                    // ✅ 댓글 내용만 "삭제된 댓글입니다."로 변경하고, 구조는 유지
+                    targetComment.content = '댓글이 삭제되었습니다.';
+                    targetComment.author = '알 수 없음'; // 익명 처리
+                    targetComment.isDeleted = true; // ✅ 삭제 상태를 추가
+                }
+            } else {
+                alert('댓글 삭제에 실패했습니다.');
+            }
+        } catch (error) {
+            alert('댓글 삭제 중 오류가 발생했습니다.');
+        }
+    };
+
+    // 댓글 수정 확인
+    const handleSubmitEdit = async (comment, editedContent) => {
+        try {
+            const response = await axios.put(`board/comment/${comment.commentId}`, {
+                LOCCMTSEQ: comment.commentId,
+                LOCCMTRPY: editedContent,
+            });
+
+            if (response.status === 200) {
+                const targetComment = findCommentById(comment.commentId, comments.value);
+                if (targetComment) {
+                    targetComment.content = editedContent; // 댓글 내용 업데이트
+                    targetComment.isEditTextarea = false; // 수정 모드 닫기
+                } else {
+                    alert('수정할 댓글을 찾을 수 없습니다.');
+                }
+            } else {
+                alert('댓글 수정 실패했습니다.');
+            }
+        } catch (error) {
+            alert('댓글 수정 중 오류 발생했습니다.');
+        }
+    };
+
+    // 댓글 수정 취소 (대댓글 포함)
+    const handleCancelEdit = comment => {
+        const targetComment = findCommentById(comment.commentId, comments.value);
+
+        if (targetComment) {
+            targetComment.isEditTextarea = false;
+        } else {
+            alert('수정 취소를 실패했습니다.');
+        }
+    };
+
+    // 페이지 변경
+    const handlePageChange = page => {
+        if (page !== pagination.value.currentPage) {
+            pagination.value.currentPage = page;
+            fetchComments(page);
+        }
+    };
+
+    // 댓글 삭제 (대댓글 포함)
+    const handleCommentDeleted = deletedCommentId => {
+        // 댓글 삭제
+        const parentIndex = comments.value.findIndex(comment => comment.commentId === deletedCommentId);
+
+        if (parentIndex !== -1) {
+            comments.value.splice(parentIndex, 1);
+            return;
+        }
+
+        // 대댓글 삭제
+        for (let parent of comments.value) {
+            const childIndex = parent.children.findIndex(child => child.commentId === deletedCommentId);
+            if (childIndex !== -1) {
+                parent.children.splice(childIndex, 1);
+                return;
+            }
+        }
+    };
+
+    // 날짜
+    const formattedDate = dateString => {
+        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));
+
+    // 컴포넌트 마운트 시 데이터 로드
+    onMounted(() => {
+        fetchBoardDetails();
+        fetchComments();
+    });
 </script>

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

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

diff --git a/src/components/editor/QEditor.vue b/src/components/editor/QEditor.vue
index 3ff77e9..b66537b 100644
--- a/src/components/editor/QEditor.vue
+++ b/src/components/editor/QEditor.vue
@@ -52,147 +52,148 @@
 </template>
 
 <script setup>
-import Quill from 'quill';
-import 'quill/dist/quill.snow.css';
-import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
-import $api from '@api';
+    import Quill from 'quill';
+    import 'quill/dist/quill.snow.css';
+    import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
+    import $api from '@api';
 
-
-const props = defineProps({
-    isAlert: {
-        type: Boolean,
-        default: false,
-    },
-    initialData: {
-        type: String,
-        default: () => null,
-    },
-});
-
-const editor = ref(null);  // 에디터 DOM 참조
-const font = ref('nanum-gothic');  // 기본 폰트
-const fontSize = ref('16px');  // 기본 폰트 크기
-const emit = defineEmits(['update:data']);
-
-onMounted(() => {
-    // 툴바에서 선택할 수 있는 폰트 목록 설정
-    const Font = Quill.import('formats/font');
-    Font.whitelist = ['nanum-gothic', 'd2coding', 'consolas', 'serif', 'monospace'];
-    Quill.register(Font, true);
-
-    // 툴바에서 선택할 수 있는 폰트 크기 목록 설정
-    const Size = Quill.import('attributors/style/size');
-    Size.whitelist = ['12px', '14px', '16px', '18px', '24px', '32px', '48px'];
-    Quill.register(Size, true);
-
-    // Quill 에디터 인스턴스 생성
-    const quillInstance = new Quill(editor.value, {
-        theme: 'snow',
-        placeholder: '내용을 입력해주세요...',
-        modules: {
-            toolbar: {
-                container: '#toolbar',
-            },
-            syntax: true,
+    const props = defineProps({
+        isAlert: {
+            type: Boolean,
+            default: false,
+        },
+        initialData: {
+            type: [String, Object],
+            default: () => null,
         },
     });
 
-    // 폰트와 폰트 크기 설정
-    quillInstance.format('font', font.value);
-    quillInstance.format('size', fontSize.value);
+    const editor = ref(null); // 에디터 DOM 참조
+    const font = ref('nanum-gothic'); // 기본 폰트
+    const fontSize = ref('16px'); // 기본 폰트 크기
+    const emit = defineEmits(['update:data']);
 
-    // 텍스트가 변경될 때마다 부모 컴포넌트로 변경된 내용 전달
-    quillInstance.on('text-change', () => {
-        const delta = quillInstance.getContents();  // Delta 포맷으로 내용 가져오기
-        emit('update:data', delta);
-    });
+    onMounted(() => {
+        // 툴바에서 선택할 수 있는 폰트 목록 설정
+        const Font = Quill.import('formats/font');
+        Font.whitelist = ['nanum-gothic', 'd2coding', 'consolas', 'serif', 'monospace'];
+        Quill.register(Font, true);
 
-    // 폰트나 폰트 크기가 변경될 때 에디터 스타일 업데이트
-    watch([font, fontSize], () => {
+        // 툴바에서 선택할 수 있는 폰트 크기 목록 설정
+        const Size = Quill.import('attributors/style/size');
+        Size.whitelist = ['12px', '14px', '16px', '18px', '24px', '32px', '48px'];
+        Quill.register(Size, true);
+
+        // Quill 에디터 인스턴스 생성
+        const quillInstance = new Quill(editor.value, {
+            theme: 'snow',
+            placeholder: '내용을 입력해주세요...',
+            modules: {
+                toolbar: {
+                    container: '#toolbar',
+                },
+                syntax: true,
+            },
+        });
+
+        // 폰트와 폰트 크기 설정
         quillInstance.format('font', font.value);
         quillInstance.format('size', fontSize.value);
 
-    });
-
-    // 초기 데이터가 있을 경우, HTML 형식으로 삽입
-    if (props.initialData) {
-        quillInstance.setContents(JSON.parse(props.initialData));
-    }
-
-    // 이미지 업로드 기능 처리
-    let imageUrls = new Set();  // 업로드된 이미지 URL을 추적
-    quillInstance.getModule('toolbar').addHandler('image', () => {
-        selectLocalImage();  // 이미지 버튼 클릭 시 로컬 이미지 선택
-    });
-
-    // 에디터의 텍스트가 변경될 때마다 이미지 처리
-    quillInstance.on('text-change', (delta, oldDelta, source) => {
-        emit('update:data', quillInstance.getContents());
-        delta.ops.forEach(op => {
-            if (op.insert && typeof op.insert === 'object' && op.insert.image) {
-                const imageUrl = op.insert.image;  // 이미지 URL 추출
-                imageUrls.add(imageUrl);  // URL 추가
-            } else if (op.delete) {
-                checkForDeletedImages();  // 삭제된 이미지 확인
-            }
+        // 텍스트가 변경될 때마다 부모 컴포넌트로 변경된 내용 전달
+        quillInstance.on('text-change', () => {
+            const delta = quillInstance.getContents(); // Delta 포맷으로 내용 가져오기
+            emit('update:data', delta);
         });
-    });
-    // 로컬 이미지 파일 선택
-    async function selectLocalImage() {
-        const input = document.createElement('input');
-        input.setAttribute('type', 'file');
-        input.setAttribute('accept', 'image/*');
-        input.click();  // 파일 선택 다이얼로그 열기
-        input.onchange = () => {
-            const file = input.files[0];
-            if (file) {
-                const formData = new FormData();
-                formData.append('file', file);
 
-                // 이미지 서버에 업로드 후 URL 받기
-                uploadImageToServer(formData).then(serverImageUrl => {
-                    const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
-                    const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
+        // 폰트나 폰트 크기가 변경될 때 에디터 스타일 업데이트
+        watch([font, fontSize], () => {
+            quillInstance.format('font', font.value);
+            quillInstance.format('size', fontSize.value);
+        });
 
-                    const range = quillInstance.getSelection();
-                    quillInstance.insertEmbed(range.index, 'image', fullImageUrl);  // 선택된 위치에 이미지 삽입
-
-                    imageUrls.add(fullImageUrl);  // 이미지 URL 추가
-                }).catch(e => {
-                    toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
-                });
-            }
-        };
-    }
-    // 이미지 서버 업로드
-    async function uploadImageToServer(formData) {
-        try {
-            const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
-            const imageUrl = response.data.data;
-            return imageUrl;  // 서버에서 받은 이미지 URL 반환
-        } catch (error) {
-            toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
-            throw error;
+        // 초기 데이터가 있을 경우, HTML 형식으로 삽입
+        if (props.initialData) {
+            console.log(props.initialData);
+            quillInstance.setContents(JSON.parse(props.initialData));
         }
-    }
 
-    // 삭제된 이미지 확인
-    function checkForDeletedImages() {
-        const editorImages = document.querySelectorAll('#editor img');
-        const currentImages = new Set(Array.from(editorImages).map(img => img.src));  // 현재 에디터에 있는 이미지들
-
-        imageUrls.forEach(url => {
-            if (!currentImages.has(url)) {
-                imageUrls.delete(url);
-            }
+        // 이미지 업로드 기능 처리
+        let imageUrls = new Set(); // 업로드된 이미지 URL을 추적
+        quillInstance.getModule('toolbar').addHandler('image', () => {
+            selectLocalImage(); // 이미지 버튼 클릭 시 로컬 이미지 선택
         });
-    }
-});
+
+        // 에디터의 텍스트가 변경될 때마다 이미지 처리
+        quillInstance.on('text-change', (delta, oldDelta, source) => {
+            emit('update:data', quillInstance.getContents());
+            delta.ops.forEach(op => {
+                if (op.insert && typeof op.insert === 'object' && op.insert.image) {
+                    const imageUrl = op.insert.image; // 이미지 URL 추출
+                    imageUrls.add(imageUrl); // URL 추가
+                } else if (op.delete) {
+                    checkForDeletedImages(); // 삭제된 이미지 확인
+                }
+            });
+        });
+        // 로컬 이미지 파일 선택
+        async function selectLocalImage() {
+            const input = document.createElement('input');
+            input.setAttribute('type', 'file');
+            input.setAttribute('accept', 'image/*');
+            input.click(); // 파일 선택 다이얼로그 열기
+            input.onchange = () => {
+                const file = input.files[0];
+                if (file) {
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    // 이미지 서버에 업로드 후 URL 받기
+                    uploadImageToServer(formData)
+                        .then(serverImageUrl => {
+                            const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+                            const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
+
+                            const range = quillInstance.getSelection();
+                            quillInstance.insertEmbed(range.index, 'image', fullImageUrl); // 선택된 위치에 이미지 삽입
+
+                            imageUrls.add(fullImageUrl); // 이미지 URL 추가
+                        })
+                        .catch(e => {
+                            toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
+                        });
+                }
+            };
+        }
+        // 이미지 서버 업로드
+        async function uploadImageToServer(formData) {
+            try {
+                const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
+                const imageUrl = response.data.data;
+                return imageUrl; // 서버에서 받은 이미지 URL 반환
+            } catch (error) {
+                toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
+                throw error;
+            }
+        }
+
+        // 삭제된 이미지 확인
+        function checkForDeletedImages() {
+            const editorImages = document.querySelectorAll('#editor img');
+            const currentImages = new Set(Array.from(editorImages).map(img => img.src)); // 현재 에디터에 있는 이미지들
+
+            imageUrls.forEach(url => {
+                if (!currentImages.has(url)) {
+                    imageUrls.delete(url);
+                }
+            });
+        }
+    });
 </script>
 <style>
-@import 'quill/dist/quill.snow.css';
-.ql-editor {
-    min-height: 300px;
-    font-family: 'Nanum Gothic', sans-serif;
-}
+    @import 'quill/dist/quill.snow.css';
+    .ql-editor {
+        min-height: 300px;
+        font-family: 'Nanum Gothic', sans-serif;
+    }
 </style>
diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue
index ceaa999..a08e901 100644
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@@ -14,13 +14,13 @@
                 />
             </div>
             <div class="col-2 btn-margin" v-if="!isDisabled">
-                <PlusBtn @click="toggleInput"/>
+                <PlusBtn @click="toggleInput" />
             </div>
         </div>
-        
+
         <div class="row" v-if="showInput">
             <div class="col-10">
-                <FormInput 
+                <FormInput
                     ref="categoryInputRef"
                     title="카테고리 입력"
                     name="카테고리"
@@ -44,7 +44,12 @@
         />
     </div>
     <div>
-        <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" :initialData="contentValue"/>
+        <QEditor
+            @update:data="content = $event"
+            @update:imageUrls="imageUrls = $event"
+            :is-alert="wordContentAlert"
+            :initialData="contentValue"
+        />
         <div class="text-end mt-5">
             <button class="btn btn-primary" @click="saveWord">
                 <i class="bx bx-check"></i>
@@ -54,165 +59,153 @@
 </template>
 
 <script setup>
-import { defineProps, computed, ref, defineEmits } from 'vue';
+    import { defineProps, computed, ref, defineEmits } from 'vue';
 
-import QEditor from '@/components/editor/QEditor.vue';
-import FormInput from '@/components/input/FormInput.vue';
-import FormSelect from '@/components/input/FormSelect.vue';
-import PlusBtn from '../button/PlusBtn.vue';
+    import QEditor from '@/components/editor/QEditor.vue';
+    import FormInput from '@/components/input/FormInput.vue';
+    import FormSelect from '@/components/input/FormSelect.vue';
+    import PlusBtn from '../button/PlusBtn.vue';
 
-const emit = defineEmits(['close','addCategory','addWord']);
+    const emit = defineEmits(['close', 'addCategory', 'addWord']);
 
-//용어제목
-const wordTitle = ref('');
-const addCategory = ref('');
-const content = ref('');
-const imageUrls = ref([]);
+    //용어제목
+    const wordTitle = ref('');
+    const addCategory = ref('');
+    const content = ref('');
+    const imageUrls = ref([]);
 
-//용어 Vaildation용
-const wordTitleAlert = ref(false);
-const wordContentAlert = ref(false);
-const addCategoryAlert = ref(false);
+    //용어 Vaildation용
+    const wordTitleAlert = ref(false);
+    const wordContentAlert = ref(false);
+    const addCategoryAlert = ref(false);
 
-//선택 카테고리
-const selectCategory = ref('');
+    //선택 카테고리
+    const selectCategory = ref('');
 
-// 제목 상태
-const computedTitle = computed(() => 
-    wordTitle.value === '' ? props.titleValue : wordTitle.value
-);
+    // 제목 상태
+    const computedTitle = computed(() => (wordTitle.value === '' ? props.titleValue : wordTitle.value));
 
-// 카테고리 상태
-const selectedCategory = computed(() => 
-    selectCategory.value === '' ? props.formValue : selectCategory.value
-);
+    // 카테고리 상태
+    const selectedCategory = computed(() => (selectCategory.value === '' ? props.formValue : selectCategory.value));
 
-// 카테고리 입력 중복 ref
-const categoryInputRef = ref(null);
+    // 카테고리 입력 중복 ref
+    const categoryInputRef = ref(null);
 
-const props = defineProps({
-    dataList: {
-        type: Array,
-        default: () => []
-    },
-    NumValue : {
-        type: Number
-    },
-    formValue : {
-        type:[String, Number]
-    },
-    titleValue : {
-        type:String,
-    },contentValue : {
-        type:String,
-    },
-    isDisabled: { 
-        type: Boolean,
-        default: false
-    }
-});
+    const props = defineProps({
+        dataList: {
+            type: Array,
+            default: () => [],
+        },
+        NumValue: {
+            type: Number,
+        },
+        formValue: {
+            type: [String, Number],
+        },
+        titleValue: {
+            type: String,
+        },
+        contentValue: {
+            type: String,
+        },
+        isDisabled: {
+            type: Boolean,
+            default: false,
+        },
+    });
 
-// 카테고리 입력 창
-const showInput = ref(false);
+    // 카테고리 입력 창
+    const showInput = ref(false);
 
-// 카테고리 입력 토글
-const toggleInput = () => {
-    showInput.value = !showInput.value;
-};
-
-const onChange = (newValue) => {
-    selectCategory.value = newValue.target.value;
-};
-
-//용어 등록
-const saveWord = () => {
-    //validation
-    let computedTitleTrim;
-
-    if(computedTitle.value != undefined){
-        computedTitleTrim = computedTitle.value.trim()
-    }
-    
-    // 용어 체크
-    if(computedTitleTrim == undefined || computedTitleTrim == ''){
-        wordTitleAlert.value = true;
-        return;
-    } else {
-        wordTitleAlert.value = false;
-    }
-
-    // 내용 확인
-    let inserts = [];
-    if (inserts.length === 0 && content.value?.ops?.length > 0) {
-        inserts = content.value.ops.map(op => 
-            typeof op.insert === 'string' ? op.insert.trim() : op.insert
-        );
-    }
-
-    // 내용 체크
-    if(content.value == '' || inserts.join('') === ''){
-        wordContentAlert.value = true;
-        return;
-    }
-    
-
-    const wordData = {
-        id: props.NumValue || null,
-        title: computedTitle.value,
-        category: selectedCategory.value,
-        content: content.value,
+    // 카테고리 입력 토글
+    const toggleInput = () => {
+        showInput.value = !showInput.value;
     };
 
-    emit('addWord', wordData, addCategory.value);
-}
+    const onChange = newValue => {
+        selectCategory.value = newValue.target.value;
+    };
 
+    //용어 등록
+    const saveWord = () => {
+        //validation
+        let computedTitleTrim;
 
-// 카테고리 focusout 이벤트 핸들러 추가
-const handleCategoryFocusout = (value) => {
-    const valueTrim = value.trim();
+        if (computedTitle.value != undefined) {
+            computedTitleTrim = computedTitle.value.trim();
+        }
 
-    const existingCategory = props.dataList.find(item => item.label === valueTrim);
-    
-    // 카테고리 입력시 공백
-    if(valueTrim == ''){
-        addCategoryAlert.value = true;
-        
-        // 공백시 강제 focus
-        setTimeout(() => {
-            const inputElement = categoryInputRef.value?.$el?.querySelector('input');
-            if (inputElement) {
-                inputElement.focus();
-            }
-        }, 0);
+        // 용어 체크
+        if (computedTitleTrim == undefined || computedTitleTrim == '') {
+            wordTitleAlert.value = true;
+            return;
+        } else {
+            wordTitleAlert.value = false;
+        }
 
-        
-    }else if (existingCategory) {
-        addCategoryAlert.value = true;
-        
-        // 중복시 강제 focus
-        setTimeout(() => {
-            const inputElement = categoryInputRef.value?.$el?.querySelector('input');
-            if (inputElement) {
-                inputElement.focus();
-            }
-        }, 0);
+        // 내용 확인
+        let inserts = [];
+        if (inserts.length === 0 && content.value?.ops?.length > 0) {
+            inserts = content.value.ops.map(op => (typeof op.insert === 'string' ? op.insert.trim() : op.insert));
+        }
 
-    } else {
-        addCategoryAlert.value = false;
-    }
-};
+        // 내용 체크
+        if (content.value == '' || inserts.join('') === '') {
+            wordContentAlert.value = true;
+            return;
+        }
 
+        const wordData = {
+            id: props.NumValue || null,
+            title: computedTitle.value,
+            category: selectedCategory.value,
+            content: content.value,
+        };
 
+        emit('addWord', wordData, addCategory.value);
+    };
+
+    // 카테고리 focusout 이벤트 핸들러 추가
+    const handleCategoryFocusout = value => {
+        const valueTrim = value.trim();
+
+        const existingCategory = props.dataList.find(item => item.label === valueTrim);
+
+        // 카테고리 입력시 공백
+        if (valueTrim == '') {
+            addCategoryAlert.value = true;
+
+            // 공백시 강제 focus
+            setTimeout(() => {
+                const inputElement = categoryInputRef.value?.$el?.querySelector('input');
+                if (inputElement) {
+                    inputElement.focus();
+                }
+            }, 0);
+        } else if (existingCategory) {
+            addCategoryAlert.value = true;
+
+            // 중복시 강제 focus
+            setTimeout(() => {
+                const inputElement = categoryInputRef.value?.$el?.querySelector('input');
+                if (inputElement) {
+                    inputElement.focus();
+                }
+            }, 0);
+        } else {
+            addCategoryAlert.value = false;
+        }
+    };
 </script>
 
 <style scoped>
-.dict-w {
-    width: 83%;
-}
-
-@media (max-width: 768px) {
-    .btn-margin {
-        margin-top: 2.5rem
+    .dict-w {
+        width: 83%;
     }
-}
-</style>
\ No newline at end of file
+
+    @media (max-width: 768px) {
+        .btn-margin {
+            margin-top: 2.5rem;
+        }
+    }
+</style>
diff --git a/src/views/board/BoardEdit.vue b/src/views/board/BoardEdit.vue
index 354b75d..94e3c9e 100644
--- a/src/views/board/BoardEdit.vue
+++ b/src/views/board/BoardEdit.vue
@@ -10,25 +10,46 @@
             <div class="col-xl-12">
                 <div class="card-body">
                     <!-- 제목 입력 -->
-                    <FormInput
-                        title="제목"
-                        name="title"
-                        :is-essential="true"
-                        :is-alert="titleAlert"
-                        v-model="title"
+                    <FormInput title="제목" name="title" :is-essential="true" :is-alert="titleAlert" v-model="title" />
+
+                    <!-- 첨부파일 업로드 -->
+                    <FormFile
+                        title="첨부파일"
+                        name="files"
+                        :is-alert="attachFilesAlert"
+                        @update:data="handleFileUpload"
+                        @update:isValid="isFileValid = $event"
                     />
 
+                    <!-- 실시간 반영된 파일 개수 표시 -->
+                    <p class="text-muted mt-1">첨부파일: {{ fileCount }} / 5개</p>
+                    <p v-if="fileError" class="text-danger">{{ fileError }}</p>
+
+                    <ul class="list-group mt-2" v-if="attachFiles.length">
+                        <li
+                            v-for="(file, index) in attachFiles"
+                            :key="index"
+                            class="list-group-item d-flex justify-content-between align-items-center"
+                        >
+                            {{ file.name }}
+                            <button class="close-btn" @click="removeFile(index)">✖</button>
+                        </li>
+                    </ul>
+
                     <!-- 내용 입력 -->
                     <div class="mb-4">
                         <label for="html5-tel-input" class="col-md-2 col-form-label">
                             내용
                             <span class="text-red">*</span>
-                            <div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">
-                                내용을 확인해주세요.
-                            </div>
+                            <div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">내용을 확인해주세요.</div>
                         </label>
                         <div class="col-md-12">
-                            <QEditor v-model="content" />
+                            <QEditor
+                                v-if="contentLoaded"
+                                @update:data="content = $event"
+                                @update:imageUrls="imageUrls = $event"
+                                :initialData="content"
+                            />
                         </div>
                     </div>
 
@@ -48,95 +69,96 @@
 </template>
 
 <script setup>
-import QEditor from '@c/editor/QEditor.vue';
-import FormInput from '@c/input/FormInput.vue';
-import { ref, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import axios from '@api';
+    import QEditor from '@c/editor/QEditor.vue';
+    import FormInput from '@c/input/FormInput.vue';
+    import { ref, onMounted } from 'vue';
+    import { useRoute, useRouter } from 'vue-router';
+    import axios from '@api';
 
-// 상태 변수
-const title = ref('');
-const content = ref('');
+    // 상태 변수
+    const title = ref('');
+    const content = ref('');
 
-// 경고 상태
-const titleAlert = ref(false);
-const contentAlert = ref(false);
+    // 경고 상태
+    const titleAlert = ref(false);
+    const contentAlert = ref(false);
+    const contentLoaded = ref(false); //
 
-// 라우터
-const router = useRouter();
-const route = useRoute();
-const currentBoardId = ref(route.params.id); // 라우트에서 ID 가져오기
-console.log(currentBoardId.value)
-// 게시물 데이터 로드
-const fetchBoardDetails = async () => {
-    try {
-        const response = await axios.get(`board/${currentBoardId.value}`);
-        const data = response.data.data.boardDetail;
+    // 라우터
+    const router = useRouter();
+    const route = useRoute();
+    const currentBoardId = ref(route.params.id); // 라우트에서 ID 가져오기
+    // 게시물 데이터 로드
+    const fetchBoardDetails = async () => {
+        try {
+            const response = await axios.get(`board/${currentBoardId.value}`);
+            const data = response.data.data;
 
-        if (!data) {
-            console.error('API에서 게시물 데이터를 반환하지 않았습니다.');
+            if (!data) {
+                console.error('API에서 게시물 데이터를 반환하지 않았습니다.');
+                return;
+            }
+
+            // 데이터 설정
+            title.value = data.title || '제목 없음';
+            content.value = data.content || '내용 없음';
+            contentLoaded.value = true;
+        } catch (error) {
+            console.error('게시물 가져오기 오류:', error.response || error.message);
+        }
+    };
+
+    // 목록 페이지로 이동
+    const goList = () => {
+        router.push('/board');
+    };
+
+    // 게시물 수정
+    const updateBoard = async () => {
+        // 유효성 검사
+        if (!title.value) {
+            titleAlert.value = true;
             return;
         }
+        titleAlert.value = false;
 
-        // 데이터 설정
-        title.value = data.title || '제목 없음';
-        content.value = data.content || '내용 없음';
+        if (!content.value) {
+            contentAlert.value = true;
+            return;
+        }
+        contentAlert.value = false;
 
-    } catch (error) {
-        console.error('게시물 가져오기 오류:', error.response || error.message);
-    }
-};
+        try {
+            // 수정 데이터 전송
+            const boardData = {
+                LOCBRDTTL: title.value,
+                LOCBRDCON: JSON.stringify(content.value),
+                LOCBRDSEQ: currentBoardId.value,
+            };
 
-// 목록 페이지로 이동
-const goList = () => {
-    router.push('/board');
-};
+            await axios.put(`board/${currentBoardId.value}`, boardData);
 
-// 게시물 수정
-const updateBoard = async () => {
-    // 유효성 검사
-    if (!title.value) {
-        titleAlert.value = true;
-        return;
-    }
-    titleAlert.value = false;
+            alert('게시물이 수정되었습니다.');
+            goList();
+        } catch (error) {
+            console.error('게시물 수정 중 오류 발생:', error);
+            alert('게시물 수정에 실패했습니다.');
+        }
+    };
 
-    if (!content.value) {
-        contentAlert.value = true;
-        return;
-    }
-    contentAlert.value = false;
-
-    try {
-        // 수정 데이터 전송
-        const boardData = {
-            LOCBRDTTL: title.value,
-            LOCBRDCON: content.value,
-        };
-
-        await axios.put(`board/${currentBoardId.value}`, boardData);
-
-        alert('게시물이 수정되었습니다.');
-        goList();
-    } catch (error) {
-        console.error('게시물 수정 중 오류 발생:', error);
-        alert('게시물 수정에 실패했습니다.');
-    }
-};
-
-// 컴포넌트 마운트 시 데이터 로드
-onMounted(() => {
-    if (currentBoardId.value) {
-        fetchBoardDetails();
-    } else {
-        console.error('잘못된 게시물 ID:', currentBoardId.value);
-    }
-});
+    // 컴포넌트 마운트 시 데이터 로드
+    onMounted(() => {
+        if (currentBoardId.value) {
+            fetchBoardDetails();
+        } else {
+            console.error('잘못된 게시물 ID:', currentBoardId.value);
+        }
+    });
 </script>
 
 <style>
-.text-red {
-    color: red;
-    text-align: center;
-}
+    .text-red {
+        color: red;
+        text-align: center;
+    }
 </style>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 442114a..d32b3e6 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -229,7 +229,7 @@
             const data = response.data.data;
 
             profileName.value = data.author || '익명';
-
+            console.log(data.author);
             authorId.value = data.authorId;
             boardTitle.value = data.title || '제목 없음';
             boardContent.value = data.content || '';
@@ -569,7 +569,7 @@
         try {
             const response = await axios.post(`board/${currentBoardId.value}/password`, {
                 LOCBRDPWD: password.value,
-                LOCBRDSEQ: 288,
+                LOCBRDSEQ: currentBoardId.value,
             });
 
             if (response.data.code === 200 && response.data.data === true) {
@@ -586,17 +586,18 @@
                 passwordAlert.value = '비밀번호가 일치하지 않습니다.';
             }
         } catch (error) {
-            if (error.response) {
-                if (error.response.status === 401) {
-                    passwordAlert.value = '비밀번호가 일치하지 않습니다.';
-                } else {
-                    passwordAlert.value = error.response.data?.message || '서버 오류가 발생했습니다.';
-                }
-            } else if (error.request) {
-                passwordAlert.value = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
-            } else {
-                passwordAlert.value = '요청 중 알 수 없는 오류가 발생했습니다.';
-            }
+            if (error.reponse && error.reponse.status === 401) passwordAlert.value = '비밀번호가 일치하지 않습니다.';
+            // if (error.response) {
+            //     if (error.response.status === 401) {
+            //         passwordAlert.value = '비밀번호가 일치하지 않습니다.';
+            //     } else {
+            //         passwordAlert.value = error.response.data?.message || '서버 오류가 발생했습니다.';
+            //     }
+            // } else if (error.request) {
+            //     passwordAlert.value = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
+            // } else {
+            //     passwordAlert.value = '요청 중 알 수 없는 오류가 발생했습니다.';
+            // }
         }
     };
 

From 243b9702276cb1f44ebca629adbabe5368f836dc Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Fri, 7 Mar 2025 10:22:22 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=ED=99=94=EB=A9=B4=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/board/BoardEdit.vue | 109 ++++++++++++++++++++++++++++------
 1 file changed, 91 insertions(+), 18 deletions(-)

diff --git a/src/views/board/BoardEdit.vue b/src/views/board/BoardEdit.vue
index 94e3c9e..14514f1 100644
--- a/src/views/board/BoardEdit.vue
+++ b/src/views/board/BoardEdit.vue
@@ -22,19 +22,21 @@
                     />
 
                     <!-- 실시간 반영된 파일 개수 표시 -->
-                    <p class="text-muted mt-1">첨부파일: {{ fileCount }} / 5개</p>
-                    <p v-if="fileError" class="text-danger">{{ fileError }}</p>
+                    <div>
+                        <p class="text-muted mt-1">첨부파일: {{ fileCount }} / 5개</p>
+                        <p v-if="fileError" class="text-danger">{{ fileError }}</p>
 
-                    <ul class="list-group mt-2" v-if="attachFiles.length">
-                        <li
-                            v-for="(file, index) in attachFiles"
-                            :key="index"
-                            class="list-group-item d-flex justify-content-between align-items-center"
-                        >
-                            {{ file.name }}
-                            <button class="close-btn" @click="removeFile(index)">✖</button>
-                        </li>
-                    </ul>
+                        <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">
@@ -71,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';
 
@@ -82,21 +85,32 @@
     // 경고 상태
     const titleAlert = ref(false);
     const contentAlert = ref(false);
-    const contentLoaded = ref(false); //
+    const contentLoaded = ref(false);
 
     // 라우터
     const router = useRouter();
     const route = useRoute();
     const currentBoardId = ref(route.params.id); // 라우트에서 ID 가져오기
+
+    // 파일
+    const maxFiles = 5;
+    const maxSize = 10 * 1024 * 1024;
+    const attachFiles = ref([]);
+    const fileError = ref('');
+    const attachFilesAlert = ref(false);
+    const isFileValid = ref(true);
+    const delFileIdx = ref([]); // 제외할 기존 첨부파일 ID
+    const additionalFiles = ref([]); // 새로 추가할 첨부파일
+
     // 게시물 데이터 로드
     const fetchBoardDetails = async () => {
         try {
             const response = await axios.get(`board/${currentBoardId.value}`);
             const data = response.data.data;
 
-            if (!data) {
-                console.error('API에서 게시물 데이터를 반환하지 않았습니다.');
-                return;
+            // 기존 첨부파일 추가
+            if (data.hasAttachment && data.attachments.length > 0) {
+                attachFiles.value = addDisplayFileName([...data.attachments]);
             }
 
             // 데이터 설정
@@ -108,6 +122,13 @@
         }
     };
 
+    // 기존 첨부파일명을 노출
+    const addDisplayFileName = fileInfos =>
+        fileInfos.map(file => ({
+            ...file,
+            name: `${file.originalName}.${file.extension}`,
+        }));
+
     // 목록 페이지로 이동
     const goList = () => {
         router.push('/board');
@@ -136,7 +157,22 @@
                 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();
@@ -146,6 +182,43 @@
         }
     };
 
+    ////////////////// 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) {