localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

버튼 간격 수정 및 비밀번호입력창 추가

Browse Source
This commit is contained in:
nevermoregb 2025-03-06 12:21:50 +09:00
parent 6ac3d587f8
commit d74c0ddacb
2 changed files with 644 additions and 646 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/button/EditBtn.vue
View File

@ -1,5 +1,5 @@
<template> <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> <i :class="buttonClass"></i>
</button> </button>
</template> </template>
@ -14,16 +14,16 @@ const props = defineProps({
}, },
}); });
const buttonClass = ref("bx bx-edit-alt"); const buttonClass = ref('bx bx-edit-alt');
const toggleText = () => { const toggleText = () => {
if (props.isToggleEnabled) { 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 = () => { const resetButton = () => {
buttonClass.value = "bx bx-edit-alt"; buttonClass.value = 'bx bx-edit-alt';
}; };
defineExpose({ resetButton }); defineExpose({ resetButton });

226
src/views/board/BoardView.vue
View File

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