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

board-list 머지

Browse Source
This commit is contained in:
dyhj625 2025-01-16 16:09:47 +09:00
parent 22a089f97f
commit ae2dbd4992
4 changed files with 193 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/list/BoardCardList.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="container mt-4">
<div class="mt-4">
<div v-if="posts.length === 0" class="text-center">
게시물이 없습니다.
</div>
<div v-for="post in posts" :key="post.id">
<div v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
<BoardCard
:img="post.img"
:category="post.category"
@ -30,6 +30,12 @@ export default {
required: true,
},
},
emits: ['click'],
methods: {
handleClick(id) {
this.$emit('click', id);
},
},
};
</script>

40
src/views/board/BoardList.vue
View File

@ -1,6 +1,9 @@
<template>
<div class="container-xxl flex-grow-1 container-p-y">
<!-- 검색 -->
<search-bar @update:data="search" />
<!-- 리스트 -->
<div class="row g-3">
<div class="mt-8">
<router-link to="/board/write">
@ -8,10 +11,15 @@
</router-link>
</div>
<board-card :posts="filteredList" @click="goDetail" />
<board-card :posts="paginatedList" @click="goDetail" />
<!-- 페이지네이션 -->
<div class="mt-8">
<pagination />
<pagination
:current-page="currentPage"
:total-pages="totalPages"
@update:page="changePage"
/>
</div>
</div>
</div>
@ -32,6 +40,7 @@ const searchText = ref('');
// 상세 페이지 이동
const goDetail = (id) => {
console.log('Navigating to ID:', id)
router.push({ name: 'BoardDetail', params: { id } });
};
@ -47,13 +56,38 @@ const filteredList = computed(() =>
)
);
// 페이지네이션 상태
const currentPage = ref(1); // 현재 페이지 번호
const itemsPerPage = 5; // 한 페이지에 표시할 아이템 수
// 현재 페이지 데이터 계산
const paginatedList = computed(() => {
const start = (currentPage.value - 1) * itemsPerPage;
const end = start + itemsPerPage;
return filteredList.value.slice(start, end);
});
// 총 페이지 수 계산
const totalPages = computed(() => {
return Math.ceil(filteredList.value.length / itemsPerPage);
});
// 페이지 변경 함수
const changePage = (page) => {
if (page >= 1 && page <= totalPages.value) {
currentPage.value = page;
}
};
// 게시물 데이터 로드
const fetchPosts = async () => {
const response = await axios.get("board/general");
console.log(response.data.data.list)
if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
list.value = response.data.data.list.map((post) => ({
list.value = response.data.data.list.map((post, index) => ({
...post,
id: post.id || index,
img: post.img || null,
likes: post.likes || 0,
comments: post.comments || 0,

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

@ -83,6 +83,7 @@ const fetchBoardDetails = async () => {
// 컴포넌트 마운트 시 데이터 로드
onMounted(() => {
console.log('Route Params:', route.params);
fetchBoardDetails();
});
</script>

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

@ -1,9 +1,11 @@
<template>
<div class="vacation-management">
<div class="container-xxl flex-grow-1 container-p-y">
<!-- 저장 버튼 -->
<div class="save-button-container">
<button class="btn btn-success" @click="addVacationRequest">✔</button>
<button class="btn btn-success" @click="addVacationRequests">✔ 저장</button>
</div>
<!-- 캘린더 -->
<div class="card app-calendar-wrapper">
<div class="row g-0">
<div class="col app-calendar-content">
@ -15,13 +17,25 @@
:options="calendarOptions"
defaultView="dayGridMonth"
class="flatpickr-calendar-only"
>
</full-calendar>
/>
</div>
</div>
<!-- 오전/오후 반차 버튼 -->
<div class="half-day-buttons">
<button class="btn btn-info" :class="{ active: halfDayType === 'AM' }" @click="toggleHalfDay('AM')">☀️ 오전반차</button>
<button class="btn btn-warning" :class="{ active: halfDayType === 'PM' }" @click="toggleHalfDay('PM')">🌙 오후반차</button>
<button
class="btn btn-info"
:class="{ active: halfDayType === 'AM' }"
@click="toggleHalfDay('AM')"
>
☀️ 오전반차
</button>
<button
class="btn btn-warning"
:class="{ active: halfDayType === 'PM' }"
@click="toggleHalfDay('PM')"
>
🌙 오후반차
</button>
</div>
</div>
</div>
@ -36,12 +50,14 @@ import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import 'flatpickr/dist/flatpickr.min.css';
import '@/assets/css/app-calendar.css';
import { reactive, ref } from 'vue';
import { reactive, ref, onMounted } from 'vue';
import axios from '@api'; // Axios 추가
const fullCalendarRef = ref(null);
const calendarEvents = ref([]);
const selectedDates = ref([]);
const halfDayType = ref(null); // 오전/오후 반차 선택
const selectedDates = ref(new Map());
const halfDayType = ref(null);
const employeeId = ref(1);
const calendarOptions = reactive({
plugins: [dayGridPlugin, interactionPlugin],
@ -56,49 +72,153 @@ const calendarOptions = reactive({
dateClick: handleDateClick,
});
/**
* 날짜 클릭 이벤트
*/
function handleDateClick(info) {
const date = info.dateStr;
const dayElement = info.dayEl;
if (!selectedDates.value.includes(date)) {
selectedDates.value.push(date);
if (halfDayType.value === 'AM') {
if (!selectedDates.value.has(date)) {
const type = halfDayType.value ? (halfDayType.value === 'AM' ? 'D' : 'N') : 'F';
selectedDates.value.set(date, type);
if (type === 'D') {
dayElement.style.backgroundImage = 'linear-gradient(to bottom, #ade3ff 50%, transparent 50%)';
} else if (halfDayType.value === 'PM') {
} else if (type === 'N') {
dayElement.style.backgroundImage = 'linear-gradient(to top, #ade3ff 50%, transparent 50%)';
} else {
dayElement.style.backgroundColor = '#ade3ff';
}
} else {
selectedDates.value = selectedDates.value.filter((d) => d !== date);
selectedDates.value.delete(date);
dayElement.style.backgroundColor = '';
dayElement.style.backgroundImage = '';
}
halfDayType.value = null; // 날짜 클릭 후 반차 선택 초기화
halfDayType.value = null;
}
/**
* 오전/오후 반차 선택
*/
function toggleHalfDay(type) {
halfDayType.value = halfDayType.value === type ? null : type;
}
function addVacationRequest() {
if (selectedDates.value.length === 0) {
alert('Please select at least one date.');
async function fetchVacationData() {
try {
const response = await axios.get('vacation/list');
if (response.data.status === 'OK') {
const vacationList = response.data.data;
// 사원별로 날짜를 그룹화
const employeeVacations = new Map();
vacationList.forEach(({ employeeId, date, type }) => {
if (!employeeVacations.has(employeeId)) {
employeeVacations.set(employeeId, []);
}
employeeVacations.get(employeeId).push({ date, type });
});
// 연속된 날짜 그룹화 및 스타일 적용
employeeVacations.forEach((dates, employeeId) => {
const sortedDates = dates.map(d => new Date(d.date)).sort((a, b) => a - b);
const color = getColorByEmployeeId(employeeId); // 사원별 색상 함수
let previousDate = null;
sortedDates.forEach(currentDate => {
const dateStr = currentDate.toISOString().split('T')[0];
const dayElement = document.querySelector(`[data-date="${dateStr}"]`);
if (dayElement) {
if (
previousDate &&
currentDate - previousDate === 86400000 // 하루 차이인지 확인
) {
// 연속된 날짜 스타일 설정
dayElement.style.backgroundColor = color;
} else {
// 새로운 시작점
dayElement.style.backgroundColor = color;
dayElement.style.borderLeft = `3px solid ${color}`;
}
previousDate = currentDate;
}
});
});
}
} catch (error) {
console.error('Error fetching vacation data:', error);
}
}
/**
* 사원 ID별 색상 반환 함수
*/
function getColorByEmployeeId(employeeId) {
const colors = ['#ade3ff', '#ffade3', '#ade3ad', '#ffadad'];
return colors[employeeId % colors.length];
}
// 데이터 불러오기 호출
fetchVacationData();
/**
* 휴가 요청 추가
*/
async function addVacationRequests() {
if (selectedDates.value.size === 0) {
alert('휴가를 선택해주세요.');
return;
}
const newEvents = selectedDates.value.map((date) => ({
title: halfDayType.value ? `${halfDayType.value} Half Day Vacation` : 'Vacation',
start: date,
allDay: true,
const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
date,
type,
employeeId: employeeId.value,
}));
calendarEvents.value = [...calendarEvents.value, ...newEvents];
alert(`Vacation added for dates: ${selectedDates.value.join(', ')} as ${halfDayType.value || 'Full Day'}`);
selectedDates.value = [];
halfDayType.value = null;
try {
const response = await axios.post('vacation', vacationRequests);
if (response.data && response.data.status === 'OK') {
alert('휴가가 저장되었습니다.');
const newEvents = vacationRequests.map(req => ({
title: req.type === 'D' ? '오전반차' : req.type === 'N' ? '오후반차' : '종일 휴가',
start: req.date,
allDay: true,
}));
calendarEvents.value = [...calendarEvents.value, ...newEvents];
selectedDates.value.clear();
resetCalendarStyles();
} else {
alert('휴가 저장 중 오류가 발생했습니다.');
}
} catch (error) {
console.error(error);
alert('휴가 저장에 실패했습니다.');
}
}
/**
* 초기화
*/
function resetCalendarStyles() {
const calendarElements = document.querySelectorAll('.fc-daygrid-day');
calendarElements.forEach(element => {
element.style.backgroundColor = '';
element.style.backgroundImage = '';
});
}
onMounted(() => {
fetchVacationData();
});
</script>
<style scoped>
@ -106,28 +226,6 @@ function addVacationRequest() {
padding: 20px;
}
.save-button-container {
position: fixed;
top: 900px; /* 탑바 아래로 간격 조정 */
right: 400px;
z-index: 1050; /* 탑바보다 높은 값 */
background-color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.save-button-container {
top: 70px; /* 모바일에서 탑바 아래 간격 조정 */
right: 5px;
left: 5px;
width: calc(100% - 10px); /* 모바일 화면에 맞게 크기 조정 */
text-align: center;
}
}
.half-day-buttons {
display: flex;
justify-content: center;
@ -135,47 +233,7 @@ function addVacationRequest() {
margin-top: 20px;
}
.fc-day-sun .fc-col-header-cell-cushion,
.fc-day-sun a {
color: red;
}
.fc-day-sat .fc-col-header-cell-cushion,
.fc-day-sat a {
color: blue;
}
.flatpickr-calendar-only input.flatpickr-input {
display: none;
}
.flatpickr-input {
display: none;
}
.pt-2.px-3 {
position: relative;
}
.flatpickr-calendar {
position: relative !important;
display: block !important;
width: 100% !important;
height: auto !important;
z-index: 1;
}
.btn-info {
background-color: #17a2b8;
color: white;
}
.btn-warning {
background-color: #ffc107;
color: white;
}
button.active {
opacity: 0.7;
.half-day-buttons .btn.active {
border: 2px solid black;
}
</style>