탑바 날씨

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 = [];

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>