@uniai-fe/uds-templates 0.5.13 → 0.5.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.5.13",
+  "version": "0.5.15",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/weather/apis/korea/server.ts

@@ -12,7 +12,10 @@ import type {
   KMA_Res_WeatherNow,
 } from "../../types";
 import WEATHER_KOREA_RESPONSE from "../../data/response";
-import { getWeatherBaseMoments } from "../../utils/date-time";
+import {
+  getWeatherBaseMoments,
+  getWeatherDailyRangeBaseMoments,
+} from "../../utils/date-time";
 import { extractWeatherSummary } from "../../utils";
 import type { NextResponse } from "next/server";
 import { generateQueryUrl, nextAPILog } from "@uniai-fe/util-api";
@@ -63,6 +66,51 @@ const getWeatherParams = ({
   };
 };
 
+const getWeatherDailyRangeParams = ({
+  authKey,
+  searchParams,
+}: {
+  authKey: string;
+  searchParams: URLSearchParams;
+}): KMA_Req_Weather => {
+  const { base_date, base_time } = getWeatherDailyRangeBaseMoments();
+
+  return {
+    pageNo: "1",
+    numOfRows: "1000",
+    authKey,
+    dataType: "JSON",
+    nx: 0,
+    ny: 0,
+    ...Object.fromEntries(searchParams.entries()),
+    base_date,
+    base_time,
+  };
+};
+
+const hasTodayTemperatureRange = (
+  forecast: API_Res_WeatherKoreaForecast,
+): boolean =>
+  forecast.today.max_temperature !== null &&
+  forecast.today.min_temperature !== null;
+
+const fillTodayTemperatureRange = ({
+  forecast,
+  dailyRange,
+}: {
+  forecast: API_Res_WeatherKoreaForecast;
+  dailyRange: API_Res_WeatherKoreaForecast;
+}): API_Res_WeatherKoreaForecast => ({
+  ...forecast,
+  today: {
+    ...forecast.today,
+    max_temperature:
+      forecast.today.max_temperature ?? dailyRange.today.max_temperature,
+    min_temperature:
+      forecast.today.min_temperature ?? dailyRange.today.min_temperature,
+  },
+});
+
 /**
  * 기상청 API; 현재 날씨
  * @method GET
@@ -82,6 +130,8 @@ export const routeWeatherKoreaNow = async ({
   const NOW_DATA: API_Res_WeatherKoreaToday = {
     ...API_RES_BASE,
     temperature: null,
+    max_temperature: null,
+    min_temperature: null,
     humidity: null,
   };
   const resDefault: API_Res_WeatherKoreaNow = {
@@ -146,7 +196,13 @@ export const routeWeatherKoreaForecast = async ({
   };
   const resDefault: API_Res_WeatherKoreaForecast = {
     raw: API_RES_RAW as KMA_Res_WeatherForecast,
-    today: { ...API_RES_BASE, temperature: null, humidity: null },
+    today: {
+      ...API_RES_BASE,
+      temperature: null,
+      max_temperature: null,
+      min_temperature: null,
+      humidity: null,
+    },
     day_1: { ...FORECAST_DATA },
     day_2: { ...FORECAST_DATA },
   };
@@ -177,7 +233,38 @@ export const routeWeatherKoreaForecast = async ({
   try {
     const res: KMA_Res_WeatherForecast = await (await fetch(url)).json();
     resDefault.raw = res;
-    return extractWeatherSummary.forecast(resDefault, res);
+    const forecast = extractWeatherSummary.forecast(resDefault, res);
+
+    if (hasTodayTemperatureRange(forecast)) {
+      return forecast;
+    }
+
+    const dailyRangeQueryParams = Object.fromEntries(
+      Object.entries(getWeatherDailyRangeParams({ authKey, searchParams })).map(
+        ([key, value]) => [key, String(value)],
+      ),
+    );
+    const dailyRangeUrl = generateQueryUrl({
+      domain,
+      routeUrl,
+      queryUrl: QUERY_URL.forecast,
+      searchParams: new URLSearchParams(dailyRangeQueryParams),
+    });
+    const dailyRangeRes: KMA_Res_WeatherForecast = await (
+      await fetch(dailyRangeUrl)
+    ).json();
+    const dailyRange = extractWeatherSummary.forecast(
+      {
+        ...resDefault,
+        raw: dailyRangeRes,
+        today: { ...resDefault.today },
+        day_1: { ...resDefault.day_1 },
+        day_2: { ...resDefault.day_2 },
+      },
+      dailyRangeRes,
+    );
+
+    return fillTodayTemperatureRange({ forecast, dailyRange });
   } catch (error) {
     nextAPILog("GET", routeUrl, url, { error });
 

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

@@ -15,7 +15,7 @@ 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";
+  "https://pro.openweathermap.org/data/2.5/forecast/hourly";
 
 const COMMON_OPTIONS = {
   units: "metric", // 섭씨 온도

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

@@ -10,6 +10,7 @@ import type { WeatherPageHeaderTodayProps } from "../../types";
 import { useOpenWeatherMap, useWeatherKorea } from "../../hooks";
 import {
   getOpenWeatherMapConditionCode,
+  getOpenWeatherMapTodayForecast,
   isKoreaWeatherLocale,
   resolveWeatherPageHeaderTexts,
 } from "../../utils";
@@ -27,17 +28,27 @@ export default function WeatherPageHeaderToday({
   const openWeatherMapWeatherFallback = useOpenWeatherMap({
     locale,
     enabledNow: !openWeatherMapWeather && !isKoreaProvider,
-    enabledForecast: false,
+    enabledForecast: !openWeatherMapWeather && !isKoreaProvider,
   });
   const korea = koreaWeather ?? koreaWeatherFallback;
   const openWeatherMap = openWeatherMapWeather ?? openWeatherMapWeatherFallback;
   const texts = resolveWeatherPageHeaderTexts(textOverrides);
+  const openWeatherMapToday = useMemo(
+    () => getOpenWeatherMapTodayForecast(openWeatherMap.forecast),
+    [openWeatherMap.forecast],
+  );
 
   const isFetchingAlternate = useMemo(() => {
-    if (!isKoreaProvider) return openWeatherMap.isFetchingNow;
+    if (!isKoreaProvider)
+      return openWeatherMap.isFetchingNow || openWeatherMap.isFetchingForecast;
     if (korea.isFetchingNow) return true;
     return false;
-  }, [isKoreaProvider, korea.isFetchingNow, openWeatherMap.isFetchingNow]);
+  }, [
+    isKoreaProvider,
+    korea.isFetchingNow,
+    openWeatherMap.isFetchingForecast,
+    openWeatherMap.isFetchingNow,
+  ]);
 
   const iconCode = useMemo(() => {
     if (isKoreaProvider) {
@@ -119,8 +130,57 @@ export default function WeatherPageHeaderToday({
     openWeatherMap.now?.main?.humidity,
   ]);
 
-  const maxTemperature = null;
-  const minTemperature = null;
+  const maxTemperature = useMemo(() => {
+    if (isKoreaProvider) {
+      const kma_forecast = korea.forecast?.today?.max_temperature;
+      if (
+        kma_forecast !== null &&
+        kma_forecast !== undefined &&
+        !Number.isNaN(Number(kma_forecast))
+      )
+        return Number(kma_forecast);
+    }
+
+    const alt_forecast = openWeatherMapToday?.max_temperature;
+    if (
+      alt_forecast !== null &&
+      alt_forecast !== undefined &&
+      !Number.isNaN(Number(alt_forecast))
+    )
+      return Number(alt_forecast);
+
+    return null;
+  }, [
+    isKoreaProvider,
+    korea.forecast?.today?.max_temperature,
+    openWeatherMapToday?.max_temperature,
+  ]);
+
+  const minTemperature = useMemo(() => {
+    if (isKoreaProvider) {
+      const kma_forecast = korea.forecast?.today?.min_temperature;
+      if (
+        kma_forecast !== null &&
+        kma_forecast !== undefined &&
+        !Number.isNaN(Number(kma_forecast))
+      )
+        return Number(kma_forecast);
+    }
+
+    const alt_forecast = openWeatherMapToday?.min_temperature;
+    if (
+      alt_forecast !== null &&
+      alt_forecast !== undefined &&
+      !Number.isNaN(Number(alt_forecast))
+    )
+      return Number(alt_forecast);
+
+    return null;
+  }, [
+    isKoreaProvider,
+    korea.forecast?.today?.min_temperature,
+    openWeatherMapToday?.min_temperature,
+  ]);
   const alert = (
     <WeatherPageHeaderAlert locale={locale} texts={textOverrides} />
   );

package/src/weather/types/api.ts

@@ -158,11 +158,17 @@ export type API_Res_WeatherKoreaBase = {
 /**
  * 기상청 API; 오늘 날씨
  * @property {number|string|null} temperature 기온(℃)
+ * @property {number|string|null} max_temperature 최고기온(℃)
+ * @property {number|string|null} min_temperature 최저기온(℃)
  * @property {number|string|null} humidity 습도(%)
  */
 export type API_Res_WeatherKoreaToday = API_Res_WeatherKoreaBase & {
   /** 기온(℃) */
   temperature: number | string | null;
+  /** 최고 기온(℃) */
+  max_temperature: number | string | null;
+  /** 최저 기온(℃) */
+  min_temperature: number | string | null;
   /** 습도(%) */
   humidity: number | string | null;
 };

package/src/weather/utils/date-time.ts

@@ -37,6 +37,29 @@ export const getWeatherBaseMoments = (
   return { base_date, base_time };
 };
 
+/**
+ * 날씨 도구; KMA 오늘 일최고/일최저 조회 기준시각
+ * @util
+ * @return {KMA_Req_BaseMoments} 오늘 TMN/TMX 보강용 발표일자/발표시각
+ * @desc
+ * - KMA 최신 단기예보는 과거 예보시각의 오늘 TMN/TMX를 포함하지 않을 수 있다.
+ * - 기본은 전날 23시 발표를 사용하고, 23시 이후에는 최근 24시간 범위 안의 당일 02시 발표를 사용한다.
+ */
+export const getWeatherDailyRangeBaseMoments = (): KMA_Req_BaseMoments => {
+  const now = new Date();
+  const base = new Date(now);
+  const base_hour = now.getHours() >= 23 ? 2 : 23;
+
+  if (base_hour === 23) {
+    base.setDate(base.getDate() - 1);
+  }
+
+  return {
+    base_date: dateFormat(base).replace(/-/g, ""),
+    base_time: `${base_hour.toString().padStart(2, "0")}00`,
+  };
+};
+
 /**
  * 날씨 도구; 현재 날씨/예보 시각
  * @util
@@ -49,17 +72,18 @@ export const getWeatherBaseMoments = (
  */
 export const getMoments = (): WeatherUtilDateTimeMoments => {
   const now = new Date();
-  const today = now.toISOString().slice(0, 10).replace(/-/g, "");
+  const today = dateFormat(now).replace(/-/g, "");
 
-  const tomorrow = new Date(now.getTime() + 86400000)
-    .toISOString()
-    .slice(0, 10)
-    .replace(/-/g, "");
+  const tomorrow = new Date(now.getTime() + 86400000);
+  const tomorrowKey = dateFormat(tomorrow).replace(/-/g, "");
 
-  const dayAfterTomorrow = new Date(now.getTime() + 2 * 86400000)
-    .toISOString()
-    .slice(0, 10)
-    .replace(/-/g, "");
+  const dayAfterTomorrow = new Date(now.getTime() + 2 * 86400000);
+  const dayAfterTomorrowKey = dateFormat(dayAfterTomorrow).replace(/-/g, "");
 
-  return { now, today, tomorrow, dayAfterTomorrow };
+  return {
+    now,
+    today,
+    tomorrow: tomorrowKey,
+    dayAfterTomorrow: dayAfterTomorrowKey,
+  };
 };

package/src/weather/utils/weather.ts

@@ -264,10 +264,32 @@ const getLocalDateKey = (date: Date): string => {
   return `${date.getFullYear()}-${month}-${day}`;
 };
 
-const getForecastItemDateKey = (item: OWM_Res_Weather_Forecast_Item): string =>
-  item.dt_txt?.slice(0, 10) || getLocalDateKey(new Date(item.dt * 1000));
+const getTimeZoneDateKey = (dateTimeSeconds: number, timezoneSeconds: number) =>
+  new Date((dateTimeSeconds + timezoneSeconds) * 1000)
+    .toISOString()
+    .slice(0, 10);
 
-const toOpenWeatherMapNextDay = (
+const getOpenWeatherMapDateKey = (
+  forecast?: OWM_Res_Weather_Forecast,
+): string => {
+  const timezoneSeconds = forecast?.city?.timezone;
+
+  if (typeof timezoneSeconds === "number" && Number.isFinite(timezoneSeconds)) {
+    return getTimeZoneDateKey(Math.floor(Date.now() / 1000), timezoneSeconds);
+  }
+
+  return getLocalDateKey(new Date());
+};
+
+const getForecastItemDateKey = (
+  item: OWM_Res_Weather_Forecast_Item,
+  timezoneSeconds = 0,
+): string =>
+  Number.isFinite(item.dt)
+    ? getTimeZoneDateKey(item.dt, timezoneSeconds)
+    : item.dt_txt?.slice(0, 10) || getLocalDateKey(new Date(item.dt * 1000));
+
+const toOpenWeatherMapDayForecast = (
   items: OWM_Res_Weather_Forecast_Item[],
 ): API_Res_WeatherKoreaNextDays | undefined => {
   if (items.length === 0) return undefined;
@@ -275,11 +297,11 @@ const toOpenWeatherMapNextDay = (
   const conditionItem =
     items.find(item => item.dt_txt?.includes("12:00")) ||
     items[Math.floor(items.length / 2)];
-  const temperatures = items.flatMap(item => [
-    item.main.temp_min,
-    item.main.temp_max,
-    item.main.temp,
-  ]);
+  const temperatures = items
+    .flatMap(item => [item.main.temp_min, item.main.temp_max, item.main.temp])
+    .filter((temperature): temperature is number =>
+      Number.isFinite(temperature),
+    );
 
   return {
     sky: null,
@@ -311,11 +333,12 @@ export const getOpenWeatherMapNextDays = (
 } => {
   if (!Array.isArray(forecast?.list)) return {};
 
-  const todayKey = getLocalDateKey(new Date());
+  const timezoneSeconds = forecast.city?.timezone ?? 0;
+  const todayKey = getOpenWeatherMapDateKey(forecast);
   const grouped = forecast.list.reduce<
     Record<string, OWM_Res_Weather_Forecast_Item[]>
   >((days, item) => {
-    const dateKey = getForecastItemDateKey(item);
+    const dateKey = getForecastItemDateKey(item, timezoneSeconds);
     if (dateKey === todayKey) return days;
 
     days[dateKey] = [...(days[dateKey] || []), item];
@@ -324,11 +347,30 @@ export const getOpenWeatherMapNextDays = (
   const [day1Key, day2Key] = Object.keys(grouped).sort();
 
   return {
-    day_1: day1Key ? toOpenWeatherMapNextDay(grouped[day1Key]) : undefined,
-    day_2: day2Key ? toOpenWeatherMapNextDay(grouped[day2Key]) : undefined,
+    day_1: day1Key ? toOpenWeatherMapDayForecast(grouped[day1Key]) : undefined,
+    day_2: day2Key ? toOpenWeatherMapDayForecast(grouped[day2Key]) : undefined,
   };
 };
 
+/**
+ * 날씨 도구; OpenWeatherMap 예보 응답을 오늘 최고/최저 형태로 변환
+ * @param {OWM_Res_Weather_Forecast} [forecast] OpenWeatherMap 예보 응답
+ * @return {API_Res_WeatherKoreaNextDays | undefined} 오늘 최고/최저 예보
+ */
+export const getOpenWeatherMapTodayForecast = (
+  forecast?: OWM_Res_Weather_Forecast,
+): API_Res_WeatherKoreaNextDays | undefined => {
+  if (!Array.isArray(forecast?.list)) return undefined;
+
+  const timezoneSeconds = forecast.city?.timezone ?? 0;
+  const todayKey = getOpenWeatherMapDateKey(forecast);
+  const todayItems = forecast.list.filter(
+    item => getForecastItemDateKey(item, timezoneSeconds) === todayKey,
+  );
+
+  return toOpenWeatherMapDayForecast(todayItems);
+};
+
 export function now(
   outputResponse: API_Res_WeatherKoreaNow,
   apiResponse: KMA_Res_WeatherNow,
@@ -396,6 +438,8 @@ export function forecast(
   };
 
   res.today.temperature = getValueForecast(items, today, "TMP");
+  res.today.max_temperature = getValueForecast(items, today, "TMX");
+  res.today.min_temperature = getValueForecast(items, today, "TMN");
   res.today.humidity = getValueForecast(items, today, "REH");
   Object.assign(res.today, getDailyState(today));