비밀번호 입력창 - 부모 페이지로 옮김

src/components/board/BoardComment.vue

@@ -9,6 +9,10 @@
             :showDetail="false"
             :author="true"
             :isLike="!isLike"
+            :isPassword="isPassword"
+            @editClick="editClick"
+            @deleteClick="deleteClick"
+            @submitPassword="submitPassword"
             @updateReaction="handleUpdateReaction"
             @toggleEdit="emit('toggleEdit', comment.commentId, true)"
         />
@@ -88,10 +92,14 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  isPassword: {
+    type: Boolean,
+    default: false,
+},
 });
 
 // emits 정의
-const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit']);
+const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit', 'editClick']);
 
 // 댓글 입력 창 토글
 const isComment = ref(false);
@@ -115,6 +123,11 @@ const handleUpdateReaction = (reactionData) => {
     });
 };
 
+// 수정
+const editClick = (data) => {
+    emit('editClick', data);
+};
+
 // 수정
 const editedContent = ref(props.comment.content);
 const submitEdit = () => {

src/components/board/BoardCommentList.vue

@@ -8,6 +8,10 @@
             <BoardComment
                 :unknown="unknown"
                 :comment="comment"
+                :isPassword="isPassword"
+                @editClick="editClick"
+                @deleteClick="deleteClick"
+                @submitPassword="submitPassword"
                 @submitComment="submitComment"
                 @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId)"
             />
@@ -30,9 +34,13 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    isPassword: {
+        type: Boolean,
+        default: false,
+    },
 });
 
-const emit = defineEmits(['submitComment', 'updateReaction']);
+const emit = defineEmits(['submitComment', 'updateReaction', 'editClick']);
 
 const submitComment = (replyData) => {
     emit('submitComment', replyData);
@@ -42,10 +50,6 @@ const handleUpdateReaction = (reactionData, commentId) => {
     // console.log('📢 BoardCommentList에서 이벤트 수신:', reactionData);
     // console.log('📌 전달할 댓글 ID>>>>:', commentId);
 
-    // if (commentId) {
-    //     console.error("❌");
-    // }
-
     const updatedReactionData = {
         ...reactionData,  
         commentId: commentId
@@ -56,4 +60,8 @@ const handleUpdateReaction = (reactionData, commentId) => {
     emit('updateReaction', updatedReactionData);
 }
 
+const editClick = (data) => {
+    emit('editClick', data);
+};
+
 </script>

src/components/board/BoardProfile.vue

@@ -23,8 +23,8 @@
         <div class="ms-auto text-end">
             <!-- 수정, 삭제 버튼 -->
             <template v-if="author || showDetail">
-                <EditButton @click="handleEdit" />
+                <EditButton @click.stop="editClick" />
-                <DeleteButton @click="handleDelete" />
+                <DeleteButton @click.stop="deleteClick" />
             </template>
 
             <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
@@ -44,7 +44,7 @@
                         v-model="password"
                         placeholder="비밀번호 입력"
                     />
-                    <button class="btn btn-primary" @click="handleSubmit">확인</button>
+                    <button class="btn btn-primary" @click="$emit('submitPassword', password)">확인</button>
                 </div>
                 <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
             </div>
@@ -61,11 +61,7 @@ import EditButton from '../button/EditBtn.vue';
 import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
 
 // Vue Router 인스턴스
-const router = useRouter();
-const isPassword = ref(false);
 const password = ref('');
-const passwordAlert = ref(false);
-const lastClickedButton = ref('');
 
 // Props 정의
 const props = defineProps({
@@ -113,120 +109,25 @@ const props = defineProps({
     isLike: {
         type: Boolean,
         default: false,
+    },
+    isPassword: {
+        type: Boolean,
+        default: false,
     }
 });
 
-const emit = defineEmits(['togglePasswordInput', 'updateReaction']);
+const emit = defineEmits(['togglePasswordInput', 'updateReaction', 'editClick', 'deleteClick']);
 
-// 수정 버튼
+// 수정
-const handleEdit = () => {
+const editClick = () => {
-    if (props.unknown) {
+    emit('editClick', props.unknown);
-        togglePassword('edit');
-    } else {
-        router.push({ name: 'BoardEdit', params: { id: props.boardId } });
-    }
 };
 
-// 삭제 버튼
+// 삭제
-const handleDelete = () => {
+const deleteClick = () => {
-    if (props.unknown) {
+    emit('deleteClick', props.unknown);
-        togglePassword('delete');
-    } else {
-        deletePost();
-    }
 };
 
-// 비밀번호 입력 토글
-const togglePassword = (button) => {
-    if (lastClickedButton.value === button) {
-        isPassword.value = !isPassword.value;
-    } else {
-        isPassword.value = true;
-    }
-    lastClickedButton.value = 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;
-    }
-
-    try {
-        const requestData = {
-            LOCBRDPWD: password.value,
-            LOCBRDSEQ: 288
-        }
-
-        const postResponse = await axios.post(`board/${props.boardId}/password`, requestData);
-
-        if (postResponse.data.code === 200 && postResponse.data.data === true) {
-            isPassword.value = false;
-
-            if (lastClickedButton.value === 'edit') {
-                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') {
-                if (isComment) {
-                    console.log("🗑 댓글 삭제 로직 실행");
-                    emit("deleteComment", props.comment.commentId);
-                } else {
-                    console.log("🗑 게시글 삭제 로직 실행");
-                    await deletePost();
-                }
-            }
-            lastClickedButton.value = null;
-        } else {
-            passwordAlert.value = '비밀번호가 일치하지 않습니다.';
-        }
-    } catch (error) {
-       // 401 오류
-       if (error.response && error.response.status === 401) {
-            passwordAlert.value = '비밀번호가 일치하지 않습니다.';
-        } else if (error.response) {
-            alert(`오류 발생: ${error.response.data.message || '서버 오류'}`);
-        } else {
-            alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
-        }
-    }
-};
-
-const deletePost = async () => {
-    if (confirm('정말 삭제하시겠습니까?')) {
-        try {
-            const response = await axios.delete(`board/${props.boardId}`, {
-                data: { LOCBRDSEQ: props.boardId }
-            });
-
-            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 handleUpdateReaction = (reactionData) => {
     // console.log("🔥 BoardProfile에서 좋아요/싫어요 이벤트 발생");
     // console.log("📌 게시글 ID:", props.boardId);

src/views/board/BoardView.vue

@@ -14,6 +14,10 @@
                             :commentNum="commentNum"
                             :date="formattedBoardDate"
                             :isLike="false"
+                            :isPassword="isPassword"
+                            @editClick="editClick"
+                            @deleteClick="deleteClick"
+                            @submitPassword="submitPassword"
                             class="pb-6 border-bottom"
                         />
                     </div>
@@ -68,13 +72,27 @@
                         </ul> -->
 
                         <!-- 댓글 입력 영역 -->
-                        <BoardCommentArea :profileName="profileName" :unknown="unknown" @submitComment="handleCommentSubmit"/>
+                        <BoardCommentArea
+                            :profileName="profileName"
+                            :unknown="unknown"
+                            @submitComment="handleCommentSubmit"
+                        />
                         <!-- <BoardCommentArea :profileName="profileName" :unknown="unknown" /> -->
                     </div>
 
                     <!-- 댓글 목록 -->
                     <div class="card-footer">
-                        <BoardCommentList :unknown="unknown" :comments="comments" @updateReaction="handleUpdateReaction" @submitComment="handleCommentReply" />
+                        <BoardCommentList
+                            :unknown="unknown"
+                            :comments="comments"
+                            :isEditTextarea="isEditTextarea"
+                            :isPassword="isPassword"
+                            @editClick="editClick"
+                            @deleteClick="deleteClick"
+                            @submitPassword="submitPassword"
+                            @updateReaction="handleUpdateReaction"
+                            @submitComment="handleCommentReply"
+                        />
                         <Pagination/>
                     </div>
                 </div>
@@ -108,6 +126,7 @@ const attachment = ref(false);
 const comments = ref([]);
 
 const route = useRoute();
+const router = useRouter();
 const currentBoardId = ref(Number(route.params.id));
 const unknown = computed(() => profileName.value === '익명 사용자');
 const currentUserId = ref('김자바'); // 현재 로그인한 사용자 id
@@ -115,6 +134,18 @@ const authorId = ref(null); // 작성자 id
 
 const isAuthor = computed(() => currentUserId.value === authorId.value);
 
+const isEditTextarea = ref({});
+
+const passwordAlert = ref("");
+const isPassword = ref(false);
+const lastClickedButton = ref("");
+
+
+const toggleEdit = (commentId, state) => {
+    console.log(`📝 댓글???? ${commentId} 수정 모드?????: ${state}`);
+    isEditTextarea.value = { ...isEditTextarea.value, [commentId]: state };
+};
+
 // 게시물 상세 데이터 불러오기
 const fetchBoardDetails = async () => {
     try {
@@ -256,6 +287,98 @@ const handleCommentReply = async (reply) => {
     }
 }
 
+const editClick = (unknown) => {
+    console.log('handleEdit 실행됨! unknown', unknown);
+
+    if (unknown) {
+        togglePassword("edit");
+    } else {
+        console.log("🚀 BoardEdit 페이지로 이동! ID:", currentBoardId.value);
+        router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
+    }
+};
+
+const deleteClick = (unknown) => {
+    console.log('handleDelete 실행됨! unknown', unknown);
+    if (unknown) {
+        togglePassword("delete");
+    } else {
+        deletePost();
+    }
+};
+
+const togglePassword = (button) => {
+    if (lastClickedButton.value === button) {
+        isPassword.value = !isPassword.value;
+    } else {
+        isPassword.value = true;
+    }
+    lastClickedButton.value = button;
+};
+
+
+const submitPassword = async (inputPassword) => {
+    if (!inputPassword) {
+        passwordAlert.value = "비밀번호를 입력해주세요.";
+        return;
+    }
+
+    try {
+        const requestData = {
+            LOCBRDPWD: inputPassword,
+            LOCBRDSEQ: 288
+        };
+
+        const postResponse = await axios.post(`board/${currentBoardId.value}/password`, requestData);
+
+        if (postResponse.data.code === 200 && postResponse.data.data === true) {
+            isPassword.value = false;
+
+            if (lastClickedButton.value === "edit") {
+                console.log("🔄 게시글 수정 페이지로 이동");
+                router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
+            } else if (lastClickedButton.value === "delete") {
+                console.log("🗑 게시글 삭제 로직 실행");
+                await deletePost();
+            }
+            lastClickedButton.value = null;
+        } else {
+            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+        }
+    } catch (error) {
+        if (error.response && error.response.status === 401) {
+            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+        } else if (error.response) {
+            alert(`오류 발생: ${error.response.data.message || "서버 오류"}`);
+        } else {
+            alert("네트워크 오류가 발생했습니다. 다시 시도해주세요.");
+        }
+    }
+};
+
+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 formattedDate = (dateString) => {
     if (!dateString) return "날짜 없음";