From c65fc7f3a508a77b395dfd91b726e4d3a982b630 Mon Sep 17 00:00:00 2001 From: kimdaae328 Date: Tue, 18 Feb 2025 00:48:22 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=EC=B0=BD=20-=20=EB=B6=80=EB=AA=A8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=98=AE=EA=B9=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/board/BoardComment.vue | 15 ++- src/components/board/BoardCommentList.vue | 18 ++- src/components/board/BoardProfile.vue | 127 +++------------------- src/views/board/BoardView.vue | 127 +++++++++++++++++++++- 4 files changed, 166 insertions(+), 121 deletions(-) diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue index fdecf07..46104a5 100644 --- a/src/components/board/BoardComment.vue +++ b/src/components/board/BoardComment.vue @@ -9,6 +9,10 @@ :showDetail="false" :author="true" :isLike="!isLike" + :isPassword="isPassword" + @editClick="editClick" + @deleteClick="deleteClick" + @submitPassword="submitPassword" @updateReaction="handleUpdateReaction" @toggleEdit="emit('toggleEdit', comment.commentId, true)" /> @@ -88,10 +92,14 @@ const props = defineProps({ type: Boolean, default: false }, + isPassword: { + type: Boolean, + default: false, +}, }); // emits 정의 -const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit']); +const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit', 'editClick']); // 댓글 입력 창 토글 const isComment = ref(false); @@ -115,6 +123,11 @@ const handleUpdateReaction = (reactionData) => { }); }; +// 수정 +const editClick = (data) => { + emit('editClick', data); +}; + // 수정 const editedContent = ref(props.comment.content); const submitEdit = () => { diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue index c3a94f5..9faea9a 100644 --- a/src/components/board/BoardCommentList.vue +++ b/src/components/board/BoardCommentList.vue @@ -8,6 +8,10 @@ @@ -30,9 +34,13 @@ const props = defineProps({ type: Boolean, default: true, }, + isPassword: { + type: Boolean, + default: false, + }, }); -const emit = defineEmits(['submitComment', 'updateReaction']); +const emit = defineEmits(['submitComment', 'updateReaction', 'editClick']); const submitComment = (replyData) => { emit('submitComment', replyData); @@ -42,10 +50,6 @@ const handleUpdateReaction = (reactionData, commentId) => { // console.log('📢 BoardCommentList에서 이벤트 수신:', reactionData); // console.log('📌 전달할 댓글 ID>>>>:', commentId); - // if (commentId) { - // console.error("❌"); - // } - const updatedReactionData = { ...reactionData, commentId: commentId @@ -56,4 +60,8 @@ const handleUpdateReaction = (reactionData, commentId) => { emit('updateReaction', updatedReactionData); } +const editClick = (data) => { + emit('editClick', data); +}; + diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue index 92ea73c..89b37d5 100644 --- a/src/components/board/BoardProfile.vue +++ b/src/components/board/BoardProfile.vue @@ -23,8 +23,8 @@
@@ -44,7 +44,7 @@ v-model="password" placeholder="비밀번호 입력" /> - +
{{ passwordAlert }} @@ -61,11 +61,7 @@ import EditButton from '../button/EditBtn.vue'; import BoardRecommendBtn from '../button/BoardRecommendBtn.vue'; // Vue Router 인스턴스 -const router = useRouter(); -const isPassword = ref(false); const password = ref(''); -const passwordAlert = ref(false); -const lastClickedButton = ref(''); // Props 정의 const props = defineProps({ @@ -113,120 +109,25 @@ const props = defineProps({ isLike: { type: Boolean, default: false, + }, + isPassword: { + type: Boolean, + default: false, } }); -const emit = defineEmits(['togglePasswordInput', 'updateReaction']); +const emit = defineEmits(['togglePasswordInput', 'updateReaction', 'editClick', 'deleteClick']); -// 수정 버튼 -const handleEdit = () => { - if (props.unknown) { - togglePassword('edit'); - } else { - router.push({ name: 'BoardEdit', params: { id: props.boardId } }); - } +// 수정 +const editClick = () => { + emit('editClick', props.unknown); }; -// 삭제 버튼 -const handleDelete = () => { - if (props.unknown) { - togglePassword('delete'); - } else { - deletePost(); - } +// 삭제 +const deleteClick = () => { + emit('deleteClick', props.unknown); }; -// 비밀번호 입력 토글 -const togglePassword = (button) => { - if (lastClickedButton.value === button) { - isPassword.value = !isPassword.value; - } else { - isPassword.value = true; - } - lastClickedButton.value = button; -}; - -// 비밀번호 확인 -const handleSubmit = async () => { - const isComment = !!props.comment?.commentId; - - console.log(isComment ? "📝 댓글 비밀번호 확인 버튼 클릭!" : "📄 게시글 비밀번호 확인 버튼 클릭!"); - console.log("📌 게시글 ID:", props.boardId); - console.log("📝 댓글 ID:", isComment ? props.comment.commentId : "해당 없음"); - - if (!password.value) { - passwordAlert.value = '비밀번호를 입력해주세요.'; - return; - } - - try { - const requestData = { - LOCBRDPWD: password.value, - LOCBRDSEQ: 288 - } - - const postResponse = await axios.post(`board/${props.boardId}/password`, requestData); - - if (postResponse.data.code === 200 && postResponse.data.data === true) { - isPassword.value = false; - - if (lastClickedButton.value === 'edit') { - if (isComment) { - console.log("🔄 댓글 수정 로직 실행"); - emit("editComment", props.comment.commentId); - } else { - console.log("🔄 게시글 수정 페이지로 이동"); - router.push({ name: 'BoardEdit', params: { id: props.boardId } }); - } - } else if (lastClickedButton.value === 'delete') { - if (isComment) { - console.log("🗑 댓글 삭제 로직 실행"); - emit("deleteComment", props.comment.commentId); - } else { - console.log("🗑 게시글 삭제 로직 실행"); - await deletePost(); - } - } - lastClickedButton.value = null; - } else { - passwordAlert.value = '비밀번호가 일치하지 않습니다.'; - } - } catch (error) { - // 401 오류 - if (error.response && error.response.status === 401) { - passwordAlert.value = '비밀번호가 일치하지 않습니다.'; - } else if (error.response) { - alert(`오류 발생: ${error.response.data.message || '서버 오류'}`); - } else { - alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.'); - } - } -}; - -const deletePost = async () => { - if (confirm('정말 삭제하시겠습니까?')) { - try { - const response = await axios.delete(`board/${props.boardId}`, { - data: { LOCBRDSEQ: props.boardId } - }); - - if (response.data.code === 200) { - alert('게시물이 삭제되었습니다.'); - router.push({ name: 'BoardList' }); - } else { - alert('삭제 실패: ' + response.data.message); - } - } catch (error) { - if (error.response) { - alert(`삭제 실패: ${error.response.data.message || '서버 오류'}`); - } else { - alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.'); - } - } - } -}; - - const handleUpdateReaction = (reactionData) => { // console.log("🔥 BoardProfile에서 좋아요/싫어요 이벤트 발생"); // console.log("📌 게시글 ID:", props.boardId); diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue index 5c93b18..885f97b 100644 --- a/src/views/board/BoardView.vue +++ b/src/views/board/BoardView.vue @@ -14,6 +14,10 @@ :commentNum="commentNum" :date="formattedBoardDate" :isLike="false" + :isPassword="isPassword" + @editClick="editClick" + @deleteClick="deleteClick" + @submitPassword="submitPassword" class="pb-6 border-bottom" /> @@ -68,13 +72,27 @@ --> - +
- +
@@ -108,6 +126,7 @@ const attachment = ref(false); const comments = ref([]); const route = useRoute(); +const router = useRouter(); const currentBoardId = ref(Number(route.params.id)); const unknown = computed(() => profileName.value === '익명 사용자'); const currentUserId = ref('김자바'); // 현재 로그인한 사용자 id @@ -115,6 +134,18 @@ const authorId = ref(null); // 작성자 id const isAuthor = computed(() => currentUserId.value === authorId.value); +const isEditTextarea = ref({}); + +const passwordAlert = ref(""); +const isPassword = ref(false); +const lastClickedButton = ref(""); + + +const toggleEdit = (commentId, state) => { + console.log(`📝 댓글???? ${commentId} 수정 모드?????: ${state}`); + isEditTextarea.value = { ...isEditTextarea.value, [commentId]: state }; +}; + // 게시물 상세 데이터 불러오기 const fetchBoardDetails = async () => { try { @@ -256,6 +287,98 @@ const handleCommentReply = async (reply) => { } } +const editClick = (unknown) => { + console.log('handleEdit 실행됨! unknown', unknown); + + if (unknown) { + togglePassword("edit"); + } else { + console.log("🚀 BoardEdit 페이지로 이동! ID:", currentBoardId.value); + router.push({ name: "BoardEdit", params: { id: currentBoardId.value } }); + } +}; + +const deleteClick = (unknown) => { + console.log('handleDelete 실행됨! unknown', unknown); + if (unknown) { + togglePassword("delete"); + } else { + deletePost(); + } +}; + +const togglePassword = (button) => { + if (lastClickedButton.value === button) { + isPassword.value = !isPassword.value; + } else { + isPassword.value = true; + } + lastClickedButton.value = button; +}; + + +const submitPassword = async (inputPassword) => { + if (!inputPassword) { + passwordAlert.value = "비밀번호를 입력해주세요."; + return; + } + + try { + const requestData = { + LOCBRDPWD: inputPassword, + LOCBRDSEQ: 288 + }; + + const postResponse = await axios.post(`board/${currentBoardId.value}/password`, requestData); + + if (postResponse.data.code === 200 && postResponse.data.data === true) { + isPassword.value = false; + + if (lastClickedButton.value === "edit") { + console.log("🔄 게시글 수정 페이지로 이동"); + router.push({ name: "BoardEdit", params: { id: currentBoardId.value } }); + } else if (lastClickedButton.value === "delete") { + console.log("🗑 게시글 삭제 로직 실행"); + await deletePost(); + } + lastClickedButton.value = null; + } else { + passwordAlert.value = "비밀번호가 일치하지 않습니다."; + } + } catch (error) { + if (error.response && error.response.status === 401) { + passwordAlert.value = "비밀번호가 일치하지 않습니다."; + } else if (error.response) { + alert(`오류 발생: ${error.response.data.message || "서버 오류"}`); + } else { + alert("네트워크 오류가 발생했습니다. 다시 시도해주세요."); + } + } +}; + +const deletePost = async () => { + if (confirm("정말 삭제하시겠습니까?")) { + try { + const response = await axios.delete(`board/${currentBoardId.value}`, { + data: { LOCBRDSEQ: currentBoardId.value } + }); + + if (response.data.code === 200) { + alert("게시물이 삭제되었습니다."); + router.push({ name: "BoardList" }); + } else { + alert("삭제 실패: " + response.data.message); + } + } catch (error) { + if (error.response) { + alert(`삭제 실패: ${error.response.data.message || "서버 오류"}`); + } else { + alert("네트워크 오류가 발생했습니다. 다시 시도해주세요."); + } + } + } +}; + // 날짜 const formattedDate = (dateString) => { if (!dateString) return "날짜 없음";