오늘의 잔디

---

🌤️ 일정 캘린더에 실시간 날씨 위젯 추가하기 (OpenWeatherMap 연동)

오늘은 내가 만든 일정 관리 캘린더 웹앱에 실시간 날씨 정보 위젯을 추가해보았다.
OpenWeatherMap API를 활용해서 원하는 지역의 현재 날씨를 불러오고, 상단 바에 예쁘게 배치까지 마무리했다.

---

✅ 목표

• 일정 관리 캘린더 상단에 실시간 날씨 정보를 표시하고 싶었다.
• 도시명, 온도, 날씨 설명, 아이콘을 표시해야 함.
• 디자인적으로도 상단 바 좌우 정렬 & 중앙 정렬까지 모두 완성해보기.

---

✅ 1. OpenWeatherMap API 키 발급

👉 https://openweathermap.org 에서 회원가입 후,
"API keys" 메뉴에서 API 키를 발급받았다.

API 키: dfcc7de5ff919e6abbf96b0d62db69f8

---

✅ 2. JavaScript로 날씨 불러오기

document.addEventListener("DOMContentLoaded", function () {
  const apiKey = "dfcc7de5ff919e6abbf96b0d62db69f8";
  const city = "Seoul";

  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=kr`)
    .then(res => {
      if (!res.ok) throw new Error("응답 오류");
      return res.json();
    })
    .then(data => {
      const temp = Math.round(data.main.temp);
      const description = data.weather[0].description;
      const icon = data.weather[0].icon;
      const iconUrl = `https://openweathermap.org/img/wn/${icon}.png`;

      const weatherEl = document.getElementById("weather");
      if (weatherEl) {
        weatherEl.innerHTML = `
          <img src="${iconUrl}" alt="날씨 아이콘" style="width:20px; vertical-align: middle; margin-right: 5px;" />
          ${city} | ${temp}°C, ${description}
        `;
      }
    })
    .catch(err => {
      console.error("❌ 날씨 불러오기 실패:", err);
      const weatherEl = document.getElementById("weather");
      if (weatherEl) {
        weatherEl.innerText = "날씨 정보 없음";
      }
    });
});

---

✅ 3. HTML에 날씨 출력 위치 만들기

<div class="top-bar">
  <h1>📅 나의 일정 관리</h1>
  <div id="quoteBox" class="quote-box">명언 출력</div>
  <div id="weather" class="weather-widget">⛅ 날씨 로딩 중...</div>
  <button id="logout-btn">로그아웃</button>
</div>

---

✅ 4. CSS로 위치 정렬 및 미세조정

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #9b59b6;
  color: white;
  padding: 10px 25px;
  font-size: 15px;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.weather-widget {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  position: relative;
  top: -2px;
  left: 5px;
}

.quote-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
}

---

✅ 최종 결과

• 📅 나의 일정 관리는 왼쪽
• 🌤️ 날씨 위젯은 그 오른쪽에
• 💬 명언은 상단 바 정가운데 정렬
• 🔓 로그아웃은 오른쪽

완벽하게 정렬된 상단바 완성 🎉

---

📌 배운 점

• OpenWeatherMap API의 구조 (weather[0].description, main.temp 등)
• fetch 요청 에러 핸들링
• flex 정렬 + absolute center 정렬의 혼합 사용법
• 작은 미세 위치 조정도 UI 완성도를 크게 끌어올린다는 것

---

🔜 다음 목표

• 지역을 사용자가 선택할 수 있게 만들기 (지역 드롭다운?)
• 일정에 따라 오늘의 날씨에 맞는 추천 문구도 띄워보기?

---