boardProfile 수정전

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>
+            <template v-if="isEditTextarea">
-            <!-- <span>{{comment.commentId}}</span> -->
+                <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>

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>

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']);

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 {

src/views/board/BoardView.vue

@@ -68,13 +68,13 @@
                         </ul> -->
 
                         <!-- 댓글 입력 영역 -->
-                        <BoardComentArea :profileName="profileName" :unknown="unknown" @submitComment="handleCommentSubmit"/>
+                        <BoardCommentArea :profileName="profileName" :unknown="unknown" @submitComment="handleCommentSubmit"/>
-                        <!-- <BoardComentArea :profileName="profileName" :unknown="unknown" /> -->
+                        <!-- <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