로그인 익명 진행중

This commit is contained in:
kimdaae328 2025-02-24 14:04:17 +09:00
parent 9bc34a02fc
commit a935bcf4d5
5 changed files with 73 additions and 33 deletions

View File

@ -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,

View File

@ -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
} }
}); });

View File

@ -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);

View File

@ -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,

View File

@ -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);