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

Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front

Browse Source
This commit is contained in:
khj0414 2025-03-10 13:00:38 +09:00
commit 16b95d546c
10 changed files with 541 additions and 483 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/css/custom.css
View File

@ -3,6 +3,9 @@
/* 휴가 */
.fc-daygrid-event {
pointer-events: none !important;
}
/* 이벤트 선 없게 */
.fc-event {
border: none;

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

@ -16,7 +16,7 @@
@updateReaction="handleUpdateReaction"
/>
<!-- 댓글 비밀번호 입력창 (익명일 경우) -->
<div v-if="currentPasswordCommentId === comment.commentId && unknown" class="mt-3 w-25 ms-auto">
<div v-if="currentPasswordCommentId === comment.commentId && unknown && comment.author == '익명'" class="mt-3 w-25 ms-auto">
<div class="input-group">
<input
type="password"
@ -47,151 +47,129 @@
<!-- <template v-if="isDeleted">
<p class="m-0 text-muted">댓글이 삭제되었습니다.</p>
</template> -->
<PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
<BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment"/>
<PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6" />
<BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment" :commnetId="comment.commentId" />
<!-- 대댓글 -->
<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>
<slot name="reply"></slot>
</div>
</template>
<script setup>
import { defineProps, defineEmits, ref, computed, watch } from 'vue';
import BoardProfile from './BoardProfile.vue';
import BoardCommentArea from './BoardCommentArea.vue';
import PlusButton from '../button/PlusBtn.vue';
import SaveBtn from '../button/SaveBtn.vue';
import { defineProps, defineEmits, ref, computed, watch } from 'vue';
import BoardProfile from './BoardProfile.vue';
import BoardCommentArea from './BoardCommentArea.vue';
import PlusButton from '../button/PlusBtn.vue';
import SaveBtn from '../button/SaveBtn.vue';
const props = defineProps({
comment: {
type: Object,
required: true,
},
unknown: {
type: Boolean,
default: false,
},
isCommentAuthor: {
type: Boolean,
default: false,
},
isPlusButton: {
type: Boolean,
default: true,
},
isLike: {
type: Boolean,
default: false,
},
isEditTextarea: {
type: Boolean,
default: false
},
isDeleted: {
type: Boolean,
default: false
},
isCommentPassword: {
type: Boolean,
default: false,
},
passwordCommentAlert: {
type: String,
default: ''
},
currentPasswordCommentId: {
type: Number
},
password:{
type: String
},
});
// emits 정의
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit', 'update:password']);
const localEditedContent = ref(props.comment.content);
// 댓글 입력 창 토글
const isComment = ref(false);
const toggleComment = () => {
isComment.value = !isComment.value;
};
// 부모 컴포넌트에 대댓글 추가 요청
const submitComment = (newComment) => {
emit('submitComment', { parentId: props.comment.commentId, ...newComment, LOCBRDTYP: newComment.LOCBRDTYP });
isComment.value = false;
};
// 좋아요, 싫어요
const handleUpdateReaction = (reactionData) => {
emit('updateReaction', {
boardId: props.comment.boardId,
commentId: props.comment.commentId || reactionData.commentId,
...reactionData,
const props = defineProps({
comment: {
type: Object,
required: true,
},
unknown: {
type: Boolean,
default: false,
},
isCommentAuthor: {
type: Boolean,
default: false,
},
isPlusButton: {
type: Boolean,
default: true,
},
isLike: {
type: Boolean,
default: false,
},
isEditTextarea: {
type: Boolean,
default: false,
},
isDeleted: {
type: Boolean,
default: false,
},
isCommentPassword: {
type: Boolean,
default: false,
},
passwordCommentAlert: {
type: String,
default: '',
},
currentPasswordCommentId: {
type: Number,
},
password: {
type: String,
},
});
};
// emits 정의
const emit = defineEmits([
'submitComment',
'updateReaction',
'editClick',
'deleteClick',
'submitPassword',
'submitEdit',
'cancelEdit',
'update:password',
]);
// 비밀번호 확인
const logPasswordAndEmit = () => {
emit('submitPassword', props.comment, props.password);
};
const localEditedContent = ref(props.comment.content);
watch(() => props.comment.isEditTextarea, (newVal) => {
if (newVal) {
localEditedContent.value = props.comment.content;
}
});
// 댓글 입력 창 토글
const isComment = ref(false);
const toggleComment = () => {
isComment.value = !isComment.value;
};
// watch(() => props.comment.isDeleted, () => {
// console.log("BoardComment - isDeleted 상태 변경됨:", newVal);
// 부모 컴포넌트에 대댓글 추가 요청
const submitComment = newComment => {
emit('submitComment', { parentId: props.comment.commentId, ...newComment, LOCBRDTYP: newComment.LOCBRDTYP });
isComment.value = false;
};
// if (newVal) {
// localEditedContent.value = "댓글이 삭제되었습니다."; // UI 반영
// props.comment.isEditTextarea = false;
// }
// });
// 좋아요, 싫어요
const handleUpdateReaction = reactionData => {
emit('updateReaction', {
boardId: props.comment.boardId,
commentId: props.comment.commentId || reactionData.commentId,
...reactionData,
});
};
// 수정버튼
const submitEdit = () => {
emit('submitEdit', props.comment, localEditedContent.value);
};
// 비밀번호 확인
const logPasswordAndEmit = () => {
emit('submitPassword', props.comment, props.password);
};
const handleEditClick = () => {
emit('editClick', props.comment);
}
watch(
() => props.comment.isEditTextarea,
newVal => {
if (newVal) {
localEditedContent.value = props.comment.content;
}
},
);
const handleReplyEditClick = (comment) => {
emit('editClick', comment);
}
// watch(() => props.comment.isDeleted, () => {
// console.log("BoardComment - isDeleted 상태 변경됨:", newVal);
// if (newVal) {
// localEditedContent.value = "댓글이 삭제되었습니다."; // UI 반영
// props.comment.isEditTextarea = false;
// }
// });
// 수정버튼
const submitEdit = () => {
emit('submitEdit', props.comment, localEditedContent.value);
};
const handleEditClick = () => {
emit('editClick', props.comment);
};
</script>

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

@ -11,7 +11,7 @@
</div> -->
<!-- 텍스트박스 -->
<div class="w-100">
<textarea class="form-control" placeholder="댓글 달기" rows="3" v-model="comment"></textarea>
<textarea class="form-control" placeholder="댓글 달기" rows="3" :maxlength="maxLength" v-model="comment"></textarea>
<span v-if="commentAlert" class="invalid-feedback d-block text-start ms-2">{{ commentAlert }}</span>
<span v-else class="invalid-feedback d-block text-start ms-2">{{ textAlert }}</span>
</div>
@ -22,8 +22,8 @@
<div class="d-flex flex-wrap align-items-center">
<!-- 익명 체크박스 (익명게시판일 경우에만)-->
<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" />
<label class="form-check-label" for="inlineCheckbox1">익명</label>
<input class="form-check-input" type="checkbox" :id="`checkboxAnnonymous${commnetId}`" v-model="isCheck" />
<label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label>
</div>
<!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
@ -51,78 +51,84 @@
</template>
<script setup>
import { ref, defineEmits, defineProps, watch, inject } from 'vue';
import SaveBtn from '../button/SaveBtn.vue';
import { ref, defineEmits, defineProps, watch, inject } from 'vue';
import SaveBtn from '../button/SaveBtn.vue';
const props = defineProps({
unknown: {
type: Boolean,
default: true,
},
parentId: {
type: Number,
default: 0,
},
passwordAlert: {
type: String,
default: '',
},
commentAlert: {
type: String,
default: '',
},
});
const $common = inject('common');
const comment = ref('');
const password = ref('');
const isCheck = ref(false);
const textAlert = ref('');
const passwordAlert2 = ref('');
const emit = defineEmits(['submitComment']);
const handleCommentSubmit = () => {
if (!$common.isNotEmpty(comment.value)) {
textAlert.value = '댓글을 입력하세요';
return false;
} else {
textAlert.value = '';
}
if (isCheck.value && !$common.isNotEmpty(password.value)) {
passwordAlert2.value = '비밀번호를 입력하세요';
return false;
} else {
passwordAlert2.value = '';
}
// 댓글 제출
emit('submitComment', {
comment: comment.value,
password: isCheck.value ? password.value : '',
isCheck: isCheck.value,
LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정
const props = defineProps({
unknown: {
type: Boolean,
default: true,
},
parentId: {
type: Number,
default: 0,
},
passwordAlert: {
type: String,
default: '',
},
commentAlert: {
type: String,
default: '',
},
maxLength: {
type: Number,
default: 500,
},
commnetId: {
type: Number,
},
});
// 제출 후 입력 필드 리셋
resetCommentForm();
};
const $common = inject('common');
const comment = ref('');
const password = ref('');
const isCheck = ref(false);
const textAlert = ref('');
const passwordAlert2 = ref('');
// 입력 필드 리셋 함수 추가
const resetCommentForm = () => {
comment.value = '';
password.value = '';
isCheck.value = false;
};
const emit = defineEmits(['submitComment']);
watch(
() => props.passwordAlert,
() => {
if (!props.passwordAlert) {
resetCommentForm();
const handleCommentSubmit = () => {
if (!$common.isNotEmpty(comment.value)) {
textAlert.value = '댓글을 입력하세요';
return false;
} else {
textAlert.value = '';
}
}
);
</script>
if (isCheck.value && !$common.isNotEmpty(password.value)) {
passwordAlert2.value = '비밀번호를 입력하세요';
return false;
} else {
passwordAlert2.value = '';
}
// 댓글 제출
emit('submitComment', {
comment: comment.value,
password: isCheck.value ? password.value : '',
isCheck: isCheck.value,
LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정
});
// 제출 후 입력 필드 리셋
resetCommentForm();
};
// 입력 필드 리셋 함수 추가
const resetCommentForm = () => {
comment.value = '';
password.value = '';
isCheck.value = false;
};
watch(
() => props.passwordAlert,
() => {
if (!props.passwordAlert) {
resetCommentForm();
}
},
);
</script>

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

@ -1,10 +1,6 @@
<template>
<ul class="list-unstyled mt-10">
<li
v-for="comment in comments"
:key="comment.commentId"
class="mt-6 border-bottom pb-6"
>
<li v-for="comment in comments" :key="comment.commentId" class="mt-6 border-bottom pb-6">
<BoardComment
:unknown="unknown"
:comment="comment"
@ -21,104 +17,148 @@
@submitComment="submitComment"
@submitEdit="handleSubmitEdit"
@cancelEdit="handleCancelEdit"
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
@updateReaction="reactionData => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
@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>
</ul>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
import BoardComment from './BoardComment.vue'
import { defineProps, defineEmits } from 'vue';
import BoardComment from './BoardComment.vue';
const props = defineProps({
comments: {
type: Array,
required: true,
default: () => []
},
unknown: {
type: Boolean,
default: true,
},
isCommentAuthor: {
type: Boolean,
default: false,
},
isCommentPassword: {
type: Boolean,
default: false,
},
isEditTextarea: {
type: Boolean,
default: false,
},
isDeleted: {
type: Boolean,
default: false,
},
passwordCommentAlert: {
type: String,
default: ''
},
currentPasswordCommentId: {
type: Number
},
password:{
type: String
},
});
const props = defineProps({
comments: {
type: Array,
required: true,
default: () => [],
},
unknown: {
type: Boolean,
default: true,
},
isCommentAuthor: {
type: Boolean,
default: false,
},
isCommentPassword: {
type: Boolean,
default: false,
},
isEditTextarea: {
type: Boolean,
default: false,
},
isDeleted: {
type: Boolean,
default: false,
},
passwordCommentAlert: {
type: String,
default: '',
},
currentPasswordCommentId: {
type: Number,
},
password: {
type: String,
},
index: {
type: Number,
},
});
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'clearPassword','submitEdit', 'update:password']);
const emit = defineEmits([
'submitComment',
'updateReaction',
'editClick',
'deleteClick',
'submitPassword',
'clearPassword',
'submitEdit',
'update:password',
]);
const submitComment = (replyData) => {
emit('submitComment', replyData);
};
const handleUpdateReaction = (reactionData, commentId, boardId) => {
const updatedReactionData = {
...reactionData,
commentId: commentId || reactionData.commentId,
boardId: boardId || reactionData.boardId,
const submitComment = replyData => {
emit('submitComment', replyData);
};
emit('updateReaction', updatedReactionData);
}
const handleUpdateReaction = (reactionData, commentId, boardId) => {
const updatedReactionData = {
...reactionData,
commentId: commentId || reactionData.commentId,
boardId: boardId || reactionData.boardId,
};
const submitPassword = (comment, password) => {
emit('submitPassword', comment, password);
};
emit('updateReaction', updatedReactionData);
};
const handleEditClick = (comment) => {
if (comment.parentId) {
emit('editClick', comment); // 대댓글
} else {
emit('editClick', comment); // 댓글
}
};
const submitPassword = (comment, password) => {
emit('submitPassword', comment, password);
};
const handleSubmitEdit = (comment, editedContent) => {
emit("submitEdit", comment, editedContent);
};
const handleEditClick = comment => {
if (comment.parentId) {
emit('editClick', comment); // 대댓글
} else {
emit('editClick', comment); // 댓글
}
};
const handleDeleteClick = (comment) => {
if (comment.parentId) {
emit('deleteClick', comment); // 대댓글 삭제
} else {
emit('deleteClick', comment); // 댓글 삭제
}
};
const handleSubmitEdit = (comment, editedContent) => {
emit('submitEdit', comment, editedContent);
};
const handleCancelEdit = (comment) => {
if (comment.parentId) {
emit('cancelEdit', comment); // 대댓글 수정 취소
} else {
emit('cancelEdit', comment); // 댓글 수정 취소
}
};
const handleDeleteClick = comment => {
if (comment.parentId) {
emit('deleteClick', comment); // 대댓글 삭제
} else {
emit('deleteClick', comment); // 댓글 삭제
}
};
const updatePassword = (newPassword) => {
emit('update:password', newPassword);
};
const handleCancelEdit = comment => {
if (comment.parentId) {
emit('cancelEdit', comment); // 대댓글 수정 취소
} else {
emit('cancelEdit', comment); // 댓글 수정 취소
}
};
const updatePassword = newPassword => {
emit('update:password', newPassword);
};
const handleReplyEditClick = comment => {
emit('editClick', comment);
};
</script>

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

@ -40,7 +40,7 @@
const defaultProfile = '/img/icons/icon.png';
// 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
const baseUrl = 'http://localhost:10325/'; // API 서버 URL
const baseUrl = import.meta.env.VITE_SERVER; // API 서버 URL
// Props 정의
const props = defineProps({

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

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

26
src/components/modal/VacationModal.vue
View File

@ -1,7 +1,7 @@
<template>
<div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
<div class="vac-modal-content p-5 modal-scroll">
<h5 class="vac-modal-title">📅 내 연차 사용 내역</h5>
<h5 class="vac-modal-title">📅 내 연차 상세 내역</h5>
<button class="close-btn" @click="closeModal">✖</button>
<!-- 연차 목록 -->
<div class="vac-modal-body" v-if="mergedVacations.length > 0">
@ -26,8 +26,8 @@
</ol>
</div>
<!-- 연차 데이터 없음 -->
<p v-else class="text-sm-center mt-10 text-gray">
🚫 사용한 연차가 없습니다.
<p v-else class="text-sm-center mt-10 text-gray vac-modal-title">
🚫 연차 내역이 없습니다.
</p>
</div>
</div>
@ -58,19 +58,15 @@ const emit = defineEmits(["close"]);
// 사용한 휴가(선물,연차사용)
let globalCounter = 0;
const usedVacations = computed(() => {
const result = [];
props.myVacations.forEach((v) => {
return props.myVacations.flatMap((v) => {
const count = v.used_quota || 1;
for (let i = 0; i < count; i++) {
result.push({
...v,
category: "used",
code: v.LOCVACTYP,
_expandIndex: globalCounter++,
});
}
return Array.from({ length: count }, (_, i) => ({
...v,
category: "used",
code: v.LOCVACTYP,
_expandIndex: globalCounter++,
}));
});
return result;
});
// 받은 휴가
@ -114,7 +110,7 @@ const mergedVacations = computed(() => {
// 모달 닫기
const closeModal = () => {
emit("close");
emit("close");
};
</script>
<style scoped>

18
src/components/vacation/ProfileList.vue
View File

@ -69,12 +69,18 @@ nextTick(() => {
});
const sortedUserList = computed(() => {
if (!employeeId.value) return userList.value;
const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
return myProfile ? [myProfile, ...otherUsers] : userList.value;
if (!employeeId.value) return [];
// 관리자가 아닌 사용자만 필터링
const nonAdminUsers = userList.value.filter(user => user.MEMBERROL !== "ROLE_ADMIN");
const myProfile = nonAdminUsers.find(user => user.MEMBERSEQ === employeeId.value);
const otherUsers = nonAdminUsers.filter(user => user.MEMBERSEQ !== employeeId.value);
return myProfile ? [myProfile, ...otherUsers] : otherUsers;
});
const getUserProfileImage = (profilePath) =>
profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
@ -94,11 +100,11 @@ if (windowWidth.value >= 1650) {
if (totalUsers <= 15) return "30px";
return "20px";
} else if (windowWidth.value >= 1024) {
if (totalUsers <= 10) return "35px";
if (totalUsers <= 10) return "40px";
if (totalUsers <= 15) return "30px";
return "20px";
} else {
return "20px";
return "30px";
}
});

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

@ -92,6 +92,7 @@
:unknown="unknown"
:commentAlert="commentAlert"
:passwordAlert="passwordAlert"
:maxLength="500"
@submitComment="handleCommentSubmit"
/>
</div>
@ -237,7 +238,6 @@
const data = response.data.data;
profileName.value = data.author || '익명';
console.log(data.author);
authorId.value = data.authorId;
boardTitle.value = data.title || '제목 없음';
boardContent.value = data.content || '';
@ -580,7 +580,7 @@
LOCBRDPWD: password.value,
LOCBRDSEQ: currentBoardId.value,
});
console.log('response: ', response);
if (response.data.code === 200 && response.data.data === true) {
password.value = '';
isPassword.value = false;

154
src/views/vacation/VacationManagement.vue
View File

@ -142,7 +142,7 @@ const calendarOptions = reactive({
datesSet: handleMonthChange,
events: calendarEvents,
});
// 캘린더 월 변경경
// 캘린더 월 변경
function handleMonthChange(viewInfo) {
const currentDate = viewInfo.view.currentStart;
const year = currentDate.getFullYear();
@ -154,16 +154,17 @@ function handleDateClick(info) {
const clickedDateStr = info.dateStr;
const clickedDate = info.date;
const todayStr = new Date().toISOString().split("T")[0];
if (
clickedDate.getDay() === 0 ||
clickedDate.getDay() === 6 ||
holidayDates.value.has(clickedDateStr) ||
clickedDateStr < todayStr
){
) {
return;
}
const isMyVacation = myVacations.value.some(vac => {
const vacDate = vac.date ? String(vac.date).substring(0, 10) : "";
const vacDate = vac.date ? vac.date.substring(0, 10) : "";
return vacDate === clickedDateStr && !vac.receiverId;
});
if (isMyVacation) {
@ -186,7 +187,6 @@ function handleDateClick(info) {
selectedDates.value.set(clickedDateStr, type);
halfDayType.value = null;
updateCalendarEvents();
// 날짜 선택 후 반차버튼 초기화
if (halfDayButtonsRef.value) {
halfDayButtonsRef.value.resetHalfDay();
}
@ -266,15 +266,24 @@ const handleProfileClick = async (user) => {
const fetchUserList = async () => {
try {
await userListStore.fetchUserList();
userList.value = userListStore.userList;
// "ROLE_ADMIN"을 제외하고 필터링
const filteredUsers = userListStore.userList.filter(user => user.MEMBERROL !== "ROLE_ADMIN");
// 필터링된 리스트를 userList에 반영
userList.value = [...filteredUsers];
if (!userList.value.length) {
console.warn("📌 사용자 목록이 비어 있음!");
return;
}
// 사용자별 색상 저장
userColors.value = {};
userList.value.forEach((user) => {
userColors.value[user.MEMBERSEQ] = user.usercolor;
userColors.value[user.MEMBERSEQ] = user.usercolor;
});
} catch (error) {
console.error("📌 사용자 목록 불러오기 오류:", error);
}
@ -310,47 +319,57 @@ const filteredReceivedVacations = computed(() => {
});
});
/* 휴가 변경사항 저장 */
/* 휴가 저장 */
// 휴가 변경사항 저장
async function saveVacationChanges() {
if (!hasChanges.value) return;
const selectedDatesArray = Array.from(selectedDates.value);
const vacationsToAdd = selectedDatesArray
.filter(([date, type]) => type !== "delete")
.filter(([date, type]) =>
!myVacations.value.some(vac => vac.date && vac.date.startsWith(date)) ||
myVacations.value.some(vac => vac.date && vac.date.startsWith(date) && vac.receiverId)
)
.map(([date, type]) => ({ date, type }));
const vacationsToDelete = myVacations.value
.filter(vac => {
if (!vac.date) return false;
const date = vac.date.split("T")[0];
return selectedDates.value.get(date) === "delete" && !vac.receiverId;
})
.map(vac => {
const id = vac.id;
return typeof id === "number" ? Number(id) : id;
});
try {
const response = await axios.post("vacation/batchUpdate", {
add: vacationsToAdd,
delete: vacationsToDelete
});
if (response.data && response.data.status === "OK") {
toastStore.onToast('휴가 변경 사항이 저장되었습니다.', 's');
await fetchVacationHistory(lastRemainingYear.value);
await fetchRemainingVacation();
if (isModalOpen.value) {
await fetchVacationHistory(lastRemainingYear.value);
}
const currentDate = fullCalendarRef.value.getApi().getDate();
await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
selectedDates.value.clear();
updateCalendarEvents();
const vacationChangesByYear = selectedDatesArray.reduce((acc, [date, type]) => {
const year = date.split("-")[0]; // YYYY-MM-DD에서 YYYY 추출
if (!acc[year]) acc[year] = { add: [], delete: [] };
if (type !== "delete") {
acc[year].add.push({ date, type });
} else {
toastStore.onToast('휴가 저장 중 오류가 발생했습니다.', 'e');
acc[year].delete.push(date);
}
return acc;
}, {});
try {
for (const year of Object.keys(vacationChangesByYear)) {
const vacationsToAdd = vacationChangesByYear[year].add;
// 즉시 삭제 반영을 위해 삭제 대상 id 가져오기
const vacationsToDeleteForYear = myVacations.value
.filter(vac => {
if (!vac.date) return false;
const vacDate = vac.date.split("T")[0];
return vacationChangesByYear[year].delete.includes(vacDate);
});
const vacationIdsToDelete = vacationsToDeleteForYear.map(vac => vac.id);
if (vacationsToAdd.length > 0 || vacationIdsToDelete.length > 0) {
const response = await axios.post("vacation/batchUpdate", {
add: vacationsToAdd,
delete: vacationIdsToDelete,
});
if (response.data && response.data.status === "OK") {
toastStore.onToast(`휴가 변경 사항이 저장되었습니다.`, 's');
// 즉시 삭제 반영: myVacations에서 해당 ID 삭제
myVacations.value = myVacations.value.filter(vac => !vacationIdsToDelete.includes(vac.id));
// 서버에서 최신 데이터 가져와 반영
const updatedVacations = await fetchVacationHistory(year);
if (updatedVacations) {
myVacations.value = updatedVacations; // 최신 데이터 적용
}
} else {
toastStore.onToast(`휴가 변경 중 오류가 발생했습니다.`, 'e');
}
}
}
await fetchRemainingVacation();
selectedDates.value.clear();
updateCalendarEvents();
// 현재 보고 있는 연도의 데이터 새로고침
const currentDate = fullCalendarRef.value.getApi().getDate();
await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
} catch (error) {
console.error("🚨 휴가 변경 저장 실패:", error);
toastStore.onToast('휴가 저장 요청에 실패했습니다.', 'e');
@ -363,15 +382,17 @@ async function fetchVacationHistory(year) {
try {
const response = await axios.get(`vacation/history?year=${year}`);
if (response.status === 200 && response.data) {
myVacations.value = response.data.data.usedVacations || [];
receivedVacations.value = response.data.data.receivedVacations || [];
} else {
console.warn("❌ 연차 내역을 불러오지 못했습니다.");
myVacations.value = [];
receivedVacations.value = [];
const newVacations = response.data.data.usedVacations || [];
const uniqueVacations = Array.from(
new Map([...myVacations.value, ...newVacations].map(v => [`${v.date}-${v.type}`, v]))
.values()
);
myVacations.value = uniqueVacations;
}
} catch (error) {
console.error("🚨 연차 데이터 불러오기 실패:", error);
console.error(`🚨 ${year}년 휴가 데이터 불러오기 실패:`, error);
}
}
// 모든 사원 연차 내역 및 그래프화
@ -462,16 +483,20 @@ function toggleHalfDay(type) {
/* 페이지 이동 시 변경 사항 확인 */
router.beforeEach((to, from, next) => {
if (hasChanges.value) {
console.log('휴가!!!!!');
const answer = window.confirm("저장하지 않은 변경 사항이 있습니다. 이동하시겠습니까?");
if (!answer) {
return next(false);
}
}
selectedDates.value.clear();
next();
});
onBeforeUnmount(() => {
window.removeEventListener("beforeunload", preventUnsavedChanges);
});
/* 새로고침 또는 페이지 종료 시 알림 */
function preventUnsavedChanges(event) {
if (hasChanges.value) {
event.preventDefault();
@ -480,8 +505,10 @@ function preventUnsavedChanges(event) {
}
/* watch */
watch(lastRemainingYear, async (newYear, oldYear) => {
await fetchVacationHistory(newYear);
watch(() => lastRemainingYear.value, async (newYear, oldYear) => {
if (newYear !== oldYear) {
await fetchVacationHistory(newYear);
}
});
// `selectedDates` 변경 시 반차 버튼 초기화
watch(
@ -533,6 +560,9 @@ onMounted(async () => {
altFormat: "F Y"
})
],
onOpen: function() {
document.querySelector('.flatpickr-input').style.visibility = 'hidden';
},
onChange: function(selectedDatesArr, dateStr) {
// 선택한 달의 첫날로 달력을 이동
fullCalendarRef.value.getApi().gotoDate(dateStr + "-01");
@ -551,17 +581,17 @@ onMounted(async () => {
if (titleEl) {
titleEl.style.cursor = 'pointer';
titleEl.addEventListener('click', () => {
const dpEl = calendarDatepicker.value;
dpEl.style.display = 'block';
dpEl.style.position = 'fixed';
dpEl.style.top = '25%';
dpEl.style.left = '50%';
dpEl.style.transform = 'translate(-50%, -50%)';
dpEl.style.zIndex = '9999';
dpEl.style.border = 'none';
dpEl.style.outline = 'none';
dpEl.style.backgroundColor = 'transparent';
fpInstance.open();
const dpEl = calendarDatepicker.value;
dpEl.style.display = 'block';
dpEl.style.position = 'fixed';
dpEl.style.top = '25%';
dpEl.style.left = '50%';
dpEl.style.transform = 'translate(-50%, -50%)';
dpEl.style.zIndex = '9999';
dpEl.style.border = 'none';
dpEl.style.outline = 'none';
dpEl.style.backgroundColor = 'transparent';
fpInstance.open();
});
}
});