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:
dyhj625 2025-03-06 12:17:52 +09:00
parent 6c4fc7ac8e
commit cd1c707b12
4 changed files with 88 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/css/custom.css
View File

@ -78,14 +78,14 @@ opacity: 0.6; /* 흐려 보이게 */
border: none !important; border: none !important;
border-radius: 4px; border-radius: 4px;
} }
/* 오전 반차 (왼쪽 절반) */ /* 오전 반차 활성화 영역 (왼쪽 절반) */
.selected-event.half-day-am { .selected-event.half-day-am {
width: 50% !important; width: 50% !important;
left: 0 !important; left: 0 !important;
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
/* 오후 반차 (오른쪽 절반) */ /* 오후 반차 활성화 영역 (오른쪽 절반) */
.selected-event.half-day-pm { .selected-event.half-day-pm {
width: 50% !important; width: 50% !important;
margin-left: auto !important; margin-left: auto !important;
@ -105,6 +105,30 @@ opacity: 0.6; /* 흐려 보이게 */
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
} }
.close-btn:hover {
color: #525252;
}
/* 모달 배경 투명하게 */
.vac-modal-dialog {
background: none !important;
box-shadow: none !important;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* 모달 본문 스타일 */
.vac-modal-content {
background: #fff;
border-radius: 8px;
box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
padding: 20px;
max-width: 500px;
width: 100%;
position: relative;
}
/* 리스트 아이템 */ /* 리스트 아이템 */
.vacation-item { .vacation-item {
display: flex; display: flex;

62
src/components/modal/VacationGrantModal.vue
View File

@ -1,26 +1,29 @@
<template> <template>
<div v-if="isOpen" class="modal-dialog" @click.self="closeModal"> <div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
<div class="modal-content p-5"> <div class="vac-modal-content p-5">
<h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5> <div class="modal-header">
<button class="close-btn" @click="closeModal">✖</button> <h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
<button class="close-btn" @click="closeModal">✖</button>
</div>
<div class="modal-body"> <div class="modal-body">
<p>선물할 연차 개수를 선택하세요.</p> <p>선물할 연차 개수를 선택하세요.</p>
<div class="justify-content-center d-sm-flex gap-sm-3 align-items-md-center mt-8"> <div class="justify-content-center d-sm-flex gap-sm-3 align-items-md-center mt-8">
<button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button> <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
<span class="text-dark fw-bold fs-4">{{ grantCount }}</span> <span class="text-dark fw-bold fs-4">{{ grantCount }}</span>
<button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button> <button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
</div> </div>
<div class="custom-button-container">
<button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0"> <div class="custom-button-container">
<i class="bx bx-gift"></i> <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
</button> <i class="bx bx-gift"></i>
</div> </button>
</div>
</div>
</div> </div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, defineEmits, watch, onMounted } from "vue"; import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
@ -121,25 +124,6 @@
</script> </script>
<style scoped> <style scoped>
/* 모달 배경 투명하게 */
.modal-dialog {
background: none !important; /* 배경 제거 */
box-shadow: none !important; /* 음영 제거 */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* 모달 내용 스타일 */ </style>
.modal-content {
background: #fff; /* 기존 흰색 배경 유지 */
border-radius: 8px;
box-shadow: none !important; /* 내부 음영 제거 */
padding: 20px;
max-width: 500px;
width: 100%;
}
</style>

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

@ -1,6 +1,6 @@
<template> <template>
<div v-if="isOpen" class="modal-dialog" @click.self="closeModal"> <div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
<div class="modal-content p-5 modal-scroll"> <div class="vac-modal-content p-5 modal-scroll">
<h5 class="modal-title">📅 내 연차 사용 내역</h5> <h5 class="modal-title">📅 내 연차 사용 내역</h5>
<button class="close-btn" @click="closeModal">✖</button> <button class="close-btn" @click="closeModal">✖</button>
@ -138,25 +138,4 @@ const closeModal = () => {
</script> </script>
<style scoped> <style scoped>
/* 모달 배경 투명하게 */
.modal-dialog {
background: none !important; /* 배경 제거 */
box-shadow: none !important; /* 음영 제거 */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* 모달 내용 스타일 */
.modal-content {
background: #fff; /* 기존 흰색 배경 유지 */
border-radius: 8px;
box-shadow: none !important; /* 내부 음영 제거 */
padding: 20px;
max-width: 500px;
width: 100%;
}
</style> </style>

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

@ -148,7 +148,7 @@ watch(
const calendarDatepicker = ref(null); const calendarDatepicker = ref(null);
let fpInstance = null; let fpInstance = null;
/** ✅ 변경사항 여부 확인 */ /** 변경사항 여부 확인 */
const hasChanges = computed(() => { const hasChanges = computed(() => {
return ( return (
selectedDates.value.size > 0 || selectedDates.value.size > 0 ||
@ -157,7 +157,7 @@ const hasChanges = computed(() => {
}); });
/** ✅ selectedDates가 변경될 때 버튼 상태 즉시 업데이트 */ /** selectedDates가 변경될 때 버튼 상태 즉시 업데이트 */
watch( watch(
() => Array.from(selectedDates.value.keys()), // keys()를 Array로 변환해서 감시 () => Array.from(selectedDates.value.keys()), // keys()를 Array로 변환해서 감시
(newKeys) => { (newKeys) => {
@ -204,7 +204,7 @@ function handleDateClick(info) {
selectedDates.value.set(clickedDateStr, type); selectedDates.value.set(clickedDateStr, type);
halfDayType.value = null; halfDayType.value = null;
updateCalendarEvents(); updateCalendarEvents();
// ✅ 날짜 선택 후 버튼 초기화 // 날짜 선택 후 버튼 초기화
if (halfDayButtonsRef.value) { if (halfDayButtonsRef.value) {
halfDayButtonsRef.value.resetHalfDay(); halfDayButtonsRef.value.resetHalfDay();
} }
@ -417,42 +417,42 @@ function handleDateClick(info) {
halfDayType.value = halfDayType.value === type ? null : type; halfDayType.value = halfDayType.value === type ? null : type;
} }
async function fetchVacationData(year, month) { // 연차 리스트 조회회
try { async function fetchVacationData(year, month) {
const response = await axios.get(`vacation/list/${year}/${month}`); try {
if (response.status === 200) { const response = await axios.get(`vacation/list/${year}/${month}`);
const vacationList = response.data; if (response.status === 200) {
if (lastRemainingYear.value !== year) { const vacationList = response.data;
myVacations.value = vacationList.filter(
(vac) => vac.MEMBERSEQ === userStore.user.id // 회원 정보가 없거나 색상 정보가 없는 데이터는 제외
); const filteredVacations = vacationList.filter(vac =>
lastRemainingYear.value = year; userColors.value[vac.MEMBERSEQ] && userColors.value[vac.MEMBERSEQ] !== "#FFFFFF"
} );
const events = vacationList
.filter((vac) => !vac.LOCVACRMM) const events = filteredVacations.map(vac => {
.map((vac) => { let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : ""; let backgroundColor = userColors.value[vac.MEMBERSEQ];
let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
return { return {
title: getVacationType(vac.LOCVACTYP), title: getVacationType(vac.LOCVACTYP),
start: dateStr, start: dateStr,
backgroundColor, backgroundColor,
classNames: [getVacationTypeClass(vac.LOCVACTYP)], classNames: [getVacationTypeClass(vac.LOCVACTYP)],
saved: true, saved: true,
memberSeq: vac.MEMBERSEQ, memberSeq: vac.MEMBERSEQ,
}; };
}) }).filter(event => event.start);
.filter((event) => event.start);
return events; return events;
} else { } else {
console.warn("📌 휴가 데이터를 불러오지 못함"); console.warn("📌 휴가 데이터를 불러오지 못함");
return [];
}
} catch (error) {
console.error("Error fetching vacation data:", error);
return []; return [];
} }
} catch (error) {
console.error("Error fetching vacation data:", error);
return [];
} }
}
async function saveVacationChanges() { async function saveVacationChanges() {
if (!hasChanges.value) return; if (!hasChanges.value) return;
@ -522,7 +522,7 @@ function handleDateClick(info) {
await nextTick(); await nextTick();
fullCalendarRef.value.getApi().refetchEvents(); fullCalendarRef.value.getApi().refetchEvents();
} }
/** ✅ 오늘 이후의 날짜만 클릭 가능하도록 설정 */ /** 오늘 이후의 날짜만 클릭 가능하도록 설정 */
function markClickableDates() { function markClickableDates() {
nextTick(() => { nextTick(() => {
const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD