Merge branch 'main' into board-write

This commit is contained in:
dyhj625 2025-02-28 13:57:15 +09:00
commit cdcc1cc552
7 changed files with 118 additions and 147 deletions

View File

@ -11,35 +11,29 @@
:isLike="!isLike"
:isCommentPassword="isCommentPassword"
:isCommentProfile="true"
@editClick="aaaa"
@editClick="handleEditClick"
@deleteClick="$emit('deleteClick', comment)"
@updateReaction="handleUpdateReaction"
/>
<!-- <P>Commentpassssss: {{isCommentPassword}}</P> -->
<!-- :author="true" -->
/>
<!-- 댓글 비밀번호 입력창 (익명일 경우) -->
<div v-if="isCommentPassword === comment.commentId && unknown" class="mt-3 w-25 ms-auto">
<div v-if="currentPasswordCommentId === comment.commentId && unknown" class="mt-3 w-25 ms-auto">
<div class="input-group">
<input
type="password"
class="form-control"
v-model="password"
:value="password"
placeholder="비밀번호 입력"
@input="$emit('update:password', $event.target.value.trim())"
/>
<button class="btn btn-primary" @click="logPasswordAndEmit">확인</button>
</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">
<template v-if="comment.isEditTextarea">
<textarea v-model="localEditedContent" class="form-control"></textarea>
<div class="mt-2 d-flex justify-content-end">
<!-- <button class="btn btn-secondary me-2" @click="$emit('cancelEdit', comment)">취소</button> -->
<!-- <button class="btn btn-primary" @click="submitEdit">수정</button> -->
<SaveBtn class="btn btn-primary" @click="submitEdit"></SaveBtn>
</div>
</template>
@ -58,10 +52,6 @@
:key="child.commentId"
class="mt-8 pt-6 ps-10 border-top"
>
<!-- <p>대댓글 데이터(JSON): {{ JSON.stringify(child, null, 2) }}</p> -->
<!-- <p>comment child: {{ comment.children }}</p> -->
<!-- :unknown="child.author === '익명'" -->
<p>child.isCommentPassword: {{ child.isCommentPassword }}</p>
<BoardComment
:comment="child"
:unknown="child.author === '익명'"
@ -70,12 +60,17 @@
:isCommentProfile="true"
:isCommentAuthor="child.isCommentAuthor"
:isCommentPassword="isCommentPassword"
@editClick="$emit('editClick', $event)"
:currentPasswordCommentId="currentPasswordCommentId"
:passwordCommentAlert="passwordCommentAlert"
:password="password"
@editClick="handleReplyEditClick"
@deleteClick="$emit('deleteClick', child)"
@submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
@cancelEdit="$emit('cancelEdit', child)"
@submitComment="submitComment"
@updateReaction="handleUpdateReaction"
@submitPassword="$emit('submitPassword', child, password)"
@update:password="$emit('update:password', $event)"
/>
</li>
</ul>
@ -120,14 +115,19 @@ const props = defineProps({
},
passwordCommentAlert: {
type: String,
default: false
}
default: ''
},
currentPasswordCommentId: {
type: Number
},
password:{
type: String
},
});
// emits
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit']);
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit', 'update:password']);
const password = ref('');
const localEditedContent = ref(props.comment.content);
//
@ -154,8 +154,8 @@ const handleUpdateReaction = (reactionData) => {
//
const logPasswordAndEmit = () => {
emit('submitPassword', props.comment, password.value);
password.value = "";
console.log('비밀번호 확인',props.password)
emit('submitPassword', props.comment, props.password);
};
watch(() => props.comment.isEditTextarea, (newVal) => {
@ -169,8 +169,12 @@ const submitEdit = () => {
emit('submitEdit', props.comment, localEditedContent.value);
};
const aaaa = () => {
const handleEditClick = () => {
emit('editClick', props.comment);
}
const handleReplyEditClick = (comment) => {
emit('editClick', comment);
}
</script>

View File

@ -51,10 +51,7 @@
<!-- 답변 쓰기 버튼 -->
<div class="ms-auto mt-3 mt-md-0">
<button class="btn btn-primary" @click="handleCommentSubmit">
<!-- <i class="icon-base bx bx-check"></i> -->
확인
</button>
<SaveBtn class="btn btn-primary" @click="handleCommentSubmit"></SaveBtn>
</div>
</div>
</div>
@ -63,6 +60,7 @@
<script setup>
import { ref, defineEmits, defineProps, computed, watch } from 'vue';
import SaveBtn from '../button/SaveBtn.vue';
const props = defineProps({
unknown: {
@ -75,11 +73,11 @@ const props = defineProps({
},
passwordAlert: {
type: String,
default: false
default: ''
},
commentAlert: {
type: String,
default: false
default: ''
}
});

View File

@ -11,15 +11,17 @@
:isCommentAuthor="comment.isCommentAuthor"
:isEditTextarea="comment.isEditTextarea"
:isCommentPassword="isCommentPassword"
:passwordCommentAlert="passwordCommentAlert"
:passwordCommentAlert="passwordCommentAlert || ''"
:currentPasswordCommentId="currentPasswordCommentId"
:password="password"
@editClick="handleEditClick"
@deleteClick="handleDeleteClick"
@submitPassword="submitPassword"
@submitComment="submitComment"
@commentDeleted="handleCommentDeleted"
@submitEdit="handleSubmitEdit"
@cancelEdit="handleCancelEdit"
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
@update:password="updatePassword"
/>
</li>
</ul>
@ -53,11 +55,17 @@ const props = defineProps({
},
passwordCommentAlert: {
type: String,
default: false
}
default: ''
},
currentPasswordCommentId: {
type: Number
},
password:{
type: String
},
});
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'clearPassword']);
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'clearPassword','submitEdit', 'update:password']);
const submitComment = (replyData) => {
emit('submitComment', replyData);
@ -78,7 +86,11 @@ const submitPassword = (comment, password) => {
};
const handleEditClick = (comment) => {
emit('editClick', comment);
if (comment.parentId) {
emit('editClick', comment); //
} else {
emit('editClick', comment); //
}
};
const handleSubmitEdit = (comment, editedContent) => {
@ -100,4 +112,8 @@ const handleCancelEdit = (comment) => {
emit('cancelEdit', comment); //
}
};
const updatePassword = (newPassword) => {
emit('update:password', newPassword);
};
</script>

View File

@ -4,6 +4,7 @@
<div v-if="!unknown" class="avatar me-2">
<img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">{{ profileName }}</h6>
<div class="profile-detail">
@ -81,7 +82,7 @@ const props = defineProps({
isCommentProfile: Boolean, //
date: {
type: String,
required: true,
required: '',
},
views: {
type: Number,
@ -117,6 +118,10 @@ const handleUpdateReaction = (reactionData) => {
});
};
const getProfileImage = (profilePath) => {
return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
};
</script>

View File

@ -13,7 +13,7 @@ import { ref, computed } from 'vue';
const props = defineProps({
comment: {
type: Object,
required: true,
default: () => ({}),
},
likeClicked : {
type : Boolean,
@ -36,7 +36,7 @@ const props = defineProps({
required: true,
},
commentId: {
type: Number,
type: [Number, null],
default: null,
},
likeCount: {

View File

@ -195,10 +195,7 @@ const fetchGeneralPosts = async (page = 1) => {
});
if (data?.data) {
// console.log(data)
const totalPosts = data.data.total; //
// console.log('📌 API :', data.data);
const totalPosts = data.data.total;
generalList.value = data.data.list.map((post, index) => ({
realId: post.id,

View File

@ -27,6 +27,7 @@
class="form-control"
v-model="password"
placeholder="비밀번호 입력"
@input="password = password.replace(/\s/g, '')"
/>
<button class="btn btn-primary" @click="submitPassword">확인</button>
</div>
@ -76,12 +77,6 @@
@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">
@ -98,7 +93,6 @@
:passwordAlert="passwordAlert"
@submitComment="handleCommentSubmit"
/>
<!-- <BoardCommentArea :profileName="profileName" :unknown="unknown" /> -->
</div>
<!-- 댓글 목록 -->
@ -106,9 +100,11 @@
<BoardCommentList
:unknown="unknown"
:comments="commentsWithAuthStatus"
:isCommentPassword="Boolean(isCommentPassword)"
:isCommentPassword="isCommentPassword"
:isEditTextarea="isEditTextarea"
:passwordCommentAlert="passwordCommentAlert"
:currentPasswordCommentId="currentPasswordCommentId"
:password="password"
@editClick="editComment"
@deleteClick="deleteComment"
@updateReaction="handleCommentReaction"
@ -117,6 +113,7 @@
@commentDeleted="handleCommentDeleted"
@cancelEdit="handleCancelEdit"
@submitEdit="handleSubmitEdit"
@update:password="updatePassword"
/>
<Pagination
v-if="pagination.pages"
@ -173,7 +170,6 @@ const commentsWithAuthStatus = computed(() => {
isCommentAuthor: reply.authorId === currentUserId.value,
}))
}));
// console.log(" commentsWithAuthStatus :", updatedComments);
return updatedComments;
});
@ -183,10 +179,15 @@ const passwordAlert = ref("");
const passwordCommentAlert = ref("");
const isPassword = ref(false);
const isCommentPassword = ref(false);
const currentPasswordCommentId = ref(null);
const lastClickedButton = ref("");
const lastCommentClickedButton = ref("");
const isEditTextarea = ref(false);
const commentAlert = ref('')
const commentAlert = ref('');
const updatePassword = (newPassword) => {
password.value = newPassword;
};
const pagination = ref({
currentPage: 1,
@ -210,20 +211,12 @@ 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 = '';
// console.log("📌 :", profileName.value); //
// console.log("🔍 (unknown.value):", unknown.value); //
authorId.value = data.authorId; // id
boardTitle.value = data.title || '제목 없음';
boardContent.value = data.content || '';
@ -245,7 +238,6 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
await axios.post(`/board/${boardId}/${commentId}/reaction`, {
LOCBRDSEQ: boardId, // id
LOCCMTSEQ: commentId, // id
// MEMBERSEQ: 1, // 1
LOCGOBGOD: isLike ? 'T' : 'F',
LOCGOBBAD: isDislike ? 'T' : 'F'
});
@ -258,13 +250,9 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
likeClicked.value = isLike;
dislikeClicked.value = isDislike;
// console.log(updatedData)
// console.log(" :", updatedData);
} catch (error) {
alert('오류가 발생했습니다.');
// console.log(' .');
}
};
@ -281,13 +269,10 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
LOCGOBBAD: isDislike ? 'T' : 'F'
});
// console.log(" API :", response.data);
await fetchComments();
} catch (error) {
alert('오류가 발생했습니다.');
// console.log(' ');
}
};
@ -302,8 +287,6 @@ 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,
@ -320,6 +303,8 @@ const fetchComments = async (page = 1) => {
children: [], //
}));
commentsList.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
for (const comment of commentsList) {
if (!comment.commentId) continue;
@ -327,8 +312,6 @@ const fetchComments = async (page = 1) => {
params: { LOCCMTPNT: comment.commentId }
});
// console.log(` (${comment.commentId} ):`, replyResponse.data);
if (replyResponse.data.data) {
comment.children = replyResponse.data.data.map(reply => ({
author: reply.author || '익명',
@ -368,23 +351,19 @@ const fetchComments = async (page = 1) => {
navigateLastPage: response.data.data.navigateLastPage //
};
// console.log("📌 :", comments.value);
} catch (error) {
alert('오류가 발생했습니다.');
// alert(' :', error);
}
};
//
const handleCommentSubmit = async (data, isCheck) => {
const handleCommentSubmit = async (data) => {
if (!data) {
console.error("handleCommentSubmit: data가 undefined입니다.");
return;
}
const { comment, password } = data;
const { comment, password, isCheck } = data;
if (!comment || comment.trim() === "") {
commentAlert.value = '댓글을 입력해주세요.';
@ -404,25 +383,22 @@ const handleCommentSubmit = async (data, isCheck) => {
LOCCMTRPY: comment,
LOCCMTPWD: isCheck ? password : '',
LOCCMTPNT: 1,
LOCBRDTYP: unknown.value ? "300102" : null
LOCBRDTYP: isCheck ? "300102" : null
});
if (response.status === 200) {
// console.log(' :', response.data.message);
passwordAlert.value = '';
commentAlert.value = '';
await fetchComments();
} else {
// console.error(' :', response.data.message);
alert("댓글 작성을 실패했습니다.")
}
} catch (error) {
// console.error(' :', error);
alert("오류가 발생했습니다.")
}
};
// ( `BoardCommentList` )
//
const handleCommentReply = async (reply) => {
try {
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
@ -434,22 +410,17 @@ const handleCommentReply = async (reply) => {
});
if (response.status === 200) {
if (response.data.code === 200) { //
// console.log(' :', response.data);
await fetchComments(); //
if (response.data.code === 200) {
await fetchComments();
} else {
// console.log(' - :', response.data);
alert('대댓글 작성을 실패했습니다.');
}
}
} catch (error) {
// console.error(' :', error);
if (error.response) {
// console.error(' :', error.response.data);
alert("오류가 발생했습니다.");
}
alert("오류가 발생했습니다.");
}
}
@ -486,45 +457,41 @@ const findCommentById = (commentId, commentsList) => {
return null;
};
//
// ( )
const editComment = (comment) => {
password.value = '';
passwordCommentAlert.value = '';
currentPasswordCommentId.value = null;
//
const targetComment = findCommentById(comment.commentId, comments.value);
if (!targetComment) {
return;
}
//
const isMyComment = comment.authorId === currentUserId.value;
const isAnonymous = comment.author === "익명";
if (isMyComment) {
//
targetComment.isEditTextarea = true;
targetComment.isEditTextarea = !targetComment.isEditTextarea;
lastCommentClickedButton.value = "edit";
} else if (isAnonymous) {
//
if (targetComment.isEditTextarea) return;
toggleCommentPassword(comment, "edit");
} else {
// console.log(" - ");
alert("수정이 불가능합니다");
}
}
//
const deleteComment = async (comment) => {
//
const isMyComment = comment.authorId === currentUserId.value;
if (unknown.value && !isMyComment) {
if (comment.isEditTextarea) {
// ,
comment.isEditTextarea = false;
comment.isCommentPassword = true;
} else {
//
toggleCommentPassword(comment, "delete");
}
} else {
@ -532,19 +499,21 @@ const deleteComment = async (comment) => {
}
};
//
//
const toggleCommentPassword = (comment, button) => {
if (lastCommentClickedButton.value === button && isCommentPassword.value === comment.commentId) {
isCommentPassword.value = false; //
if (lastCommentClickedButton.value === button && currentPasswordCommentId.value === comment.commentId) {
currentPasswordCommentId.value = null; //
password.value = '';
passwordCommentAlert.value = '';
} else {
isCommentPassword.value = comment.commentId; //
currentPasswordCommentId.value = comment.commentId; //
password.value = '';
passwordCommentAlert.value = '';
}
lastCommentClickedButton.value = button;
};
const togglePassword = (button) => {
if (lastClickedButton.value === button) {
isPassword.value = !isPassword.value;
@ -556,16 +525,15 @@ const togglePassword = (button) => {
//
const submitPassword = async () => {
if (!password.value) {
if (!password.value.trim()) {
passwordAlert.value = "비밀번호를 입력해주세요.";
return;
}
// console.log("📌 : submitPassword ");
try {
const response = await axios.post(`board/${currentBoardId.value}/password`, {
LOCBRDPWD: password.value,
LOCBRDSEQ: 288, // ID
LOCBRDSEQ: 288,
});
if (response.data.code === 200 && response.data.data === true) {
@ -582,8 +550,6 @@ const submitPassword = async () => {
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
}
} catch (error) {
// console.log("📌 :", error);
if (error.response) {
if (error.response.status === 401) {
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
@ -598,34 +564,38 @@ const submitPassword = async () => {
}
};
// ( )
// ( )
const submitCommentPassword = async (comment, password) => {
// console.log(" :", password);
// console.log(" ID:", comment.commentId);
if (!password) {
passwordCommentAlert.value = "비밀번호를 입력해주세요.";
return;
}
const targetComment = findCommentById(comment.commentId, comments.value);
try {
// console.log(' ')
const response = await axios.post(`board/comment/${comment.commentId}/password`, {
LOCCMTPWD: password,
LOCCMTSEQ: comment.commentId,
});
// console.log(" :", response.data);
if (response.data.code === 200 && response.data.data === true) {
passwordCommentAlert.value = "";
comment.isCommentPassword = false;
//
if (lastCommentClickedButton.value === "edit") {
comment.isEditTextarea = true;
passwordCommentAlert.value = "";
// handleSubmitEdit(comment, comment.content);
if (targetComment) {
// input
targetComment.isEditTextarea = true;
passwordCommentAlert.value = "";
currentPasswordCommentId.value = null;
} else {
alert("수정 취소를 실패했습니다.");
}
//
} else if (lastCommentClickedButton.value === "delete") {
passwordCommentAlert.value = "";
@ -633,14 +603,12 @@ const submitCommentPassword = async (comment, password) => {
}
lastCommentClickedButton.value = null;
} else {
// console.log(" ");
passwordCommentAlert.value = "비밀번호가 일치하지 않습니다.";
}
} catch (error) {
// console.log("🚨 :", error.response?.data || error);
// if (error.response?.status === 401) {
// console.log(" 401 : ( )");
// }
if (error.response?.status === 401) {
passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
}
passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
}
};
@ -672,24 +640,18 @@ const deletePost = async () => {
// ( )
const deleteReplyComment = async (comment) => {
if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
// console.log(" ID:", comment);
try {
const response = await axios.delete(`board/comment/${comment.commentId}`, {
data: { LOCCMTSEQ: comment.commentId }
});
// console.log(" :", response.data);
if (response.data.code === 200) {
// console.log(" !");
await fetchComments();
} else {
// console.log(" :", response.data.message);
alert("댓글 삭제에 실패했습니다.");
}
} catch (error) {
// console.log(" :", error);
alert("댓글 삭제 중 오류가 발생했습니다.");
}
};
@ -702,9 +664,6 @@ const handleSubmitEdit = async (comment, editedContent) => {
LOCCMTRPY: editedContent
});
//
// comment.content = editedContent;
// comment.isEditTextarea = false; f
if (response.status === 200) {
const targetComment = findCommentById(comment.commentId, comments.value);
@ -712,15 +671,12 @@ const handleSubmitEdit = async (comment, editedContent) => {
targetComment.content = editedContent; //
targetComment.isEditTextarea = false; //
} else {
// console.warn(" ");
alert("수정할 댓글을 찾을 수 없습니다.");
}
} else {
// console.log(" :", response.data);
alert("댓글 수정 실패했습니다.");
}
} catch (error) {
// console.error(" :", error);
alert("댓글 수정 중 오류 발생했습니다.");
}
};
@ -730,10 +686,8 @@ const handleCancelEdit = (comment) => {
const targetComment = findCommentById(comment.commentId, comments.value);
if (targetComment) {
// console.log(" , :", targetComment);
targetComment.isEditTextarea = false;
} else {
// console.error(" , ");
alert("수정 취소를 실패했습니다.");
}
};
@ -756,7 +710,7 @@ const handleCommentDeleted = (deletedCommentId) => {
return;
}
// 2
//
for (let parent of comments.value) {
const childIndex = parent.children.findIndex(child => child.commentId === deletedCommentId);
if (childIndex !== -1) {
@ -764,11 +718,8 @@ const handleCommentDeleted = (deletedCommentId) => {
return;
}
}
// console.error(" :", deletedCommentId);
};
//
const formattedDate = (dateString) => {
if (!dateString) return "날짜 없음";