@uniai-fe/uds-templates 0.5.9 → 0.5.11

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

@@ -1,20 +1,54 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { useAtomValue } from "jotai";
 
 import { weatherCoordinate } from "../../jotai";
+import type { WeatherPageHeaderAddressProps } from "../../types";
+import { resolveWeatherPageHeaderTexts } from "../../utils";
 import WeatherAddressIcon from "../icon/Address";
 
-export default function WeatherPageHeaderAddress() {
+const getRenderedAt = (): string => {
+  const now = new Date();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const date = String(now.getDate()).padStart(2, "0");
+  const hours = String(now.getHours()).padStart(2, "0");
+  const minutes = String(now.getMinutes()).padStart(2, "0");
+
+  return `${now.getFullYear()}-${month}-${date} ${hours}:${minutes}`;
+};
+
+export default function WeatherPageHeaderAddress({
+  texts: textOverrides,
+}: WeatherPageHeaderAddressProps = {}) {
   const { address } = useAtomValue(weatherCoordinate);
+  const texts = resolveWeatherPageHeaderTexts(textOverrides);
+  const [renderedAt, setRenderedAt] = useState(getRenderedAt);
+
+  useEffect(() => {
+    const intervalId = window.setInterval(() => {
+      setRenderedAt(prevRenderedAt => {
+        const nextRenderedAt = getRenderedAt();
+
+        return prevRenderedAt === nextRenderedAt
+          ? prevRenderedAt
+          : nextRenderedAt;
+      });
+    }, 1000);
+
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, []);
 
   if (!address) return null;
 
   return (
     <div className="weather-address">
-      <WeatherAddressIcon />
+      <WeatherAddressIcon alt={texts.addressIconAlt} />
       <p className="weather-address-text">
         <span>{address}</span>
+        <span className="weather-address-date">({renderedAt})</span>
       </p>
     </div>
   );

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

@@ -2,40 +2,67 @@
 
 import { useMemo } from "react";
 
-import useWeatherKoreaAlert from "../../hooks/useWeatherKoreaAlert";
 import { Alternate } from "@uniai-fe/uds-primitives";
+import useWeatherKoreaAlert from "../../hooks/useWeatherKoreaAlert";
+import type { WeatherPageHeaderAlertProps } from "../../types";
+import {
+  isKoreaWeatherLocale,
+  resolveWeatherPageHeaderTexts,
+} from "../../utils";
 
-export default function WeatherPageHeaderAlert() {
-  const { alert, isFetching } = useWeatherKoreaAlert();
+export default function WeatherPageHeaderAlert({
+  locale,
+  texts: textOverrides,
+}: WeatherPageHeaderAlertProps = {}) {
+  const isKoreaProvider = isKoreaWeatherLocale(locale);
+  const { alert, isFetching } = useWeatherKoreaAlert({
+    enabled: isKoreaProvider,
+  });
+  const texts = resolveWeatherPageHeaderTexts(textOverrides);
 
   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 "주의보";
+      if (alert_level.startsWith("예비"))
+        return texts.alertPreliminaryLevelLabel;
+      if (alert_level.startsWith("주의")) return texts.alertWatchLevelLabel;
       return alert_level;
     };
-    const command = alert_command?.includes("해제") ? "해제" : "발령";
+    const command = alert_command?.includes("해제")
+      ? texts.alertCancelCommandLabel
+      : texts.alertIssueCommandLabel;
     return `${alert_type}${level()} ${command}`;
-  }, [alert]);
+  }, [
+    alert,
+    texts.alertCancelCommandLabel,
+    texts.alertIssueCommandLabel,
+    texts.alertPreliminaryLevelLabel,
+    texts.alertWatchLevelLabel,
+  ]);
 
-  if (!isFetching && (alert.length === 0 || !alert?.[0]?.alert_type)) {
+  if (
+    !isKoreaProvider ||
+    (!isFetching && (alert.length === 0 || !alert?.[0]?.alert_type))
+  ) {
     return null;
   }
 
+  if (isFetching) {
+    return (
+      <div className="weather-alert-loading">
+        <Alternate.LoadingDefault direction="horizontal">
+          {texts.alertLoading}
+        </Alternate.LoadingDefault>
+      </div>
+    );
+  }
+
   return (
     <div className="weather-alert">
       <div className="weather-alert-text">
-        {isFetching ? (
-          // 특보 조회 중에도 영역을 확보해 레이아웃이 흔들리지 않도록 로딩 표시를 유지한다.
-          <Alternate.LoadingDefault direction="horizontal">
-            특보 불러오는 중...
-          </Alternate.LoadingDefault>
-        ) : (
-          <span>{notice}</span>
-        )}
+        <span>{notice}</span>
       </div>
     </div>
   );

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

@@ -1,14 +1,42 @@
+"use client";
+
 import WeatherPageHeaderToday from "./Today";
 import WeatherPageHeaderForecast from "./Forecast";
 import WeatherPageHeaderAddress from "./Address";
 import PageHeaderUtilityItem from "../../../page-frame/desktop/components/header/util/Item";
+import type { WeatherPageHeaderContainerProps } from "../../types";
+import { useOpenWeatherMap, useWeatherKorea } from "../../hooks";
+import { isKoreaWeatherLocale } from "../../utils";
+
+export default function WeatherPageHeaderContainer({
+  locale,
+  texts,
+}: WeatherPageHeaderContainerProps = {}) {
+  const isKoreaProvider = isKoreaWeatherLocale(locale);
+  const koreaWeather = useWeatherKorea({
+    enabled: isKoreaProvider,
+  });
+  const openWeatherMapWeather = useOpenWeatherMap({
+    locale,
+    enabledNow: !isKoreaProvider,
+    enabledForecast: !isKoreaProvider,
+  });
 
-export default function WeatherPageHeaderContainer() {
   return (
-    <PageHeaderUtilityItem>
-      <WeatherPageHeaderAddress />
-      <WeatherPageHeaderToday />
-      <WeatherPageHeaderForecast />
+    <PageHeaderUtilityItem className="weather-page-header">
+      <WeatherPageHeaderAddress locale={locale} texts={texts} />
+      <WeatherPageHeaderToday
+        locale={locale}
+        texts={texts}
+        koreaWeather={koreaWeather}
+        openWeatherMapWeather={openWeatherMapWeather}
+      />
+      <WeatherPageHeaderForecast
+        locale={locale}
+        texts={texts}
+        koreaWeather={koreaWeather}
+        openWeatherMapWeather={openWeatherMapWeather}
+      />
     </PageHeaderUtilityItem>
   );
 }

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

@@ -1,17 +1,50 @@
 "use client";
 
+import { useMemo } from "react";
 import { Alternate } from "@uniai-fe/uds-primitives";
-import { useWeatherKorea } from "../../hooks";
+import { useOpenWeatherMap, useWeatherKorea } from "../../hooks";
+import type { WeatherPageHeaderForecastProps } from "../../types";
+import {
+  getOpenWeatherMapNextDays,
+  isKoreaWeatherLocale,
+  resolveWeatherPageHeaderTexts,
+} from "../../utils";
 import WeatherPageHeaderNextDays from "./NextDays";
 
-export default function WeatherPageHeaderForecast() {
-  const { forecast, isFetchingForecast } = useWeatherKorea();
+export default function WeatherPageHeaderForecast({
+  locale,
+  texts: textOverrides,
+  koreaWeather,
+  openWeatherMapWeather,
+}: WeatherPageHeaderForecastProps = {}) {
+  const isKoreaProvider = isKoreaWeatherLocale(locale);
+  const koreaWeatherFallback = useWeatherKorea({
+    enabled: !koreaWeather && isKoreaProvider,
+  });
+  const openWeatherMapWeatherFallback = useOpenWeatherMap({
+    locale,
+    enabledNow: false,
+    enabledForecast: !openWeatherMapWeather && !isKoreaProvider,
+  });
+  const korea = koreaWeather ?? koreaWeatherFallback;
+  const openWeatherMap = openWeatherMapWeather ?? openWeatherMapWeatherFallback;
+  const texts = resolveWeatherPageHeaderTexts(textOverrides);
+  const openWeatherMapNextDays = useMemo(
+    () => getOpenWeatherMapNextDays(openWeatherMap.forecast),
+    [openWeatherMap.forecast],
+  );
+  const forecastDays = isKoreaProvider
+    ? korea.forecast
+    : openWeatherMapNextDays;
+  const isFetching = isKoreaProvider
+    ? korea.isFetchingForecast
+    : openWeatherMap.isFetchingForecast;
 
-  if (isFetchingForecast) {
+  if (isFetching) {
     return (
       <div className="weather-next-days-container">
         <Alternate.LoadingDefault direction="horizontal">
-          예보 날씨 불러오는 중...
+          {texts.forecastWeatherLoading}
         </Alternate.LoadingDefault>
       </div>
     );
@@ -19,8 +52,16 @@ export default function WeatherPageHeaderForecast() {
 
   return (
     <>
-      <WeatherPageHeaderNextDays title="내일" data={forecast?.day_1} />
-      <WeatherPageHeaderNextDays title="모레" data={forecast?.day_2} />
+      <WeatherPageHeaderNextDays
+        title={texts.tomorrowLabel}
+        data={forecastDays?.day_1}
+        texts={textOverrides}
+      />
+      <WeatherPageHeaderNextDays
+        title={texts.dayAfterTomorrowLabel}
+        data={forecastDays?.day_2}
+        texts={textOverrides}
+      />
     </>
   );
 }

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,