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