localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

1.대댓글 슬롯형태로 변경 2.대댓글익명클릭시해당대댓글에비밀번호입력이나오게수정
All checks were successful
LocalNet_front/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
nevermoregb 2025-03-10 11:22:45 +09:00
parent 3ac834dd4a
commit dc4ae608eb
4 changed files with 146 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/board/BoardComment.vue
View File

@ -48,33 +48,9 @@
<p class="m-0 text-muted">댓글이 삭제되었습니다.</p> <p class="m-0 text-muted">댓글이 삭제되었습니다.</p>
</template> --> </template> -->
<PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6" /> <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6" />
<BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment" /> <BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment" :commnetId="comment.commentId" />
<!-- 대댓글 --> <slot name="reply"></slot>
<ul v-if="comment.children && comment.children.length" class="list-unstyled">
<li v-for="child in comment.children" :key="child.commentId" class="mt-8 pt-6 ps-10 border-top">
<BoardComment
:comment="child"
:unknown="child.author === '익명'"
:isPlusButton="false"
:isLike="true"
:isCommentProfile="true"
:isCommentAuthor="child.isCommentAuthor"
:isCommentPassword="isCommentPassword"
: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>
</div> </div>
</template> </template>
@ -196,8 +172,4 @@
const handleEditClick = () => { const handleEditClick = () => {
emit('editClick', props.comment); emit('editClick', props.comment);
}; };
const handleReplyEditClick = comment => {
emit('editClick', comment);
};
</script> </script>

7
src/components/board/BoardCommentArea.vue
View File

@ -22,8 +22,8 @@
<div class="d-flex flex-wrap align-items-center"> <div class="d-flex flex-wrap align-items-center">
<!-- 익명 체크박스 (익명게시판일 경우에만)--> <!-- 익명 체크박스 (익명게시판일 경우에만)-->
<div v-if="unknown" 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" id="inlineCheckbox1" v-model="isCheck" /> <input class="form-check-input" type="checkbox" :id="`checkboxAnnonymous${commnetId}`" v-model="isCheck" />
<label class="form-check-label" for="inlineCheckbox1">익명</label> <label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label>
</div> </div>
<!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) --> <!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
@ -75,6 +75,9 @@
type: Number, type: Number,
default: 500, default: 500,
}, },
commnetId: {
type: Number,
},
}); });
const $common = inject('common'); const $common = inject('common');

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

@ -19,7 +19,35 @@
@cancelEdit="handleCancelEdit" @cancelEdit="handleCancelEdit"
@updateReaction="reactionData => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)" @updateReaction="reactionData => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
@update:password="updatePassword" @update:password="updatePassword"
/> >
<!-- 대댓글 -->
<template #reply>
<ul v-if="comment.children && comment.children.length" class="list-unstyled">
<li v-for="(child, index) in comment.children" :key="child.commentId" class="mt-8 pt-6 ps-10 border-top">
<BoardComment
:comment="child"
:unknown="child.author === '익명'"
:isPlusButton="false"
:isLike="true"
:isCommentProfile="true"
:isCommentAuthor="child.isCommentAuthor"
:isCommentPassword="isCommentPassword"
: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>
</template>
</BoardComment>
</li> </li>
</ul> </ul>
</template> </template>
@ -64,6 +92,9 @@
password: { password: {
type: String, type: String,
}, },
index: {
type: Number,
},
}); });
const emit = defineEmits([ const emit = defineEmits([
@ -126,4 +157,8 @@
const updatePassword = newPassword => { const updatePassword = newPassword => {
emit('update:password', newPassword); emit('update:password', newPassword);
}; };
const handleReplyEditClick = comment => {
emit('editClick', comment);
};
</script> </script>

207
src/components/button/BoardRecommendBtn.vue
View File

@ -1,124 +1,123 @@
<template v-if="isRecommend"> <template v-if="isRecommend">
<button class="btn btn-label-primary btn-icon" :class="{'clicked': likeClicked, 'big': bigBtn}" @click="handleLike"> <button class="btn btn-label-primary btn-icon" :class="{ clicked: likeClicked, big: bigBtn }" @click="handleLike">
<i class="fa-regular fa-thumbs-up"></i> <span class="num">{{ likeCount }}</span> <i class="fa-regular fa-thumbs-up"></i> <span class="num">{{ likeCount }}</span>
</button> </button>
<button class="btn btn-label-danger btn-icon" :class="{'clicked': dislikeClicked, 'big': bigBtn}" @click="handleDislike"> <button class="btn btn-label-danger btn-icon" :class="{ clicked: dislikeClicked, big: bigBtn }" @click="handleDislike">
<i class="fa-regular fa-thumbs-down"></i> <span class="num">{{ dislikeCount }}</span> <i class="fa-regular fa-thumbs-down"></i> <span class="num">{{ dislikeCount }}</span>
</button> </button>
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
const props = defineProps({ const props = defineProps({
comment: { comment: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
likeClicked : { likeClicked: {
type : Boolean, type: Boolean,
default : false, default: false,
}, },
dislikeClicked : { dislikeClicked: {
type : Boolean, type: Boolean,
default : false, default: false,
}, },
bigBtn : { bigBtn: {
type :Boolean, type: Boolean,
default : false, default: false,
}, },
isRecommend: { isRecommend: {
type:Boolean, type: Boolean,
default:true, default: true,
}, },
boardId: { boardId: {
type: Number, type: Number,
required: true, required: true,
}, },
commentId: { commentId: {
type: [Number, null], type: [Number, null],
default: null, default: null,
}, },
likeCount: { likeCount: {
type: Number, type: Number,
default: 0, default: 0,
}, },
dislikeCount: { dislikeCount: {
type: Number, type: Number,
default: 0, default: 0,
}, },
}); });
const emit = defineEmits(['updateReaction']); const emit = defineEmits(['updateReaction']);
const likeClicked = ref(props.likeClicked); const likeClicked = ref(props.likeClicked);
const dislikeClicked = ref(props.dislikeClicked); const dislikeClicked = ref(props.dislikeClicked);
const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount); const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount);
const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount); const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount);
const handleLike = () => { const handleLike = () => {
const isLike = !likeClicked.value; const isLike = !likeClicked.value;
const isDislike = false; const isDislike = false;
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike }); emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
likeClicked.value = isLike; likeClicked.value = isLike;
dislikeClicked.value = false; dislikeClicked.value = false;
}; };
const handleDislike = () => { const handleDislike = () => {
const isDislike = !dislikeClicked.value; const isDislike = !dislikeClicked.value;
const isLike = false; const isLike = false;
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
dislikeClicked.value = isDislike;
likeClicked.value = false;
};
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
dislikeClicked.value = isDislike;
likeClicked.value = false;
};
</script> </script>
<style scoped> <style scoped>
.btn + .btn { .btn + .btn {
margin-left: 5px; margin-left: 5px;
} }
.num { .num {
margin-left: 5px; margin-left: 5px;
} }
.btn-label-danger.clicked { .btn-label-danger.clicked {
background-color: #e6381a; background-color: #e6381a;
} }
.btn-label-danger.clicked i, .btn-label-danger.clicked i,
.btn-label-danger.clicked span { .btn-label-danger.clicked span {
color: #fff; color: #fff;
} }
.btn-label-primary.clicked { .btn-label-primary.clicked {
background-color: #5f61e6; background-color: #5f61e6;
} }
.btn-label-primary.clicked i, .btn-label-primary.clicked i,
.btn-label-primary.clicked span { .btn-label-primary.clicked span {
color : #fff; color: #fff;
} }
.btn { .btn {
width: 55px; width: 55px;
height: 30px; /* height: 30px; */
} }
.btn.big { .btn.big {
width: 70px; width: 70px;
height: 70px; height: 70px;
font-size: 18px; font-size: 18px;
} }
@media screen and (max-width:450px) { @media screen and (max-width: 450px) {
.btn { .btn {
width: 50px; width: 50px;
height: 20px; height: 20px;
font-size: 12px; font-size: 12px;
}
} }
}
</style> </style>