From ae2dbd4992c9780c7cbb4d6b7282ebc482cc1980 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 16 Jan 2025 16:09:47 +0900
Subject: [PATCH] =?UTF-8?q?board-list=20=EB=A8=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/BoardCardList.vue     |  10 +-
 src/views/board/BoardList.vue             |  40 +++-
 src/views/board/BoardView.vue             |   1 +
 src/views/vacation/VacationManagement.vue | 236 ++++++++++++++--------
 4 files changed, 193 insertions(+), 94 deletions(-)

diff --git a/src/components/list/BoardCardList.vue b/src/components/list/BoardCardList.vue
index 6e0b651..fbc984b 100644
--- a/src/components/list/BoardCardList.vue
+++ b/src/components/list/BoardCardList.vue
@@ -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>
 
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index ce7873a..3aa5861 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -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,
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 080fdc0..d848449 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -83,6 +83,7 @@ const fetchBoardDetails = async () => {
 
 // 컴포넌트 마운트 시 데이터 로드
 onMounted(() => {
+    console.log('Route Params:', route.params);
     fetchBoardDetails();
 });
 </script>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index f5e414a..df74285 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -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>