메인 달력 날씨 업데이트

src/components/main/MainEventCalendar.vue

@@ -61,7 +61,7 @@
 </template>
 
 <script setup>
-    import { inject, onMounted, reactive, ref, watch } from 'vue';
+    import { inject, onMounted, reactive, ref, watch, nextTick } from 'vue';
     import { fetchHolidays } from '@c/calendar/holiday';
     import { useUserInfoStore } from '@/stores/useUserInfoStore';
     import { useProjectStore } from '@/stores/useProjectStore';
@@ -344,7 +344,7 @@
         useFilterEventList(month, day);
     };
 
-    // 오늘 날짜 노란색 복구
+    // 오늘 날짜 노란색 배경 복구
     const colorToday = e => {
         if (todayEL != null && !todayEL.classList.contains('fc-day-today')) todayEL.classList.add('fc-day-today');
     };
@@ -506,6 +506,8 @@
         selectAllow: selectInfo => isSelectableDate(selectInfo.start),
         dateClick: handleDateClick,
         dayCellDidMount: arg => {
+            // 날씨 정보 업데이트
+            addWeatherInfo(arg);
             const dateCell = arg.el;
 
             // 마우스 홀드시 이벤트 모달
@@ -536,6 +538,40 @@
         },
     });
 
+    // 날짜 정보 업데이트
+    const addWeatherInfo = arg => {
+        const dateStr = $common.dateFormatter(arg.date, 'YMD');
+        // 해당 셀의 날짜와 일치하는 데이터
+        const theDayWeatherInfo = dailyWeatherList.value.find(weather => weather.date === dateStr);
+
+        if (theDayWeatherInfo) {
+            // 날씨 이미지 세팅
+            const weatherIconUrl = `https://openweathermap.org/img/wn/${theDayWeatherInfo.icon}.png`;
+            const weatherEl = document.createElement('img');
+            weatherEl.src = weatherIconUrl;
+            weatherEl.alt = theDayWeatherInfo.description;
+            weatherEl.className = 'weather-icon';
+            weatherEl.style.width = '28px';
+            weatherEl.style.height = '28px';
+
+            // 해당 셀에 이미지 넣기
+            const dayTopEl = arg.el.querySelector('.fc-daygrid-day-top');
+            dayTopEl.classList.add('align-items-center');
+            dayTopEl.prepend(weatherEl); // 이상하게 가장 앞에 넣어야 일자 뒤에 나옴
+        }
+    };
+
+    // 날씨 데이터 변경 감지하여 날씨 정보 업데이트
+    watch(dailyWeatherList, async () => {
+        await nextTick(); // DOM이 업데이트된 후 실행
+        document.querySelectorAll('.fc-daygrid-day').forEach(dayCell => {
+            addWeatherInfo({
+                el: dayCell,
+                date: dayCell.dataset.date,
+            });
+        });
+    });
+
     const handleWheelEvent = e => {
         handleCloseModal();
     };
@@ -570,12 +606,6 @@
         param.append('month', month);
         param.append('day', day);
 
-        // if (!weatherStore.dailyWeatherList?.length) {
-        //     await weatherStore.getWeatherInfo();
-        //     //dailyWeatherList.value = weatherStore.dailyWeatherList;
-        //     console.log('dailyWeatherList.value: ', dailyWeatherList.value);
-        // }
-
         // 이벤트 카테고리 호출
         await fetchCategoryList();
         await fetchEventList(param);