250325 WORK

src/common/common.js

@@ -76,6 +76,34 @@ const common = {
         };
     },
 
+    // 오늘 날짜시간 조회
+    getToday() {
+        const date = new Date();
+        return {
+            year: date.getFullYear(),
+            month: date.getMonth() + 1,
+            day: date.getDate(),
+            hours: date.getHours(),
+            minutes: date.getMinutes(),
+            seconds: date.getSeconds(),
+        };
+    },
+
+    // 해당 월, 일에 맞는 목록 필터링
+    filterTargetByDate(target, key, month, day) {
+        if (!Array.isArray(target) || target.length === 0) return [];
+
+        return [...target].filter(item => {
+            if (!item[key]) return false;
+
+            const date = new Date(item[key]);
+            const MatchingMonth = date.getMonth() + 1 === parseInt(month, 10);
+            const MatchingDay = date.getDate() === parseInt(day, 10);
+
+            return MatchingMonth && MatchingDay;
+        });
+    },
+
     /**
      * 빈값 확인
      *
@@ -83,9 +111,17 @@ const common = {
      * @returns
      */
     isNotEmpty(obj) {
-        if (obj === null || obj === undefined) return false;
+        if (obj === null || obj === undefined) {
-        if (typeof obj === 'string' && obj.trim() === '') return false;
+            return false;
-        if ((Array.isArray(obj) || obj === Object(obj)) && Object.keys(obj).length === 0) return false;
+        }
+
+        if (typeof obj === 'string' && obj.trim() === '') {
+            return false;
+        }
+
+        if ((Array.isArray(obj) || obj === Object(obj)) && Object.keys(obj).length === 0) {
+            return false;
+        }
 
         return true;
     },

src/components/main/MainCalendar.vue

@@ -23,7 +23,12 @@
                             ref="workTimeComponentRef"
                         />
 
-                        <MainEventList :categoryList="categoryList" :baseUrl="baseUrl" />
+                        <MainEventList
+                            :categoryList="categoryList"
+                            :baseUrl="baseUrl"
+                            :birthdayList="birthdayList"
+                            :vacationList="vacationList"
+                        />
                         <!-- <CommuterProjectList
                             :categoryList="categoryList"
                             :project="project"
@@ -122,6 +127,9 @@
     const commuters = ref([]);
     const monthlyCommuters = ref([]);
 
+    // 공통 함수
+    const $common = inject('common');
+
     // 출퇴근 컴포넌트 이벤트 핸들러
     const handleWorkTimeUpdate = () => {
         todaysCommuter();
@@ -168,6 +176,7 @@
         }
     };
 
+    /************* category ***************/
     // 이벤트 카테고리 데이터 로딩
     const categoryList = ref([]);
     const fetchCategoryList = async () => {
@@ -175,6 +184,37 @@
         if (data) categoryList.value = [...data.data.filter(categoryInfo => categoryInfo.CMNCODODR != 0)];
     };
 
+    /************* init ***************/
+    const monthBirthdayList = ref([]);
+    const monthVacationList = ref([]);
+    const birthdayList = ref([]);
+    const vacationList = ref([]);
+
+    // 생일자, 휴가자, 이벤트 일정 조회
+    const fetchEventList = async param => {
+        const { data } = await $api.get(`main/eventList?${param}`);
+        const res = data?.data;
+
+        // 생일자
+        if (res?.memberBirthdayList?.length) monthBirthdayList.value = [...res.memberBirthdayList];
+
+        // 휴가자
+        if (res?.memberVacationList?.length) monthVacationList.value = [...res.memberVacationList];
+    };
+
+    // 해당일 기준 이벤트 리스트
+    const useFilterEventList = (month, day) => {
+        // 생일자
+        if (monthBirthdayList.value) {
+            birthdayList.value = $common.filterTargetByDate(monthBirthdayList.value, 'MEMBERBTH', month, day);
+        }
+
+        // 휴가자
+        if (monthVacationList.value) {
+            vacationList.value = $common.filterTargetByDate(monthVacationList.value, 'LOCVACUDT', month, day);
+        }
+    };
+
     // 캘린더 데이터 가져오기
     const fetchData = async () => {
         // FullCalendar API 인스턴스 가져오기
@@ -430,6 +470,17 @@
             checkedInProject.value = storedProject;
         }
 
+        // 이벤트 카테고리 호출
         await fetchCategoryList();
+
+        // 오늘 기준 데이터 호출
+        const { year, month, day } = $common.getToday();
+        const param = new URLSearchParams();
+        param.append('year', year);
+        param.append('month', month);
+        param.append('day', day);
+
+        await fetchEventList(param);
+        useFilterEventList(month, day);
     });
 </script>

src/components/main/MainEventList.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="">
         <template v-for="category in categoryList" :key="category.CMNCODVAL">
-            <div v-if="true" class="border border-2 mt-3 card p-2">
+            <div v-if="" class="border border-2 mt-3 card p-2">
                 <div class="row g-2">
                     <div class="col-3 mx-0 px-0">
                         <div class="ratio ratio-1x1">
@@ -13,42 +13,30 @@
                         </div>
                     </div>
                     <div class="col-9 d-flex flex-wrap mx-0 px-0">
-                        <!-- <div v-for="commuter in commuters" :key="commuter.COMMUTCMT" class="col-4"> -->
+                        <template v-if="category.CMNCODVAL === 300201">
-                        <div class="ratio ratio-1x1">
+                            <div v-for="member in birthdayList" :key="member.MEMBERSEQ">
-                            <img
+                                <div class="w-25">
-                                :src="`${baseUrl}upload/img/profile/123123`"
+                                    <img
-                                alt="User Profile"
+                                        :src="`${baseUrl}upload/img/profile/${member.MEMBERPRF}`"
-                                class="rounded-circle"
+                                        alt="User Profile"
-                                @error="$event.target.src = '/img/icons/icon.png'"
+                                        class="rounded-circle"
-                            />
+                                        @error="$event.target.src = '/img/icons/icon.png'"
-                        </div>
+                                    />
-
+                                </div>
-                        <div class="ratio ratio-1x1">
+                            </div>
-                            <img
+                        </template>
-                                :src="`${baseUrl}upload/img/profile/123123`"
+                        <template v-if="category.CMNCODVAL === 300202">
-                                alt="User Profile"
+                            <div v-for="member in vacationList" :key="member.MEMBERSEQ">
-                                class="rounded-circle"
+                                <div class="w-25">
-                                @error="$event.target.src = '/img/icons/icon.png'"
+                                    <img
-                            />
+                                        :src="`${baseUrl}upload/img/profile/${member.MEMBERPRF}`"
-                        </div>
+                                        alt="User Profile"
-
+                                        class="rounded-circle"
-                        <div class="ratio ratio-1x1">
+                                        @error="$event.target.src = '/img/icons/icon.png'"
-                            <img
+                                    />
-                                :src="`${baseUrl}upload/img/profile/123123`"
+                                </div>
-                                alt="User Profile"
+                            </div>
-                                class="rounded-circle"
+                        </template>
-                                @error="$event.target.src = '/img/icons/icon.png'"
-                            />
-                        </div>
-
-                        <div class="ratio ratio-1x1">
-                            <img
-                                :src="`${baseUrl}upload/img/profile/123123`"
-                                alt="User Profile"
-                                class="rounded-circle"
-                                @error="$event.target.src = '/img/icons/icon.png'"
-                            />
-                        </div>
                     </div>
                 </div>
             </div>
@@ -57,7 +45,7 @@
 </template>
 
 <script setup>
-    import { defineProps, defineEmits } from 'vue';
+    import { defineEmits } from 'vue';
 
     const props = defineProps({
         project: {
@@ -87,6 +75,12 @@
             type: Object,
             default: null,
         },
+        birthdayList: {
+            type: Array,
+        },
+        vacationList: {
+            type: Array,
+        },
     });
 
     const emit = defineEmits(['drop', 'update:selectedProject', 'update:checkedInProject']);