diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue index 10d9a31..844a5a1 100644 --- a/src/views/board/BoardView.vue +++ b/src/views/board/BoardView.vue @@ -157,7 +157,7 @@ const toastStore = useToastStore(); const currentBoardId = ref(Number(route.params.id)); const unknown = computed(() => profileName.value === '익명'); - const currentUserId = computed(() => userStore.user.id); // 현재 로그인한 사용자 id + const currentUserId = computed(() => userStore?.user?.id); // 현재 로그인한 사용자 id const authorId = ref(''); // 작성자 id const isAuthor = computed(() => currentUserId.value === authorId.value); @@ -233,24 +233,20 @@ }; // 게시물 상세 데이터 불러오기 const fetchBoardDetails = async () => { - try { - const response = await axios.get(`board/${currentBoardId.value}`); - const data = response.data.data; + const response = await axios.get(`board/${currentBoardId.value}`); + const data = response.data.data; - profileName.value = data.author || '익명'; - authorId.value = data.authorId; - boardTitle.value = data.title || '제목 없음'; - boardContent.value = data.content || ''; - date.value = data.date || ''; - views.value = data.cnt || 0; - likes.value = data.likeCount || 0; - dislikes.value = data.dislikeCount || 0; - attachment.value = data.hasAttachment || null; - commentNum.value = data.commentCount || 0; - attachments.value = data.attachments || []; - } catch (error) { - alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.'); - } + profileName.value = data.author || '익명'; + authorId.value = data.authorId; + boardTitle.value = data.title || '제목 없음'; + boardContent.value = data.content || ''; + date.value = data.date || ''; + views.value = data.cnt || 0; + likes.value = data.likeCount || 0; + dislikes.value = data.dislikeCount || 0; + attachment.value = data.hasAttachment || null; + commentNum.value = data.commentCount || 0; + attachments.value = data.attachments || []; }; // 좋아요, 싫어요 @@ -280,97 +276,89 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => { if (!commentId) return; // 댓글 ID가 없으면 실행 안 함 - try { - const response = await axios.post(`/board/${boardId}/${commentId}/reaction`, { - LOCBRDSEQ: boardId, // 게시글 ID - LOCCMTSEQ: commentId, // 댓글 ID - LOCGOBGOD: isLike ? 'T' : 'F', - LOCGOBBAD: isDislike ? 'T' : 'F', - }); + const response = await axios.post(`/board/${boardId}/${commentId}/reaction`, { + LOCBRDSEQ: boardId, // 게시글 ID + LOCCMTSEQ: commentId, // 댓글 ID + LOCGOBGOD: isLike ? 'T' : 'F', + LOCGOBBAD: isDislike ? 'T' : 'F', + }); - await fetchComments(); - } catch (error) { - alert('오류가 발생했습니다.'); - } + await fetchComments(); }; // 댓글 목록 조회 const fetchComments = async (page = 1) => { - try { - // 댓글 - const response = 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 commentsList = response.data.data.list.map(comment => ({ + commentId: comment.LOCCMTSEQ, // 댓글 ID + boardId: comment.LOCBRDSEQ, + parentId: comment.LOCCMTPNT, // 부모 ID + author: comment.author || '익명', + authorId: comment.authorId, + content: comment.LOCCMTRPY, + likeCount: comment.likeCount || 0, + dislikeCount: comment.dislikeCount || 0, + likeClicked: comment.likeClicked || false, + dislikeClicked: comment.dislikeClicked || false, + createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용 + createdAt: formattedDate(comment.LOCCMTRDT), // 표시용 + children: [], // 대댓글을 담을 배열 + updateAtRaw: comment.LOCCMTUDT, + })); + + commentsList.sort((a, b) => b.createdAtRaw - a.createdAtRaw); + + for (const comment of commentsList) { + if (!comment.commentId) continue; + + const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, { + params: { LOCCMTPNT: comment.commentId }, }); - const commentsList = response.data.data.list.map(comment => ({ - commentId: comment.LOCCMTSEQ, // 댓글 ID - boardId: comment.LOCBRDSEQ, - parentId: comment.LOCCMTPNT, // 부모 ID - author: comment.author || '익명', - authorId: comment.authorId, - content: comment.LOCCMTRPY, - likeCount: comment.likeCount || 0, - dislikeCount: comment.dislikeCount || 0, - likeClicked: comment.likeClicked || false, - dislikeClicked: comment.dislikeClicked || false, - createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용 - createdAt: formattedDate(comment.LOCCMTRDT), // 표시용 - children: [], // 대댓글을 담을 배열 - updateAtRaw: comment.LOCCMTUDT, - })); - commentsList.sort((a, b) => b.createdAtRaw - a.createdAtRaw); - - for (const comment of commentsList) { - if (!comment.commentId) continue; - - const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, { - params: { LOCCMTPNT: comment.commentId }, - }); - - if (replyResponse.data.data) { - comment.children = replyResponse.data.data.map(reply => ({ - author: reply.author || '익명', - authorId: reply.authorId, - commentId: reply.LOCCMTSEQ, - boardId: reply.LOCBRDSEQ, - parentId: reply.LOCCMTPNT, // 부모 댓글 ID - content: reply.LOCCMTRPY || '내용 없음', - createdAtRaw: new Date(reply.LOCCMTRDT), - createdAt: formattedDate(reply.LOCCMTRDT), - likeCount: reply.likeCount || 0, - dislikeCount: reply.dislikeCount || 0, - likeClicked: false, - dislikeClicked: false, - })); - } else { - comment.children = []; // 대댓글이 없으면 빈 배열로 초기화 - } + if (replyResponse.data.data) { + comment.children = replyResponse.data.data.map(reply => ({ + author: reply.author || '익명', + authorId: reply.authorId, + commentId: reply.LOCCMTSEQ, + boardId: reply.LOCBRDSEQ, + parentId: reply.LOCCMTPNT, // 부모 댓글 ID + content: reply.LOCCMTRPY || '내용 없음', + createdAtRaw: new Date(reply.LOCCMTRDT), + createdAt: formattedDate(reply.LOCCMTRDT), + likeCount: reply.likeCount || 0, + dislikeCount: reply.dislikeCount || 0, + likeClicked: false, + dislikeClicked: false, + })); + } else { + comment.children = []; // 대댓글이 없으면 빈 배열로 초기화 } - - // 최종적으로 댓글 목록 업데이트 - comments.value = commentsList; - - pagination.value = { - ...pagination.value, - 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) { - alert('오류가 발생했습니다.'); } + + // 최종적으로 댓글 목록 업데이트 + comments.value = commentsList; + + pagination.value = { + ...pagination.value, + 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, // 페이지네이션에서 마지막 페이지 번호 + }; }; // 댓글 작성 @@ -453,7 +441,7 @@ // 게시글 삭제 버튼 클릭 const deleteClick = unknown => { - if (unknown) { + if (unknown.value) { togglePassword('delete'); } else { deletePost();