메인 비밀번호 입력창
This commit is contained in:
parent
5ece56e31d
commit
5c88ea3115
@ -34,20 +34,6 @@
|
||||
:comment="props.comment"
|
||||
@updateReaction="handleUpdateReaction"
|
||||
/>
|
||||
|
||||
<!-- 비밀번호 입력창 (익명일 경우) -->
|
||||
<div v-if="isPassword && unknown" class="mt-3">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
v-model="password"
|
||||
placeholder="비밀번호 입력"
|
||||
/>
|
||||
<button class="btn btn-primary" @click="$emit('submitPassword', password)">확인</button>
|
||||
</div>
|
||||
<span v-if="props.passwordAlert" class="invalid-feedback d-block text-start">{{ props.passwordAlert }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -58,9 +44,6 @@ import DeleteButton from '../button/DeleteBtn.vue';
|
||||
import EditButton from '../button/EditBtn.vue';
|
||||
import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
|
||||
|
||||
// Vue Router 인스턴스
|
||||
const password = ref('');
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
comment: {
|
||||
@ -107,18 +90,10 @@ const props = defineProps({
|
||||
isLike: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isPassword: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
passwordAlert: {
|
||||
type: String,
|
||||
default: false,
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['togglePasswordInput', 'updateReaction', 'editClick', 'deleteClick', 'updatePasswordAlert']);
|
||||
const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
|
||||
|
||||
// 수정
|
||||
const editClick = () => {
|
||||
|
||||
@ -5,22 +5,34 @@
|
||||
<div class="card">
|
||||
<!-- 프로필 헤더 -->
|
||||
<div class="card-header">
|
||||
<BoardProfile
|
||||
:boardId="currentBoardId"
|
||||
:profileName="profileName"
|
||||
:unknown="unknown"
|
||||
:author="isAuthor"
|
||||
:views="views"
|
||||
:commentNum="commentNum"
|
||||
:date="formattedBoardDate"
|
||||
:isLike="false"
|
||||
:isPassword="isPassword"
|
||||
:passwordAlert="passwordAlert"
|
||||
@editClick="editClick"
|
||||
@deleteClick="deleteClick"
|
||||
@submitPassword="submitPassword"
|
||||
class="pb-6 border-bottom"
|
||||
/>
|
||||
<div class="pb-5 border-bottom">
|
||||
<BoardProfile
|
||||
:boardId="currentBoardId"
|
||||
:profileName="profileName"
|
||||
:unknown="unknown"
|
||||
:author="isAuthor"
|
||||
:views="views"
|
||||
:commentNum="commentNum"
|
||||
:date="formattedBoardDate"
|
||||
:isLike="false"
|
||||
@editClick="editClick"
|
||||
@deleteClick="deleteClick"
|
||||
/>
|
||||
|
||||
<!-- 비밀번호 입력창 (익명일 경우) -->
|
||||
<div v-if="isPassword && unknown" class="mt-3 w-25">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
v-model="password"
|
||||
placeholder="비밀번호 입력"
|
||||
/>
|
||||
<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 class="card-body">
|
||||
@ -87,10 +99,8 @@
|
||||
:unknown="unknown"
|
||||
:comments="comments"
|
||||
:isEditTextarea="isEditTextarea"
|
||||
:isPassword="isPassword"
|
||||
@editClick="editClick"
|
||||
@deleteClick="deleteClick"
|
||||
@submitPassword="submitPassword"
|
||||
@updateReaction="handleUpdateReaction"
|
||||
@submitComment="handleCommentReply"
|
||||
/>
|
||||
@ -141,6 +151,7 @@ const isAuthor = computed(() => currentUserId.value === authorId.value);
|
||||
|
||||
const isEditTextarea = ref({});
|
||||
|
||||
const password = ref('');
|
||||
const passwordAlert = ref("");
|
||||
const isPassword = ref(false);
|
||||
const lastClickedButton = ref("");
|
||||
@ -223,18 +234,20 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
|
||||
// 댓글 목록 조회
|
||||
const fetchComments = async (page = 1) => {
|
||||
try {
|
||||
const { data } = 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 { data: replyData } = await axios.get(`board/${currentBoardId.value}/reply`, {
|
||||
params: { LOCBRDSEQ: currentBoardId.value }
|
||||
});
|
||||
console.log("댓글:", data);
|
||||
console.log("대댓글:", replyData);
|
||||
// const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
|
||||
// params: { LOCBRDSEQ: currentBoardId.value }
|
||||
// });
|
||||
|
||||
if (!data?.data?.list) return;
|
||||
console.log("댓글:", response.data);
|
||||
// console.log("대댓글:", replyResponse.data);
|
||||
|
||||
comments.value = data.data.list.map(comment => ({
|
||||
comments.value = response.data.data.list.map(comment => ({
|
||||
commentId: comment.LOCCMTSEQ, // 댓글 ID
|
||||
boardId: comment.LOCBRDSEQ,
|
||||
parentId: comment.LOCCMTPNT, // 부모 ID
|
||||
@ -245,59 +258,21 @@ const fetchComments = async (page = 1) => {
|
||||
children: [] // 대댓글을 담을 배열
|
||||
}));
|
||||
|
||||
let replies = replyData.data.map(reply => ({
|
||||
commentId: reply.LOCCMTSEQ, // 대댓글 ID
|
||||
boardId: reply.LOCBRDSEQ,
|
||||
parentId: reply.LOCCMTPNT, // 부모 댓글 ID
|
||||
author: reply.author || "익명 사용자",
|
||||
content: reply.LOCCMTRPY,
|
||||
createdAtRaw: new Date(reply.LOCCMTRDT), // 정렬용
|
||||
createdAt: formattedDate(reply.LOCCMTRDT) // 표시용
|
||||
}));
|
||||
|
||||
// let commentMap = {};
|
||||
// let rootComments = [];
|
||||
|
||||
// 최상위 댓글 저장
|
||||
// allComments.forEach(comment => {
|
||||
// commentMap[comment.commentId] = comment;
|
||||
// });
|
||||
|
||||
// 대댓글을 부모 댓글에 추가
|
||||
// replies.forEach(reply => {
|
||||
// if (commentMap[reply.parentId]) {
|
||||
// commentMap[reply.parentId].children.push(reply);
|
||||
// } else {
|
||||
// console.warn("부모 댓글을 찾을 수 없는 대댓글:", reply);
|
||||
// }
|
||||
// });
|
||||
|
||||
// rootComments = allComments.filter(comment => comment.parentId === 1);
|
||||
|
||||
// 정렬
|
||||
// rootComments.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
|
||||
// rootComments.forEach(comment => {
|
||||
// comment.children.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
|
||||
// });
|
||||
|
||||
// comments.value = rootComments;
|
||||
|
||||
// console.log("변환된 comments 데이터:", comments.value);
|
||||
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
currentPage: data.data.pageNum, // 현재 페이지 번호
|
||||
pages: data.data.pages, // 전체 페이지 수
|
||||
prePage: data.data.prePage, // 이전 페이지
|
||||
nextPage: data.data.nextPage, // 다음 페이지
|
||||
isFirstPage: data.data.isFirstPage, // 첫 페이지 여부
|
||||
isLastPage: data.data.isLastPage, // 마지막 페이지 여부
|
||||
hasPreviousPage: data.data.hasPreviousPage, // 이전 페이지 존재 여부
|
||||
hasNextPage: data.data.hasNextPage, // 다음 페이지 존재 여부
|
||||
navigatePages: data.data.navigatePages, // 몇 개의 페이지 버튼을 보여줄 것인지
|
||||
navigatepageNums: data.data.navigatepageNums, // 실제 페이지 번호 목록
|
||||
navigateFirstPage: data.data.navigateFirstPage, // 페이지네이션에서 첫 페이지 번호
|
||||
navigateLastPage: data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
|
||||
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) {
|
||||
@ -370,24 +345,24 @@ const togglePassword = (button) => {
|
||||
};
|
||||
|
||||
|
||||
const submitPassword = async (inputPassword) => {
|
||||
console.log(inputPassword)
|
||||
if (!inputPassword) {
|
||||
const submitPassword = async () => {
|
||||
if (!password.value) {
|
||||
passwordAlert.value = "비밀번호를 입력해주세요.";
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("📌 요청 시작: submitPassword 실행됨");
|
||||
|
||||
try {
|
||||
const requestData = {
|
||||
LOCBRDPWD: inputPassword,
|
||||
LOCBRDSEQ: 288
|
||||
};
|
||||
const response = await axios.post(`board/${currentBoardId.value}/password`, {
|
||||
LOCBRDPWD: password.value,
|
||||
LOCBRDSEQ: 288, // 나중에 현재 게시글 ID 사용해야함
|
||||
});
|
||||
|
||||
const postResponse = await axios.post(`board/${currentBoardId.value}/password`, requestData);
|
||||
|
||||
if (postResponse.data.code === 200 && postResponse.data.data === true) {
|
||||
if (response.data.code === 200 && response.data.data === true) {
|
||||
password.value = '';
|
||||
// passwordAlert.value = "";
|
||||
isPassword.value = false;
|
||||
passwordAlert.value = "";
|
||||
|
||||
if (lastClickedButton.value === "edit") {
|
||||
router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
|
||||
@ -396,15 +371,25 @@ const submitPassword = async (inputPassword) => {
|
||||
}
|
||||
lastClickedButton.value = null;
|
||||
} else {
|
||||
console.log('비밀번호 틀렸음둥')
|
||||
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.response && error.response.status === 401) {
|
||||
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
|
||||
} else if (error.response) {
|
||||
alert(`오류 발생: ${error.response.data.message || "서버 오류"}`);
|
||||
if (error.response) {
|
||||
console.error("📌 서버 응답 상태 코드:", error.response.status);
|
||||
console.error("📌 서버 응답 데이터:", error.response.data);
|
||||
|
||||
if (error.response.status === 401) {
|
||||
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
|
||||
} else {
|
||||
passwordAlert.value = error.response.data?.message || "서버 오류가 발생했습니다.";
|
||||
}
|
||||
} else if (error.request) {
|
||||
console.error("📌 요청이 서버에 도달하지 못함:", error.request);
|
||||
passwordAlert.value = "네트워크 오류가 발생했습니다. 다시 시도해주세요.";
|
||||
} else {
|
||||
alert("네트워크 오류가 발생했습니다. 다시 시도해주세요.");
|
||||
console.error("📌 요청 설정 중 오류 발생:", error.message);
|
||||
passwordAlert.value = "요청 중 알 수 없는 오류가 발생했습니다.";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user