@uniai-fe/uds-templates 0.5.9 → 0.5.10

package/README.md

@@ -60,6 +60,8 @@ Next.js 서비스에서 primitives와 동일한 방식으로 **Raw TypeScript**
   - `weatherCoordinate`
   - `useWeatherKorea`
   - `useOpenWeatherMap`
+  - `WeatherPageHeaderContainerProps`
+  - `WeatherPageHeaderTexts`
 - `/service-inquiry`
   - `ServiceInquiry.Form`
   - `ServiceInquiry.OpenButton`
@@ -130,6 +132,7 @@ Next.js 서비스에서 primitives와 동일한 방식으로 **Raw TypeScript**
   - 로그인 후 `farm_name`, `contact`를 auto-fill + readonly로 보여야 할 때는 `formContextOptions.defaultValues`와 `farmNameField.mode`, `contactField.mode`를 함께 전달한다.
 - `/weather/**`
   - page-frame header utility에 결합되는 weather header 템플릿, page-header 조각 export, weather data hook/API 도구를 제공한다.
+  - page-header는 `locale?: string`을 받으며 기본 지원값은 `ko`, `en`, `ja`다. 기본 문구 외 특수 문구는 `texts` prop으로 주입한다.
 - `/cctv/**`
   - finder/viewer/video/pagination 조합과 rtc/company-list API helper를 제공한다.
 - `/page-frame/**`

package/package.json

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

package/src/cctv/components/pagination/list/Item.tsx

@@ -48,7 +48,16 @@ export default function CCTVPaginationListItem({
       >
         <CCTVVideoTemplate
           ref={videoRef}
+          cam={cam}
           className="cctv-pagination-list-video-container"
+          headerOptions={{
+            activeLiveState: true,
+            activeTitle: false,
+            isLive,
+            isShared:
+              typeof cam.cam_shared === "boolean" ? cam.cam_shared : true,
+            title: cam.cam_name,
+          }}
           footerOptions={{ cam }}
           {...{ isError, overlayMessage, isLive }}
         />

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

@@ -11,6 +11,22 @@ import type {
 } from "../../types";
 import { isValidGridCoordinate } from "../../utils/validate";
 
+type WeatherQueryOptions = {
+  enabled?: boolean;
+};
+
+const getWeatherKoreaParams = ({
+  nx,
+  ny,
+  base_date,
+  base_time,
+}: API_Req_WeatherKorea): API_Req_WeatherKorea => ({
+  nx,
+  ny,
+  ...(base_date ? { base_date } : {}),
+  ...(base_time ? { base_time } : {}),
+});
+
 /**
  * 기상청 API; 현재날씨 fetch
  * @method GET
@@ -54,15 +70,22 @@ export const getWeatherKoreaAlert = async (params: API_Req_WeatherKoreaAlert) =>
  */
 export const useQueryWeatherKoreaNow = (
   params: API_Req_WeatherKorea,
-): UseQueryResult<API_Res_WeatherKoreaNow> =>
-  useQuery({
-    queryKey: ["weather_korea_now", ...Object.values(params)],
-    queryFn: () => getWeatherKoreaNow(params),
-    enabled: isValidGridCoordinate({ nx: params.nx, ny: params.ny }),
+  options: WeatherQueryOptions = {},
+): UseQueryResult<API_Res_WeatherKoreaNow> => {
+  const { nx, ny, base_date, base_time } = params;
+
+  return useQuery({
+    queryKey: ["weather_korea_now", nx, ny, base_date, base_time],
+    queryFn: () =>
+      getWeatherKoreaNow(
+        getWeatherKoreaParams({ nx, ny, base_date, base_time }),
+      ),
+    enabled: (options.enabled ?? true) && isValidGridCoordinate({ nx, ny }),
     staleTime: 10 * 60 * 1000, // 10분
     refetchInterval: 5 * 60 * 1000, // 5분
     refetchOnWindowFocus: true,
   });
+};
 
 /**
  * 기상청 API; 내일/모레 예보 react query
@@ -70,13 +93,20 @@ export const useQueryWeatherKoreaNow = (
  */
 export const useQueryWeatherKoreaForecast = (
   params: API_Req_WeatherKorea,
-): UseQueryResult<API_Res_WeatherKoreaForecast> =>
-  useQuery({
-    queryKey: ["weather_korea_forecast", ...Object.values(params)],
-    queryFn: () => getWeatherKoreaForecast(params),
-    enabled: isValidGridCoordinate({ nx: params.nx, ny: params.ny }),
+  options: WeatherQueryOptions = {},
+): UseQueryResult<API_Res_WeatherKoreaForecast> => {
+  const { nx, ny, base_date, base_time } = params;
+
+  return useQuery({
+    queryKey: ["weather_korea_forecast", nx, ny, base_date, base_time],
+    queryFn: () =>
+      getWeatherKoreaForecast(
+        getWeatherKoreaParams({ nx, ny, base_date, base_time }),
+      ),
+    enabled: (options.enabled ?? true) && isValidGridCoordinate({ nx, ny }),
     staleTime: 30 * 60 * 1000, // 30분
   });
+};
 
 /**
  * 기상청 API; 특보 react query
@@ -84,10 +114,15 @@ export const useQueryWeatherKoreaForecast = (
  */
 export const useQueryWeatherKoreaAlert = (
   params: API_Req_WeatherKoreaAlert,
-): UseQueryResult<API_Res_WeatherKoreaAlert> =>
-  useQuery({
-    queryKey: ["weather_korea_alert", ...Object.values(params)],
-    queryFn: () => getWeatherKoreaAlert(params),
-    enabled: typeof params.farm_idx === "number" && params.farm_idx > 0,
+  options: WeatherQueryOptions = {},
+): UseQueryResult<API_Res_WeatherKoreaAlert> => {
+  const { farm_idx } = params;
+
+  return useQuery({
+    queryKey: ["weather_korea_alert", farm_idx],
+    queryFn: () => getWeatherKoreaAlert({ farm_idx }),
+    enabled:
+      (options.enabled ?? true) && typeof farm_idx === "number" && farm_idx > 0,
     staleTime: 60 * 60 * 1000, // 1시간
   });
+};

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

@@ -147,8 +147,8 @@ 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 },
-    day_1: FORECAST_DATA,
-    day_2: FORECAST_DATA,
+    day_1: { ...FORECAST_DATA },
+    day_2: { ...FORECAST_DATA },
   };
 
   if (!authKey) {

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

@@ -4,11 +4,25 @@ import { useQuery, type UseQueryResult } from "@tanstack/react-query";
 import type {
   OWM_Res_Weather_Forecast,
   OWM_Res_Weather_Now,
-  WeatherGeoCoordinate,
+  WeatherOpenWeatherMapParams,
 } from "../../types";
 import { getQueryString } from "@uniai-fe/util-api";
 import { isValidNumber } from "@uniai-fe/util-functions";
 
+type WeatherQueryOptions = {
+  enabled?: boolean;
+};
+
+const getOpenWeatherMapParams = ({
+  lat,
+  lng,
+  locale,
+}: WeatherOpenWeatherMapParams): WeatherOpenWeatherMapParams => ({
+  lat,
+  lng,
+  ...(locale ? { locale } : {}),
+});
+
 /**
  * 글로벌 날씨 API; 현재 날씨 fetch
  * @method GET
@@ -19,7 +33,7 @@ import { isValidNumber } from "@uniai-fe/util-functions";
  * @param {number} params.lon - 경도
  */
 export const getWeatherOpenWeatherMapNow = async (
-  params: WeatherGeoCoordinate,
+  params: WeatherOpenWeatherMapParams,
 ): Promise<OWM_Res_Weather_Now> =>
   await (
     await fetch(`/api/weather/open-weather-map/now${getQueryString(params)}`)
@@ -35,7 +49,7 @@ export const getWeatherOpenWeatherMapNow = async (
  * @param {number} params.lon - 경도
  */
 export const getWeatherOpenWeatherMapForecast = async (
-  params: WeatherGeoCoordinate,
+  params: WeatherOpenWeatherMapParams,
 ): Promise<OWM_Res_Weather_Forecast> =>
   await (
     await fetch(
@@ -48,27 +62,43 @@ export const getWeatherOpenWeatherMapForecast = async (
  * @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),
+  params: WeatherOpenWeatherMapParams,
+  options: WeatherQueryOptions = {},
+): UseQueryResult<OWM_Res_Weather_Now> => {
+  const { lat, lng, locale } = params;
+
+  return useQuery({
+    queryKey: ["weather_open_weather_map_now", lat, lng, locale],
+    queryFn: () =>
+      getWeatherOpenWeatherMapNow(
+        getOpenWeatherMapParams({ lat, lng, locale }),
+      ),
+    enabled:
+      (options.enabled ?? true) && isValidNumber(lat) && isValidNumber(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,
-): UseQueryResult<OWM_Res_Weather_Forecast> =>
-  useQuery({
-    queryKey: ["weather_open_weather_map_forecast", ...Object.values(params)],
-    queryFn: () => getWeatherOpenWeatherMapForecast(params),
-    enabled: isValidNumber(params.lat) && isValidNumber(params.lng),
+  params: WeatherOpenWeatherMapParams,
+  options: WeatherQueryOptions = {},
+): UseQueryResult<OWM_Res_Weather_Forecast> => {
+  const { lat, lng, locale } = params;
+
+  return useQuery({
+    queryKey: ["weather_open_weather_map_forecast", lat, lng, locale],
+    queryFn: () =>
+      getWeatherOpenWeatherMapForecast(
+        getOpenWeatherMapParams({ lat, lng, locale }),
+      ),
+    enabled:
+      (options.enabled ?? true) && isValidNumber(lat) && isValidNumber(lng),
     staleTime: 30 * 60 * 1000, // 30분
   });
+};

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

@@ -5,6 +5,7 @@ import type {
   OWM_Res_Weather_Forecast,
   OWM_Res_Weather_Now,
 } from "../../types";
+import { getOpenWeatherMapLang } from "../../utils/locale";
 
 /**
  * 글로벌 날씨 API; 현재 날씨 URL
@@ -17,7 +18,6 @@ const API_BASE_FORECAST =
   "https://pro.openweathermap.org/data/2.5/weather/forecast/hourly";
 
 const COMMON_OPTIONS = {
-  lang: "kr",
   units: "metric", // 섭씨 온도
 };
 
@@ -63,6 +63,7 @@ export const routeOpenWeatherMapNow = async ({
       lat,
       lon,
       appid: authKey,
+      lang: getOpenWeatherMapLang(searchParams.get("locale") || undefined),
       ...COMMON_OPTIONS,
     }),
   });
@@ -119,13 +120,18 @@ export const routeOpenWeatherMapForecast = async ({
       lat,
       lon,
       appid: authKey,
+      lang: getOpenWeatherMapLang(searchParams.get("locale") || undefined),
       ...COMMON_OPTIONS,
     }),
   });
 
   try {
     const res = await (await fetch(url)).json();
-    nextAPILog("GET", routeUrl, url, { searchParams, res });
+    nextAPILog("GET", routeUrl, "Open Weather Map 예보날씨 API", {
+      searchParams,
+      count: Array.isArray(res?.list) ? res.list.length : 0,
+      cod: res?.cod,
+    });
     return res;
   } catch (error) {
     nextAPILog("GET", routeUrl, url, { error });

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

@@ -1,13 +1,14 @@
 "use client";
 
-import Image from "next/image";
+import type { WeatherAddressIconProps } from "../../types";
+import MarkerIcon from "../../img/marker.svg";
 
-import assetUrl from "../../../asset-url";
-
-export default function WeatherAddressIcon() {
+export default function WeatherAddressIcon({
+  alt,
+}: WeatherAddressIconProps = {}) {
   return (
-    <figure className="weather-address-icon">
-      <Image src={`${assetUrl}/img/weather/address.svg`} alt="날씨 위치" fill />
+    <figure className="weather-address-icon" role="img" aria-label={alt}>
+      <MarkerIcon width={16} height={16} viewBox="0 0 16 16" />
     </figure>
   );
 }

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

@@ -4,6 +4,7 @@ import Image from "next/image";
 import clsx from "clsx";
 
 import assetUrl from "../../../asset-url";
+import type { WeatherIconProps } from "../../types";
 
 // Storybook의 next/image mock과 동일한 client boundary에서 weather icon을 렌더한다.
 
@@ -18,16 +19,14 @@ import assetUrl from "../../../asset-url";
 export default function WeatherIcon({
   code,
   name,
-}: Partial<{
-  code: string | null;
-  name: string | null;
-}>) {
+  alt,
+}: WeatherIconProps = {}) {
   return (
     code && (
       <figure className={clsx("weather-base-icon", "weather-icon")}>
         <Image
           src={`${assetUrl}/img/weather/${code}.svg`}
-          alt={name || "날씨 아이콘"}
+          alt={name || alt || "날씨 아이콘"}
           fill
         />
       </figure>

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>
   );
 }