Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front

2025-02-27 15:44:57 +09:00 · 2025-02-27 15:44:57 +09:00 · 1063d82a29
commit 1063d82a29
parent f248141108 ffabb284fa
6 changed files with 129 additions and 67 deletions
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@ -9,15 +9,16 @@
            :comment="comment"
            :showDetail="false"
            :isLike="!isLike"
-            :isCommentPassword="comment.isCommentPassword"
+            :isCommentPassword="isCommentPassword"
            :isCommentProfile="true"
            @editClick="aaaa"
            @deleteClick="$emit('deleteClick', comment)"
            @updateReaction="handleUpdateReaction"
            />
+            <!-- <P>Commentpassssss: {{isCommentPassword}}</P> -->
            <!-- :author="true" -->
        <!-- 댓글 비밀번호 입력창 (익명일 경우) -->
-        <div v-if="isCommentPassword && unknown" class="mt-3 w-25 ms-auto">
+        <div v-if="isCommentPassword === comment.commentId && unknown" class="mt-3 w-25 ms-auto">
            <div class="input-group">
                <input
                    type="password"
@ -37,8 +38,9 @@
            <template v-if="comment.isEditTextarea">
                <textarea v-model="localEditedContent" class="form-control"></textarea>
                <div class="mt-2 d-flex justify-content-end">
-                    <button class="btn btn-secondary me-2" @click="$emit('cancelEdit', comment)">취소</button>
-                    <button class="btn btn-primary" @click="submitEdit">수정</button>
+                    <!-- <button class="btn btn-secondary me-2" @click="$emit('cancelEdit', comment)">취소</button> -->
+                    <!-- <button class="btn btn-primary" @click="submitEdit">수정</button> -->
+                    <SaveBtn class="btn btn-primary" @click="submitEdit"></SaveBtn>
                </div>
            </template>
            <template v-else>
@ -59,6 +61,7 @@
            <!-- <p>대댓글 데이터(JSON): {{ JSON.stringify(child, null, 2) }}</p> -->
            <!-- <p>comment child: {{ comment.children }}</p> -->
            <!-- :unknown="child.author === '익명'" -->
+            <p>child.isCommentPassword: {{ child.isCommentPassword }}</p>
                <BoardComment
                    :comment="child"
                    :unknown="child.author === '익명'"
@ -66,6 +69,7 @@
                    :isLike="true"
                    :isCommentProfile="true"
                    :isCommentAuthor="child.isCommentAuthor"
+                    :isCommentPassword="isCommentPassword"
                    @editClick="$emit('editClick', $event)"
                    @deleteClick="$emit('deleteClick', child)"
                    @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
@ -83,6 +87,7 @@ import { defineProps, defineEmits, ref, computed, watch } from 'vue';
 import BoardProfile from './BoardProfile.vue';
 import BoardCommentArea from './BoardCommentArea.vue';
 import PlusButton from '../button/PlusBtn.vue';
+import SaveBtn from '../button/SaveBtn.vue';

 const props = defineProps({
    comment: {
@ -91,7 +96,7 @@ const props = defineProps({
    },
    unknown: {
        type: Boolean,
-        default: true,
+        default: false,
    },
    isCommentAuthor: {
        type: Boolean,
--- a/src/components/board/BoardCommentArea.vue
+++ b/src/components/board/BoardCommentArea.vue
@ -4,11 +4,11 @@
            <!-- 댓글 입력 섹션 -->
            <div class="d-flex justify-content-start align-items-top">
                <!-- 프로필섹션 -->
-                <div class="avatar-wrapper">
+                <!-- <div class="avatar-wrapper">
                    <div v-if="!unknown" class="avatar me-4">
                        <img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle">
                    </div>
-                </div>
+                </div> -->
                <!-- 텍스트박스 -->
                <div class="w-100">
                    <textarea
@ -95,7 +95,6 @@ function handleCommentSubmit() {
        password: isCheck.value ? password.value : '',
        isCheck: isCheck.value,
        LOCBRDTYP,  // 익명일 경우 '300102' 설정
-        isCheck: isCheck.value
    });
 }

--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@ -9,16 +9,16 @@
                :unknown="unknown"
                :comment="comment"
                :isCommentAuthor="comment.isCommentAuthor"
-                :isCommentPassword="comment.isCommentPassword" 
                :isEditTextarea="comment.isEditTextarea"
+                :isCommentPassword="isCommentPassword" 
                :passwordCommentAlert="passwordCommentAlert"
-                @editClick="$emit('editClick', comment)"
-                @deleteClick="$emit('deleteClick', comment)"
+                @editClick="handleEditClick"
+                @deleteClick="handleDeleteClick"
                @submitPassword="submitPassword"
                @submitComment="submitComment"
                @commentDeleted="handleCommentDeleted"
-                @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
-                @cancelEdit="$emit('cancelEdit', comment)"
+                @submitEdit="handleSubmitEdit"
+                @cancelEdit="handleCancelEdit"
                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
            />
        </li>
@ -76,4 +76,28 @@ const handleUpdateReaction = (reactionData, commentId, boardId) => {
 const submitPassword = (comment, password) => {
    emit('submitPassword', comment, password);
 };
+
+const handleEditClick = (comment) => {
+    emit('editClick', comment);
+};
+
+const handleSubmitEdit = (comment, editedContent) => {
+    emit("submitEdit", comment, editedContent);
+};
+
+const handleDeleteClick = (comment) => {
+    if (comment.parentId) {
+        emit('deleteClick', comment); // 대댓글 삭제
+    } else {
+        emit('deleteClick', comment); // 댓글 삭제
+    }
+};
+
+const handleCancelEdit = (comment) => {
+    if (comment.parentId) {
+        emit('cancelEdit', comment); // 대댓글 수정 취소
+    } else {
+        emit('cancelEdit', comment); // 댓글 수정 취소
+    }
+};
 </script>
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@ -23,7 +23,7 @@
        <div class="ms-auto text-end">
            <!-- 수정, 삭제 버튼 -->
            <!-- <template v-if="isAuthor || showDetail"> -->
-            <template v-if="isCommentProfile ? isCommentAuthor : isAuthor">
+            <template v-if="unknown || isCommentAuthor || isAuthor">
                <EditButton @click.stop="editClick" />
                <DeleteButton @click.stop="deleteClick" />
            </template>
@ -62,7 +62,6 @@ const props = defineProps({
    },
    profileName: {
        type: String,
-        default: '익명',
        default: '',
    },
    unknown: {
@ -102,13 +101,12 @@ const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);

 // 수정
 const editClick = () => {
-    console.log('클릭 확인')
-    emit('editClick', props.unknown);
+    emit('editClick', { ...props.comment, unknown: props.unknown });
 };

 // 삭제
 const deleteClick = () => {
-    emit('deleteClick', props.unknown);
+    emit('deleteClick', { ...props.comment, unknown: props.unknown });
 };

 const handleUpdateReaction = (reactionData) => {
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@ -4,7 +4,7 @@
            <div class="card-header">
                <!-- 검색창 -->
                <div class="container col-6 mt-12 mb-8">
-                    <search-bar @update:data="search" />
+                    <search-bar @update:data="search" @keyup.enter="searchOnEnter"/>
                </div>
            </div>
            <div class="card-datatable">
@ -57,7 +57,7 @@
                                    class="bg-label-gray fw-bold"
                                    @click="goDetail(notice.id)">
                                    <td class="text-center">공지</td>
-                                    <td>
+                                    <td class="cursor-pointer">
                                        📌 {{ notice.title }}
                                        <i v-if="notice.img" class="bi bi-image me-1"></i>
                                        <i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
@ -74,7 +74,7 @@
                                class="invert-bg-white"
                                @click="goDetail(post.realId)">
                                <td class="text-center">{{ post.id }}</td>
-                                <td>
+                                <td class="cursor-pointer">
                                    {{ post.title }}
                                    <i v-if="post.img" class="bi bi-image me-1"></i>
                                    <i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
@ -86,6 +86,12 @@
                            </tr>
                        </tbody>
                    </table>
+                    <!-- 검색 결과가 없을 때 -->
+                    <div v-if="generalList.length === 0">
+                        <p class="text-center pt-10 mt-2 mb-0 text-muted">
+                            검색 결과가 없습니다.
+                        </p>
+                    </div>
                </div>
            </div>
            <div class="card-footer">
@ -189,10 +195,10 @@ const fetchGeneralPosts = async (page = 1) => {
        });

        if (data?.data) {
-            console.log(data)
+            // console.log(data)
            const totalPosts = data.data.total; // 전체 게시물 개수 받아오기

-            console.log('📌 API 응답 데이터:', data.data);
+            // console.log('📌 API 응답 데이터:', data.data);

            generalList.value = data.data.list.map((post, index) => ({
                realId: post.id,
@ -251,6 +257,18 @@ const fetchNoticePosts = async () => {
    }
 };

+// Enter 키를 눌렀을 때
+const searchOnEnter = (event) => {
+    const searchTextValue = event.target.value.trim();
+
+    if (!searchTextValue || searchTextValue[0] === ' ') {
+        return; // 검색어가 비어있거나 첫 글자가 공백이면 실행 안 함
+    }
+
+    searchText.value = searchTextValue;
+    fetchGeneralPosts(1);
+};
+
 // 페이지 변경
 const handlePageChange = (page) => {
    if (page !== pagination.value.currentPage) {
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@ -106,7 +106,7 @@
                        <BoardCommentList
                            :unknown="unknown"
                            :comments="commentsWithAuthStatus"
-                            :isCommentPassword="isCommentPassword"
+                            :isCommentPassword="Boolean(isCommentPassword)"
                            :isEditTextarea="isEditTextarea"
                            :passwordCommentAlert="passwordCommentAlert"
                            @editClick="editComment"
@ -170,7 +170,7 @@ const commentsWithAuthStatus = computed(() => {
        isCommentAuthor: comment.authorId === currentUserId.value,
        children: comment.children.map(reply => ({
            ...reply,
-            isCommentAuthor: reply.authorId === currentUserId.value
+            isCommentAuthor: reply.authorId === currentUserId.value,
        }))
    }));
    // console.log("✅ commentsWithAuthStatus 업데이트됨:", updatedComments);
@ -220,8 +220,8 @@ const fetchBoardDetails = async () => {
        // 익명확인하고 싶을때
        // profileName.value = '익명';

-        console.log("📌 게시글 작성자:", profileName.value); // 작성자 이름 출력
-        console.log("🔍 익명 여부 (unknown.value):", unknown.value); // 익명 여부 확인
+        // console.log("📌 게시글 작성자:", profileName.value); // 작성자 이름 출력
+        // console.log("🔍 익명 여부 (unknown.value):", unknown.value); // 익명 여부 확인


        authorId.value = data.authorId; //게시글 작성자 id
@ -263,7 +263,8 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
        // console.log("갱신된 데이터:", updatedData);

    } catch (error) {
-        alert('반응을 업데이트하는 중 오류 발생');
+        alert('오류가 발생했습니다.');
+        // console.log('반응을 업데이트하는 중 오류가 발생했습니다.');
    }
 };

@ -285,7 +286,8 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
        await fetchComments();

    } catch (error) {
-        alert('댓글 반응을 업데이트하는 중 오류 발생');
+        alert('오류가 발생했습니다.');
+        // console.log('댓글 반응을 업데이트하는 중 오류 발생');
    }
 };

@ -370,7 +372,8 @@ const fetchComments = async (page  = 1) => {


    } catch (error) {
-        console.log('댓글 목록 불러오기 오류:', error);
+        alert('오류가 발생했습니다.');
+        // alert('댓글 목록 불러오기 오류:', error);
    }
 };

@ -382,7 +385,6 @@ const handleCommentSubmit = async (data, isCheck) => {
    }

    const { comment, password } = data;
-    const LOCBRDTYP = data.LOCBRDTYP || null;

    if (!comment || comment.trim() === "") {
        commentAlert.value = '댓글을 입력해주세요.';
@ -402,19 +404,21 @@ const handleCommentSubmit = async (data, isCheck) => {
            LOCCMTRPY: comment,
            LOCCMTPWD: isCheck ? password : '',
            LOCCMTPNT: 1,
-            LOCBRDTYP
+            LOCBRDTYP: unknown.value ? "300102" : null
        });

        if (response.status === 200) {
-            console.log('댓글 작성 성공:', response.data.message);
+            // console.log('댓글 작성 성공:', response.data.message);
            passwordAlert.value = '';
            commentAlert.value = '';
            await fetchComments();
        } else {
-            console.error('댓글 작성 실패:', response.data.message);
+            // console.error('댓글 작성 실패:', response.data.message);
+            alert("댓글 작성을 실패했습니다.")
        }
    } catch (error) {
-        console.error('댓글 작성 중 오류 발생:', error);
+        // console.error('댓글 작성 중 오류 발생:', error);
+        alert("오류가 발생했습니다.")
    }
 };

@ -431,19 +435,21 @@ const handleCommentReply = async (reply) => {

        if (response.status === 200) {
            if (response.data.code === 200) {  // 서버 응답 코드도 확인
-                console.log('대댓글 작성 성공:', response.data);
+                // console.log('대댓글 작성 성공:', response.data);
                await fetchComments();  // 댓글 목록 새로고침
            } else {
-                console.log('대댓글 작성 실패 - 서버 응답:', response.data);
-                alert('대댓글 작성에 실패했습니다.');
+                // console.log('대댓글 작성 실패 - 서버 응답:', response.data);
+                alert('대댓글 작성을 실패했습니다.');
            }
        }
    } catch (error) {
-        console.error('대댓글 작성 중 오류 발생:', error);
+        // console.error('대댓글 작성 중 오류 발생:', error);
        if (error.response) {
-            console.error('서버 응답 에러:', error.response.data);
+            // console.error('서버 응답 에러:', error.response.data);
+            alert("오류가 발생했습니다.");
        }
-        alert('대댓글 작성 중 오류가 발생했습니다.');
+        alert("오류가 발생했습니다.");
+
    }
 }

@ -482,36 +488,37 @@ const findCommentById = (commentId, commentsList) => {

 // 댓글 수정 버튼 클릭
 const editComment = (comment) => {
-    console.log('대댓글 수정 버튼 클릭')

    // 부모 또는 대댓글을 찾아서 가져오기
    const targetComment = findCommentById(comment.commentId, comments.value);

    if (!targetComment) {
-        console.log("대댓글을 찾을 수 없음:", comment.commentId);
        return;
    }

-    // 수정 text창 열림, 닫힘 유무 토글
-    targetComment.isEditTextarea = !targetComment.isEditTextarea;
+    // 댓글 작성자가 현재 로그인한 사용자와 동일한지 확인
+    const isMyComment = comment.authorId === currentUserId.value;
+    const isAnonymous = comment.author === "익명";

-    // 익명일 경우 비밀번호 입력창 활성화
-    if (unknown.value) {
-        console.log('익명 코멘트인가?')
+    if (isMyComment) {
+        // 본인 댓글이면 바로 수정 모드 활성화
+        targetComment.isEditTextarea = true;
+    } else if (isAnonymous) {
+        // 익명 댓글이면 비밀번호 입력창 띄우기
        toggleCommentPassword(comment, "edit");
+
+    } else {
+        // console.log("다른 사용자 댓글 - 수정 불가");
+        alert("수정이 불가능합니다");
    }
 }

 // 댓글 삭제 버튼 클릭
 const deleteComment = async (comment) => {
-    console.log('🗑 댓글 삭제 시도:', comment);
-
    // 익명 사용자인 경우
    const isMyComment = comment.authorId === currentUserId.value;

    if (unknown.value && !isMyComment) {
-        console.log('🛑 익명 사용자의 댓글 삭제 시도 (비밀번호 필요)');
-
        if (comment.isEditTextarea) {
            // 현재 수정 중이라면 수정 모드를 끄고, 삭제 비밀번호 입력창을 띄움
            comment.isEditTextarea = false;
@ -521,26 +528,23 @@ const deleteComment = async (comment) => {
            toggleCommentPassword(comment, "delete");
        }
    } else {
-        console.log('✅ 로그인 사용자 댓글 삭제 진행');
        deleteReplyComment(comment);
    }
 };

 // 익명 비밀번호 창 토글
 const toggleCommentPassword = (comment, button) => {
-    if (lastCommentClickedButton.value === button && comment.isCommentPassword) {
-        comment.isCommentPassword = false;
+    if (lastCommentClickedButton.value === button && isCommentPassword.value === comment.commentId) {
+        isCommentPassword.value = false; // 비밀번호 창 닫기
    } else {
-        // 모든 댓글의 비밀번호 입력창 닫기
-        comments.value.forEach(c => (c.isCommentPassword = false));
-
-        // 현재 선택된 댓글만 비밀번호 입력창 열기
-        comment.isCommentPassword = true;
+        isCommentPassword.value = comment.commentId; // 비밀번호 창 열기
    }

    lastCommentClickedButton.value = button;
 };

+
+
 const togglePassword = (button) => {
    if (lastClickedButton.value === button) {
        isPassword.value = !isPassword.value;
@ -597,16 +601,21 @@ const submitPassword = async () => {
 // 댓글 삭제 (비밀번호 확인 후)
 const submitCommentPassword = async (comment, password) => {

+    // console.log("비밀번호 :", password);
+    // console.log("댓글 ID:", comment.commentId);
+
    if (!password) {
        passwordCommentAlert.value = "비밀번호를 입력해주세요.";
        return;
    }

    try {
+        // console.log('서버로 비밀번호 확인 요청')
        const response = await axios.post(`board/comment/${comment.commentId}/password`, {
            LOCCMTPWD: password,
            LOCCMTSEQ: comment.commentId,
        });
+        // console.log("✅ 서버 응답 데이터:", response.data);

        if (response.data.code === 200 && response.data.data === true) {
            passwordCommentAlert.value = "";
@ -624,9 +633,14 @@ const submitCommentPassword = async (comment, password) => {
            }
            lastCommentClickedButton.value = null;
        } else {
+            // console.log("❌ 비밀번호가 틀림");
            passwordCommentAlert.value = "비밀번호가 일치하지 않습니다.";
        }
    } catch (error) {
+        // console.log("🚨 서버 요청 중 오류 발생:", error.response?.data || error);
+        // if (error.response?.status === 401) {
+        //     console.log("❌ 401 오류: 인증 실패 (비밀번호 불일치)");
+        // }
        passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
    }
 };
@ -675,7 +689,7 @@ const deleteReplyComment = async (comment) => {
            alert("댓글 삭제에 실패했습니다.");
        }
    } catch (error) {
-        console.log("댓글 삭제 중 오류 발생:", error);
+        // console.log("댓글 삭제 중 오류 발생:", error);
        alert("댓글 삭제 중 오류가 발생했습니다.");
    }
 };
@ -698,13 +712,16 @@ const handleSubmitEdit = async (comment, editedContent) => {
                targetComment.content = editedContent; // 댓글 내용 업데이트
                targetComment.isEditTextarea = false; // 수정 모드 닫기
            } else {
-                console.warn("❌ 수정할 댓글을 찾을 수 없음");
+                // console.warn("❌ 수정할 댓글을 찾을 수 없음");
+                alert("수정할 댓글을 찾을 수 없습니다.");
            }
        } else {
-            console.log("❌ 댓글 수정 실패:", response.data);
+            // console.log("❌ 댓글 수정 실패:", response.data);
+            alert("댓글 수정 실패했습니다.");
        }
    } catch (error) {
-        console.error("댓글 수정 중 오류 발생:", error);
+        // console.error("댓글 수정 중 오류 발생:", error);
+        alert("댓글 수정 중 오류 발생했습니다.");
    }
 };

@ -713,10 +730,11 @@ const handleCancelEdit = (comment) => {
    const targetComment = findCommentById(comment.commentId, comments.value);

    if (targetComment) {
-        console.log("✅ 원본 데이터 찾음, 수정 취소 처리 가능:", targetComment);
+        // console.log("✅ 원본 데이터 찾음, 수정 취소 처리 가능:", targetComment);
        targetComment.isEditTextarea = false;
    } else {
-        console.error("❌ 원본 데이터 찾을 수 없음, 수정 취소 실패");
+        // console.error("❌ 원본 데이터 찾을 수 없음, 수정 취소 실패");
+        alert("수정 취소를 실패했습니다.");
    }
 };

@ -747,7 +765,7 @@ const handleCommentDeleted = (deletedCommentId) => {
        }
    }

-    console.error("❌ 삭제할 댓글을 찾을 수 없음:", deletedCommentId);
+    // console.error("❌ 삭제할 댓글을 찾을 수 없음:", deletedCommentId);
 };