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:
kimdaae328 2025-02-18 00:48:22 +09:00
parent a90bdab5a0
commit c65fc7f3a5
4 changed files with 166 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/board/BoardComment.vue
View File

@ -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 = () => {

18
src/components/board/BoardCommentList.vue
View File

@ -8,6 +8,10 @@
<BoardComment
:unknown="unknown"
:comment="comment"
:isPassword="isPassword"
@editClick="editClick"
@deleteClick="deleteClick"
@submitPassword="submitPassword"
@submitComment="submitComment"
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId)"
/>
@ -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);
};
</script>

127
src/components/board/BoardProfile.vue
View File

@ -23,8 +23,8 @@
<div class="ms-auto text-end">
<!-- 수정, 삭제 버튼 -->
<template v-if="author || showDetail">
<EditButton @click="handleEdit" />
<DeleteButton @click="handleDelete" />
<EditButton @click.stop="editClick" />
<DeleteButton @click.stop="deleteClick" />
</template>
<!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
@ -44,7 +44,7 @@
v-model="password"
placeholder="비밀번호 입력"
/>
<button class="btn btn-primary" @click="handleSubmit">확인</button>
<button class="btn btn-primary" @click="$emit('submitPassword', password)">확인</button>
</div>
<span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
</div>
@ -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);

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

@ -14,6 +14,10 @@
:commentNum="commentNum"
:date="formattedBoardDate"
:isLike="false"
:isPassword="isPassword"
@editClick="editClick"
@deleteClick="deleteClick"
@submitPassword="submitPassword"
class="pb-6 border-bottom"
/>
</div>
@ -68,13 +72,27 @@
</ul> -->
<!-- 댓글 입력 영역 -->
<BoardCommentArea :profileName="profileName" :unknown="unknown" @submitComment="handleCommentSubmit"/>
<BoardCommentArea
:profileName="profileName"
:unknown="unknown"
@submitComment="handleCommentSubmit"
/>
<!-- <BoardCommentArea :profileName="profileName" :unknown="unknown" /> -->
</div>
<!-- 댓글 목록 -->
<div class="card-footer">
<BoardCommentList :unknown="unknown" :comments="comments" @updateReaction="handleUpdateReaction" @submitComment="handleCommentReply" />
<BoardCommentList
:unknown="unknown"
:comments="comments"
:isEditTextarea="isEditTextarea"
:isPassword="isPassword"
@editClick="editClick"
@deleteClick="deleteClick"
@submitPassword="submitPassword"
@updateReaction="handleUpdateReaction"
@submitComment="handleCommentReply"
/>
<Pagination/>
</div>
</div>
@ -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 "날짜 없음";