Merge remote-tracking branch 'origin/main' into board-comment
This commit is contained in:
commit
4076507fb7
@ -5,11 +5,6 @@
|
|||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 게시판리스트 */
|
|
||||||
.bg-label-gray td {
|
|
||||||
color: #DC3545 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* 휴가 */
|
/* 휴가 */
|
||||||
.half-day-buttons {
|
.half-day-buttons {
|
||||||
|
|||||||
18
src/components/calendar/holiday.js
Normal file
18
src/components/calendar/holiday.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
// src/api/holiday.js
|
||||||
|
import axios from "@api";
|
||||||
|
|
||||||
|
export async function fetchHolidays(year, month) {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(`vacation/${year}/${month}`);
|
||||||
|
const holidayEvents = response.data.map((holiday) => ({
|
||||||
|
title: holiday.name,
|
||||||
|
start: holiday.date, // "YYYY-MM-DD" 형식
|
||||||
|
backgroundColor: "#ff6666",
|
||||||
|
classNames: ["holiday-event"],
|
||||||
|
}));
|
||||||
|
return holidayEvents;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("공휴일 정보를 불러오지 못했습니다.", error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -13,6 +13,7 @@
|
|||||||
:maxLength="maxlength"
|
:maxLength="maxlength"
|
||||||
:placeholder="title"
|
:placeholder="title"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
|
:min="min"
|
||||||
/>
|
/>
|
||||||
<div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
|
<div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
|
||||||
{{ title }}을 확인해주세요.
|
{{ title }}을 확인해주세요.
|
||||||
@ -64,6 +65,10 @@ const props = defineProps({
|
|||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
type: String,
|
||||||
|
default: false,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -42,11 +42,11 @@
|
|||||||
<table class="datatables-users table border-top dataTable dtr-column">
|
<table class="datatables-users table border-top dataTable dtr-column">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 11%;" class="text-center">번호</th>
|
<th style="width: 11%;" class="text-center fw-bold">번호</th>
|
||||||
<th style="width: 45%;" class="text-center">제목</th>
|
<th style="width: 45%;" class="text-center fw-bold">제목</th>
|
||||||
<th style="width: 10%;" class="text-center">작성자</th>
|
<th style="width: 10%;" class="text-center fw-bold">작성자</th>
|
||||||
<th style="width: 15%;" class="text-center">작성일</th>
|
<th style="width: 15%;" class="text-center fw-bold">작성일</th>
|
||||||
<th style="width: 9%;" class="text-center">조회수</th>
|
<th style="width: 9%;" class="text-center fw-bold">조회수</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -54,7 +54,7 @@
|
|||||||
<template v-if="pagination.currentPage === 1 && !showNotices">
|
<template v-if="pagination.currentPage === 1 && !showNotices">
|
||||||
<tr v-for="(notice, index) in noticeList"
|
<tr v-for="(notice, index) in noticeList"
|
||||||
:key="'notice-' + index"
|
:key="'notice-' + index"
|
||||||
class="bg-label-gray"
|
class="bg-label-gray fw-bold"
|
||||||
@click="goDetail(notice.id)">
|
@click="goDetail(notice.id)">
|
||||||
<td class="text-center">공지</td>
|
<td class="text-center">공지</td>
|
||||||
<td>
|
<td>
|
||||||
|
|||||||
@ -60,6 +60,7 @@ import { useUserStore } from "@s/userList";
|
|||||||
import VacationModal from "@c/modal/VacationModal.vue"
|
import VacationModal from "@c/modal/VacationModal.vue"
|
||||||
import { useUserInfoStore } from "@s/useUserInfoStore";
|
import { useUserInfoStore } from "@s/useUserInfoStore";
|
||||||
import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
|
import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
|
||||||
|
import { fetchHolidays } from "@c/calendar/holiday.js";
|
||||||
|
|
||||||
const userStore = useUserInfoStore();
|
const userStore = useUserInfoStore();
|
||||||
const userListStore = useUserStore();
|
const userListStore = useUserStore();
|
||||||
@ -73,6 +74,32 @@ const remainingVacationData = ref({});
|
|||||||
const isGrantModalOpen = ref(false);
|
const isGrantModalOpen = ref(false);
|
||||||
const selectedUser = ref(null);
|
const selectedUser = ref(null);
|
||||||
|
|
||||||
|
// FullCalendar 관련 참조 및 데이터
|
||||||
|
const fullCalendarRef = ref(null);
|
||||||
|
const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이벤트 (API 이벤트 + 선택 이벤트)
|
||||||
|
const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
|
||||||
|
const halfDayType = ref(null);
|
||||||
|
const vacationCodeMap = ref({}); // 휴가 코드명 저장용
|
||||||
|
|
||||||
|
// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
|
||||||
|
const holidayDates = ref(new Set());
|
||||||
|
const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)
|
||||||
|
|
||||||
|
// FullCalendar 옵션 객체 (events에 calendarEvents를 지정)
|
||||||
|
const calendarOptions = reactive({
|
||||||
|
plugins: [dayGridPlugin, interactionPlugin],
|
||||||
|
initialView: "dayGridMonth",
|
||||||
|
headerToolbar: {
|
||||||
|
left: "today",
|
||||||
|
center: "title",
|
||||||
|
right: "prev,next",
|
||||||
|
},
|
||||||
|
locale: "ko",
|
||||||
|
selectable: false,
|
||||||
|
dateClick: handleDateClick,
|
||||||
|
datesSet: handleMonthChange,
|
||||||
|
events: calendarEvents,
|
||||||
|
});
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await userStore.userInfo();
|
await userStore.userInfo();
|
||||||
@ -138,33 +165,6 @@ const fetchUserList = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// FullCalendar 관련 참조 및 데이터
|
|
||||||
const fullCalendarRef = ref(null);
|
|
||||||
const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이벤트 (API 이벤트 + 선택 이벤트)
|
|
||||||
const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)
|
|
||||||
const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
|
|
||||||
const halfDayType = ref(null);
|
|
||||||
const vacationCodeMap = ref({}); // 휴가 코드명 저장용
|
|
||||||
|
|
||||||
// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
|
|
||||||
const holidayDates = ref(new Set());
|
|
||||||
|
|
||||||
// FullCalendar 옵션 객체 (events에 calendarEvents를 지정)
|
|
||||||
const calendarOptions = reactive({
|
|
||||||
plugins: [dayGridPlugin, interactionPlugin],
|
|
||||||
initialView: "dayGridMonth",
|
|
||||||
headerToolbar: {
|
|
||||||
left: "today",
|
|
||||||
center: "title",
|
|
||||||
right: "prev,next",
|
|
||||||
},
|
|
||||||
locale: "ko",
|
|
||||||
selectable: false,
|
|
||||||
dateClick: handleDateClick,
|
|
||||||
datesSet: handleMonthChange,
|
|
||||||
events: calendarEvents,
|
|
||||||
});
|
|
||||||
|
|
||||||
const fetchVacationCodes = async () => {
|
const fetchVacationCodes = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get("vacation/codes");
|
const response = await axios.get("vacation/codes");
|
||||||
@ -363,29 +363,10 @@ halfDayType.value = halfDayType.value === type ? null : type;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 공휴일 데이터 요청 및 이벤트 변환
|
|
||||||
*/
|
|
||||||
async function fetchHolidays(year, month) {
|
|
||||||
try {
|
|
||||||
const response = await axios.get(`vacation/${year}/${month}`);
|
|
||||||
const holidayEvents = response.data.map((holiday) => ({
|
|
||||||
title: holiday.name,
|
|
||||||
start: holiday.date, // "YYYY-MM-DD" 형식
|
|
||||||
backgroundColor: "#ff6666",
|
|
||||||
classNames: ["holiday-event"],
|
|
||||||
}));
|
|
||||||
return holidayEvents;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("공휴일 정보를 불러오지 못했습니다.", error);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 달력 월 변경 시 호출 (FullCalendar의 datesSet 옵션)
|
* 달력 월 변경 시 호출 (FullCalendar의 datesSet 옵션)
|
||||||
*/
|
*/
|
||||||
function handleMonthChange(viewInfo) {
|
function handleMonthChange(viewInfo) {
|
||||||
const currentDate = viewInfo.view.currentStart;
|
const currentDate = viewInfo.view.currentStart;
|
||||||
const year = currentDate.getFullYear();
|
const year = currentDate.getFullYear();
|
||||||
const month = String(currentDate.getMonth() + 1).padStart(2, "0");
|
const month = String(currentDate.getMonth() + 1).padStart(2, "0");
|
||||||
@ -421,7 +402,5 @@ await loadCalendarData(year, month);
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.fc-bg-event{
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user