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-12 23:43:38 +09:00
parent f33cada52f
commit 12538f0046
4 changed files with 132 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/board/BoardComentArea.vue
View File

@ -24,7 +24,7 @@
<div class="d-flex justify-content-between flex-wrap mt-4">
<div class="d-flex flex-wrap align-items-center">
<!-- 익명 체크박스 (익명게시판일 경우에만)-->
<div v-if="isAnonymous" class="form-check form-check-inline mb-0 me-4">
<div v-if="unknown" class="form-check form-check-inline mb-0 me-4">
<input
class="form-check-input"
type="checkbox"
@ -59,41 +59,38 @@
</template>
<script setup>
import { ref, defineEmits, defineProps, computed, watchEffect } from 'vue';
import { ref, defineEmits, defineProps, computed, watch } from 'vue';
const props = defineProps({
profileName: {
type: String,
default: '익명 사용자',
unknown: {
type: Boolean,
default: true,
},
parentId: {
type: Number,
default: 0
}
});
const isCheck = ref(false);
const comment = ref('');
const password = ref('');
const isAnonymous = computed(() => props.profileName === '익명 사용자');
const isCheck = ref(false);
const emit = defineEmits(['submit']);
watchEffect(() => {
console.log('📢 부모로부터 전달된 profileName:', props.profileName);
console.log('🔐 익명 여부(isAnonymous):', isAnonymous.value);
if (!isAnonymous.value) {
watch(() => props.unknown, (newVal) => {
if (!newVal) {
isCheck.value = false;
}
});
function handleCommentSubmit() {
console.log('📝 댓글 내용:', comment.value);
console.log('🔐 익명 여부:', isAnonymous.value);
console.log('🔑 비밀번호:', password.value);
emit('submit', {
comment: comment.value,
isAnonymous: isAnonymous.value,
password: password.value,
});
comment.value = '';
password.value = '';
}
</script>

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

@ -11,38 +11,48 @@
</template>
<script setup>
import { ref } from 'vue';
import { ref, defineProps, defineEmits } from 'vue';
import BoardComment from './BoardComment.vue'
const comments = ref([
{
id: 1,
author: '홍길동',
content: '저도 궁금합니다.',
children: [
{
id: 2,
author: '사용자1',
content: '저도요!',
},
{
id: 3,
author: '사용자2',
content: '저도..',
},
],
},
{
id: 4,
author: '사용자4',
content: '흥미로운 주제네요.',
children: [],
},
{
id: 5,
author: '사용자5',
content: '우오아아아아아앙',
children: [],
},
]);
const props = defineProps({
comments: Array
});
const emit = defineEmits(['reply']);
const addComment = (replyData) => {
emit('reply', replyData);
};
// const comments = ref([
// {
// id: 1,
// author: '홍길동',
// content: '저도 궁금합니다.',
// children: [
// {
// id: 2,
// author: '사용자1',
// content: '저도요!',
// },
// {
// id: 3,
// author: '사용자2',
// content: '저도..',
// },
// ],
// },
// {
// id: 4,
// author: '사용자4',
// content: '흥미로운 주제네요.',
// children: [],
// },
// {
// id: 5,
// author: '사용자5',
// content: '우오아아아아아앙',
// children: [],
// },
// ]);
</script>

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

@ -1,7 +1,7 @@
<template>
<div class="d-flex align-items-center flex-wrap">
<div class="d-flex align-items-center">
<div class="avatar me-2" v-if="unknown">
<div class="avatar me-2" v-if="!unknown">
<img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
@ -13,7 +13,7 @@
<i class="fa-regular fa-eye"></i> {{ views }}
</span>
<span>
<i class="bx bx-comment"></i> {{ comments }}
<i class="bx bx-comment"></i> {{ commentNum }}
</span>
</template>
</div>
@ -25,7 +25,7 @@
<EditButton @click="handleEdit" />
<DeleteButton @click="handleDelete" />
<div class="mt-3" v-if="isPassword && unknown">
<div class="mt-3" v-if="isPassword && !unknown">
<div class="input-group">
<input
type="password"
@ -40,6 +40,7 @@
</div>
</template>
<template v-else>
<!-- 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부 -->
<template v-if="author">
<EditButton />
<DeleteButton />
@ -57,7 +58,7 @@
</template>
<script setup>
import { ref, onMounted, defineProps } from 'vue';
import { ref, defineProps, computed } from 'vue';
import { useRouter } from 'vue-router';
import axios from '@api';
import DeleteButton from '../button/DeleteBtn.vue';
@ -79,7 +80,7 @@ const props = defineProps({
},
profileName: {
type: String,
default: '익명',
default: '익명 사용자',
},
unknown: {
type: Boolean,
@ -89,6 +90,7 @@ const props = defineProps({
type: Boolean,
default: true,
},
// 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
author: {
type: Boolean,
default: false,
@ -101,7 +103,7 @@ const props = defineProps({
type: Number,
default: 0,
},
comments: {
commentNum: {
type: Number,
default: 0,
},

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

@ -8,8 +8,10 @@
<BoardProfile
:boardId="currentBoardId"
:profileName="profileName"
:unknown="unknown"
:author="isAuthor"
:views="views"
:comments="comments"
:commentNum="commentNum"
:date="formattedBoardDate"
class="pb-6 border-bottom"
/>
@ -65,15 +67,12 @@
</ul> -->
<!-- 댓글 입력 영역 -->
<BoardComentArea :profileName="profileName" @submit="handleCommentSubmit"/>
<!-- 수정 버튼 -->
<!-- <button class="btn btn-primary" @click="goToEditPage">
글 수정
</button> -->
<BoardComentArea :profileName="profileName" :unknown="unknown" @submit="handleCommentSubmit"/>
</div>
<!-- 댓글 목록 -->
<div class="card-footer">
<BoardCommentList/>
<BoardCommentList :comments="comments" />
<Pagination/>
</div>
@ -103,17 +102,16 @@ const likes = ref(0);
const dislikes = ref(0);
const likeClicked = ref(false);
const dislikeClicked = ref(false);
const comments = ref(0);
const commentNum = ref(0);
const attachment = ref(false);
// 라우트에서 ID 가져오기
const route = useRoute();
const currentBoardId = ref(Number(route.params.id));
const unknown = computed(() => profileName.value === '익명 사용자');
const currentUserId = ref('김자바'); // 현재 로그인한 사용자 id
const authorId = ref(null); // 작성자 id
// 글 수정 페이지로 이동
const goToEditPage = () => {
router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
};
const isAuthor = computed(() => currentUserId.value === authorId.value);
// 게시물 상세 데이터 불러오기
const fetchBoardDetails = async () => {
@ -129,6 +127,9 @@ const fetchBoardDetails = async () => {
// 익명확인하고 싶을때
// profileName.value = '익명 사용자';
// 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
authorId.value = data.author;
boardTitle.value = data.title || '제목 없음';
boardContent.value = data.content || '';
date.value = data.date || '';
@ -136,7 +137,7 @@ const fetchBoardDetails = async () => {
likes.value = data.likeCount || 0;
dislikes.value = data.dislikeCount || 0;
attachment.value = data.hasAttachment || null;
comments.value = data.commentCount || 0;
commentNum.value = data.commentCount || 0;
} catch (error) {
alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
@ -145,47 +146,78 @@ const fetchBoardDetails = async () => {
// 좋아요, 싫어요
const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
// console.log(type, boardId)
try {
const requestData = {
await axios.post(`/board/${boardId}/${commentId}/reaction`, {
LOCBRDSEQ: boardId,
LOCCMTSEQ: commentId,
MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함
LOCGOBGOD: isLike ? 'T' : 'F',
LOCGOBBAD: isDislike ? 'T' : 'F'
};
console.log(requestData)
const postResponse = await axios.post(`/board/${boardId}/${commentId}/reaction`, requestData);
// await axios.post(`board/${boardId}/${commentId}/reaction`, { type });
});
const response = await axios.get(`board/${boardId}`);
console.log(response.data)
const updatedData = response.data.data;
console.log('post요청 결과:', postResponse.data);
console.log('get요청 결과(좋아요):', response.data.data.likeCount);
likes.value = updatedData.likeCount;
dislikes.value = updatedData.dislikeCount;
likeClicked.value = isLike;
dislikeClicked.value = isDislike;
console.log('반응 결과:', postResponse.data);
} catch (error) {
alert('반응을 업데이트하는 중 오류 발생');
}
};
function handleCommentSubmit(payload) {
console.log('댓글 내용:', payload.comment);
console.log('익명 여부:', payload.isAnonymous);
console.log('비밀번호:', payload.password);
// 댓글 작성
const handleCommentSubmit = async ({ comment, password }) => {
try {
// const payload = {
// LOCBRDSEQ: currentBoardId.value,
// LOCCMTRPY: comment,
// LOCCMTPWD: password || null,
// LOCCMTPNT: 1
// };
// alert(`댓글 내용: ${comment}`);
// console.log('📤 서버로 전송되는 데이터:', payload); // 서버로 보내는 데이터 확인
// const response = await axios.post(`board/${currentBoardId.value}/comment`, payload);
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
LOCBRDSEQ: currentBoardId.value,
LOCCMTRPY: comment,
LOCCMTPWD: password || null,
LOCCMTPNT: 0
});
console.log('📥 서버 응답 전체:', response);
if (response.status === 200) {
console.log('댓글 작성 성공:', response.data.message);
// await fetchComments(); // 댓글 작성 후 목록 갱신
} else {
console.error('댓글 작성 실패:', response.data.message);
}
} catch (error) {
console.error('댓글 작성 중 오류 발생:', error);
}
};
// 댓글 목록 조회
// const fetchComments = async () => {
// try {
// const response = await axios.get(`board/${currentBoardId.value}/comments`);
// if (response.status === 200) {
// comments.value = response.data.data || [];
// console.log('📋 댓글 목록:', comments.value);
// }
// } catch (error) {
// console.error('댓글 목록 불러오기 오류:', error);
// }
// };
}
// 날짜
const formattedBoardDate = computed(() => {
@ -193,9 +225,8 @@ const formattedBoardDate = computed(() => {
return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
});
// 컴포넌트 마운트 시 데이터 로드
onMounted(() => {
fetchBoardDetails();
fetchBoardDetails()
});
</script>