boardProfile 수정전

2025-02-17 15:47:28 +09:00 · 2025-02-17 15:47:28 +09:00 · a90bdab5a0
commit a90bdab5a0
parent 5fe85dcd3b
5 changed files with 79 additions and 40 deletions
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@ -1,6 +1,7 @@
 <template>
    <div>
        <BoardProfile
+            :unknown="unknown"
            :boardId="comment.boardId"
            :profileName="comment.author"
            :date="comment.createdAt"
@ -9,13 +10,25 @@
            :author="true"
            :isLike="!isLike"
            @updateReaction="handleUpdateReaction"
+            @toggleEdit="emit('toggleEdit', comment.commentId, true)"
        />
+        
+
        <div class="mt-6">
-            <p class="m-0">{{ comment.content }}</p>
-            <!-- <span>{{comment.commentId}}</span> -->
+            <template v-if="isEditTextarea">
+                <textarea v-model="editedContent" class="form-control"></textarea>
+                <div class="mt-2 d-flex justify-content-end">
+                    <button class="btn btn-secondary me-2" @click="emit('toggleEdit', comment.commentId, false)">취소</button>
+                    <button class="btn btn-primary" @click="submitEdit">수정 완료</button>
+                </div>
+            </template>
+            <template v-else>
+                <p class="m-0">{{ comment.content }}</p>
+            </template>
        </div>
+
        <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
-        <BoardComentArea v-if="isComment" @submitComment="submitComment"/>
+        <BoardCommentArea v-if="isComment" @submitComment="submitComment"/>
        
        <!-- 대댓글 -->
        <ul v-if="comment.children && comment.children.length" class="list-unstyled">
@ -25,7 +38,8 @@
                class="mt-8 pt-6 ps-10 border-top"
            >
                <BoardComment 
-                    :comment="child" 
+                    :comment="child"
+                    :unknown="unknown"
                    :isPlusButton="false" 
                    :isLike="true" 
                    @submitComment="submitComment" 
@ -37,20 +51,20 @@
            <li>
                <BoardProfile profileName=곤데리2 :showDetail="false" />
                <div class="mt-2">저도 궁금합니다.</div>
-                <BoardComentArea v-if="comment" />
+                <BoardCommentArea v-if="comment" />
            </li>
        </ul> -->
        <!-- <BoardProfile profileName=곤데리 :showDetail="false" />
        <div class="mt-2">저도 궁금합니다.</div>
        <PlusButton  @click="toggleComment"/>
-        <BoardComentArea v-if="comment" /> -->
+        <BoardCommentArea v-if="comment" /> -->
    </div>
 </template>

 <script setup>
 import { defineProps, defineEmits, ref } from 'vue';
 import BoardProfile from './BoardProfile.vue';
-import BoardComentArea from './BoardComentArea.vue';
+import BoardCommentArea from './BoardCommentArea.vue';
 import PlusButton from '../button/PlusBtn.vue';

 const props = defineProps({
@ -58,6 +72,10 @@ const props = defineProps({
    type: Object,
    required: true,
  },
+  unknown: {
+        type: Boolean,
+        default: true,
+    },
  isPlusButton: {
    type: Boolean,
    default: true,
@ -66,10 +84,14 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  isEditTextarea: {
+    type: Boolean,
+    default: false
+  },
 });

 // emits 정의
-const emit = defineEmits(['submitComment', 'updateReaction']);
+const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit']);

 // 댓글 입력 창 토글
 const isComment = ref(false);
@ -80,21 +102,24 @@ const toggleComment = () => {
 // 부모 컴포넌트에 대댓글 추가 요청
 const submitComment = (newComment) => {
    emit('submitComment', { parentId: props.comment.commentId, ...newComment });
-
+    
    isComment.value = false;
 };

 // 좋아요, 싫어요
 const handleUpdateReaction = (reactionData) => {
-    // console.log('📌 댓글 comment:', props.comment.commentId);
-
    emit('updateReaction', {
        boardId: props.comment.boardId,
        commentId: props.comment.commentId,
        ...reactionData
    });
-
 };

+// 수정
+const editedContent = ref(props.comment.content);
+const submitEdit = () => {
+  emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
+  emit('toggleEdit', props.comment.commentId, false); // 수정 모드 종료
+};

 </script>
--- a/src/components/board/BoardCommentArea.vue
+++ b/src/components/board/BoardCommentArea.vue
@ -5,7 +5,7 @@
            <div class="d-flex justify-content-start align-items-top">
                <!-- 프로필섹션 -->
                <div class="avatar-wrapper">
-                    <div class="avatar me-4">
+                    <div v-if="!unknown" class="avatar me-4">
                        <img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle">
                    </div>
                </div>
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@ -6,6 +6,7 @@
            class="mt-6 border-bottom pb-6"
        >
            <BoardComment
+                :unknown="unknown"
                :comment="comment"
                @submitComment="submitComment"
                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId)"
@ -25,6 +26,10 @@ const props = defineProps({
        required: true,
        default: () => []
    },
+    unknown: {
+        type: Boolean,
+        default: true,
+    },
 });

 const emit = defineEmits(['submitComment', 'updateReaction']);
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@ -27,8 +27,16 @@
                <DeleteButton @click="handleDelete" />
            </template>

-            <!-- 비밀번호 입력창 (익명일 경우) -->
-            <div v-if="isPassword && unknown" class="mt-3">
+            <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
+            <BoardRecommendBtn
+                v-if="isLike"
+                :boardId="boardId"
+                :comment="props.comment"
+                @updateReaction="handleUpdateReaction"
+            />
+
+             <!-- 비밀번호 입력창 (익명일 경우) -->
+             <div v-if="isPassword && unknown" class="mt-3">
                <div class="input-group">
                    <input
                        type="password"
@ -40,14 +48,6 @@
                </div>
                <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
            </div>
-
-            <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
-            <BoardRecommendBtn
-                v-if="isLike"
-                :boardId="boardId"
-                :comment="props.comment"
-                @updateReaction="handleUpdateReaction"
-            />
        </div>
    </div>
 </template>
@ -148,6 +148,12 @@ const togglePassword = (button) => {

 // 비밀번호 확인
 const handleSubmit = async () => {
+    const isComment = !!props.comment?.commentId;
+
+    console.log(isComment ? "📝 댓글 비밀번호 확인 버튼 클릭!" : "📄 게시글 비밀번호 확인 버튼 클릭!");
+    console.log("📌 게시글 ID:", props.boardId);
+    console.log("📝 댓글 ID:", isComment ? props.comment.commentId : "해당 없음");
+
    if (!password.value) {
        passwordAlert.value = '비밀번호를 입력해주세요.';
        return;
@ -165,9 +171,21 @@ const handleSubmit = async () => {
            isPassword.value = false;

            if (lastClickedButton.value === 'edit') {
-                router.push({ name: 'BoardEdit', params: { id: props.boardId } });
+                if (isComment) {
+                    console.log("🔄 댓글 수정 로직 실행");
+                    emit("editComment", props.comment.commentId);
+                } else {
+                    console.log("🔄 게시글 수정 페이지로 이동");
+                    router.push({ name: 'BoardEdit', params: { id: props.boardId } });
+                }
            } else if (lastClickedButton.value === 'delete') {
-                await deletePost();
+                if (isComment) {
+                    console.log("🗑 댓글 삭제 로직 실행");
+                    emit("deleteComment", props.comment.commentId);
+                } else {
+                    console.log("🗑 게시글 삭제 로직 실행");
+                    await deletePost();
+                }
            }
            lastClickedButton.value = null;
        } else {
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@ -68,13 +68,13 @@
                        </ul> -->

                        <!-- 댓글 입력 영역 -->
-                        <BoardComentArea :profileName="profileName" :unknown="unknown" @submitComment="handleCommentSubmit"/>
-                        <!-- <BoardComentArea :profileName="profileName" :unknown="unknown" /> -->
+                        <BoardCommentArea :profileName="profileName" :unknown="unknown" @submitComment="handleCommentSubmit"/>
+                        <!-- <BoardCommentArea :profileName="profileName" :unknown="unknown" /> -->
                    </div>

                    <!-- 댓글 목록 -->
                    <div class="card-footer">
-                        <BoardCommentList :comments="comments" @updateReaction="handleUpdateReaction" @submitComment="handleCommentReply" />
+                        <BoardCommentList :unknown="unknown" :comments="comments" @updateReaction="handleUpdateReaction" @submitComment="handleCommentReply" />
                        <Pagination/>
                    </div>
                </div>
@ -84,7 +84,7 @@
 </template>

 <script setup>
-import BoardComentArea from '@c/board/BoardComentArea.vue';
+import BoardCommentArea from '@/components/board/BoardCommentArea.vue';
 import BoardProfile from '@c/board/BoardProfile.vue';
 import BoardCommentList from '@/components/board/BoardCommentList.vue';
 import BoardRecommendBtn from '@/components/button/BoardRecommendBtn.vue';
@ -148,9 +148,6 @@ const fetchBoardDetails = async () => {

 // 좋아요, 싫어요
 const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
-    console.log("📌 게시글 ID:", boardId);
-    console.log("📌 댓글 ID (최종):", commentId);
-
    try {
        const aa = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
            LOCBRDSEQ: boardId, // 게시글 id
@ -159,18 +156,12 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
            LOCGOBGOD: isLike ? 'T' : 'F',
            LOCGOBBAD: isDislike ? 'T' : 'F'
        });
-        console.log("📥 API 응답 데이터:", aa.data); 
+        console.log("좋아요 API 응답 데이터:", aa.data); 


        const response = await axios.get(`board/${boardId}`);
        const updatedData = response.data.data;

-        const response2 = await axios.get(`board/${boardId}/comments`);
-
-
-        // console.log("📥 API 응답 데이터:", response2); 
-
-
        likes.value = updatedData.likeCount;
        dislikes.value = updatedData.dislikeCount;

@ -189,7 +180,7 @@ const fetchComments = async () => {
        const response = await axios.get(`board/${currentBoardId.value}/comments`, {
            params: { LOCBRDSEQ: currentBoardId.value }
        });
-        console.log("📥 API 응답 데이터:", response.data); 
+        console.log("목록 API 응답 데이터:", response.data); 

        let allComments = response.data.data.list.map(comment => ({
            commentId: comment.LOCCMTSEQ, // 댓글 id