@uniai-fe/uds-templates 0.1.16 → 0.1.17

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,13 @@
+"use client";
+
+import Image from "next/image";
+
+import assetUrl from "../../../../asset-url";
+
+export default function WeatherAddressIcon() {
+  return (
+    <figure className="weather-address-icon">
+      <Image src={`${assetUrl}/img/weather/address.svg`} alt="날씨 위치" fill />
+    </figure>
+  );
+}

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

@@ -0,0 +1,32 @@
+import Image from "next/image";
+import clsx from "clsx";
+
+import assetUrl from "../../../../asset-url";
+
+/**
+ * 날씨; 아이콘
+ * @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 && (
+      <figure className={clsx("weather-base-icon", "weather-icon")}>
+        <Image
+          src={`${assetUrl}/img/weather/${code}.svg`}
+          alt={name || "날씨 아이콘"}
+          fill
+        />
+      </figure>
+    )
+  );
+}

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 WeatherAddressIcon from "../icon/Address";
+
+export default function WeatherPageHeaderAddress() {
+  const { address } = useAtomValue(weatherCoordinate);
+
+  if (!address) return null;
+
+  return (
+    <div className="weather-address">
+      <WeatherAddressIcon />
+      <p className="weather-address-text">
+        <span>{address}</span>
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,42 @@
+"use client";
+
+import { useMemo } from "react";
+
+import useWeatherKoreaAlert from "../../hooks/useWeatherKoreaAlert";
+import { Alternate } from "@uniai-fe/uds-primitives";
+
+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 level = () => {
+      if (alert_level.startsWith("예비")) return "예비특보";
+      if (alert_level.startsWith("주의")) return "주의보";
+      return alert_level;
+    };
+    const command = alert_command?.includes("해제") ? "해제" : "발령";
+    return `${alert_type}${level()} ${command}`;
+  }, [alert]);
+
+  if (!isFetching && (alert.length === 0 || !alert?.[0]?.alert_type)) {
+    return null;
+  }
+
+  return (
+    <div className="weather-alert">
+      <div className="weather-alert-text">
+        {isFetching ? (
+          // 특보 조회 중에도 영역을 확보해 레이아웃이 흔들리지 않도록 로딩 표시를 유지한다.
+          <Alternate.LoadingDefault direction="horizontal">
+            특보 불러오는 중...
+          </Alternate.LoadingDefault>
+        ) : (
+          <span>{notice}</span>
+        )}
+      </div>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,26 @@
+"use client";
+
+import { Alternate } from "@uniai-fe/uds-primitives";
+import { useWeatherKorea } from "../../hooks";
+import WeatherPageHeaderNextDays from "./NextDays";
+
+export default function WeatherPageHeaderForecast() {
+  const { forecast, isFetchingForecast } = useWeatherKorea();
+
+  if (isFetchingForecast) {
+    return (
+      <div className="weather-next-days-container">
+        <Alternate.LoadingDefault direction="horizontal">
+          예보 날씨 불러오는 중...
+        </Alternate.LoadingDefault>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <WeatherPageHeaderNextDays title="내일" data={forecast?.day_1} />
+      <WeatherPageHeaderNextDays title="모레" data={forecast?.day_2} />
+    </>
+  );
+}

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

@@ -0,0 +1,32 @@
+import type { API_Res_WeatherKoreaNextDays } from "../../types";
+import WeatherIcon from "../icon/Weather";
+
+export default function WeatherPageHeaderNextDays({
+  title,
+  data,
+}: {
+  title: string;
+  data?: API_Res_WeatherKoreaNextDays;
+}) {
+  return (
+    <div className="weather-next-days-container">
+      <div className="weather-base-divider" aria-hidden="true" />
+      <dl className="weather-next-days-text">
+        <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>
+      </dl>
+    </div>
+  );
+}

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

@@ -0,0 +1,135 @@
+"use client";
+
+import { useMemo } from "react";
+import { lengthFormat } from "@uniai-fe/util-functions";
+
+import { Alternate } from "@uniai-fe/uds-primitives";
+import WeatherIcon from "../icon/Weather";
+import WeatherPageHeaderAlert from "./Alert";
+import { useOpenWeatherMap, useWeatherKorea } from "../../hooks";
+
+export default function WeatherPageHeaderToday() {
+  const { now, forecast, isFetchingNow } = useWeatherKorea();
+  const { now: nowAlt, isFetchingNow: isFetchingAlt } = useOpenWeatherMap();
+
+  const isFetchingAlternate = useMemo(() => {
+    if (isFetchingNow) return true;
+    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(() => {
+    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":
+      case "03d":
+      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;
+
+    return nowAlt?.weather?.[0]?.description || "-";
+  }, [
+    forecast?.today?.conditionName,
+    now?.today?.conditionName,
+    nowAlt?.weather,
+  ]);
+
+  const temperature = useMemo(() => {
+    const kma_now = now?.today?.temperature;
+    if (kma_now && !Number.isNaN(Number(kma_now))) return Number(kma_now);
+
+    const kma_forecast = forecast?.today?.temperature;
+    if (kma_forecast && !Number.isNaN(Number(kma_forecast)))
+      return Number(kma_forecast);
+
+    const alt_now = nowAlt?.main?.temp;
+    return typeof alt_now === "number" ? Math.round(alt_now) : null;
+  }, [
+    forecast?.today?.temperature,
+    now?.today?.temperature,
+    nowAlt?.main?.temp,
+  ]);
+
+  const humidity = useMemo(() => {
+    const kma_now = now?.today?.humidity;
+    if (kma_now && !Number.isNaN(Number(kma_now))) return Number(kma_now);
+
+    const kma_forecast = forecast?.today?.humidity;
+    if (kma_forecast && !Number.isNaN(Number(kma_forecast)))
+      return Number(kma_forecast);
+
+    const alt_now = nowAlt?.main?.humidity;
+    return typeof alt_now === "number" ? Math.round(alt_now) : null;
+  }, [forecast?.today?.humidity, now?.today?.humidity, nowAlt?.main?.humidity]);
+
+  return (
+    <div className="weather-today-container">
+      {isFetchingAlternate ? (
+        <Alternate.LoadingDefault direction="horizontal">
+          현재 날씨 불러오는 중...
+        </Alternate.LoadingDefault>
+      ) : (
+        <>
+          <WeatherIcon code={iconCode} name={weatherStateName} />
+          <div className="weather-today-temperature">
+            <span>{lengthFormat(temperature, 0)}</span>
+            <span className="unit">℃</span>
+          </div>
+          <WeatherPageHeaderAlert />
+          <div className="weather-today-humidity">
+            <dl className="weather-base-text-info">
+              <dt>
+                <span>습도</span>
+              </dt>
+              <dd>
+                <span>{lengthFormat(humidity, 0)}%</span>
+              </dd>
+            </dl>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/weather/context/mock.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import type {
+  API_Res_WeatherKoreaAlert,
+  API_Res_WeatherKoreaForecast,
+  API_Res_WeatherKoreaNow,
+  WeatherCoordinate,
+} from "../types";
+
+type WeatherKoreaMock = {
+  now?: API_Res_WeatherKoreaNow;
+  forecast?: API_Res_WeatherKoreaForecast;
+  coordinate?: WeatherCoordinate;
+  isFetchingNow?: boolean;
+  isFetchingForecast?: boolean;
+};
+
+type OpenWeatherMock = {
+  now?: {
+    weather?: Array<{ icon?: string; description?: string }>;
+    main?: { temp?: number | null; humidity?: number | null };
+  };
+  forecast?: unknown;
+  coordinate?: WeatherCoordinate;
+  isFetchingNow?: boolean;
+  isFetchingForecast?: boolean;
+};
+
+type WeatherKoreaAlertMock = {
+  alert?: API_Res_WeatherKoreaAlert;
+  isFetching?: boolean;
+};
+
+export type WeatherMockValue = {
+  korea?: WeatherKoreaMock;
+  koreaAlert?: WeatherKoreaAlertMock;
+  openWeather?: OpenWeatherMock;
+};
+
+const WeatherMockContext = createContext<WeatherMockValue | null>(null);
+
+export const WeatherMockProvider = WeatherMockContext.Provider;
+
+export const useWeatherMock = () => useContext(WeatherMockContext);