달력 날씨인데 안쓸듯..

src/components/main/MainEventCalendar.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script setup>
-    import { inject, onMounted, reactive, ref, watch } from 'vue';
+    import { inject, onMounted, reactive, ref, watch, computed } from 'vue';
     import { fetchHolidays } from '@c/calendar/holiday';
     import { useUserInfoStore } from '@/stores/useUserInfoStore';
     import { useProjectStore } from '@/stores/useProjectStore';
@@ -437,18 +437,49 @@
         showModal.value = false;
     };
 
-    // 달력 이벤트 아이콘 표시 함수
+    // 날씨 아이콘 URL 가져오는 함수
+    const getWeatherIconUrl = iconCode => {
+        if (iconCode === '01d' || iconCode === '01n') {
+            return '/img/icons/sunny-custom.png';
+        }
+        // @2x 제거하여 일반 크기 아이콘 사용
+        return `https://openweathermap.org/img/wn/${iconCode}.png`;
+    };
+
+    // 날씨 아이콘 클래스 가져오는 함수
+    const getWeatherIconClass = iconCode => {
+        if (iconCode === '01d' || iconCode === '01n') {
+            return 'custom-sunny-icon';
+        }
+        return 'weather-icon';
+    };
+
+    // 먼저 handleEventContent 함수 선언
     const handleEventContent = item => {
         if (!item.event) return null;
 
-        // 공휴일인 경우 텍스트로 표시
+        // 날씨 이벤트인 경우
+        if (item.event.classNames?.includes('weather-event')) {
+            const weather = item.event.extendedProps;
+            return {
+                html: `
+                    <div class="weather-info">
+                        <img src="${weather.iconUrl}" 
+                             class="${weather.iconClass}"
+                             style="width: 20px; height: 20px; display: block;" />
+                    </div>
+                `,
+            };
+        }
+
+        // 공휴일인 경우
         if (item.event.classNames?.includes('holiday-event')) {
             return {
                 html: `<div class="holiday-text" style="color: white;">${item.event.title}</div>`,
             };
         }
 
-        // 현재 이벤트의 타입만 확인
+        // 기존의 다른 이벤트 처리 코드...
         const eventType = item.event.extendedProps.type;
         if (!eventType) return null;
 
@@ -481,7 +512,40 @@
         };
     };
 
-    // 캘린더 옵션 설정
+    // 날씨 이벤트 추가 함수
+    const addWeatherEvent = (date, weatherInfo) => {
+        calendarEvents.value.push({
+            start: date,
+            type: 'weather',
+            classNames: ['weather-event'],
+            extendedProps: {
+                weatherIcon: weatherInfo.icon,
+                iconUrl: getWeatherIconUrl(weatherInfo.icon),
+                iconClass: getWeatherIconClass(weatherInfo.icon),
+            },
+        });
+    };
+
+    // dailyWeatherList 변화 감지 및 날씨 정보 추가
+    watch(
+        dailyWeatherList,
+        newWeatherList => {
+            if (!newWeatherList?.length) return;
+
+            console.log(123);
+            // 기존 날씨 이벤트 제거
+            calendarEvents.value = calendarEvents.value.filter(event => !event.classNames?.includes('weather-event'));
+
+            // 새로운 날씨 정보 추가
+            newWeatherList.forEach(weatherInfo => {
+                const date = $common.dateFormatter(weatherInfo.date, 'YMD');
+                addWeatherEvent(date, weatherInfo);
+            });
+        },
+        { immediate: true },
+    );
+
+    // 캘린더 옵션에 eventContent 설정
     const calendarOptions = reactive({
         plugins: [dayGridPlugin, interactionPlugin],
         initialView: 'dayGridMonth',
@@ -500,10 +564,26 @@
         dateClick: handleDateClick,
         dayCellDidMount: arg => {
             const dateCell = arg.el;
-
-            // 마우스 홀드시 이벤트 모달
-            dateCell.addEventListener('mousedown', e => {
             const date = $common.dateFormatter(arg.date, 'YMD');
+
+            // 날짜 숫자가 있는 요소 찾기
+            const dateCellNumber = dateCell.querySelector('.fc-daygrid-day-number');
+
+            // 해당 날짜의 날씨 이벤트 찾기
+            const weatherEvent = calendarEvents.value.find(
+                event => event.classNames?.includes('weather-event') && $common.dateFormatter(event.start, 'YMD') === date,
+            );
+
+            // 날씨 이벤트가 있으면 아이콘 추가
+            if (weatherEvent && dateCellNumber) {
+                const weatherIcon = document.createElement('img');
+                weatherIcon.src = weatherEvent.extendedProps.iconUrl;
+                weatherIcon.className = 'date-weather-icon';
+                dateCellNumber.appendChild(weatherIcon);
+            }
+
+            // 기존의 마우스 이벤트 핸들러들
+            dateCell.addEventListener('mousedown', e => {
                 handleMouseDown(date, e);
             });
             dateCell.addEventListener('mouseup', handleMouseUp);
@@ -562,7 +642,7 @@
         if (!weatherStore.dailyWeatherList?.length) {
             await weatherStore.getWeatherInfo();
             //dailyWeatherList.value = weatherStore.dailyWeatherList;
-            console.log('dailyWeatherList.value: ', dailyWeatherList.value);
+            //console.log('dailyWeatherList.value: ', dailyWeatherList.value);
         }
 
         // 이벤트 카테고리 호출
@@ -607,4 +687,77 @@
     ::v-deep(.fc-daygrid-event-harness:has(.holiday-event)) {
         width: 100% !important;
     }
+
+    /* 날씨 정보 스타일 */
+    .weather-info {
+        position: absolute;
+        right: 4px;
+        top: 4px;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+    }
+
+    .weather-info img,
+    .weather-icon,
+    .custom-sunny-icon {
+        width: 20px !important;
+        height: 20px !important;
+        min-width: 20px !important;
+        min-height: 20px !important;
+        max-width: 20px !important;
+        max-height: 20px !important;
+        object-fit: contain !important;
+        display: block !important;
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+
+    /* 날씨 이벤트가 있는 셀의 스타일 조정 */
+    .fc-daygrid-day-events .weather-event {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 20px !important;
+        height: 20px !important;
+        background: transparent !important;
+        border: none !important;
+        z-index: 1;
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+
+    /* 추가적인 제어를 위한 스타일 */
+    .weather-event * {
+        max-width: 20px !important;
+        max-height: 20px !important;
+    }
+
+    /* 다른 이벤트와의 겹침 방지 */
+    .fc-daygrid-day-events {
+        position: relative;
+    }
+
+    /* 기존 날씨 관련 스타일은 제거하고 새로운 스타일 추가 */
+    .fc-daygrid-day-number {
+        display: flex !important;
+        align-items: center !important;
+        gap: 4px !important;
+    }
+
+    .date-weather-icon {
+        width: 16px !important;
+        height: 16px !important;
+        object-fit: contain !important;
+        display: inline-block !important;
+        vertical-align: middle !important;
+    }
+
+    /* 날씨 이벤트 숨기기 (이제 날짜 옆에 표시되므로) */
+    .weather-event {
+        display: none !important;
+    }
 </style>