@uniai-fe/uds-templates 0.5.8 → 0.5.10

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

@@ -1,32 +1,35 @@
-import type { API_Res_WeatherKoreaNextDays } from "../../types";
+import { lengthFormat } from "@uniai-fe/util-functions";
+
+import type { WeatherPageHeaderNextDaysProps } from "../../types";
+import { resolveWeatherPageHeaderTexts } from "../../utils";
 import WeatherIcon from "../icon/Weather";
 
 export default function WeatherPageHeaderNextDays({
   title,
   data,
-}: {
-  title: string;
-  data?: API_Res_WeatherKoreaNextDays;
-}) {
+  texts: textOverrides,
+}: WeatherPageHeaderNextDaysProps) {
+  const texts = resolveWeatherPageHeaderTexts(textOverrides);
+
   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>
+      <WeatherIcon
+        code={data?.condition}
+        name={data?.conditionName}
+        alt={texts.weatherIconAlt}
+      />
+      <p className="weather-forecast-text">
+        <span className="weather-label">{title}</span>
+        <span className="weather-value">
+          {lengthFormat(data?.min_temperature, 0)}
+        </span>
+        <span className="weather-unit">℃</span>
+        <span className="weather-range">~</span>
+        <span className="weather-value">
+          {lengthFormat(data?.max_temperature, 0)}
+        </span>
+        <span className="weather-unit">℃</span>
+      </p>
     </div>
   );
 }

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

@@ -6,127 +6,170 @@ import { lengthFormat } from "@uniai-fe/util-functions";
 import { Alternate } from "@uniai-fe/uds-primitives";
 import WeatherIcon from "../icon/Weather";
 import WeatherPageHeaderAlert from "./Alert";
+import type { WeatherPageHeaderTodayProps } from "../../types";
 import { useOpenWeatherMap, useWeatherKorea } from "../../hooks";
-
-export default function WeatherPageHeaderToday() {
-  const { now, forecast, isFetchingNow } = useWeatherKorea();
-  const { now: nowAlt, isFetchingNow: isFetchingAlt } = useOpenWeatherMap();
+import {
+  getOpenWeatherMapConditionCode,
+  isKoreaWeatherLocale,
+  resolveWeatherPageHeaderTexts,
+} from "../../utils";
+
+export default function WeatherPageHeaderToday({
+  locale,
+  texts: textOverrides,
+  koreaWeather,
+  openWeatherMapWeather,
+}: WeatherPageHeaderTodayProps = {}) {
+  const isKoreaProvider = isKoreaWeatherLocale(locale);
+  const koreaWeatherFallback = useWeatherKorea({
+    enabled: !koreaWeather && isKoreaProvider,
+  });
+  const openWeatherMapWeatherFallback = useOpenWeatherMap({
+    locale,
+    enabledNow: !openWeatherMapWeather && !isKoreaProvider,
+    enabledForecast: false,
+  });
+  const korea = koreaWeather ?? koreaWeatherFallback;
+  const openWeatherMap = openWeatherMapWeather ?? openWeatherMapWeatherFallback;
+  const texts = resolveWeatherPageHeaderTexts(textOverrides);
 
   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;
-    }
+    if (!isKoreaProvider) return openWeatherMap.isFetchingNow;
+    if (korea.isFetchingNow) return true;
     return false;
-  }, [
-    forecast?.today?.condition,
-    isFetchingAlt,
-    isFetchingNow,
-    now?.today?.condition,
-  ]);
+  }, [isKoreaProvider, korea.isFetchingNow, openWeatherMap.isFetchingNow]);
 
   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";
+    if (isKoreaProvider) {
+      const kma_now = korea.now?.today?.condition;
+      if (kma_now && !kma_now.endsWith("null")) return kma_now;
+
+      const kma_forecast = korea.forecast?.today?.condition;
+      if (kma_forecast && !kma_forecast.endsWith("null")) return kma_forecast;
     }
-  }, [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;
+    return getOpenWeatherMapConditionCode(
+      openWeatherMap.now?.weather?.[0]?.icon,
+    );
+  }, [
+    isKoreaProvider,
+    korea.forecast?.today?.condition,
+    korea.now?.today?.condition,
+    openWeatherMap.now?.weather,
+  ]);
 
-    const kma_forecast = forecast?.today?.conditionName;
-    if (kma_forecast && !kma_forecast.endsWith("null")) return kma_forecast;
+  const weatherStateName = useMemo(() => {
+    if (isKoreaProvider) {
+      const kma_now = korea.now?.today?.conditionName;
+      if (kma_now && !kma_now.endsWith("null"))
+        return kma_now || texts.conditionFallbackLabel;
+
+      const kma_forecast = korea.forecast?.today?.conditionName;
+      if (kma_forecast && !kma_forecast.endsWith("null"))
+        return kma_forecast || texts.conditionFallbackLabel;
+    }
 
-    return nowAlt?.weather?.[0]?.description || "-";
+    return (
+      openWeatherMap.now?.weather?.[0]?.description ||
+      texts.conditionFallbackLabel
+    );
   }, [
-    forecast?.today?.conditionName,
-    now?.today?.conditionName,
-    nowAlt?.weather,
+    isKoreaProvider,
+    korea.forecast?.today?.conditionName,
+    korea.now?.today?.conditionName,
+    openWeatherMap.now?.weather,
+    texts.conditionFallbackLabel,
   ]);
 
   const temperature = useMemo(() => {
-    const kma_now = now?.today?.temperature;
-    if (kma_now && !Number.isNaN(Number(kma_now))) return Number(kma_now);
+    if (isKoreaProvider) {
+      const kma_now = korea.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 kma_forecast = korea.forecast?.today?.temperature;
+      if (kma_forecast && !Number.isNaN(Number(kma_forecast)))
+        return Number(kma_forecast);
+    }
 
-    const alt_now = nowAlt?.main?.temp;
+    const alt_now = openWeatherMap.now?.main?.temp;
     return typeof alt_now === "number" ? Math.round(alt_now) : null;
   }, [
-    forecast?.today?.temperature,
-    now?.today?.temperature,
-    nowAlt?.main?.temp,
+    isKoreaProvider,
+    korea.forecast?.today?.temperature,
+    korea.now?.today?.temperature,
+    openWeatherMap.now?.main?.temp,
   ]);
 
   const humidity = useMemo(() => {
-    const kma_now = now?.today?.humidity;
-    if (kma_now && !Number.isNaN(Number(kma_now))) return Number(kma_now);
+    if (isKoreaProvider) {
+      const kma_now = korea.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 kma_forecast = korea.forecast?.today?.humidity;
+      if (kma_forecast && !Number.isNaN(Number(kma_forecast)))
+        return Number(kma_forecast);
+    }
 
-    const alt_now = nowAlt?.main?.humidity;
+    const alt_now = openWeatherMap.now?.main?.humidity;
     return typeof alt_now === "number" ? Math.round(alt_now) : null;
-  }, [forecast?.today?.humidity, now?.today?.humidity, nowAlt?.main?.humidity]);
+  }, [
+    isKoreaProvider,
+    korea.forecast?.today?.humidity,
+    korea.now?.today?.humidity,
+    openWeatherMap.now?.main?.humidity,
+  ]);
+
+  const maxTemperature = null;
+  const minTemperature = null;
+  const alert = (
+    <WeatherPageHeaderAlert locale={locale} texts={textOverrides} />
+  );
 
   return (
     <div className="weather-today-container">
       {isFetchingAlternate ? (
-        <Alternate.LoadingDefault direction="horizontal">
-          현재 날씨 불러오는 중...
-        </Alternate.LoadingDefault>
+        <>
+          {alert}
+          <Alternate.LoadingDefault direction="horizontal">
+            {texts.currentWeatherLoading}
+          </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>
+          <WeatherIcon
+            code={iconCode}
+            name={weatherStateName}
+            alt={texts.weatherIconAlt}
+          />
+          <div className="weather-today-text">
+            {alert}
+            <p className="weather-temperature-text">
+              <span className="weather-label">{texts.currentLabel}</span>
+              <span className="weather-value">
+                {lengthFormat(temperature, 0)}
+              </span>
+              <span className="weather-unit">℃</span>
+            </p>
+            <p className="weather-temperature-text">
+              <span className="weather-label">{texts.maxTemperatureLabel}</span>
+              <span className="weather-value">
+                {lengthFormat(maxTemperature, 0)}
+              </span>
+              <span className="weather-unit">℃</span>
+            </p>
+            <p className="weather-temperature-text">
+              <span className="weather-label">{texts.minTemperatureLabel}</span>
+              <span className="weather-value">
+                {lengthFormat(minTemperature, 0)}
+              </span>
+              <span className="weather-unit">℃</span>
+            </p>
+            <p className="weather-humidity-text">
+              <span className="weather-label">{texts.humidityLabel}</span>
+              <span className="weather-value">
+                {lengthFormat(humidity, 0)}%
+              </span>
+            </p>
           </div>
         </>
       )}

package/src/weather/hooks/useOpenWeatherMap.ts

@@ -6,14 +6,33 @@ import {
   useQueryWeatherOpenWeatherMapForecast,
   useQueryWeatherOpenWeatherMapNow,
 } from "../apis/open-weather-map/client";
+import type {
+  WeatherApiLocaleOptions,
+  WeatherOpenWeatherMapParams,
+} from "../types";
 
-export default function useOpenWeatherMap() {
+type UseOpenWeatherMapOptions = WeatherApiLocaleOptions & {
+  enabledNow?: boolean;
+  enabledForecast?: boolean;
+};
+
+export default function useOpenWeatherMap({
+  locale,
+  enabledNow = true,
+  enabledForecast = true,
+}: UseOpenWeatherMapOptions = {}) {
   const coordinate = useAtomValue(weatherCoordinate);
+  const params: WeatherOpenWeatherMapParams = {
+    ...coordinate,
+    ...(locale ? { locale } : {}),
+  };
 
   const { data: now, isFetching: isFetchingNow } =
-    useQueryWeatherOpenWeatherMapNow(coordinate);
+    useQueryWeatherOpenWeatherMapNow(params, { enabled: enabledNow });
   const { data: forecast, isFetching: isFetchingForecast } =
-    useQueryWeatherOpenWeatherMapForecast(coordinate);
+    useQueryWeatherOpenWeatherMapForecast(params, {
+      enabled: enabledForecast,
+    });
 
   return {
     coordinate,

package/src/weather/hooks/useWeatherKorea.ts

@@ -11,7 +11,13 @@ import { weatherCoordinate } from "../jotai/coordinate";
 import { getWeatherBaseMoments } from "../utils/date-time";
 import { getWeatherGridLocation } from "../utils/location";
 
-export default function useWeatherKorea() {
+type UseWeatherKoreaOptions = {
+  enabled?: boolean;
+};
+
+export default function useWeatherKorea({
+  enabled = true,
+}: UseWeatherKoreaOptions = {}) {
   const coordinate = useAtomValue(weatherCoordinate);
   const [params, setParams] = useState<{
     [categoryKey: string]: API_Req_WeatherKorea;
@@ -21,7 +27,8 @@ export default function useWeatherKorea() {
   });
 
   useEffect(() => {
-    if (typeof window === "undefined") return;
+    if (typeof window === "undefined" || !enabled) return;
+    let isActive = true;
 
     const hasInjectedCoordinate =
       typeof coordinate.address === "string" ||
@@ -38,6 +45,7 @@ export default function useWeatherKorea() {
 
     async function updater() {
       const grid = await getWeatherGridLocation(coordinate);
+      if (!isActive) return;
       setParams({
         now: {
           ...grid,
@@ -51,14 +59,18 @@ export default function useWeatherKorea() {
     }
 
     updater();
-  }, [coordinate]);
+    return () => {
+      isActive = false;
+    };
+  }, [coordinate, enabled]);
 
   const { data: now, isFetching: isFetchingNow } = useQueryWeatherKoreaNow(
     params.now,
+    { enabled },
   );
 
   const { data: forecast, isFetching: isFetchingForecast } =
-    useQueryWeatherKoreaForecast(params.forecast);
+    useQueryWeatherKoreaForecast(params.forecast, { enabled });
 
   return {
     params,

package/src/weather/hooks/useWeatherKoreaAlert.ts

@@ -5,13 +5,22 @@ import { useAtomValue } from "jotai";
 import { useQueryWeatherKoreaAlert } from "../apis/korea/client"; // server 번들을 피하기 위해 client 모듈에서 직접 import한다.
 import { weatherFarmIdx } from "../jotai/farm-idx";
 
-export default function useWeatherKoreaAlert() {
+type UseWeatherKoreaAlertOptions = {
+  enabled?: boolean;
+};
+
+export default function useWeatherKoreaAlert({
+  enabled = true,
+}: UseWeatherKoreaAlertOptions = {}) {
   const farm_idx = useAtomValue(weatherFarmIdx);
 
   // 특보 조회 식별자는 템플릿이 보정하지 않고, 서비스가 주입한 값만 그대로 사용한다.
-  const { data, isFetching } = useQueryWeatherKoreaAlert({
-    farm_idx,
-  });
+  const { data, isFetching } = useQueryWeatherKoreaAlert(
+    {
+      farm_idx,
+    },
+    { enabled },
+  );
 
   const alert = useMemo(() => data?.alerts || [], [data]);
 

package/src/weather/img/marker.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99996 1.4668C10.6941 1.4668 12.8665 3.47682 12.8665 6.58854C12.8664 8.54149 11.6838 10.5163 10.5898 11.9421C10.0325 12.6683 9.47625 13.28 9.05986 13.7096C8.8515 13.9246 8.67753 14.095 8.55465 14.2122C8.49317 14.2709 8.44389 14.3165 8.41012 14.3477C8.39335 14.3631 8.38018 14.3752 8.37105 14.3835C8.36655 14.3876 8.36318 14.3909 8.36064 14.3932C8.35938 14.3944 8.35814 14.3952 8.35738 14.3958L8.35608 14.3965C8.17889 14.5552 7.92171 14.576 7.72457 14.457L7.64384 14.3971L7.64254 14.3958C7.64178 14.3952 7.64053 14.3944 7.63928 14.3932C7.63674 14.3909 7.63337 14.3876 7.62887 14.3835C7.61974 14.3752 7.60657 14.3631 7.5898 14.3477C7.55603 14.3165 7.50675 14.2709 7.44527 14.2122C7.32239 14.095 7.14842 13.9246 6.94006 13.7096C6.52367 13.28 5.96741 12.6683 5.41012 11.9421C4.3161 10.5163 3.13354 8.54149 3.13342 6.58854C3.13342 3.47682 5.30586 1.4668 7.99996 1.4668Z" fill="#313235"/>
+<path d="M9.33329 6.66671C9.33329 7.40309 8.73634 8.00004 7.99996 8.00004C7.26358 8.00004 6.66663 7.40309 6.66663 6.66671C6.66663 5.93033 7.26358 5.33337 7.99996 5.33337C8.73634 5.33337 9.33329 5.93033 9.33329 6.66671Z" fill="white"/>
+</svg>