Merge branch 'main' into login

src/App.vue

@@ -2,6 +2,7 @@
     <component :is="layout">
         <template #content>
             <router-view></router-view>
+            <ToastModal /> 
         </template>
     </component>
 </template>
@@ -10,6 +11,7 @@ import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import NormalLayout from './layouts/NormalLayout.vue';
 import NoLayout from './layouts/NoLayout.vue';
+import ToastModal from '@c/modal/ToastModal.vue'; 
 
 const route = useRoute();
 

src/components/editor/QEditor.vue

@@ -79,7 +79,6 @@ onMounted(() => {
             syntax: true,
         },
     });
-
     quillInstance.format('font', font.value);
     quillInstance.format('size', fontSize.value);
 
@@ -91,15 +90,12 @@ onMounted(() => {
         quillInstance.format('font', font.value);
         quillInstance.format('size', fontSize.value);
     });
-
+    // 이미지 업로드 
-    // 이미지 업로드 및 삭제 감지 로직
-    // 아직 서버에 실험 안해봄 ***********처리부탁***********
     let imageUrls = new Set();
 
     quillInstance.getModule('toolbar').addHandler('image', () => {
         selectLocalImage();
     });
-
     quillInstance.on('text-change', (delta, oldDelta, source) => {
         emit('update:data', quillInstance.root.innerHTML);
         delta.ops.forEach(op => {
@@ -112,7 +108,7 @@ onMounted(() => {
         });
     });
 
-    function selectLocalImage() {
+    async function selectLocalImage() {
         const input = document.createElement('input');
         input.setAttribute('type', 'file');
         input.setAttribute('accept', 'image/*');
@@ -121,24 +117,33 @@ onMounted(() => {
         input.onchange = () => {
             const file = input.files[0];
             if (file) {
-                const reader = new FileReader();
+                const formData = new FormData();
-                reader.onload = async (e) => {
+                formData.append('file', file);
-                    const range = quillInstance.getSelection();
-                    const base64Image = e.target.result;
 
-                    try {
+                uploadImageToServer(formData).then(serverImageUrl => {
-                        const serverImageUrl = await uploadImageToServer(base64Image);
+                    const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
-                        quillInstance.insertEmbed(range.index, 'image', serverImageUrl);
+                    const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
-                        imageUrls.add(serverImageUrl);
+
-                    } catch (error) {
+                    const range = quillInstance.getSelection();
-                        console.error('이미지 업로드 중 오류 발생:', error);
+                    quillInstance.insertEmbed(range.index, 'image', fullImageUrl);
-                    }
+
-                };
+                    imageUrls.add(fullImageUrl);
-                reader.readAsDataURL(file);
+                }).catch(e => {
+                    toastStore.onToast('잠시후 다시 시도해주세요.', 'e');               
+                });
             }
         };
     }
-
+    async function uploadImageToServer(formData) {
+        try {
+            const response = await $api.post('img/upload', formData, { isFormData: true });
+            const imageUrl = response.data.data;  
+            return imageUrl;  
+        } catch (error) {
+            toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
+            throw error;
+        }
+    }
 
     function checkForDeletedImages() {
         const editorImages = document.querySelectorAll('#editor img');
@@ -147,33 +152,9 @@ onMounted(() => {
         imageUrls.forEach(url => {
             if (!currentImages.has(url)) {
                 imageUrls.delete(url);
-                removeImageFromServer(url);
             }
         });
     }
-
-    async function uploadImageToServer(base64Image) {
-        try {
-            const response = await $api.post('/img/upload', {
-                image: base64Image,
-            });
-            return response.data.url; // 서버에서 반환한 이미지 URL
-        } catch (error) {
-            console.error('서버 업로드 중 오류 발생:', error);
-            throw error;
-        }
-    }
-
-    async function removeImageFromServer(imageUrl) {
-        try {
-            await $api.delete('/img/delete', {
-                data: { url: imageUrl },
-            });
-            console.log(`서버에서 이미지 삭제: ${imageUrl}`);
-        } catch (error) {
-            console.error('서버 이미지 삭제 중 오류 발생:', error);
-        }
-    }
 });
 
 </script>

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>
 

src/components/modal/ToastModal.vue

@@ -0,0 +1,58 @@
+<template>
+  <div 
+    v-if="toastStore.toastModal" 
+    :class="['bs-toast toast m-2 fade show', toastClass]" 
+    role="alert"
+    aria-live="assertive"
+    aria-atomic="true"
+  >
+    <div class="toast-header">
+      <i class="bx bx-bell me-2"></i>
+      <div class="me-auto fw-semibold">알림</div>
+      <button 
+        type="button" 
+        class="btn-close" 
+        aria-label="Close" 
+        @click="offToast"
+      ></button>
+    </div>
+    <div class="toast-body">
+      {{ toastStore.toastMsg }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useToastStore } from '@s/toastStore';
+import { computed } from 'vue';
+const toastStore = useToastStore();
+
+const offToast = () => {
+  toastStore.offToast();  // 상태 변경으로 토스트 숨기기
+};
+
+const toastClass = computed(() => {
+  return toastStore.toastType === 'e' ? 'bg-danger' : 'bg-success'; // 에러일 경우 red, 정상일 경우 blue
+});
+</script>
+
+<style scoped>
+.bs-toast {
+  position: fixed;
+  bottom: 20px; /* 화면 하단에 위치 */
+  right: 20px; /* 오른쪽에 위치 */
+  z-index: 2000; /* 충분히 높은 값으로 설정 */
+  max-width: 300px; /* 최대 너비 제한 */
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
+}
+
+.bg-primary {
+  background-color: #007bff !important; /* 성공 색상 */
+}
+
+.bg-danger {
+  background-color: #ff3e1d !important; /* 에러 색상 */
+}
+</style>

src/main.js

@@ -4,6 +4,7 @@ import piniaPersist from 'pinia-plugin-persist'
 import App from './App.vue'
 import router from '@/router'
 import dayjs from '@p/dayjs'
+import ToastModal from '@c/modal/ToastModal.vue';
 
 const pinia = createPinia()
 pinia.use(piniaPersist)
@@ -12,9 +13,9 @@ const app = createApp(App)
 app.use(router)
     .use(pinia)
     .use(dayjs)
+    .component('ToastModal',ToastModal)
     .mount('#app')
 
-
 if (import.meta.env.MODE === "prod") {
     const console = window.console || {};
     console.log = function no_console() { }; // console log 막기

src/stores/toastStore.js

@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia';
+
+export const useToastStore = defineStore('toastStore', {
+  state: () => ({
+    toastModal: false,
+    toastMsg: '',
+    time: 2000, 
+    toastType: 's',
+  }),
+  actions: {
+    onToast(msg = '', type = 's', time = 2000) {
+      this.toastModal = true;
+      this.toastMsg = msg;
+      this.toastType = type; 
+      this.time = time; 
+
+      // 시간이 지난 후 토스트 숨기기
+      setTimeout(() => {
+        this.offToast();
+      }, this.time);
+    },
+    offToast() {
+      this.toastModal = false;
+      this.toastMsg = '';
+      this.toastType = 's';
+    },
+  },
+});

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,20 +56,44 @@ 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 () => {
-    try {
+    const response = await axios.get("board/general");
-        const response = await axios.get("board/general");
+    console.log(response.data.data.list)
-        if (response.data && Array.isArray(response.data.data)) {
+
-            list.value = response.data.data.map((post) => ({
+    if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
-                ...post,
+        list.value = response.data.data.list.map((post, index) => ({
-                img: post.img || null,
+            ...post,
-                likes: post.likes || 0,
+            id: post.id || index,
-                comments: post.comments || 0,
+            img: post.img || null,
-            }));
+            likes: post.likes || 0,
-        }
+            comments: post.comments || 0,
-    } catch (error) {
+        }));
-        console.error("Failed to fetch posts:", error);
+    } else {
+        console.error("Unexpected API response structure:", response.data);
     }
 };
 

src/views/board/BoardView.vue

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

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
-                            <button class="btn btn-warning" :class="{ active: halfDayType === 'PM' }" @click="toggleHalfDay('PM')">🌙 오후반차</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 selectedDates = ref(new Map());
-const halfDayType = ref(null); // 오전/오후 반차 선택
+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)) {
+    if (!selectedDates.value.has(date)) {
-        selectedDates.value.push(date);
+        const type = halfDayType.value ? (halfDayType.value === 'AM' ? 'D' : 'N') : 'F';
-        if (halfDayType.value === 'AM') {
+        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() {
+async function fetchVacationData() {
-    if (selectedDates.value.length === 0) {
+    try {
-        alert('Please select at least one date.');
+        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) => ({
+    const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
-        title: halfDayType.value ? `${halfDayType.value} Half Day Vacation` : 'Vacation',
+        date,
-        start: date,
+        type,
-        allDay: true,
+        employeeId: employeeId.value,
     }));
 
-    calendarEvents.value = [...calendarEvents.value, ...newEvents];
+    try {
-    alert(`Vacation added for dates: ${selectedDates.value.join(', ')} as ${halfDayType.value || 'Full Day'}`);
+        const response = await axios.post('vacation', vacationRequests);
-    selectedDates.value = [];
+
-    halfDayType.value = null;
+        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,
+.half-day-buttons .btn.active {
-.fc-day-sun a {
+    border: 2px solid black;
-    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;
 }
 </style>