Merge branch 'main' into login

2025-01-17 11:01:59 +09:00 · 2025-01-17 11:01:59 +09:00 · a2780f1914
commit a2780f1914
parent 3a0146c060 ae2dbd4992
9 changed files with 319 additions and 151 deletions
--- a/src/App.vue
+++ b/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();

--- a/src/components/editor/QEditor.vue
+++ b/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();
-                reader.onload = async (e) => {
-                    const range = quillInstance.getSelection();
-                    const base64Image = e.target.result;
+                const formData = new FormData();
+                formData.append('file', file);

-                    try {
-                        const serverImageUrl = await uploadImageToServer(base64Image);
-                        quillInstance.insertEmbed(range.index, 'image', serverImageUrl);
-                        imageUrls.add(serverImageUrl);
-                    } catch (error) {
-                        console.error('이미지 업로드 중 오류 발생:', error);
-                    }
-                };
-                reader.readAsDataURL(file);
+                uploadImageToServer(formData).then(serverImageUrl => {
+                    const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+                    const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
+
+                    const range = quillInstance.getSelection();
+                    quillInstance.insertEmbed(range.index, 'image', fullImageUrl);
+
+                    imageUrls.add(fullImageUrl);
+                }).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>
@ -185,4 +166,4 @@ onMounted(() => {
    min-height: 300px;
    font-family: 'Nanum Gothic', sans-serif;
 }
-</style>
+</style>
--- 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>

--- a/src/components/modal/ToastModal.vue
+++ b/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>
--- a/src/main.js
+++ b/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 막기
--- a/src/stores/toastStore.js
+++ b/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';
+    },
+  },
+});
--- 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,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");
-        if (response.data && Array.isArray(response.data.data)) {
-            list.value = response.data.data.map((post) => ({
-                ...post,
-                img: post.img || null,
-                likes: post.likes || 0,
-                comments: post.comments || 0,
-            }));
-        }
-    } catch (error) {
-        console.error("Failed to fetch posts:", error);
+    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, index) => ({
+            ...post,
+            id: post.id || index,
+            img: post.img || null,
+            likes: post.likes || 0,
+            comments: post.comments || 0,
+        }));
+    } else {
+        console.error("Unexpected API response structure:", response.data);
    }
 };

--- 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>
--- 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>