@uniai-fe/uds-templates 0.5.9 → 0.5.11

package/README.md

@@ -60,6 +60,12 @@ Next.js 서비스에서 primitives와 동일한 방식으로 **Raw TypeScript**
   - `weatherCoordinate`
   - `useWeatherKorea`
   - `useOpenWeatherMap`
+  - `resolveWeatherProvider`
+  - `WEATHER_PROVIDER_CAPABILITIES`
+  - `WeatherPageHeaderContainerProps`
+  - `WeatherPageHeaderTexts`
+  - `WeatherProviderKey`
+  - `WeatherProviderCapability`
 - `/service-inquiry`
   - `ServiceInquiry.Form`
   - `ServiceInquiry.OpenButton`
@@ -130,6 +136,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/dist/styles.css

@@ -67,6 +67,30 @@
   var(--spacing-padding-9, 32px) + env(safe-area-inset-top, 0px)
   );
   --auth-container-padding-bottom: var(--spacing-padding-10, 40px);
+  --weather-page-header-height: 2.4rem;
+  --weather-page-header-gap: var(--spacing-gap-6);
+  --weather-page-header-background: var(--color-surface-static-white);
+  --weather-icon-width: 2.5rem;
+  --weather-icon-height: 2.4rem;
+  --weather-address-icon-size: 1.6rem;
+  --weather-item-gap: var(--spacing-gap-4);
+  --weather-address-gap: var(--spacing-gap-2);
+  --weather-body-font-size: var(--font-body-xxsmall-size);
+  --weather-body-line-height: var(--font-body-xxsmall-line-height);
+  --weather-body-letter-spacing: var(--font-body-xxsmall-letter-spacing);
+  --weather-label-font-weight: 500;
+  --weather-label-value-gap: var(--spacing-gap-2);
+  --weather-value-font-weight: 600;
+  --weather-unit-font-size: 0.8385rem;
+  --weather-text-color: var(--color-label-standard);
+  --weather-label-color: var(--color-label-neutral);
+  --weather-alert-text-color: var(--color-primary-standard);
+  --weather-alert-background: var(--color-surface-static-blue);
+  --weather-alert-height: 2rem;
+  --weather-alert-padding-horizontal: var(--spacing-padding-3);
+  --weather-alert-radius: 0.6rem;
+  --weather-alert-font-size: var(--font-caption-medium-size);
+  --weather-alert-font-weight: 400;
   /* Card layout */
   --cctv-video-radius: 12px;
   --cctv-list-gap: var(--spacing-gap-5);
@@ -1471,129 +1495,165 @@
   letter-spacing: 0px;
 }
 
-.weather-base-container, .weather-next-days-container, .weather-today-container {
-  width: fit-content;
+
+
+.weather-page-header {
   display: flex;
   align-items: center;
-}
-.weather-base-container span, .weather-next-days-container span, .weather-today-container span {
-  font-size: 1.4rem;
+  gap: var(--weather-page-header-gap);
+  width: fit-content;
+  height: var(--weather-page-header-height);
+  background: var(--weather-page-header-background);
+  white-space: nowrap;
 }
 
 .weather-base-icon {
-  width: 2.5rem;
-  height: 2.4rem;
   position: relative;
+  width: var(--weather-icon-width);
+  height: var(--weather-icon-height);
+  flex: 0 0 auto;
 }
 
-.weather-base-text-info, .weather-next-days-text {
+.weather-address {
   display: flex;
   align-items: center;
+  gap: var(--weather-address-gap);
+  width: fit-content;
 }
-.weather-base-text-info dt, .weather-next-days-text dt {
-  margin-right: 0.8rem;
-  font-size: 0;
-}
-.weather-base-text-info dt span, .weather-next-days-text dt span {
-  color: var(--color-cool-gray-35);
-}
-.weather-base-text-info dd, .weather-next-days-text dd {
-  font-size: 0;
+
+.weather-address-icon {
+  position: relative;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
+  justify-content: center;
+  width: var(--weather-address-icon-size);
+  height: var(--weather-address-icon-size);
+  flex: 0 0 auto;
 }
-.weather-base-text-info dd span, .weather-next-days-text dd span {
-  color: var(--color-cool-gray-10);
-  font-weight: 600;
+
+.weather-address-text {
+  display: flex;
+  align-items: center;
+  gap: var(--weather-address-gap);
+  margin: 0;
+  color: var(--weather-text-color);
+  font-size: var(--weather-body-font-size);
+  font-weight: var(--weather-label-font-weight);
+  line-height: var(--weather-body-line-height);
+  letter-spacing: var(--weather-body-letter-spacing);
 }
 
-.weather-base-divider {
-  width: 1px;
-  height: 1.3rem;
-  margin: 0 0.8rem;
-  background: var(--color-cool-gray-85);
+.weather-address-date {
+  color: var(--weather-label-color);
 }
 
-.weather-address {
+.weather-today-container {
   display: flex;
   align-items: center;
+  gap: var(--weather-item-gap);
   width: fit-content;
 }
-.weather-address-icon {
-  width: 1.6rem;
-  height: 1.6rem;
-  margin-right: 0.4rem;
-  position: relative;
-}
-.weather-address-text {
+
+.weather-today-text {
+  display: flex;
+  align-items: center;
+  gap: var(--weather-item-gap);
   width: fit-content;
-  margin-right: 1rem;
+}
+
+.weather-next-days-container {
   display: flex;
   align-items: center;
+  gap: var(--weather-item-gap);
+  width: fit-content;
 }
-.weather-address-text span {
-  font-size: 1.6rem;
-  color: var(--color-cool-gray-10);
-  font-weight: 600;
-  white-space: nowrap;
-  transform: translateY(0.1rem);
+
+.weather-temperature-text {
+  margin: 0;
+  color: var(--weather-text-color);
+  font-size: 0;
+  font-weight: var(--weather-label-font-weight);
+  line-height: var(--weather-body-line-height);
+  letter-spacing: var(--weather-body-letter-spacing);
 }
 
-.weather-today-container span {
-  white-space: nowrap;
+.weather-humidity-text {
+  margin: 0;
+  color: var(--weather-text-color);
+  font-size: 0;
+  font-weight: var(--weather-label-font-weight);
+  line-height: var(--weather-body-line-height);
+  letter-spacing: var(--weather-body-letter-spacing);
 }
-.weather-today-container .empty-text {
-  font-size: 1.4rem;
-  padding-right: 4rem;
+
+.weather-forecast-text {
+  margin: 0;
+  color: var(--weather-text-color);
+  font-size: 0;
+  font-weight: var(--weather-label-font-weight);
+  line-height: var(--weather-body-line-height);
+  letter-spacing: var(--weather-body-letter-spacing);
 }
 
-.weather-today-temperature {
-  margin-left: 1rem;
-  display: flex;
-  align-items: flex-start;
+.weather-label {
+  color: var(--weather-label-color);
+  font-size: var(--weather-body-font-size);
+  font-weight: var(--weather-label-font-weight);
+  margin-right: var(--weather-label-value-gap);
 }
-.weather-today-temperature span {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--color-blue-55);
+
+.weather-value {
+  color: var(--weather-text-color);
+  font-size: var(--weather-body-font-size);
+  font-weight: var(--weather-value-font-weight);
 }
-.weather-today-temperature .unit {
-  font-size: 1.2rem;
+
+.weather-unit {
+  color: var(--weather-text-color);
+  font-size: var(--weather-unit-font-size);
+  font-weight: var(--weather-value-font-weight);
 }
 
-.weather-today-humidity {
-  margin-left: 1.4rem;
+.weather-range {
+  color: var(--weather-text-color);
+  font-size: var(--weather-body-font-size);
+  font-weight: var(--weather-value-font-weight);
 }
 
 .weather-alert {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: fit-content;
-  height: 2.6rem;
-  padding: 0 1rem;
-  margin-left: 1rem;
-  border-radius: 0.8rem;
-  background-color: var(--color-cool-gray-95, #f4f6f8);
+  height: var(--weather-alert-height);
+  padding: 0 var(--weather-alert-padding-horizontal);
+  border-radius: var(--weather-alert-radius);
+  background-color: var(--weather-alert-background);
+  box-sizing: border-box;
+}
+
+.weather-alert-loading {
   display: flex;
   align-items: center;
+  width: fit-content;
+  height: var(--weather-page-header-height);
 }
+
 .weather-alert-text {
-  height: fit-content;
-  font-size: 0;
-}
-.weather-alert-text span {
-  font-size: 1.2rem;
-  color: var(--color-blue-55, #007cdb);
-  font-weight: 600;
-  line-height: 1.6;
+  display: flex;
+  align-items: center;
+  color: var(--weather-alert-text-color);
+  font-size: var(--weather-alert-font-size);
+  font-weight: var(--weather-alert-font-weight);
+  line-height: var(--weather-body-line-height);
+  letter-spacing: var(--weather-body-letter-spacing);
 }
 
-.weather-next-days-text dt {
-  margin-right: 0.8rem;
-}
-.weather-next-days-text dd:nth-of-type(n + 2) {
-  margin-left: 0.8rem;
-}
-.weather-next-days-text dd:nth-of-type(n + 2) .unit {
-  font-size: 1rem;
+.weather-alert-text span {
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "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>