로그인 익명 진행중
This commit is contained in:
parent
9bc34a02fc
commit
a935bcf4d5
@ -2,6 +2,7 @@
|
||||
<div>
|
||||
<BoardProfile
|
||||
:unknown="unknown"
|
||||
:isCommentAuthor="isCommentAuthor"
|
||||
:boardId="comment.boardId"
|
||||
:profileName="comment.author"
|
||||
:date="comment.createdAt"
|
||||
@ -10,6 +11,7 @@
|
||||
:author="true"
|
||||
:isLike="!isLike"
|
||||
:isCommentPassword="comment.isCommentPassword"
|
||||
:isCommentProfile="true"
|
||||
@editClick="$emit('editClick', comment)"
|
||||
@deleteClick="$emit('deleteClick', comment)"
|
||||
@updateReaction="handleUpdateReaction"
|
||||
@ -27,6 +29,8 @@
|
||||
</div>
|
||||
<span v-if="passwordCommentAlert" class="invalid-feedback d-block text-start">{{ passwordCommentAlert }}</span>
|
||||
</div>
|
||||
<p>authorId:{{ comment.authorId }}</p>
|
||||
<p>코멘트 비교: {{comment.isCommentAuthor}}</p>
|
||||
|
||||
|
||||
<div class="mt-6">
|
||||
@ -77,9 +81,13 @@ const props = defineProps({
|
||||
required: true,
|
||||
},
|
||||
unknown: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
isCommentAuthor: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isPlusButton: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
class="form-control flex-grow-1"
|
||||
v-model="password"
|
||||
/>
|
||||
<!-- <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span> -->
|
||||
<span v-if="passwordAlert" class="invalid-feedback d-block text-start ms-2">{{ passwordAlert }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -70,6 +70,10 @@ const props = defineProps({
|
||||
parentId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
passwordAlert: {
|
||||
type: String,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
<BoardComment
|
||||
:unknown="unknown"
|
||||
:comment="comment"
|
||||
:isCommentAuthor="comment.isCommentAuthor"
|
||||
:isCommentPassword="comment.isCommentPassword"
|
||||
:isEditTextarea="comment.isEditTextarea"
|
||||
:passwordCommentAlert="passwordCommentAlert"
|
||||
@ -38,6 +39,10 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
isCommentAuthor: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isCommentPassword: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@ -52,7 +57,7 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'submitPassword', 'clearPassword']);
|
||||
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'clearPassword']);
|
||||
|
||||
const submitComment = (replyData) => {
|
||||
emit('submitComment', replyData);
|
||||
|
||||
@ -22,7 +22,8 @@
|
||||
<!-- 버튼 영역 -->
|
||||
<div class="ms-auto text-end">
|
||||
<!-- 수정, 삭제 버튼 -->
|
||||
<template v-if="author || showDetail">
|
||||
<!-- <template v-if="isAuthor || showDetail"> -->
|
||||
<template v-if="isCommentProfile ? isCommentAuthor : isAuthor">
|
||||
<EditButton @click.stop="editClick" />
|
||||
<DeleteButton @click.stop="deleteClick" />
|
||||
</template>
|
||||
@ -49,7 +50,7 @@ import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
|
||||
const props = defineProps({
|
||||
comment: {
|
||||
type: Object,
|
||||
required: true,
|
||||
required: false,
|
||||
},
|
||||
boardId: {
|
||||
type: Number,
|
||||
@ -72,10 +73,12 @@ const props = defineProps({
|
||||
default: true,
|
||||
},
|
||||
// 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
|
||||
author: {
|
||||
isAuthor: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isCommentAuthor: Boolean, // 댓글 작성자인지 여부
|
||||
isCommentProfile: Boolean, // 현재 컴포넌트가 댓글용인지 여부
|
||||
date: {
|
||||
type: String,
|
||||
required: true,
|
||||
|
||||
@ -10,14 +10,14 @@
|
||||
:boardId="currentBoardId"
|
||||
:profileName="profileName"
|
||||
:unknown="unknown"
|
||||
:author="isAuthor"
|
||||
:views="views"
|
||||
:commentNum="commentNum"
|
||||
:date="formattedBoardDate"
|
||||
:isLike="false"
|
||||
:isAuthor="isAuthor"
|
||||
@editClick="editClick"
|
||||
@deleteClick="deleteClick"
|
||||
/>
|
||||
/>
|
||||
|
||||
<!-- 비밀번호 입력창 (익명일 경우) -->
|
||||
<div v-if="isPassword && unknown" class="mt-3 w-25 ms-auto">
|
||||
@ -74,8 +74,14 @@
|
||||
:likeClicked="likeClicked"
|
||||
:dislikeClicked="dislikeClicked"
|
||||
@updateReaction="handleUpdateReaction"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
<p>현재 로그인한 사용자 ID: {{ currentUserId }}</p>
|
||||
<p>게시글 작성자: {{ authorId }}</p>
|
||||
<p>isAuthor 값: {{ isAuthor }}</p>
|
||||
<!-- <p>use이미지:{{userStore.user.img}}</p> -->
|
||||
<!-- <img :src="`http://localhost:10325/upload/img/profile/${userStore.user.profile}`" alt="Profile Image" class="w-px-40 h-auto rounded-circle"/> -->
|
||||
|
||||
|
||||
<!-- 첨부파일 목록 -->
|
||||
<!-- <ul v-if="attachments.length" class="attachments mt-4 list-unstyled">
|
||||
@ -88,6 +94,7 @@
|
||||
<BoardCommentArea
|
||||
:profileName="profileName"
|
||||
:unknown="unknown"
|
||||
:passwordAlert="passwordAlert"
|
||||
@submitComment="handleCommentSubmit"
|
||||
/>
|
||||
<!-- <BoardCommentArea :profileName="profileName" :unknown="unknown" /> -->
|
||||
@ -97,7 +104,7 @@
|
||||
<div class="card-footer">
|
||||
<BoardCommentList
|
||||
:unknown="unknown"
|
||||
:comments="comments"
|
||||
:comments="commentsWithAuthStatus"
|
||||
:isCommentPassword="isCommentPassword"
|
||||
:isEditTextarea="isEditTextarea"
|
||||
:passwordCommentAlert="passwordCommentAlert"
|
||||
@ -130,6 +137,7 @@ import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
|
||||
import Pagination from '@c/pagination/Pagination.vue';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useUserInfoStore } from '@/stores/useUserInfoStore';
|
||||
import axios from '@api';
|
||||
|
||||
// 게시물 데이터 상태
|
||||
@ -148,12 +156,21 @@ const comments = ref([]);
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserInfoStore();
|
||||
const currentBoardId = ref(Number(route.params.id));
|
||||
const unknown = computed(() => profileName.value === '익명');
|
||||
const currentUserId = ref('김자바'); // 현재 로그인한 사용자 id
|
||||
const authorId = ref(null); // 작성자 id
|
||||
const currentUserId = computed(() => userStore.user.id); // 현재 로그인한 사용자 id
|
||||
const authorId = ref(''); // 작성자 id
|
||||
|
||||
const isAuthor = computed(() => currentUserId.value === authorId.value);
|
||||
const commentsWithAuthStatus = computed(() => {
|
||||
const updatedComments = comments.value.map(comment => ({
|
||||
...comment,
|
||||
isCommentAuthor: comment.authorId === currentUserId.value
|
||||
}));
|
||||
// console.log("✅ commentsWithAuthStatus 업데이트됨:", updatedComments);
|
||||
return updatedComments;
|
||||
});
|
||||
|
||||
|
||||
const password = ref('');
|
||||
@ -187,17 +204,18 @@ const fetchBoardDetails = async () => {
|
||||
const response = await axios.get(`board/${currentBoardId.value}`);
|
||||
const data = response.data.data;
|
||||
|
||||
console.log(data)
|
||||
|
||||
// API 응답 데이터 반영
|
||||
// const boardDetail = data.boardDetail || {};
|
||||
|
||||
profileName.value = data.author || '익명';
|
||||
|
||||
// 익명확인하고 싶을때
|
||||
// profileName.value = 'null;
|
||||
// profileName.value = '익명';
|
||||
|
||||
// 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
|
||||
authorId.value = data.author;
|
||||
|
||||
authorId.value = data.authorId; //게시글 작성자 id
|
||||
boardTitle.value = data.title || '제목 없음';
|
||||
boardContent.value = data.content || '';
|
||||
date.value = data.date || '';
|
||||
@ -262,7 +280,7 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
|
||||
}
|
||||
};
|
||||
|
||||
// 댓글 목록 조회 (대댓글 포함)
|
||||
// 댓글 목록 조회
|
||||
const fetchComments = async (page = 1) => {
|
||||
try {
|
||||
// 댓글
|
||||
@ -273,11 +291,14 @@ const fetchComments = async (page = 1) => {
|
||||
}
|
||||
});
|
||||
|
||||
console.log(response.data.data)
|
||||
|
||||
const commentsList = response.data.data.list.map(comment => ({
|
||||
commentId: comment.LOCCMTSEQ, // 댓글 ID
|
||||
boardId: comment.LOCBRDSEQ,
|
||||
parentId: comment.LOCCMTPNT, // 부모 ID
|
||||
author: comment.author || '익명',
|
||||
authorId: comment.authorId,
|
||||
content: comment.LOCCMTRPY,
|
||||
likeCount: comment.likeCount || 0,
|
||||
dislikeCount: comment.dislikeCount || 0,
|
||||
@ -286,8 +307,6 @@ const fetchComments = async (page = 1) => {
|
||||
createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
|
||||
createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
|
||||
children: [], // 대댓글을 담을 배열
|
||||
// isCommentPassword: false, // 개별 댓글 비밀번호 입력 상태
|
||||
// isEditTextarea: false // 개별 댓글 수정 상태
|
||||
}));
|
||||
|
||||
for (const comment of commentsList) {
|
||||
@ -297,7 +316,7 @@ const fetchComments = async (page = 1) => {
|
||||
params: { LOCCMTPNT: comment.commentId }
|
||||
});
|
||||
|
||||
// console.log(`대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data);
|
||||
console.log(`대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data);
|
||||
|
||||
if (replyResponse.data.data) {
|
||||
comment.children = replyResponse.data.data.map(reply => ({
|
||||
@ -343,21 +362,22 @@ const fetchComments = async (page = 1) => {
|
||||
console.log('댓글 목록 불러오기 오류:', error);
|
||||
}
|
||||
};
|
||||
const isSubmitting = ref(false);
|
||||
// const isSubmitting = ref(false);
|
||||
|
||||
// 댓글 작성
|
||||
const handleCommentSubmit = async ({ comment, password }) => {
|
||||
// if (unknown.value && !password) {
|
||||
// passwordAlert.value = "익명 사용자는 비밀번호를 입력해야 합니다."; // UI에 메시지 표시
|
||||
// return;
|
||||
// }
|
||||
console.log('댓글')
|
||||
//비밀번호 입력 안했을시
|
||||
// if (!password) {
|
||||
// passwordAlert.value = "비밀번호를 입력해야 합니다."; // UI에서 경고 표시
|
||||
// passwordAlert.value = "비밀번호를 입력해야 합니다.";
|
||||
// return;
|
||||
// }
|
||||
|
||||
// console.log('비밀번호 눌렀음')
|
||||
|
||||
// 중복 실행 방지
|
||||
if (isSubmitting.value) return;
|
||||
isSubmitting.value = true;
|
||||
// if (isSubmitting.value) return;
|
||||
// isSubmitting.value = true;
|
||||
|
||||
try {
|
||||
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
|
||||
@ -368,7 +388,7 @@ const handleCommentSubmit = async ({ comment, password }) => {
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
// console.log('댓글 작성 성공:', response.data.message);
|
||||
console.log('댓글 작성 성공:', response.data.message);
|
||||
await fetchComments();
|
||||
} else {
|
||||
console.log('댓글 작성 실패:', response.data.message);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user