From c43614c7435218ea4399b5280a08538761c7b1a7 Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Tue, 8 Apr 2025 00:54:59 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=EB=8B=AC=EB=A0=A5=20?=
 =?UTF-8?q?=EB=82=A0=EC=94=A8=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/MainEventCalendar.vue | 46 +++++++++++++++++++----
 1 file changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/components/main/MainEventCalendar.vue b/src/components/main/MainEventCalendar.vue
index 5add8b5..ddf1d4b 100644
--- a/src/components/main/MainEventCalendar.vue
+++ b/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);