메인 비밀번호 입력창

src/components/board/BoardProfile.vue

@@ -34,20 +34,6 @@
                 :comment="props.comment"
                 @updateReaction="handleUpdateReaction"
             />
-
-             <!-- 비밀번호 입력창 (익명일 경우) -->
-             <div v-if="isPassword && unknown" class="mt-3">
-                <div class="input-group">
-                    <input
-                        type="password"
-                        class="form-control"
-                        v-model="password"
-                        placeholder="비밀번호 입력"
-                    />
-                    <button class="btn btn-primary" @click="$emit('submitPassword', password)">확인</button>
-                </div>
-                <span v-if="props.passwordAlert" class="invalid-feedback d-block text-start">{{ props.passwordAlert }}</span>
-            </div>
         </div>
     </div>
 </template>
@@ -58,9 +44,6 @@ import DeleteButton from '../button/DeleteBtn.vue';
 import EditButton from '../button/EditBtn.vue';
 import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
 
-// Vue Router 인스턴스
-const password = ref('');
-
 // Props 정의
 const props = defineProps({
     comment: {
@@ -107,18 +90,10 @@ const props = defineProps({
     isLike: {
         type: Boolean,
         default: false,
-    },
-    isPassword: {
-        type: Boolean,
-        default: false,
-    },
-    passwordAlert: {
-        type: String,
-        default: false,
     }
 });
 
-const emit = defineEmits(['togglePasswordInput', 'updateReaction', 'editClick', 'deleteClick', 'updatePasswordAlert']);
+const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
 
 // 수정
 const editClick = () => {

src/views/board/BoardView.vue

@@ -5,22 +5,34 @@
                 <div class="card">
                     <!-- 프로필 헤더 -->
                     <div class="card-header">
-                        <BoardProfile
+                        <div class="pb-5 border-bottom">
-                            :boardId="currentBoardId"
+                            <BoardProfile
-                            :profileName="profileName"
+                                :boardId="currentBoardId"
-                            :unknown="unknown"
+                                :profileName="profileName"
-                            :author="isAuthor"
+                                :unknown="unknown"
-                            :views="views"
+                                :author="isAuthor"
-                            :commentNum="commentNum"
+                                :views="views"
-                            :date="formattedBoardDate"
+                                :commentNum="commentNum"
-                            :isLike="false"
+                                :date="formattedBoardDate"
-                            :isPassword="isPassword"
+                                :isLike="false"
-                            :passwordAlert="passwordAlert"
+                                @editClick="editClick"
-                            @editClick="editClick"
+                                @deleteClick="deleteClick"
-                            @deleteClick="deleteClick"
+                            />
-                            @submitPassword="submitPassword"
+
-                            class="pb-6 border-bottom"
+                            <!-- 비밀번호 입력창 (익명일 경우) -->
-                        />
+                            <div v-if="isPassword && unknown" class="mt-3 w-25">
+                                <div class="input-group">
+                                    <input
+                                        type="password"
+                                        class="form-control"
+                                        v-model="password"
+                                        placeholder="비밀번호 입력"
+                                    />
+                                    <button class="btn btn-primary" @click="submitPassword">확인</button>
+                                </div>
+                                <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
+                            </div>
+                        </div>
                     </div>
                     <!-- 게시글 내용 -->
                     <div class="card-body">
@@ -87,10 +99,8 @@
                             :unknown="unknown"
                             :comments="comments"
                             :isEditTextarea="isEditTextarea"
-                            :isPassword="isPassword"
                             @editClick="editClick"
                             @deleteClick="deleteClick"
-                            @submitPassword="submitPassword"
                             @updateReaction="handleUpdateReaction"
                             @submitComment="handleCommentReply"
                         />
@@ -141,6 +151,7 @@ const isAuthor = computed(() => currentUserId.value === authorId.value);
 
 const isEditTextarea = ref({});
 
+const password = ref('');
 const passwordAlert = ref("");
 const isPassword = ref(false);
 const lastClickedButton = ref("");
@@ -223,18 +234,20 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
 // 댓글 목록 조회
 const fetchComments = async (page  = 1) => {
     try {
-        const { data } = await axios.get(`board/${currentBoardId.value}/comments`, {
+        const response = await axios.get(`board/${currentBoardId.value}/comments`, {
-            params: { LOCBRDSEQ: currentBoardId.value, page }
+            params: {
+                LOCBRDSEQ: currentBoardId.value,
+                page
+            }
         });
-        const { data: replyData } = await axios.get(`board/${currentBoardId.value}/reply`, {
+        // const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
-            params: { LOCBRDSEQ: currentBoardId.value }
+        //     params: { LOCBRDSEQ: currentBoardId.value }
-        });
+        // });
-        console.log("댓글:", data); 
-        console.log("대댓글:", replyData); 
 
-        if (!data?.data?.list) return;
+        console.log("댓글:", response.data); 
+        // console.log("대댓글:", replyResponse.data);
 
-        comments.value = data.data.list.map(comment => ({
+        comments.value = response.data.data.list.map(comment => ({
             commentId: comment.LOCCMTSEQ, // 댓글 ID
             boardId: comment.LOCBRDSEQ,
             parentId: comment.LOCCMTPNT, // 부모 ID
@@ -245,59 +258,21 @@ const fetchComments = async (page  = 1) => {
             children: [] // 대댓글을 담을 배열
         }));
 
-        let replies = replyData.data.map(reply => ({
-            commentId: reply.LOCCMTSEQ, // 대댓글 ID
-            boardId: reply.LOCBRDSEQ,
-            parentId: reply.LOCCMTPNT, // 부모 댓글 ID
-            author: reply.author || "익명 사용자",
-            content: reply.LOCCMTRPY,
-            createdAtRaw: new Date(reply.LOCCMTRDT), // 정렬용
-            createdAt: formattedDate(reply.LOCCMTRDT) // 표시용
-        }));
-
-        // let commentMap = {};
-        // let rootComments = [];
-
-        // 최상위 댓글 저장
-        // allComments.forEach(comment => {
-        //     commentMap[comment.commentId] = comment;
-        // });
-
-        // 대댓글을 부모 댓글에 추가
-        // replies.forEach(reply => {
-        //     if (commentMap[reply.parentId]) {
-        //         commentMap[reply.parentId].children.push(reply);
-        //     } else {
-        //         console.warn("부모 댓글을 찾을 수 없는 대댓글:", reply);
-        //     }
-        // });
-
-        // rootComments = allComments.filter(comment => comment.parentId === 1);
-
-        // 정렬
-        // rootComments.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
-        // rootComments.forEach(comment => {
-        //     comment.children.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
-        // });
-
-        // comments.value = rootComments;
-
-        // console.log("변환된 comments 데이터:", comments.value);
 
         pagination.value = {
             ...pagination.value,
-            currentPage: data.data.pageNum,  // 현재 페이지 번호
+            currentPage: response.data.data.pageNum,  // 현재 페이지 번호
-            pages: data.data.pages,  // 전체 페이지 수
+            pages: response.data.data.pages,  // 전체 페이지 수
-            prePage: data.data.prePage, // 이전 페이지
+            prePage: response.data.data.prePage, // 이전 페이지
-            nextPage: data.data.nextPage, // 다음 페이지
+            nextPage: response.data.data.nextPage, // 다음 페이지
-            isFirstPage: data.data.isFirstPage, // 첫 페이지 여부
+            isFirstPage: response.data.data.isFirstPage, // 첫 페이지 여부
-            isLastPage: data.data.isLastPage, // 마지막 페이지 여부
+            isLastPage: response.data.data.isLastPage, // 마지막 페이지 여부
-            hasPreviousPage: data.data.hasPreviousPage, // 이전 페이지 존재 여부
+            hasPreviousPage: response.data.data.hasPreviousPage, // 이전 페이지 존재 여부
-            hasNextPage: data.data.hasNextPage, // 다음 페이지 존재 여부
+            hasNextPage: response.data.data.hasNextPage, // 다음 페이지 존재 여부
-            navigatePages: data.data.navigatePages, // 몇 개의 페이지 버튼을 보여줄 것인지
+            navigatePages: response.data.data.navigatePages, // 몇 개의 페이지 버튼을 보여줄 것인지
-            navigatepageNums: data.data.navigatepageNums, // 실제 페이지 번호 목록
+            navigatepageNums: response.data.data.navigatepageNums, // 실제 페이지 번호 목록
-            navigateFirstPage: data.data.navigateFirstPage, // 페이지네이션에서 첫 페이지 번호
+            navigateFirstPage: response.data.data.navigateFirstPage, // 페이지네이션에서 첫 페이지 번호
-            navigateLastPage: data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
+            navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
         };
 
     } catch (error) {
@@ -370,24 +345,24 @@ const togglePassword = (button) => {
 };
 
 
-const submitPassword = async (inputPassword) => {
+const submitPassword = async () => {
-    console.log(inputPassword)
+    if (!password.value) {
-    if (!inputPassword) {
         passwordAlert.value = "비밀번호를 입력해주세요.";
         return;
     }
 
+    console.log("📌 요청 시작: submitPassword 실행됨");
+
     try {
-        const requestData = {
+        const response = await axios.post(`board/${currentBoardId.value}/password`, {
-            LOCBRDPWD: inputPassword,
+            LOCBRDPWD: password.value,
-            LOCBRDSEQ: 288
+            LOCBRDSEQ: 288, // 나중에 현재 게시글 ID 사용해야함
-        };
+        });
 
-        const postResponse = await axios.post(`board/${currentBoardId.value}/password`, requestData);
+        if (response.data.code === 200 && response.data.data === true) {
-
+            password.value = '';
-        if (postResponse.data.code === 200 && postResponse.data.data === true) {
+            // passwordAlert.value = "";
             isPassword.value = false;
-            passwordAlert.value = "";
 
             if (lastClickedButton.value === "edit") {
                 router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
@@ -396,15 +371,25 @@ const submitPassword = async (inputPassword) => {
             }
             lastClickedButton.value = null;
         } else {
+            console.log('비밀번호 틀렸음둥')
             passwordAlert.value = "비밀번호가 일치하지 않습니다.";
         }
     } catch (error) {
-        if (error.response && error.response.status === 401) {
+        if (error.response) {
-            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+            console.error("📌 서버 응답 상태 코드:", error.response.status);
-        } else if (error.response) {
+            console.error("📌 서버 응답 데이터:", error.response.data);
-            alert(`오류 발생: ${error.response.data.message || "서버 오류"}`);
+
+            if (error.response.status === 401) {
+                passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+            } else {
+                passwordAlert.value = error.response.data?.message || "서버 오류가 발생했습니다.";
+            }
+        } else if (error.request) {
+            console.error("📌 요청이 서버에 도달하지 못함:", error.request);
+            passwordAlert.value = "네트워크 오류가 발생했습니다. 다시 시도해주세요.";
         } else {
-            alert("네트워크 오류가 발생했습니다. 다시 시도해주세요.");
+            console.error("📌 요청 설정 중 오류 발생:", error.message);
+            passwordAlert.value = "요청 중 알 수 없는 오류가 발생했습니다.";
         }
     }
 };