From 5c88ea3115ef370d262599f49a99d33771f2b516 Mon Sep 17 00:00:00 2001 From: kimdaae328 Date: Thu, 20 Feb 2025 12:09:42 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=EB=B9=84=EB=B0=80?= =?UTF-8?q?=EB=B2=88=ED=98=B8=20=EC=9E=85=EB=A0=A5=EC=B0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/board/BoardProfile.vue | 27 +--- src/views/board/BoardView.vue | 171 ++++++++++++-------------- 2 files changed, 79 insertions(+), 119 deletions(-) diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue index 10a52b2..390fc9d 100644 --- a/src/components/board/BoardProfile.vue +++ b/src/components/board/BoardProfile.vue @@ -34,20 +34,6 @@ :comment="props.comment" @updateReaction="handleUpdateReaction" /> - - -
-
- - -
- {{ props.passwordAlert }} -
@@ -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 = () => { diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue index 6caf64f..f40d58e 100644 --- a/src/views/board/BoardView.vue +++ b/src/views/board/BoardView.vue @@ -5,22 +5,34 @@
- +
+ + + +
+
+ + +
+ {{ passwordAlert }} +
+
@@ -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`, { - params: { LOCBRDSEQ: currentBoardId.value, page } + const response = await axios.get(`board/${currentBoardId.value}/comments`, { + params: { + LOCBRDSEQ: currentBoardId.value, + page + } }); - const { data: replyData } = await axios.get(`board/${currentBoardId.value}/reply`, { - params: { LOCBRDSEQ: currentBoardId.value } - }); - console.log("댓글:", data); - console.log("대댓글:", replyData); + // const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, { + // params: { LOCBRDSEQ: currentBoardId.value } + // }); - 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, // 현재 페이지 번호 - pages: data.data.pages, // 전체 페이지 수 - prePage: data.data.prePage, // 이전 페이지 - nextPage: data.data.nextPage, // 다음 페이지 - isFirstPage: data.data.isFirstPage, // 첫 페이지 여부 - isLastPage: data.data.isLastPage, // 마지막 페이지 여부 - hasPreviousPage: data.data.hasPreviousPage, // 이전 페이지 존재 여부 - hasNextPage: data.data.hasNextPage, // 다음 페이지 존재 여부 - navigatePages: data.data.navigatePages, // 몇 개의 페이지 버튼을 보여줄 것인지 - navigatepageNums: data.data.navigatepageNums, // 실제 페이지 번호 목록 - navigateFirstPage: data.data.navigateFirstPage, // 페이지네이션에서 첫 페이지 번호 - navigateLastPage: data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호 + currentPage: response.data.data.pageNum, // 현재 페이지 번호 + pages: response.data.data.pages, // 전체 페이지 수 + prePage: response.data.data.prePage, // 이전 페이지 + nextPage: response.data.data.nextPage, // 다음 페이지 + isFirstPage: response.data.data.isFirstPage, // 첫 페이지 여부 + isLastPage: response.data.data.isLastPage, // 마지막 페이지 여부 + hasPreviousPage: response.data.data.hasPreviousPage, // 이전 페이지 존재 여부 + hasNextPage: response.data.data.hasNextPage, // 다음 페이지 존재 여부 + navigatePages: response.data.data.navigatePages, // 몇 개의 페이지 버튼을 보여줄 것인지 + navigatepageNums: response.data.data.navigatepageNums, // 실제 페이지 번호 목록 + navigateFirstPage: response.data.data.navigateFirstPage, // 페이지네이션에서 첫 페이지 번호 + navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호 }; } catch (error) { @@ -370,24 +345,24 @@ const togglePassword = (button) => { }; -const submitPassword = async (inputPassword) => { - console.log(inputPassword) - if (!inputPassword) { +const submitPassword = async () => { + if (!password.value) { passwordAlert.value = "비밀번호를 입력해주세요."; return; } + console.log("📌 요청 시작: submitPassword 실행됨"); + try { - const requestData = { - LOCBRDPWD: inputPassword, - LOCBRDSEQ: 288 - }; + const response = await axios.post(`board/${currentBoardId.value}/password`, { + LOCBRDPWD: password.value, + LOCBRDSEQ: 288, // 나중에 현재 게시글 ID 사용해야함 + }); - const postResponse = await axios.post(`board/${currentBoardId.value}/password`, requestData); - - if (postResponse.data.code === 200 && postResponse.data.data === true) { + if (response.data.code === 200 && response.data.data === true) { + password.value = ''; + // 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) { - passwordAlert.value = "비밀번호가 일치하지 않습니다."; - } else if (error.response) { - alert(`오류 발생: ${error.response.data.message || "서버 오류"}`); + if (error.response) { + console.error("📌 서버 응답 상태 코드:", error.response.status); + console.error("📌 서버 응답 데이터:", error.response.data); + + 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 = "요청 중 알 수 없는 오류가 발생했습니다."; } } };