front: HGU Weather using OpenAPI

.github/workflows/main.yml

@@ -42,7 +42,9 @@ jobs:
         uses: gradle/[email protected]
         with:
           arguments: build
-
+        env:
+          REACT_APP_WEATHER_KEY: ${{ secrets.REACT_APP_WEATHER_KEY }}
+
       # 현재 날짜와 시간을 가져오기
       - name: Get current date and time
         id: date

src/main/front/.gitignore

@@ -1,3 +1,5 @@
+.env
+
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies

src/main/front/src/components/FeedItemNew/WeatherData.css

@@ -0,0 +1,14 @@
+.NewUI .weather {
+  padding-bottom: 16px;
+}
+
+.NewUI .weather b {
+  display: flex;
+  align-items: center;
+}
+
+.NewUI .weather b img {
+  width: 48px;
+  height: 48px;
+  margin-right: 4px;
+}

src/main/front/src/components/FeedItemNew/WeatherData.jsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from "react";
+
+import "./WeatherData.css";
+
+function WeatherData() {
+  const [weatherInfo, setWeatherInfo] = useState();
+  useEffect(() => {
+    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${36.103268}&lon=${129.388611}&appid=${
+      process.env.REACT_APP_WEATHER_KEY
+    }&units=metric`;
+    fetch(url).then((doc) => doc.json().then((json) => setWeatherInfo(json)));
+  }, []);
+
+  return (
+    <div className="FeedItem">
+      <div className="weather">
+        {!!weatherInfo?.weather ? (
+          <b>
+            지금 한동 날씨는:{" "}
+            <img
+              alt="Weather"
+              src={`http://openweathermap.org/img/wn/${weatherInfo.weather[0].icon}.png`}
+            />{" "}
+            {weatherInfo.main.temp}°C
+          </b>
+        ) : (
+          "Loading..."
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default WeatherData;

src/main/front/src/pages/NewUI.jsx

@@ -1,5 +1,6 @@
 import "./NewUI.css";
 import FeedItemNew from "../components/FeedItemNew/FeedItemNew";
+import WeatherData from "../components/FeedItemNew/WeatherData";
 
 const allFeeds = [
   {
@@ -54,6 +55,7 @@ function NewUI() {
       </div>
 
       <div className="list">
+        <WeatherData />
         {allFeeds.length === 0 && <div>No Entry..</div>}
         {allFeeds
           .sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1))