From 37dc13a92a81feff70675c90e74fab0685076f74 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 1 Apr 2025 14:11:15 +0900
Subject: [PATCH] =?UTF-8?q?=ED=83=91=EB=B0=94=20=EB=82=A0=EC=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/BoardMain.vue |  2 -
 src/layouts/TheTop.vue            | 87 +++++++++++++++++++++++++++++++
 2 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/src/components/main/BoardMain.vue b/src/components/main/BoardMain.vue
index 77b02f3..11e9aac 100644
--- a/src/components/main/BoardMain.vue
+++ b/src/components/main/BoardMain.vue
@@ -155,7 +155,6 @@ try {
     }));
     }
 } catch (error) {
-    console.error(error);
 }
 };
 
@@ -163,7 +162,6 @@ try {
 const fetchGeneralPosts = async () => {
 try {
     const { data } = await axios.get('board/general', { params: { size: 10 } });
-    console.log(data.data.list)
     if (data?.data && data.data.list) {
     const freePosts = [];
     const anonymousPosts = [];
diff --git a/src/layouts/TheTop.vue b/src/layouts/TheTop.vue
index e547548..8a9e925 100644
--- a/src/layouts/TheTop.vue
+++ b/src/layouts/TheTop.vue
@@ -6,6 +6,24 @@
             </a>
         </div>
 
+        <!-- 날씨 정보 영역 -->
+        <div class="navbar-nav align-items-center">
+            <div class="d-flex align-items-center weather-box">
+                <img
+                v-if="weather.icon"
+                :src="`https://openweathermap.org/img/wn/${weather.icon}@2x.png`"
+                :alt="weather.description"
+                class="weather-icon"
+                />
+                <div class="d-flex flex-column">
+                    <span class="weather-desc">{{ weather.description }}</span>
+                    <span class="weather-temp" v-if="weather.tempMin !== null && weather.tempMax !== null">
+                        최저 {{ weather.tempMin }}° / 최고 {{ weather.tempMax }}°
+                    </span>
+                </div>
+            </div>
+        </div>
+
         <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
             <ul class="navbar-nav flex-row align-items-center ms-auto">
                 <select class="form-select py-1" id="name" v-model="selectedProject" @change="updateSelectedProject">
@@ -325,6 +343,52 @@
 
     });
 
+    const weather = ref({
+        icon: '',
+        description: '',
+        tempMin: null,
+        tempMax: null,
+    });
+
+    const weatherKorean = computed(() => weather.value.description || '날씨 정보 없음');
+
+    onMounted(() => {
+    navigator.geolocation.getCurrentPosition(async (position) => {
+        const lat = position.coords.latitude;
+        const lon = position.coords.longitude;
+        const apiKey = '3505b3500aacf34c4497bf449996ea09';
+        const url = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric&lang=kr`;
+
+        try {
+        const res = await fetch(url);
+        const data = await res.json();
+
+        const now = new Date();
+
+        // 가장 가까운 데이터
+        const closest = data.list.reduce((prev, curr) => {
+        const prevTime = new Date(prev.dt_txt).getTime();
+        const currTime = new Date(curr.dt_txt).getTime();
+        const nowTime = now.getTime();
+
+        const prevDiff = Math.abs(prevTime - nowTime);
+        const currDiff = Math.abs(currTime - nowTime);
+
+        if (prevDiff < currDiff) return prev;
+        if (prevDiff > currDiff) return curr;
+
+        return prevTime < currTime ? prev : curr;
+        });
+
+        weather.value.icon = closest.weather[0].icon.replace(/n$/, 'd');
+        weather.value.description = closest.weather[0].description;
+        weather.value.tempMin = Math.round(closest.main.temp_min);
+        weather.value.tempMax = Math.round(closest.main.temp_max);
+        } catch (e) {
+        console.error('날씨 정보 가져오기 실패:', e);
+        }
+    });
+    });
 
     const handleLogout = async () => {
         await authStore.logout();
@@ -337,4 +401,27 @@
 
 </script>
 <style scoped>
+.weather-icon {
+    width: 40%;
+    height: 40%;
+}
+.weather-desc {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.2;
+}
+.weather-temp {
+    font-size: 12px;
+    color: #888;
+    line-height: 1.2;
+}
+.weather-box {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    max-width: 3000px;
+    margin-right: 1rem;
+    white-space: nowrap;
+    overflow: hidden;
+}
 </style>