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

Merge branch 'main' into mypage

Browse Source
This commit is contained in:
dyhj625 2025-04-04 12:57:29 +09:00
commit a6c57646d7
12 changed files with 312 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,8 @@
:isLike="!isLike"
:isCommentPassword="isCommentPassword"
:isCommentProfile="true"
:is-edit-pushed="isEditPushed"
:is-delete-pushed="isDeletePushed"
@editClick="handleEditClick"
@deleteClick="$emit('deleteClick', comment)"
@updateReaction="handleUpdateReaction"
@ -116,9 +118,20 @@
password: {
type: String,
},
// isEditPushed: {
// type: Boolean,
// required: false,
// },
// isDeletePushed: {
// type: Boolean,
// required: false,
// },
editCommentAlert: String,
});
const isEditPushed = ref(false);
const isDeletePushed = ref(false);
const displayName = computed(() => {
return props.nickname ? props.nickname : props.comment.author;
});
@ -171,6 +184,24 @@
emit('submitPassword', props.comment, props.password);
};
const handleInject = inject('isBtnPushed');
// 수정, 삭제 버튼 활성화 상태값
watch(
() => handleInject.value,
(newValue, oldValue) => {
if (newValue) {
if (newValue.target == props.comment.commentId) {
isEditPushed.value = newValue.isEditPushed;
isDeletePushed.value = newValue.isDeletePushed;
} else {
isEditPushed.value = false;
isDeletePushed.value = false;
}
}
},
);
watch(
() => props.comment.isEditTextarea,
newVal => {

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

@ -13,6 +13,8 @@
:currentPasswordCommentId="currentPasswordCommentId"
:password="password"
:editCommentAlert="editCommentAlert[comment.commentId]"
:is-edit-pushed="comment.isEditPushed"
:is-delete-pushed="comment.isDeletePushed"
@editClick="handleEditClick"
@deleteClick="handleDeleteClick"
@submitPassword="submitPassword"
@ -40,6 +42,8 @@
:passwordCommentAlert="passwordCommentAlert"
:password="password"
:editCommentAlert="editCommentAlert[child.commentId]"
:is-edit-pushed="child.isEditPushed"
:is-delete-pushed="child.isDeletePushed"
@editClick="handleReplyEditClick"
@deleteClick="$emit('deleteClick', child)"
@submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent, child.commentId)"
@ -59,7 +63,7 @@
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
import { defineProps, defineEmits, watch } from 'vue';
import BoardComment from './BoardComment.vue';
const props = defineProps({

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

@ -27,8 +27,8 @@
<!-- 수정, 삭제 버튼 -->
<template v-if="!isDeletedComment && (unknown || isCommentAuthor || isAuthor)">
<div class="float-end ms-1">
<EditButton @click.stop="editClick" />
<DeleteButton :class="'ms-1'" @click.stop="deleteClick" />
<EditButton @click.stop="editClick" :is-pushed="isEditPushed" />
<DeleteButton :class="'ms-1'" @click.stop="deleteClick" :is-pushed="isDeletePushed" />
</div>
</template>
@ -107,6 +107,14 @@
type: String,
default: false,
},
isEditPushed: {
type: Boolean,
require: false,
},
isDeletePushed: {
type: Boolean,
require: false,
},
});
const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);

15
src/components/button/DeleteBtn.vue
View File

@ -1,13 +1,14 @@
<template>
<button class="btn btn-label-primary btn-icon">
<i class='bx bx-trash' ></i>
<button class="btn btn-label-primary btn-icon" :class="{ active: props.isPushed }">
<i class="bx bx-trash"></i>
</button>
</template>
<script>
export default {
name: 'DeleteButton',
methods: {
<script setup>
const props = defineProps({
isPushed: {
type: Boolean,
required: false,
},
};
});
</script>

14
src/components/button/EditBtn.vue
View File

@ -1,10 +1,10 @@
<template>
<button class="btn btn-label-primary btn-icon" @click="toggleText">
<button class="btn btn-label-primary btn-icon" :class="{ active: props.isPushed }" @click="toggleText">
<i :class="buttonClass"></i>
</button>
</template>
<script setup>
import { ref, watch, defineProps, defineEmits, watchEffect } from 'vue';
import { ref, watch, defineEmits, watchEffect } from 'vue';
const props = defineProps({
isToggleEnabled: {
type: Boolean,
@ -14,18 +14,22 @@
type: Boolean,
required: false,
},
isPushed: {
type: Boolean,
required: false,
},
});
const emit = defineEmits(["click"]);
const emit = defineEmits(['click']);
const buttonClass = ref('bx bx-edit-alt');
watchEffect(() => {
buttonClass.value = props.isActive ? 'bx bx-x' : 'bx bx-edit-alt';
});
const toggleText = (event) => {
const toggleText = event => {
// 이벤트 객체를 매개변수로 받아옵니다
if (props.isToggleEnabled) {
buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
}
emit("click", event); // 이벤트 객체를 같이 전달
emit('click', event); // 이벤트 객체를 같이 전달
};
const resetButton = () => {
buttonClass.value = 'bx bx-edit-alt';

140
src/components/main/MainVote.vue
View File

@ -6,9 +6,9 @@
<h5 class="mb-1 me-2">투표진행</h5>
</div>
</div>
<div class="card-body" v-if="voteList.length > 0">
<div class="card-body" v-if="voteListData.length > 0">
<ul class="p-0 m-0">
<li class="d-flex mb-1" v-for="item in voteList" :key="item.LOCVOTSEQ">
<li class="d-flex mb-1" v-for="item in voteListData" :key="item.LOCVOTSEQ">
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2 mb-3">
<div class="text-muted small">{{ item.localVote.formatted_LOCVOTRDT }}</div>
@ -23,16 +23,18 @@
@error="setDefaultImage"
/>
</div>
<div class="timeline-event ps-1" style="cursor: pointer;" @click="goVoteList()" >
<!-- <div class="timeline-event ps-1" style="cursor: pointer;" @click="goVoteList()" > -->
<div class="timeline-event ps-1" style="cursor: pointer;" @click.stop="openModal(item.localVote.LOCVOTSEQ)" >
<div class="timeline-header ">
<small ><strong>{{ truncateTitle(item.localVote.LOCVOTTTL) }}</strong></small>
</div>
<small class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span class="badge badge-dot text-bg-warning me-1">
</span> {{ getDaysAgo(item.localVote.formatted_LOCVOTEDT) }} ({{item.localVote.total_voted}}/{{ item.localVote.total_votable }})</small>
<small class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span >
</span>{{getDaysAgo(item.localVote.formatted_LOCVOTEDT)}}({{item.localVote.total_voted}}/{{ item.localVote.total_votable }})</small>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
@ -50,13 +52,57 @@
</div>
</div>
</div>
<!--투표 모달 -->
<CenterModal :display="isModalOpen" @close="closeModal">
<template #title> 투표 하기 </template>
<template #body>
<div>
<vote-list
:key="voteListKey"
:data="selectVoteDate"
@checkedNames="checkedNames"
@addContents="addContents"
@endVoteId="endVoteId"
@voteDelete="voteDelete"
/>
</div>
</template>
<template #footer>
<BackButton @click="closeModal" />
</template>
</CenterModal>
</template>
<script setup>
import router from '@/router';
import $api from '@api';
import { onMounted, ref } from 'vue';
import CenterModal from '@c/modal/CenterModal.vue';
import BackButton from '@c/button/BackBtn.vue';
import voteList from '@c/voteboard/voteCardList.vue';
import { useToastStore } from '@s/toastStore';
const toastStore = useToastStore();
const currentPage = ref(1);
const voteset = ref(0);
const voteListData= ref([]);
const voteListKey = ref(0); //초기화
// 로그 모달 상태
const isModalOpen = ref(false);
const selectVoteDate = ref([]);
// 로그 모달 열기
const openModal = async (id) => {
isModalOpen.value = true;
if(id){
const selectData = voteListData.value.filter((item) => item.localVote.LOCVOTSEQ === id);
selectVoteDate.value = selectData;
}
};
// 로그 모달 닫기
const closeModal = () => {
isModalOpen.value = false;
voteListKey.value++;
};
// 프로필 이미지
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
const defaultProfile = "/img/icons/icon.png";
@ -67,9 +113,6 @@ const setDefaultImage = (event) => {
event.target.src = defaultProfile;
};
const currentPage = ref(1);
const voteset = ref(0);
const voteList= ref([]);
onMounted(() => {
getvoteList();
});
@ -77,7 +120,6 @@ onMounted(() => {
//투표목록
const getvoteList = () => {
$api.get('vote/getVoteList',{
//목록조회시 파라미터 전달
params:
{
page: 1
@ -85,11 +127,80 @@ const getvoteList = () => {
,myVote:'2' //내가 안한 투표
}
}).then(res => {
voteList.value = res.data.data.list;
voteList.value = res.data.data.list.slice(0, 6);
voteListData.value = res.data.data.list;
voteListData.value = res.data.data.list.slice(0, 6);
})
};
};
//투표하기
const checkedNames = (numList) => {
$api.post('vote/insertCheckedNums',{
checkedList :numList
,votenum : numList[0].LOCVOTSEQ
}).then((res)=>{
if(res.data.status === 'OK'){
toastStore.onToast('투표가 완료되었습니다.', 's');
isModalOpen.value = false;
getvoteList();
voteListKey.value++;
}
})
}
//투표항목추가
const addContents = (itemList, voteId) => {
$api.post('vote/insertWord',{
itemList :itemList
,voteId :voteId
}).then((res)=>{
if(res.data.status === 'OK'){
toastStore.onToast('항목이 등록되었습니다.', 's');
getvoteList();
const updatedVote = selectVoteDate.value.find(vote => vote.localVote.LOCVOTSEQ === voteId);
if (updatedVote) {
if (!updatedVote.voteDetails) {
updatedVote.voteDetails = [];
}
const maxSeq = updatedVote.voteDetails.reduce((max, item) => {
return item.VOTDETSEQ > max ? item.VOTDETSEQ : max;
}, 0);
// 새 항목을 voteDetails에 추가
itemList.forEach(item => {
updatedVote.voteDetails.push({
VOTDETSEQ: maxSeq + 1,
LOCVOTSEQ: voteId,
LOCVOTCON: item.content,
LOCVOTLIK: item.url,
VOTE_COUNT: 0,
yesvote: 0
});
});
}
}
})
}
//투표종료
const endVoteId = (endVoteId) => {
$api.patch('vote/updateEndData',{
endVoteId :endVoteId
}).then((res)=>{
if(res.data.status === 'OK'){
getvoteList();
isModalOpen.value = false;
}
})
}
//투표 삭제
const voteDelete =(id) =>{
$api.patch('vote/updateDeleteData',{
deleteVoteId :id
}).then((res)=>{
if(res.data.status === 'OK'){
toastStore.onToast('투표가 삭제되었습니다.', 's');
getvoteList();
isModalOpen.value = false;
}
})
}
// 제목이 14글자 넘어가면 ... 처리하는 함수
const truncateTitle = title => {
return title.length > 10 ? title.slice(0, 10) + '...' : title;
@ -102,6 +213,7 @@ const goVoteList = () =>{
query: {
voteset: '2' //투표중
,myVote:'2' //내가 안한 투표
,id:id
}
});
}
@ -115,9 +227,9 @@ const getDaysAgo = (dateString) => {
const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24))+1; // 일 단위 변환
// 오늘 날짜인 경우 "오늘" 반환
if (dayDiff === 0) return "금일 종료";
if (dayDiff === 0) return "⏰금일 종료";
return `종료 ${Math.abs(dayDiff)}일 전`;
return `⏰종료 ${Math.abs(dayDiff)}일 전`;
};
</script>

2
src/components/voteboard/voteCompleteUserList.vue
View File

@ -3,7 +3,7 @@
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
<div class="d-flex flex-wrap align-items-center">
<ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
<ul class="list-unstyled users-list d-flex align-items-center avatar-group">
<vote-complete-user-list-card :data="data"/>
</ul>
</div>

2
src/components/voteboard/voteCompleteUserListCard.vue
View File

@ -9,7 +9,7 @@
<img
class="rounded-circle user-avatar border border-3"
:src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
:style="`border-color: ${data.usercolor} !important;`"
:style="`border-color: ${data.usercolor} !important; width: 90%; height: auto;`"
@error="$event.target.src = '/img/icons/icon.png'"
alt="user"
/>

2
src/components/voteboard/voteInCompleteUserList.vue
View File

@ -3,7 +3,7 @@
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
<div class="d-flex flex-wrap align-items-center">
<ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
<ul class="list-unstyled users-list d-flex align-items-center avatar-group ">
<vote-in-complete-user-list-card :data="data" />
</ul>
</div>

2
src/components/voteboard/voteInCompleteUserListCard.vue
View File

@ -9,7 +9,7 @@
<img
class="rounded-circle user-avatar border border-3"
:src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
:style="`border-color: ${data.usercolor} !important;`"
:style="`border-color: ${data.usercolor} !important; width: 90%; height: auto;`"
@error="$event.target.src = '/img/icons/icon.png'"
alt="user"
/>

4
src/components/voteboard/voteUserList.vue
View File

@ -2,7 +2,7 @@
<div class="d-flex align-items-start mt-3">
<!--투표한 사람 목록 -->
<div class="d-flex align-items-center gap-2 flex-wrap">
<i class='bx bxs-user-check link-info fa-3x'></i>
<i class='bx bxs-user-check link-info fa-2x'></i>
<vote-complete-user-list
v-for="(item, index) in voetedUsers"
:key="index"
@ -11,7 +11,7 @@
</div>
<!-- 투표안한 사람 목록 -->
<div class="d-flex align-items-center gap-2 ms-auto flex-wrap">
<i class='bx bxs-user-x link-danger fa-3x'></i>
<i class='bx bxs-user-x link-danger fa-2x'></i>
<vote-in-complete-user-list
v-for="(item, index) in noVoetedUsers"
:key="index"

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

@ -17,6 +17,8 @@
:date="formattedBoardDate"
:isLike="false"
:isAuthor="isAuthor"
:is-edit-pushed="isEditPushed"
:is-delete-pushed="isDeletePushed"
@editClick="editClick"
@deleteClick="deleteClick"
/>
@ -92,7 +94,7 @@
@updateReaction="handleUpdateReaction"
/>
</div>
<div v-if="!type" >
<div v-if="!type">
<!-- 댓글 입력 영역 -->
<BoardCommentArea
:profileName="profileName"
@ -142,7 +144,7 @@
import BoardCommentList from '@c/board/BoardCommentList.vue';
import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
import Pagination from '@c/pagination/Pagination.vue';
import { ref, onMounted, computed, inject } from 'vue';
import { ref, onMounted, computed, inject, provide } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserInfoStore } from '@/stores/useUserInfoStore';
import { useToastStore } from '@s/toastStore';
@ -165,6 +167,8 @@
const attachment = ref(false);
const comments = ref([]);
const profileImg = ref('');
const isEditPushed = ref(false);
const isDeletePushed = ref(false);
const route = useRoute();
const router = useRouter();
@ -319,6 +323,9 @@
});
fetchComments(pagination.value.currentPage);
closeAllEditTextareas();
closeAllPasswordAreas();
activeCommentBtnClass();
};
// 댓글 목록 조회
@ -476,6 +483,9 @@
if (isUnknown) {
togglePassword('edit');
closeAllEditTextareas();
closeAllPasswordAreas();
activeCommentBtnClass();
} else {
router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
}
@ -505,11 +515,36 @@
return null;
};
const btnState = ref({});
provide('isBtnPushed', btnState);
const activeCommentBtnClass = (targetComment = null, type = 3) => {
const target = targetComment?.commentId;
let editPush = false;
let deletePush = false;
if (targetComment) {
if (type == 1) {
editPush = true;
deletePush = false;
} else if (type == 2) {
editPush = false;
deletePush = true;
}
}
btnState.value = {
target: target,
isEditPushed: editPush,
isDeletePushed: deletePush,
};
};
// 댓글 수정 클릭 시 이벤트(대댓글 포함)
const editComment = comment => {
acitveButtonType(); //게시글 버튼 클릭 클래스 제거
password.value = '';
passwordCommentAlert.value = '';
//currentPasswordCommentId.value = null;
isPassword.value = false; // 상단 프로필 비밀번호
const targetComment = findCommentById(comment.commentId, comments.value);
@ -522,27 +557,20 @@
if (isMyComment) {
if (targetComment.isEditTextarea) {
// 수정창이 열려 있는 상태에서 다시 수정 버튼을 누르면 초기화
targetComment.isEditTextarea = false;
currentPasswordCommentId.value = comment.commentId;
activeCommentBtnClass(targetComment, 3);
} else {
// 다른 모든 댓글의 수정창 닫기
closeAllEditTextareas();
currentPasswordCommentId.value = null;
// 현재 댓글만 수정 모드 활성화
targetComment.isEditTextarea = true;
closeAllEditTextareas(); // 다른 모든 댓글의 수정창 닫기
currentPasswordCommentId.value = null; // 현재 댓글만 수정 모드 활성화
targetComment.isEditTextarea = true; // 선택 버튼 활성화 상태 제어
activeCommentBtnClass(targetComment, 1);
}
} else if (isAnonymous) {
if (currentPasswordCommentId.value === comment.commentId) {
// 이미 비밀번호 입력 중이면 유지
toggleCommentPassword(comment, 'edit');
return;
toggleCommentPassword(comment, 'edit'); // 이미 비밀번호 입력 중이면 유지
} else {
// 다른 모든 댓글의 수정창 닫기
closeAllEditTextareas();
// 비밀번호 입력
closeAllEditTextareas(); // 다른 모든 댓글의 수정창 닫기
targetComment.isEditTextarea = false;
toggleCommentPassword(comment, 'edit');
}
@ -551,6 +579,26 @@
}
};
// 댓글 삭제 버튼 클릭
const deleteComment = async comment => {
const isMyComment = comment.authorId === currentUserId.value;
// 익명인 경우
if (unknown.value && !isMyComment) {
// 수정 에디터 열려있을때
if (comment.isEditTextarea) {
comment.isEditTextarea = false;
comment.isCommentPassword = true;
toggleCommentPassword(comment, 'delete');
} else {
activeCommentBtnClass(comment, 3);
toggleCommentPassword(comment, 'delete');
}
} else {
deleteReplyComment(comment);
}
};
// 모든 댓글의 수정 창 닫기
const closeAllEditTextareas = () => {
comments.value.forEach(comment => {
@ -568,30 +616,20 @@
passwordCommentAlert.value = '';
};
// 댓글 삭제 버튼 클릭
const deleteComment = async comment => {
const isMyComment = comment.authorId === currentUserId.value;
if (unknown.value && !isMyComment) {
if (comment.isEditTextarea) {
comment.isEditTextarea = false;
comment.isCommentPassword = true;
toggleCommentPassword(comment, 'delete');
} else {
toggleCommentPassword(comment, 'delete');
}
} else {
deleteReplyComment(comment);
}
};
// 익명 댓글 비밀번호 창 토글
const toggleCommentPassword = (comment, button) => {
if (lastCommentClickedButton.value === button && currentPasswordCommentId.value === comment.commentId) {
currentPasswordCommentId.value = null; // 비밀번호 창 닫기
password.value = '';
passwordCommentAlert.value = '';
activeCommentBtnClass(comment, 3);
} else {
if (button == 'edit') {
activeCommentBtnClass(comment, 1);
} else if (button == 'delete') {
activeCommentBtnClass(comment, 2);
}
currentPasswordCommentId.value = comment.commentId; // 비밀번호 창 열기
password.value = '';
passwordCommentAlert.value = '';
@ -608,17 +646,49 @@
isPassword.value = false;
boardPasswordAlert.value = '';
password.value = '';
acitveButtonType();
return;
}
closeAllPasswordAreas();
if (lastClickedButton.value === button) {
isPassword.value = !isPassword.value;
boardPasswordAlert.value = '';
lastClickedButton.value = '';
acitveButtonType();
} else {
isPassword.value = true;
}
lastClickedButton.value = button;
if (button == 'edit') {
acitveButtonType(1);
} else if (button == 'delete') {
acitveButtonType(2);
} else {
acitveButtonType();
}
}
};
// 선택한 게시글 버튼 핸들링(수정, 삭제 버튼)
const acitveButtonType = type => {
//closeAllEditTextareas(); //다른 모든 텍스트 에디터 비활성화
//inActiveCommentButtonClass(); // 댓글 버튼 비활성화
// 수정
if (type == 1) {
isEditPushed.value = true;
isDeletePushed.value = false;
// 삭제
} else if (type == 2) {
isEditPushed.value = false;
isDeletePushed.value = true;
// 비활성화
} else {
isEditPushed.value = false;
isDeletePushed.value = false;
}
};
// 게시글 비밀번호 제출
@ -738,6 +808,7 @@
if (response.data.code === 200) {
await fetchComments(pagination.value.currentPage);
closeAllPasswordAreas();
activeCommentBtnClass();
if (targetComment) {
// 댓글 내용만 "삭제된 댓글입니다."로 변경하고, 구조는 유지
@ -766,6 +837,7 @@
if (response.status === 200) {
togglePassword('close');
fetchComments(pagination.value.currentPage);
activeCommentBtnClass();
return;
// const targetComment = findCommentById(comment.commentId, comments.value);