게시판 댓글삭제제

src/components/board/BoardCommentArea.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script setup>
-    import { ref, defineEmits, defineProps, computed, watch, inject } from 'vue';
+import { ref, defineEmits, defineProps, watch, inject } from 'vue';
 import SaveBtn from '../button/SaveBtn.vue';
 
 const props = defineProps({
@@ -72,6 +72,7 @@
         default: '',
     },
 });
+
 const $common = inject('common');
 const comment = ref('');
 const password = ref('');
@@ -80,14 +81,15 @@
 const passwordAlert2 = ref('');
 
 const emit = defineEmits(['submitComment']);
-    const LOCBRDTYP = isCheck.value ? '300102' : null;
+
-    function handleCommentSubmit() {
+const handleCommentSubmit = () => {
     if (!$common.isNotEmpty(comment.value)) {
         textAlert.value = '댓글을 입력하세요';
         return false;
     } else {
         textAlert.value = '';
     }
+
     if (isCheck.value && !$common.isNotEmpty(password.value)) {
         passwordAlert2.value = '비밀번호를 입력하세요';
         return false;
@@ -95,21 +97,32 @@
         passwordAlert2.value = '';
     }
 
+    // 댓글 제출
     emit('submitComment', {
         comment: comment.value,
         password: isCheck.value ? password.value : '',
         isCheck: isCheck.value,
-            LOCBRDTYP, // 익명일 경우 '300102' 설정
+        LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정
     });
-    }
+
+    // 제출 후 입력 필드 리셋
+    resetCommentForm();
+};
+
+// 입력 필드 리셋 함수 추가
+const resetCommentForm = () => {
+    comment.value = '';
+    password.value = '';
+    isCheck.value = false;
+};
 
 watch(
     () => props.passwordAlert,
     () => {
         if (!props.passwordAlert) {
-                comment.value = '';
+            resetCommentForm();
-                password.value = '';
+        }
     }
-        },
 );
 </script>
+

src/components/board/BoardProfile.vue

@@ -2,7 +2,7 @@
     <div class="d-flex align-items-center flex-wrap">
         <div class="d-flex align-items-center">
             <div v-if="!unknown" class="avatar me-2">
-                <img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
+                <img :src="getProfileImage(profilePath)" alt="Avatar" class="rounded-circle" />
             </div>
 
             <div class="me-2">
@@ -23,8 +23,7 @@
         <!-- 버튼 영역 -->
         <div class="ms-auto text-end">
             <!-- 수정, 삭제 버튼 -->
-            <!-- <template v-if="isAuthor || showDetail"> -->
+            <template v-if="!isDeletedComment && (unknown || isCommentAuthor || isAuthor)">
-            <template v-if="unknown || isCommentAuthor || isAuthor">
                 <EditButton @click.stop="editClick" />
                 <DeleteButton @click.stop="deleteClick" />
             </template>
@@ -35,18 +34,23 @@
                 :boardId="boardId"
                 :comment="comment"
                 @updateReaction="handleUpdateReaction"
-            >
+            />
-            </BoardRecommendBtn>
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits } from '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";
+
+// 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
+const baseUrl = "http://localhost:10325/"; // API 서버 URL
+
 // Props 정의
 const props = defineProps({
     comment: {
@@ -65,6 +69,10 @@ const props = defineProps({
         type: String,
         default: '',
     },
+    profilePath: {
+        type: String,
+        default: '',
+    },
     unknown: {
         type: Boolean,
         default: true,
@@ -73,13 +81,12 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
-    // 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
     isAuthor: {
         type: Boolean,
         default: false,
     },
-    isCommentAuthor: Boolean,  // 댓글 작성자인지 여부
+    isCommentAuthor: Boolean,
-    isCommentProfile: Boolean, // 현재 컴포넌트가 댓글용인지 여부
+    isCommentProfile: Boolean,
     date: {
         type: String,
         required: '',
@@ -100,6 +107,11 @@ const props = defineProps({
 
 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 });
@@ -110,6 +122,7 @@ const deleteClick = () => {
     emit('deleteClick', { ...props.comment, unknown: props.unknown });
 };
 
+// 좋아요/싫어요 업데이트
 const handleUpdateReaction = (reactionData) => {
     emit("updateReaction", {
         boardId: props.boardId,
@@ -118,34 +131,10 @@ const handleUpdateReaction = (reactionData) => {
     });
 };
 
+// 프로필 이미지 경로 설정
 const getProfileImage = (profilePath) => {
-    return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
+    return profilePath && profilePath.trim()
+      ? `${baseUrl}upload/img/profile/${profilePath}`
+      : defaultProfile;
   };
-
-
 </script>
-
-<style scoped>
-.profile-detail span ~ span {
-    margin-left: 5px;
-}
-
-.ms-auto button + button {
-    margin-left: 5px;
-}
-
-.btn.author {
-    height: 30px;
-}
-
-@media screen and (max-width: 450px) {
-    .btn-area {
-        margin-top: 10px;
-        width: 100%;
-    }
-
-    .btn.author {
-        height: 30px;
-    }
-}
-</style>

src/views/board/BoardView.vue

@@ -39,8 +39,8 @@
                                     <li v-for="(attachment, index) in attachments" :key="index">
                                         <a
                                             class="dropdown-item"
-                                            :href="getFileDownloadUrl(attachment)"
+                                            href="#"
-                                            :download="attachment.originalName + '.' + attachment.extension"
+                                            @click.prevent="downloadFile(attachment)"
                                         >
                                             {{ attachment.originalName }}.{{ attachment.extension }}
                                         </a>
@@ -157,8 +157,26 @@ const commentsWithAuthStatus = computed(() => {
 
 const attachments = ref([]);
 // 첨부파일 다운로드 URL 생성
-const getFileDownloadUrl = (attachment) => {
+const downloadFile = async (attachment) => {
-    return `board/files/download?path=${encodeURIComponent(attachment.path)}`;
+    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('파일 다운로드 중 오류가 발생했습니다.');
+    }
 };
 
 
@@ -200,14 +218,11 @@ const fetchBoardDetails = async () => {
     try {
         const response = await axios.get(`board/${currentBoardId.value}`);
         const data = response.data.data;
-        console.log(data)
 
-        // API 응답 데이터 반영
-        // const boardDetail = data.boardDetail || {};
 
         profileName.value = data.author || '익명';
 
-        authorId.value = data.authorId; //게시글 작성자 id
+        authorId.value = data.authorId;
         boardTitle.value = data.title || '제목 없음';
         boardContent.value = data.content || '';
         date.value = data.date || '';
@@ -277,7 +292,6 @@ const fetchComments = async (page  = 1) => {
                 page
             }
         });
-
         const commentsList = response.data.data.list.map(comment => ({
             commentId: comment.LOCCMTSEQ, // 댓글 ID
             boardId: comment.LOCBRDSEQ,
@@ -292,6 +306,7 @@ const fetchComments = async (page  = 1) => {
             createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
             createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
             children: [], // 대댓글을 담을 배열
+            updateAtRaw: new Date(comment.LOCCMTUDT),
         }));
 
         commentsList.sort((a, b) => b.createdAtRaw - a.createdAtRaw);