@uniai-fe/ui-legacy 0.1.1

package/src/weather/apis/open-weather-map/client.ts

@@ -0,0 +1,69 @@
+"use client";
+
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import type { OWM_Res_Weather_Now, WeatherGeoCoordinate } from "../../../types";
+import { getQueryString, isValidNumber } from "@uniai-fe/util-functions";
+
+/**
+ * 글로벌 날씨 API; 현재 날씨 fetch
+ * @method GET
+ * @route https://api.openweathermap.org/data/2.5/weather
+ * @see https://openweathermap.org/current
+ * @param {WeatherGeoCoordinate} params - API 요청 파라미터
+ * @param {number} params.lat - 위도
+ * @param {number} params.lon - 경도
+ */
+export const getWeatherOpenWeatherMapNow = async (
+  params: WeatherGeoCoordinate,
+) =>
+  await (
+    await fetch(`/api/weather/open-weather-map/now${getQueryString(params)}`)
+  ).json();
+
+/**
+ * 글로벌 날씨 API; 예보 날씨 (4 days) fetch
+ * @method GET
+ * @route https://pro.openweathermap.org/data/2.5/weather/forecast/hourly
+ * @see https://openweathermap.org/api/hourly-forecast
+ * @param {WeatherGeoCoordinate} params - API 요청 파라미터
+ * @param {number} params.lat - 위도
+ * @param {number} params.lon - 경도
+ */
+export const getWeatherOpenWeatherMapForecast = async (
+  params: WeatherGeoCoordinate,
+) =>
+  await (
+    await fetch(
+      `/api/weather/open-weather-map/forecast${getQueryString(params)}`,
+    )
+  ).json();
+
+/**
+ * 글로벌 날씨 API; 현재 날씨 react query
+ * @method GET
+ */
+export const useQueryWeatherOpenWeatherMapNow = (
+  params: WeatherGeoCoordinate,
+): UseQueryResult<OWM_Res_Weather_Now> =>
+  useQuery({
+    queryKey: ["weather_open_weather_map_now", ...Object.values(params)],
+    queryFn: () => getWeatherOpenWeatherMapNow(params),
+    enabled: isValidNumber(params.lat) && isValidNumber(params.lng),
+    staleTime: 10 * 60 * 1000, // 10분
+    refetchInterval: 5 * 60 * 1000, // 5분
+    refetchOnWindowFocus: true,
+  });
+
+/**
+ * 글로벌 날씨 API; 예보 날씨 (4 days) react query
+ * @method GET
+ */
+export const useQueryWeatherOpenWeatherMapForecast = (
+  params: WeatherGeoCoordinate,
+) =>
+  useQuery({
+    queryKey: ["weather_open_weather_map_forecast", ...Object.values(params)],
+    queryFn: () => getWeatherOpenWeatherMapForecast(params),
+    enabled: isValidNumber(params.lat) && isValidNumber(params.lng),
+    staleTime: 30 * 60 * 1000, // 30분
+  });

package/src/weather/apis/open-weather-map/server.ts

@@ -0,0 +1,134 @@
+"use server";
+
+import {
+  generateBackendQueryUrl_GET,
+  nextAPILog,
+} from "@uniai-fe/util-functions";
+
+/**
+ * 글로벌 날씨 API; 현재 날씨 URL
+ */
+const API_BASE_CURRENT = "https://api.openweathermap.org/data/2.5/weather";
+/**
+ * 글로벌 날씨 API; 예보 날씨 URL
+ */
+const API_BASE_FORECAST =
+  "https://pro.openweathermap.org/data/2.5/weather/forecast/hourly";
+
+const COMMON_OPTIONS = {
+  lang: "kr",
+  units: "metric", // 섭씨 온도
+};
+
+/**
+ * 글로벌 날씨 API; 현재 날씨
+ * @method GET
+ */
+export const routeOpenWeatherMapNow = async ({
+  authKey,
+  routeUrl,
+  searchParams,
+}: {
+  authKey: string;
+  routeUrl: string;
+  searchParams: URLSearchParams;
+}): Promise<object> => {
+  const resDefault = {};
+
+  if (!authKey) {
+    nextAPILog("GET", routeUrl, "Open Weather Map 현재날씨 API", {
+      error: "API Key를 확인하세요.",
+    });
+    return resDefault;
+  }
+
+  const lat = searchParams.get("lat") || "";
+  const lon = searchParams.get("lng") || "";
+  if (!lat || !lon) {
+    nextAPILog("GET", routeUrl, "Open Weather Map 현재날씨 API", {
+      error: "위도와 경도를 입력하세요.",
+      lat,
+      lon,
+    });
+
+    return {};
+  }
+
+  const url = generateBackendQueryUrl_GET({
+    domain: API_BASE_CURRENT,
+    routeUrl,
+    queryUrl: "",
+    searchParams: new URLSearchParams({
+      lat,
+      lon,
+      appid: authKey,
+      ...COMMON_OPTIONS,
+    }),
+  });
+
+  try {
+    const res = await (await fetch(url)).json();
+    return res;
+  } catch (error) {
+    nextAPILog("GET", routeUrl, url, { error });
+
+    return resDefault;
+  }
+};
+
+/**
+ * 글로벌 날씨 API; 예보 날씨
+ * @method GET
+ */
+export const routeOpenWeatherMapForecast = async ({
+  authKey,
+  routeUrl,
+  searchParams,
+}: {
+  authKey: string;
+  routeUrl: string;
+  searchParams: URLSearchParams;
+}): Promise<object> => {
+  const resDefault = {};
+
+  if (!authKey) {
+    nextAPILog("GET", routeUrl, "Open Weather Map 예보날씨 API", {
+      error: "API Key를 확인하세요.",
+    });
+    return resDefault;
+  }
+
+  const lat = searchParams.get("lat") || "";
+  const lon = searchParams.get("lng") || "";
+  if (!lat || !lon) {
+    nextAPILog("GET", routeUrl, "Open Weather Map 현재날씨 API", {
+      error: "위도와 경도를 입력하세요.",
+      lat,
+      lon,
+    });
+
+    return {};
+  }
+
+  const url = generateBackendQueryUrl_GET({
+    domain: API_BASE_FORECAST,
+    routeUrl,
+    queryUrl: "",
+    searchParams: new URLSearchParams({
+      lat,
+      lon,
+      appid: authKey,
+      ...COMMON_OPTIONS,
+    }),
+  });
+
+  try {
+    const res = await (await fetch(url)).json();
+    nextAPILog("GET", routeUrl, url, { searchParams, res });
+    return res;
+  } catch (error) {
+    nextAPILog("GET", routeUrl, url, { error });
+
+    return resDefault;
+  }
+};

package/src/weather/components/icon/Address.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import Image from "next/image";
+import StyledWeatherBase from "../../styles/styled-components/base";
+import assetUrl from "../../../asset-url";
+
+export default function WeatherAddressIcon() {
+  return (
+    <StyledWeatherBase.address.icon>
+      <Image
+        src={`${assetUrl}/img/weather/address.svg`}
+        alt="날씨 위치"
+        fill={true}
+      />
+    </StyledWeatherBase.address.icon>
+  );
+}

package/src/weather/components/icon/Weather.tsx

@@ -0,0 +1,33 @@
+import assetUrl from "../../../asset-url";
+import StyledWeatherBase from "../../styles/styled-components/base";
+import Image from "next/image";
+
+/**
+ * 날씨; 아이콘
+ * @desc
+ * - 기상청 API 허브
+ * - 2024. 11. 28. 발효 기준
+ *
+ * @see https://apihub.kma.go.kr/getAttachFile.do?fileName=(20241128)%EB%8B%A8%EA%B8%B0%EC%98%88%EB%B3%B4%20%EC%84%9C%EB%B9%84%EC%8A%A4%20%EA%B0%9C%EC%84%A0%EC%97%90%20%EB%94%B0%EB%A5%B8%20API%20%EB%B3%80%EA%B2%BD%EC%82%AC%ED%95%AD.pdf
+ */
+export default function WeatherIcon({
+  code,
+  name,
+}: Partial<{
+  code: string | null;
+  name: string | null;
+}>) {
+  return (
+    code && (
+      <StyledWeatherBase.icon className="weather-icon">
+        <Image
+          src={`${assetUrl}/img/weather/${code}.svg`}
+          alt={name || "날씨 아이콘"}
+          // width={25}
+          // height={24}
+          fill={true}
+        />
+      </StyledWeatherBase.icon>
+    )
+  );
+}

package/src/weather/components/index.tsx

@@ -0,0 +1,7 @@
+import WeatherPageHeaderContainer from "./page-header/Container";
+
+const Weather = {
+  PageHeader: WeatherPageHeaderContainer,
+};
+
+export default Weather;

package/src/weather/components/page-header/Address.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import { weatherCoordinate } from "../../jotai";
+import StyledWeatherBase from "../../styles/styled-components/base";
+import WeatherAddressIcon from "../icon/Address";
+
+export default function WeatherPageHeaderAddress() {
+  const { address } = useAtomValue(weatherCoordinate);
+
+  return (
+    address && (
+      <StyledWeatherBase.address.container>
+        <WeatherAddressIcon />
+        <StyledWeatherBase.address.text>
+          <span>{address}</span>
+        </StyledWeatherBase.address.text>
+      </StyledWeatherBase.address.container>
+    )
+  );
+}

package/src/weather/components/page-header/Alert.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useMemo } from "react";
+
+import Alternate from "../../../alternate";
+import StyledWeatherAlert from "../../styles/styled-components/alert";
+
+import useWeatherKoreaAlert from "../../hooks/useWeatherKoreaAlert";
+
+export default function WeatherPageHeaderAlert() {
+  const { alert, isFetching } = useWeatherKoreaAlert();
+
+  const notice = useMemo((): string => {
+    if (alert.length === 0 || !alert?.[0]?.alert_type) return "";
+
+    const { alert_type, alert_level, alert_command } = alert?.[0] || {};
+    const type = alert_type;
+    const level = () => {
+      if (alert_level.startsWith("예비")) return "예비특보";
+      else if (alert_level.startsWith("주의")) return "주의보";
+      return alert_level;
+    };
+    const command = alert_command?.includes("해제") ? "해제" : "발령";
+    return `${type}${level()} ${command}`;
+  }, [alert]);
+
+  if (isFetching || alert.length === 0 || !alert?.[0]?.alert_type) return null;
+
+  return (
+    <StyledWeatherAlert.container>
+      <StyledWeatherAlert.text>
+        {isFetching ? (
+          <Alternate.LoadingDefault direction="horizontal">
+            특보 블러오는 중...
+          </Alternate.LoadingDefault>
+        ) : (
+          <span>{notice}</span>
+        )}
+      </StyledWeatherAlert.text>
+    </StyledWeatherAlert.container>
+  );
+}

package/src/weather/components/page-header/Container.tsx

@@ -0,0 +1,14 @@
+import PageHeaderUtilityItem from "../../../frame/components/header/util/Item";
+import WeatherPageHeaderToday from "./Today";
+import WeatherPageHeaderForecast from "./Forecast";
+import WeatherPageHeaderAddress from "./Address";
+
+export default function WeatherPageHeaderContainer() {
+  return (
+    <PageHeaderUtilityItem>
+      <WeatherPageHeaderAddress />
+      <WeatherPageHeaderToday />
+      <WeatherPageHeaderForecast />
+    </PageHeaderUtilityItem>
+  );
+}

package/src/weather/components/page-header/Forecast.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import Alternate from "../../../alternate";
+import { useWeatherKorea } from "../../hooks";
+import StyledWeatherNextDays from "../../styles/styled-components/next-days";
+import WeatherPageHeaderNextDays from "./NextDays";
+
+export default function WeatherPageHeaderForecast() {
+  const { forecast, isFetchingForecast } = useWeatherKorea();
+
+  return isFetchingForecast ? (
+    <StyledWeatherNextDays.container>
+      <Alternate.LoadingDefault direction="horizontal">
+        예보 날씨 불러오는 중...
+      </Alternate.LoadingDefault>
+    </StyledWeatherNextDays.container>
+  ) : (
+    <>
+      <WeatherPageHeaderNextDays title="내일" data={forecast?.day_1} />
+      <WeatherPageHeaderNextDays title="모레" data={forecast?.day_2} />
+    </>
+  );
+}

package/src/weather/components/page-header/NextDays.tsx

@@ -0,0 +1,34 @@
+import type { API_Res_WeatherKoreaNextDays } from "../../../types";
+import StyledWeatherBase from "../../styles/styled-components/base";
+import StyledWeatherNextDays from "../../styles/styled-components/next-days";
+import WeatherIcon from "../icon/Weather";
+
+export default function WeatherPageHeaderNextDays({
+  title,
+  data,
+}: {
+  title: string;
+  data?: API_Res_WeatherKoreaNextDays;
+}) {
+  return (
+    <StyledWeatherNextDays.container>
+      <StyledWeatherBase.divider />
+      <StyledWeatherNextDays.textLayout>
+        <dt>
+          <span>{title}</span>
+        </dt>
+        <dd>
+          <WeatherIcon code={data?.condition} name={data?.conditionName} />
+        </dd>
+        <dd>
+          <span>{data?.min_temperature || "-"}</span>
+          <span className="unit">℃</span>
+        </dd>
+        <dd>
+          <span>{data?.max_temperature || "-"}</span>
+          <span className="unit">℃</span>
+        </dd>
+      </StyledWeatherNextDays.textLayout>
+    </StyledWeatherNextDays.container>
+  );
+}

package/src/weather/components/page-header/Today.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useMemo } from "react";
+
+import WeatherIcon from "../icon/Weather";
+import Alternate from "../../../alternate";
+import WeatherPageHeaderAlert from "./Alert";
+
+import StyledWeatherBase from "../../styles/styled-components/base";
+import StyledWeatherToday from "../../styles/styled-components/today";
+
+import { useOpenWeatherMap, useWeatherKorea } from "../../hooks";
+import { lengthFormat } from "@uniai-fe/util-functions";
+
+export default function WeatherPageHeaderToday() {
+  const { now, forecast, isFetchingNow } = useWeatherKorea();
+  const { now: nowAlt, isFetchingNow: isFetchingAlt } = useOpenWeatherMap();
+
+  const isFetchingAlternate = useMemo((): boolean => {
+    if (isFetchingNow) return true;
+
+    // 기상청 현재 날씨가 없거나 null인 경우
+    const kma_now = now?.today?.condition;
+    const kma_forecast = forecast?.today?.condition;
+    if (
+      !kma_now ||
+      kma_now.endsWith("null") ||
+      !kma_forecast ||
+      kma_forecast.endsWith("null")
+    ) {
+      return isFetchingAlt;
+    }
+    return false;
+  }, [
+    forecast?.today?.condition,
+    isFetchingAlt,
+    isFetchingNow,
+    now?.today?.condition,
+  ]);
+
+  const iconCode = useMemo((): string => {
+    const kma_now = now?.today?.condition;
+    if (kma_now && !kma_now?.endsWith("null")) {
+      return kma_now;
+    }
+    const kma_forecast = forecast?.today?.condition;
+    if (kma_forecast && !kma_forecast?.endsWith("null")) {
+      return kma_forecast;
+    }
+
+    // 기상청 대체 정보
+    const alt_now = nowAlt?.weather?.[0]?.icon;
+    switch (alt_now) {
+      case "01d":
+        return "sky-1";
+      case "02d":
+        return "sky-2";
+      case "03d":
+        return "sky-2";
+      case "04d":
+        return "sky-2";
+      case "09d":
+        return "drop-rain-3";
+      case "10d":
+        return "drop-rain-1";
+      case "11d":
+        return "drop-rain-thunder";
+      case "13d":
+        return "drop-snow";
+      case "50d":
+        return "sky-4";
+      default:
+        return "sky-1";
+    }
+  }, [forecast?.today?.condition, now?.today?.condition, nowAlt?.weather]);
+
+  const weatherStateName = useMemo(() => {
+    const kma_now = now?.today?.conditionName;
+    if (kma_now && !kma_now?.endsWith("null")) {
+      return kma_now;
+    }
+    const kma_forecast = forecast?.today?.conditionName;
+    if (kma_forecast && !kma_forecast?.endsWith("null")) {
+      return kma_forecast;
+    }
+
+    const alt_now = nowAlt?.weather?.[0]?.description;
+    return alt_now || "-";
+  }, [
+    forecast?.today?.conditionName,
+    now?.today?.conditionName,
+    nowAlt?.weather,
+  ]);
+
+  const temperature = useMemo((): number | null => {
+    const kma_now = now?.today?.temperature;
+    if (kma_now && !isNaN(Number(kma_now))) {
+      return Number(kma_now);
+    }
+    const kma_forecast = forecast?.today?.temperature;
+    if (kma_forecast && !isNaN(Number(kma_forecast))) {
+      return Number(kma_forecast);
+    }
+    const alt_now = nowAlt?.main?.temp;
+    return alt_now ? Math.round(alt_now) : null;
+  }, [
+    forecast?.today?.temperature,
+    now?.today?.temperature,
+    nowAlt?.main?.temp,
+  ]);
+
+  const humidity = useMemo((): number | null => {
+    const kma_now = now?.today?.humidity;
+    if (kma_now && !isNaN(Number(kma_now))) {
+      return Number(kma_now);
+    }
+    const kma_forecast = forecast?.today?.humidity;
+    if (kma_forecast && !isNaN(Number(kma_forecast))) {
+      return Number(kma_forecast);
+    }
+    const alt_now = nowAlt?.main?.humidity;
+    return alt_now ? Math.round(alt_now) : null;
+  }, [forecast?.today?.humidity, now?.today?.humidity, nowAlt?.main?.humidity]);
+
+  return (
+    <StyledWeatherToday.container>
+      {isFetchingAlternate ? (
+        <Alternate.LoadingDefault direction="horizontal">
+          현재 날씨 블러오는 중...
+        </Alternate.LoadingDefault>
+      ) : (
+        <>
+          <WeatherIcon code={iconCode} name={weatherStateName} />
+          <StyledWeatherToday.temperature>
+            <span>{lengthFormat(temperature, 0)}</span>
+            <span className="unit">℃</span>
+          </StyledWeatherToday.temperature>
+          <WeatherPageHeaderAlert />
+          <StyledWeatherToday.humidity>
+            <StyledWeatherBase.textInfo>
+              <dt>
+                <span>습도</span>
+              </dt>
+              <dd>
+                <span>{lengthFormat(humidity, 0)}%</span>
+              </dd>
+            </StyledWeatherBase.textInfo>
+          </StyledWeatherToday.humidity>
+        </>
+      )}
+    </StyledWeatherToday.container>
+  );
+}