버튼 간격 수정 및 비밀번호입력창 추가
This commit is contained in:
parent
6ac3d587f8
commit
d74c0ddacb
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<button class="btn btn-label-primary btn-icon" @click="toggleText">
|
||||
<button class="btn btn-label-primary btn-icon me-1" @click="toggleText">
|
||||
<i :class="buttonClass"></i>
|
||||
</button>
|
||||
</template>
|
||||
@ -14,16 +14,16 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const buttonClass = ref("bx bx-edit-alt");
|
||||
const buttonClass = ref('bx bx-edit-alt');
|
||||
|
||||
const toggleText = () => {
|
||||
if (props.isToggleEnabled) {
|
||||
buttonClass.value = buttonClass.value === "bx bx-edit-alt" ? "bx bx-x" : "bx bx-edit-alt";
|
||||
buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
|
||||
}
|
||||
};
|
||||
|
||||
const resetButton = () => {
|
||||
buttonClass.value = "bx bx-edit-alt";
|
||||
buttonClass.value = 'bx bx-edit-alt';
|
||||
};
|
||||
|
||||
defineExpose({ resetButton });
|
||||
|
||||
@ -18,6 +18,21 @@
|
||||
@editClick="editClick"
|
||||
@deleteClick="deleteClick"
|
||||
/>
|
||||
|
||||
<!-- 비밀번호 입력창 (익명일 경우) -->
|
||||
<div v-if="isPassword && unknown" class="mt-3 w-25 ms-auto">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
v-model="password"
|
||||
placeholder="비밀번호 입력"
|
||||
@input="password = password.replace(/\s/g, '')"
|
||||
/>
|
||||
<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>
|
||||
|
||||
@ -31,17 +46,18 @@
|
||||
|
||||
<!-- 첨부파일 다운로드 버튼 -->
|
||||
<div v-if="attachments.length" class="btn-group">
|
||||
<button type="button" class="btn btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-label-secondary dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i class="fa-solid fa-download me-2"></i>
|
||||
첨부파일 ({{ attachments.length }}개)
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li v-for="(attachment, index) in attachments" :key="index">
|
||||
<a
|
||||
class="dropdown-item"
|
||||
href="#"
|
||||
@click.prevent="downloadFile(attachment)"
|
||||
>
|
||||
<a class="dropdown-item" href="#" @click.prevent="downloadFile(attachment)">
|
||||
{{ attachment.originalName }}.{{ attachment.extension }}
|
||||
</a>
|
||||
</li>
|
||||
@ -50,7 +66,7 @@
|
||||
</div>
|
||||
|
||||
<!-- HTML 콘텐츠 렌더링 -->
|
||||
<div class="board-content text-body" style="line-height: 1.6;" v-html="$common.contentToHtml(boardContent)"></div>
|
||||
<div class="board-content text-body" style="line-height: 1.6" v-html="$common.contentToHtml(boardContent)"></div>
|
||||
|
||||
<!-- 좋아요 버튼 -->
|
||||
<div class="row justify-content-center my-10">
|
||||
@ -97,11 +113,7 @@
|
||||
@submitEdit="handleSubmitEdit"
|
||||
@update:password="updatePassword"
|
||||
/>
|
||||
<Pagination
|
||||
v-if="pagination.pages"
|
||||
v-bind="pagination"
|
||||
@update:currentPage="handlePageChange"
|
||||
/>
|
||||
<Pagination v-if="pagination.pages" v-bind="pagination" @update:currentPage="handlePageChange" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -150,18 +162,18 @@ const commentsWithAuthStatus = computed(() => {
|
||||
children: comment.children.map(reply => ({
|
||||
...reply,
|
||||
isCommentAuthor: reply.authorId === currentUserId.value,
|
||||
}))
|
||||
})),
|
||||
}));
|
||||
return updatedComments;
|
||||
});
|
||||
|
||||
const attachments = ref([]);
|
||||
// 첨부파일 다운로드 URL 생성
|
||||
const downloadFile = async (attachment) => {
|
||||
const downloadFile = async attachment => {
|
||||
try {
|
||||
const response = await axios.get(`board/download`, {
|
||||
params: { path: attachment.path },
|
||||
responseType: 'blob'
|
||||
responseType: 'blob',
|
||||
});
|
||||
|
||||
// Blob에서 파일 다운로드 링크 생성
|
||||
@ -179,21 +191,19 @@ const downloadFile = async (attachment) => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const password = ref('');
|
||||
const passwordAlert = ref("");
|
||||
const passwordCommentAlert = ref("");
|
||||
const passwordAlert = ref('');
|
||||
const passwordCommentAlert = ref('');
|
||||
const isPassword = ref(false);
|
||||
const isCommentPassword = ref(false);
|
||||
const currentPasswordCommentId = ref(null);
|
||||
const lastClickedButton = ref("");
|
||||
const lastCommentClickedButton = ref("");
|
||||
const lastClickedButton = ref('');
|
||||
const lastCommentClickedButton = ref('');
|
||||
const isEditTextarea = ref(false);
|
||||
const isDeleted = ref(true);
|
||||
const commentAlert = ref('');
|
||||
|
||||
const updatePassword = (newPassword) => {
|
||||
const updatePassword = newPassword => {
|
||||
password.value = newPassword;
|
||||
};
|
||||
|
||||
@ -209,17 +219,15 @@ const pagination = ref({
|
||||
navigatePages: 10,
|
||||
navigatepageNums: [1],
|
||||
navigateFirstPage: 1,
|
||||
navigateLastPage: 1
|
||||
navigateLastPage: 1,
|
||||
});
|
||||
|
||||
|
||||
// 게시물 상세 데이터 불러오기
|
||||
const fetchBoardDetails = async () => {
|
||||
try {
|
||||
const response = await axios.get(`board/${currentBoardId.value}`);
|
||||
const data = response.data.data;
|
||||
|
||||
|
||||
profileName.value = data.author || '익명';
|
||||
|
||||
authorId.value = data.authorId;
|
||||
@ -232,7 +240,6 @@ const fetchBoardDetails = async () => {
|
||||
attachment.value = data.hasAttachment || null;
|
||||
commentNum.value = data.commentCount || 0;
|
||||
attachments.value = data.attachments || [];
|
||||
|
||||
} catch (error) {
|
||||
alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
|
||||
}
|
||||
@ -245,7 +252,7 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
|
||||
LOCBRDSEQ: boardId, // 게시글 id
|
||||
LOCCMTSEQ: commentId, //댓글 id
|
||||
LOCGOBGOD: isLike ? 'T' : 'F',
|
||||
LOCGOBBAD: isDislike ? 'T' : 'F'
|
||||
LOCGOBBAD: isDislike ? 'T' : 'F',
|
||||
});
|
||||
|
||||
const response = await axios.get(`board/${boardId}`);
|
||||
@ -256,13 +263,11 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
|
||||
|
||||
likeClicked.value = isLike;
|
||||
dislikeClicked.value = isDislike;
|
||||
|
||||
} catch (error) {
|
||||
alert('오류가 발생했습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 대댓글 좋아요
|
||||
const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => {
|
||||
if (!commentId) return; // 댓글 ID가 없으면 실행 안 함
|
||||
@ -272,11 +277,10 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
|
||||
LOCBRDSEQ: boardId, // 게시글 ID
|
||||
LOCCMTSEQ: commentId, // 댓글 ID
|
||||
LOCGOBGOD: isLike ? 'T' : 'F',
|
||||
LOCGOBBAD: isDislike ? 'T' : 'F'
|
||||
LOCGOBBAD: isDislike ? 'T' : 'F',
|
||||
});
|
||||
|
||||
await fetchComments();
|
||||
|
||||
} catch (error) {
|
||||
alert('오류가 발생했습니다.');
|
||||
}
|
||||
@ -289,8 +293,8 @@ const fetchComments = async (page = 1) => {
|
||||
const response = await axios.get(`board/${currentBoardId.value}/comments`, {
|
||||
params: {
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
page
|
||||
}
|
||||
page,
|
||||
},
|
||||
});
|
||||
const commentsList = response.data.data.list.map(comment => ({
|
||||
commentId: comment.LOCCMTSEQ, // 댓글 ID
|
||||
@ -307,7 +311,6 @@ const fetchComments = async (page = 1) => {
|
||||
createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
|
||||
children: [], // 대댓글을 담을 배열
|
||||
updateAtRaw: comment.LOCCMTUDT,
|
||||
|
||||
}));
|
||||
|
||||
commentsList.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
|
||||
@ -316,7 +319,7 @@ const fetchComments = async (page = 1) => {
|
||||
if (!comment.commentId) continue;
|
||||
|
||||
const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
|
||||
params: { LOCCMTPNT: comment.commentId }
|
||||
params: { LOCCMTPNT: comment.commentId },
|
||||
});
|
||||
|
||||
if (replyResponse.data.data) {
|
||||
@ -326,13 +329,13 @@ const fetchComments = async (page = 1) => {
|
||||
commentId: reply.LOCCMTSEQ,
|
||||
boardId: reply.LOCBRDSEQ,
|
||||
parentId: reply.LOCCMTPNT, // 부모 댓글 ID
|
||||
content: reply.LOCCMTRPY || "내용 없음",
|
||||
content: reply.LOCCMTRPY || '내용 없음',
|
||||
createdAtRaw: new Date(reply.LOCCMTRDT),
|
||||
createdAt: formattedDate(reply.LOCCMTRDT),
|
||||
likeCount: reply.likeCount || 0,
|
||||
dislikeCount: reply.dislikeCount || 0,
|
||||
likeClicked: false,
|
||||
dislikeClicked: false
|
||||
dislikeClicked: false,
|
||||
}));
|
||||
} else {
|
||||
comment.children = []; // 대댓글이 없으면 빈 배열로 초기화
|
||||
@ -355,32 +358,30 @@ const fetchComments = async (page = 1) => {
|
||||
navigatePages: response.data.data.navigatePages, // 몇 개의 페이지 버튼을 보여줄 것인지
|
||||
navigatepageNums: response.data.data.navigatepageNums, // 실제 페이지 번호 목록
|
||||
navigateFirstPage: response.data.data.navigateFirstPage, // 페이지네이션에서 첫 페이지 번호
|
||||
navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
|
||||
navigateLastPage: response.data.data.navigateLastPage, // 페이지네이션에서 마지막 페이지 번호
|
||||
};
|
||||
|
||||
|
||||
} catch (error) {
|
||||
alert('오류가 발생했습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
// 댓글 작성
|
||||
const handleCommentSubmit = async (data) => {
|
||||
const handleCommentSubmit = async data => {
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { comment, password, isCheck } = data;
|
||||
|
||||
if (!comment || comment.trim() === "") {
|
||||
if (!comment || comment.trim() === '') {
|
||||
commentAlert.value = '댓글을 입력해주세요.';
|
||||
return;
|
||||
} else {
|
||||
commentAlert.value = '';
|
||||
}
|
||||
|
||||
if (unknown.value && isCheck && (!password || password.trim() === "")) {
|
||||
passwordAlert.value = "비밀번호를 입력해야 합니다.";
|
||||
if (unknown.value && isCheck && (!password || password.trim() === '')) {
|
||||
passwordAlert.value = '비밀번호를 입력해야 합니다.';
|
||||
return;
|
||||
}
|
||||
|
||||
@ -390,7 +391,7 @@ const handleCommentSubmit = async (data) => {
|
||||
LOCCMTRPY: comment,
|
||||
LOCCMTPWD: isCheck ? password : '',
|
||||
LOCCMTPNT: 1,
|
||||
LOCBRDTYP: isCheck ? "300102" : null
|
||||
LOCBRDTYP: isCheck ? '300102' : null,
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
@ -398,22 +399,22 @@ const handleCommentSubmit = async (data) => {
|
||||
commentAlert.value = '';
|
||||
await fetchComments();
|
||||
} else {
|
||||
alert("댓글 작성을 실패했습니다.")
|
||||
alert('댓글 작성을 실패했습니다.');
|
||||
}
|
||||
} catch (error) {
|
||||
alert("오류가 발생했습니다.")
|
||||
alert('오류가 발생했습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
// 대댓글 추가
|
||||
const handleCommentReply = async (reply) => {
|
||||
const handleCommentReply = async reply => {
|
||||
try {
|
||||
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
LOCCMTRPY: reply.comment,
|
||||
LOCCMTPWD: reply.password || null,
|
||||
LOCCMTPNT: reply.parentId,
|
||||
LOCBRDTYP: reply.isCheck ? "300102" : null
|
||||
LOCBRDTYP: reply.isCheck ? '300102' : null,
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
@ -425,27 +426,27 @@ const handleCommentReply = async (reply) => {
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.response) {
|
||||
alert("오류가 발생했습니다.");
|
||||
}
|
||||
alert("오류가 발생했습니다.");
|
||||
alert('오류가 발생했습니다.');
|
||||
}
|
||||
alert('오류가 발생했습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
// 게시글 수정 버튼 클릭
|
||||
const editClick = (unknown) => {
|
||||
const editClick = unknown => {
|
||||
const isUnknown = unknown?.unknown ?? false;
|
||||
|
||||
if (isUnknown) {
|
||||
togglePassword("edit");
|
||||
togglePassword('edit');
|
||||
} else {
|
||||
router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
|
||||
router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
|
||||
}
|
||||
};
|
||||
|
||||
// 게시글 삭제 버튼 클릭
|
||||
const deleteClick = (unknown) => {
|
||||
const deleteClick = unknown => {
|
||||
if (unknown) {
|
||||
togglePassword("delete");
|
||||
togglePassword('delete');
|
||||
} else {
|
||||
deletePost();
|
||||
}
|
||||
@ -465,7 +466,7 @@ const findCommentById = (commentId, commentsList) => {
|
||||
};
|
||||
|
||||
// 댓글 수정(대댓글 포함)
|
||||
const editComment = (comment) => {
|
||||
const editComment = comment => {
|
||||
password.value = '';
|
||||
passwordCommentAlert.value = '';
|
||||
currentPasswordCommentId.value = null;
|
||||
@ -477,7 +478,7 @@ const editComment = (comment) => {
|
||||
}
|
||||
|
||||
const isMyComment = comment.authorId === currentUserId.value;
|
||||
const isAnonymous = comment.author === "익명";
|
||||
const isAnonymous = comment.author === '익명';
|
||||
|
||||
if (isMyComment) {
|
||||
if (targetComment.isEditTextarea) {
|
||||
@ -501,12 +502,12 @@ const editComment = (comment) => {
|
||||
|
||||
// 비밀번호 입력
|
||||
targetComment.isEditTextarea = false;
|
||||
toggleCommentPassword(comment, "edit");
|
||||
toggleCommentPassword(comment, 'edit');
|
||||
}
|
||||
} else {
|
||||
alert("수정이 불가능합니다");
|
||||
}
|
||||
alert('수정이 불가능합니다');
|
||||
}
|
||||
};
|
||||
|
||||
// 모든 댓글의 수정 창 닫기
|
||||
const closeAllEditTextareas = () => {
|
||||
@ -519,7 +520,7 @@ const closeAllEditTextareas = () => {
|
||||
};
|
||||
|
||||
// 댓글 삭제 버튼 클릭
|
||||
const deleteComment = async (comment) => {
|
||||
const deleteComment = async comment => {
|
||||
const isMyComment = comment.authorId === currentUserId.value;
|
||||
|
||||
if (unknown.value && !isMyComment) {
|
||||
@ -527,7 +528,7 @@ const deleteComment = async (comment) => {
|
||||
comment.isEditTextarea = false;
|
||||
comment.isCommentPassword = true;
|
||||
} else {
|
||||
toggleCommentPassword(comment, "delete");
|
||||
toggleCommentPassword(comment, 'delete');
|
||||
}
|
||||
} else {
|
||||
deleteReplyComment(comment);
|
||||
@ -549,7 +550,7 @@ const toggleCommentPassword = (comment, button) => {
|
||||
lastCommentClickedButton.value = button;
|
||||
};
|
||||
|
||||
const togglePassword = (button) => {
|
||||
const togglePassword = button => {
|
||||
if (lastClickedButton.value === button) {
|
||||
isPassword.value = !isPassword.value;
|
||||
} else {
|
||||
@ -561,7 +562,7 @@ const togglePassword = (button) => {
|
||||
// 게시글 비밀번호 제출
|
||||
const submitPassword = async () => {
|
||||
if (!password.value.trim()) {
|
||||
passwordAlert.value = "비밀번호를 입력해주세요.";
|
||||
passwordAlert.value = '비밀번호를 입력해주세요.';
|
||||
return;
|
||||
}
|
||||
|
||||
@ -575,26 +576,26 @@ const submitPassword = async () => {
|
||||
password.value = '';
|
||||
isPassword.value = false;
|
||||
|
||||
if (lastClickedButton.value === "edit") {
|
||||
router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
|
||||
} else if (lastClickedButton.value === "delete") {
|
||||
if (lastClickedButton.value === 'edit') {
|
||||
router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
|
||||
} else if (lastClickedButton.value === 'delete') {
|
||||
await deletePost();
|
||||
}
|
||||
lastClickedButton.value = null;
|
||||
} else {
|
||||
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
|
||||
passwordAlert.value = '비밀번호가 일치하지 않습니다.';
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.response) {
|
||||
if (error.response.status === 401) {
|
||||
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
|
||||
passwordAlert.value = '비밀번호가 일치하지 않습니다.';
|
||||
} else {
|
||||
passwordAlert.value = error.response.data?.message || "서버 오류가 발생했습니다.";
|
||||
passwordAlert.value = error.response.data?.message || '서버 오류가 발생했습니다.';
|
||||
}
|
||||
} else if (error.request) {
|
||||
passwordAlert.value = "네트워크 오류가 발생했습니다. 다시 시도해주세요.";
|
||||
passwordAlert.value = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
|
||||
} else {
|
||||
passwordAlert.value = "요청 중 알 수 없는 오류가 발생했습니다.";
|
||||
passwordAlert.value = '요청 중 알 수 없는 오류가 발생했습니다.';
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -602,7 +603,7 @@ const submitPassword = async () => {
|
||||
// 댓글 (비밀번호 확인 후)
|
||||
const submitCommentPassword = async (comment, password) => {
|
||||
if (!password) {
|
||||
passwordCommentAlert.value = "비밀번호를 입력해주세요.";
|
||||
passwordCommentAlert.value = '비밀번호를 입력해주세요.';
|
||||
return;
|
||||
}
|
||||
|
||||
@ -615,68 +616,66 @@ const submitCommentPassword = async (comment, password) => {
|
||||
});
|
||||
|
||||
if (response.data.code === 200 && response.data.data === true) {
|
||||
passwordCommentAlert.value = "";
|
||||
passwordCommentAlert.value = '';
|
||||
comment.isCommentPassword = false;
|
||||
|
||||
// 수정
|
||||
if (lastCommentClickedButton.value === "edit") {
|
||||
|
||||
if (lastCommentClickedButton.value === 'edit') {
|
||||
if (targetComment) {
|
||||
// 다른 모든 댓글의 수정 창 닫기
|
||||
closeAllEditTextareas();
|
||||
|
||||
targetComment.isEditTextarea = true;
|
||||
passwordCommentAlert.value = "";
|
||||
passwordCommentAlert.value = '';
|
||||
currentPasswordCommentId.value = null;
|
||||
|
||||
} else {
|
||||
alert("수정 취소를 실패했습니다.");
|
||||
alert('수정 취소를 실패했습니다.');
|
||||
}
|
||||
//삭제
|
||||
} else if (lastCommentClickedButton.value === "delete") {
|
||||
passwordCommentAlert.value = "";
|
||||
} else if (lastCommentClickedButton.value === 'delete') {
|
||||
passwordCommentAlert.value = '';
|
||||
|
||||
deleteReplyComment(comment)
|
||||
deleteReplyComment(comment);
|
||||
}
|
||||
lastCommentClickedButton.value = null;
|
||||
} else {
|
||||
passwordCommentAlert.value = "비밀번호가 일치하지 않습니다.";
|
||||
passwordCommentAlert.value = '비밀번호가 일치하지 않습니다.';
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.response?.status === 401) {
|
||||
passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
|
||||
passwordCommentAlert.value = '비밀번호가 일치하지 않습니다';
|
||||
}
|
||||
passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
|
||||
passwordCommentAlert.value = '비밀번호가 일치하지 않습니다';
|
||||
}
|
||||
};
|
||||
|
||||
// 게시글 삭제
|
||||
const deletePost = async () => {
|
||||
if (confirm("정말 삭제하시겠습니까?")) {
|
||||
if (confirm('정말 삭제하시겠습니까?')) {
|
||||
try {
|
||||
const response = await axios.delete(`board/${currentBoardId.value}`, {
|
||||
data: { LOCBRDSEQ: currentBoardId.value }
|
||||
data: { LOCBRDSEQ: currentBoardId.value },
|
||||
});
|
||||
|
||||
if (response.data.code === 200) {
|
||||
alert("게시물이 삭제되었습니다.");
|
||||
router.push({ name: "BoardList" });
|
||||
alert('게시물이 삭제되었습니다.');
|
||||
router.push({ name: 'BoardList' });
|
||||
} else {
|
||||
alert("삭제 실패: " + response.data.message);
|
||||
alert('삭제 실패: ' + response.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.response) {
|
||||
alert(`삭제 실패: ${error.response.data.message || "서버 오류"}`);
|
||||
alert(`삭제 실패: ${error.response.data.message || '서버 오류'}`);
|
||||
} else {
|
||||
alert("네트워크 오류가 발생했습니다. 다시 시도해주세요.");
|
||||
alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 댓글 삭제 (대댓글 포함)
|
||||
const deleteReplyComment = async (comment) => {
|
||||
if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
|
||||
const deleteReplyComment = async comment => {
|
||||
if (!confirm('정말 이 댓글을 삭제하시겠습니까?')) return;
|
||||
|
||||
const targetComment = findCommentById(comment.commentId, comments.value);
|
||||
|
||||
@ -684,7 +683,7 @@ const deleteReplyComment = async (comment) => {
|
||||
|
||||
try {
|
||||
const response = await axios.delete(`board/comment/${comment.commentId}`, {
|
||||
data: { LOCCMTSEQ: comment.commentId }
|
||||
data: { LOCCMTSEQ: comment.commentId },
|
||||
});
|
||||
|
||||
if (response.data.code === 200) {
|
||||
@ -693,15 +692,15 @@ const deleteReplyComment = async (comment) => {
|
||||
if (targetComment) {
|
||||
// console.log('타겟',targetComment)
|
||||
// ✅ 댓글 내용만 "삭제된 댓글입니다."로 변경하고, 구조는 유지
|
||||
targetComment.content = "댓글이 삭제되었습니다.";
|
||||
targetComment.author = "알 수 없음"; // 익명 처리
|
||||
targetComment.content = '댓글이 삭제되었습니다.';
|
||||
targetComment.author = '알 수 없음'; // 익명 처리
|
||||
targetComment.isDeleted = true; // ✅ 삭제 상태를 추가
|
||||
}
|
||||
} else {
|
||||
alert("댓글 삭제에 실패했습니다.");
|
||||
alert('댓글 삭제에 실패했습니다.');
|
||||
}
|
||||
} catch (error) {
|
||||
alert("댓글 삭제 중 오류가 발생했습니다.");
|
||||
alert('댓글 삭제 중 오류가 발생했습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
@ -710,39 +709,38 @@ const handleSubmitEdit = async (comment, editedContent) => {
|
||||
try {
|
||||
const response = await axios.put(`board/comment/${comment.commentId}`, {
|
||||
LOCCMTSEQ: comment.commentId,
|
||||
LOCCMTRPY: editedContent
|
||||
LOCCMTRPY: editedContent,
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
|
||||
const targetComment = findCommentById(comment.commentId, comments.value);
|
||||
if (targetComment) {
|
||||
targetComment.content = editedContent; // 댓글 내용 업데이트
|
||||
targetComment.isEditTextarea = false; // 수정 모드 닫기
|
||||
} else {
|
||||
alert("수정할 댓글을 찾을 수 없습니다.");
|
||||
alert('수정할 댓글을 찾을 수 없습니다.');
|
||||
}
|
||||
} else {
|
||||
alert("댓글 수정 실패했습니다.");
|
||||
alert('댓글 수정 실패했습니다.');
|
||||
}
|
||||
} catch (error) {
|
||||
alert("댓글 수정 중 오류 발생했습니다.");
|
||||
alert('댓글 수정 중 오류 발생했습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
// 댓글 수정 취소 (대댓글 포함)
|
||||
const handleCancelEdit = (comment) => {
|
||||
const handleCancelEdit = comment => {
|
||||
const targetComment = findCommentById(comment.commentId, comments.value);
|
||||
|
||||
if (targetComment) {
|
||||
targetComment.isEditTextarea = false;
|
||||
} else {
|
||||
alert("수정 취소를 실패했습니다.");
|
||||
alert('수정 취소를 실패했습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
// 페이지 변경
|
||||
const handlePageChange = (page) => {
|
||||
const handlePageChange = page => {
|
||||
if (page !== pagination.value.currentPage) {
|
||||
pagination.value.currentPage = page;
|
||||
fetchComments(page);
|
||||
@ -750,7 +748,7 @@ const handlePageChange = (page) => {
|
||||
};
|
||||
|
||||
// 댓글 삭제 (대댓글 포함)
|
||||
const handleCommentDeleted = (deletedCommentId) => {
|
||||
const handleCommentDeleted = deletedCommentId => {
|
||||
// 댓글 삭제
|
||||
const parentIndex = comments.value.findIndex(comment => comment.commentId === deletedCommentId);
|
||||
|
||||
@ -770,8 +768,8 @@ const handleCommentDeleted = (deletedCommentId) => {
|
||||
};
|
||||
|
||||
// 날짜
|
||||
const formattedDate = (dateString) => {
|
||||
if (!dateString) return "날짜 없음";
|
||||
const formattedDate = dateString => {
|
||||
if (!dateString) return '날짜 없음';
|
||||
const dateObj = new Date(dateString);
|
||||
return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
|
||||
};
|
||||
@ -780,7 +778,7 @@ const formattedBoardDate = computed(() => formattedDate(date.value));
|
||||
|
||||
// 컴포넌트 마운트 시 데이터 로드
|
||||
onMounted(() => {
|
||||
fetchBoardDetails()
|
||||
fetchComments()
|
||||
fetchBoardDetails();
|
||||
fetchComments();
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user