@uniai-fe/uds-templates 0.5.10 → 0.5.12

package/README.md

@@ -60,8 +60,12 @@ Next.js 서비스에서 primitives와 동일한 방식으로 **Raw TypeScript**
   - `weatherCoordinate`
   - `useWeatherKorea`
   - `useOpenWeatherMap`
+  - `resolveWeatherProvider`
+  - `WEATHER_PROVIDER_CAPABILITIES`
   - `WeatherPageHeaderContainerProps`
   - `WeatherPageHeaderTexts`
+  - `WeatherProviderKey`
+  - `WeatherProviderCapability`
 - `/service-inquiry`
   - `ServiceInquiry.Form`
   - `ServiceInquiry.OpenButton`

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.10",
+  "version": "0.5.12",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/cctv/hooks/useRtcStream.ts

@@ -218,6 +218,7 @@ export function useCctvRtcStream({
   useEffect(() => {
     const camId = cam?.cam_id;
     if (!camId) return;
+
     const instanceKey = instanceKeyRef.current as string;
     setLiveRegistry(prev => {
       const next = { ...prev };
@@ -226,7 +227,13 @@ export function useCctvRtcStream({
       next[camId] = perCam;
       return next;
     });
+  }, [cam?.cam_id, liveState, setLiveRegistry]);
+
+  useEffect(() => {
+    const camId = cam?.cam_id;
+    if (!camId) return;
 
+    const instanceKey = instanceKeyRef.current as string;
     return () => {
       setLiveRegistry(prev => {
         const next = { ...prev };
@@ -240,7 +247,7 @@ export function useCctvRtcStream({
         return next;
       });
     };
-  }, [cam?.cam_id, liveState, setLiveRegistry]);
+  }, [cam?.cam_id, setLiveRegistry]);
 
   // 호출자에게 video ref와 상태값, 토큰 쿼리 상태를 전달한다.
   return {

package/src/cctv/utils/video-state.ts

@@ -60,6 +60,7 @@ export function getOverlayMessage({
  */
 export function getIsLive({
   cam,
+  connectionState,
   isTokenLoading,
   isTokenError,
   isStreaming,
@@ -70,6 +71,7 @@ export function getIsLive({
   if (isTokenLoading || isTokenError) return false;
   if (isStreaming) return false;
   if (streamError) return false;
+  if (connectionState !== "connected") return false;
   return true;
 }
 

package/src/weather/index.scss

@@ -1 +1,2 @@
+@use "./styles/variables.scss";
 @use "./styles/weather.scss";

package/src/weather/styles/variables.scss

@@ -0,0 +1,30 @@
+:root {
+  --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;
+}

package/src/weather/styles/weather.scss

@@ -1,117 +1,124 @@
 .weather-page-header {
   display: flex;
   align-items: center;
-  gap: 1.6rem;
+  gap: var(--weather-page-header-gap);
   width: fit-content;
-  height: 2.4rem;
+  height: var(--weather-page-header-height);
+  background: var(--weather-page-header-background);
   white-space: nowrap;
 }
 
 .weather-base-icon {
   position: relative;
-  width: 2.5rem;
-  height: 2.4rem;
+  width: var(--weather-icon-width);
+  height: var(--weather-icon-height);
   flex: 0 0 auto;
 }
 
 .weather-address {
   display: flex;
   align-items: center;
-  gap: 0.4rem;
+  gap: var(--weather-address-gap);
   width: fit-content;
 }
 
 .weather-address-icon {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.6rem;
-  height: 1.6rem;
+  width: var(--weather-address-icon-size);
+  height: var(--weather-address-icon-size);
   flex: 0 0 auto;
 }
 
 .weather-address-text {
   display: flex;
   align-items: center;
-  gap: 0.4rem;
-  color: var(--color-cool-gray-10);
-  font-size: 1.3rem;
-  font-weight: 500;
-  line-height: 1.5;
-  letter-spacing: 0;
+  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-address-date {
-  color: var(--color-cool-gray-40);
+  color: var(--weather-label-color);
 }
 
 .weather-today-container {
   display: flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: var(--weather-item-gap);
   width: fit-content;
 }
 
 .weather-today-text {
   display: flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: var(--weather-item-gap);
   width: fit-content;
 }
 
 .weather-next-days-container {
   display: flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: var(--weather-item-gap);
   width: fit-content;
 }
 
 .weather-temperature-text {
-  color: var(--color-cool-gray-10);
+  margin: 0;
+  color: var(--weather-text-color);
   font-size: 0;
-  font-weight: 500;
-  line-height: 1.5;
-  letter-spacing: 0;
+  font-weight: var(--weather-label-font-weight);
+  line-height: var(--weather-body-line-height);
+  letter-spacing: var(--weather-body-letter-spacing);
 }
 
 .weather-humidity-text {
-  color: var(--color-cool-gray-10);
+  margin: 0;
+  color: var(--weather-text-color);
   font-size: 0;
-  font-weight: 500;
-  line-height: 1.5;
-  letter-spacing: 0;
+  font-weight: var(--weather-label-font-weight);
+  line-height: var(--weather-body-line-height);
+  letter-spacing: var(--weather-body-letter-spacing);
 }
 
 .weather-forecast-text {
-  color: var(--color-cool-gray-10);
+  margin: 0;
+  color: var(--weather-text-color);
   font-size: 0;
-  font-weight: 500;
-  line-height: 1.5;
-  letter-spacing: 0;
+  font-weight: var(--weather-label-font-weight);
+  line-height: var(--weather-body-line-height);
+  letter-spacing: var(--weather-body-letter-spacing);
 }
 
 .weather-label {
-  color: var(--color-cool-gray-40);
-  font-size: 1.3rem;
-  font-weight: 500;
+  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-value {
-  color: var(--color-cool-gray-10);
-  font-size: 1.3rem;
-  font-weight: 600;
+  color: var(--weather-text-color);
+  font-size: var(--weather-body-font-size);
+  font-weight: var(--weather-value-font-weight);
 }
 
 .weather-unit {
-  color: var(--color-cool-gray-10);
-  font-size: 0.84rem;
-  font-weight: 600;
+  color: var(--weather-text-color);
+  font-size: var(--weather-unit-font-size);
+  font-weight: var(--weather-value-font-weight);
 }
 
 .weather-range {
-  color: var(--color-cool-gray-10);
-  font-size: 1.3rem;
-  font-weight: 600;
+  color: var(--weather-text-color);
+  font-size: var(--weather-body-font-size);
+  font-weight: var(--weather-value-font-weight);
 }
 
 .weather-alert {
@@ -119,27 +126,28 @@
   align-items: center;
   justify-content: center;
   width: fit-content;
-  height: 2rem;
-  padding: 0 0.6rem;
-  border-radius: 0.6rem;
-  background-color: var(--color-blue-95);
+  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: 2.4rem;
+  height: var(--weather-page-header-height);
 }
 
 .weather-alert-text {
   display: flex;
   align-items: center;
-  color: var(--color-blue-55);
-  font-size: 1.1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  letter-spacing: 0;
+  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-alert-text span {

package/src/weather/types/index.ts

@@ -3,3 +3,4 @@ export type * from "./api";
 export type * from "./korea";
 export type * from "./open-weather-map";
 export type * from "./page-header";
+export type * from "./provider";

package/src/weather/types/provider.ts

@@ -0,0 +1,34 @@
+/**
+ * Weather Provider; provider 식별자
+ * @desc 현재 확정된 provider만 나열하고, 국가별 상세 API 체계는 후속 결정에서 확장한다.
+ */
+export type WeatherProviderKey = "kma" | "openWeatherMap";
+
+/**
+ * Weather Provider; provider별 지원 기능
+ * @property {boolean} now 현재 날씨 지원 여부
+ * @property {boolean} forecast 예보 날씨 지원 여부
+ * @property {boolean} alert 특보 지원 여부
+ */
+export interface WeatherProviderCapability {
+  /**
+   * 현재 날씨 지원 여부
+   */
+  now: boolean;
+  /**
+   * 예보 날씨 지원 여부
+   */
+  forecast: boolean;
+  /**
+   * 특보 지원 여부
+   */
+  alert: boolean;
+}
+
+/**
+ * Weather Provider; provider capability registry
+ */
+export type WeatherProviderCapabilityRegistry = Record<
+  WeatherProviderKey,
+  WeatherProviderCapability
+>;

package/src/weather/utils/locale.ts

@@ -1,4 +1,8 @@
-import type { WeatherPageHeaderTexts } from "../types";
+import type {
+  WeatherPageHeaderTexts,
+  WeatherProviderCapabilityRegistry,
+  WeatherProviderKey,
+} from "../types";
 
 const WEATHER_PAGE_HEADER_DEFAULT_TEXTS: WeatherPageHeaderTexts = {
   currentWeatherLoading: "현재 날씨 불러오는 중...",
@@ -25,6 +29,26 @@ const OPEN_WEATHER_MAP_LANG_BY_LOCALE: Record<string, string> = {
   ja: "ja",
 };
 
+const WEATHER_DEFAULT_PROVIDER: WeatherProviderKey = "openWeatherMap";
+
+const WEATHER_PROVIDER_BY_LOCALE_KEY: Record<string, WeatherProviderKey> = {
+  ko: "kma",
+};
+
+export const WEATHER_PROVIDER_CAPABILITIES: WeatherProviderCapabilityRegistry =
+  {
+    kma: {
+      now: true,
+      forecast: true,
+      alert: true,
+    },
+    openWeatherMap: {
+      now: true,
+      forecast: true,
+      alert: false,
+    },
+  };
+
 /**
  * Weather Locale; locale 기준 키 정규화
  * @param {string} [locale] locale 코드
@@ -35,6 +59,19 @@ const OPEN_WEATHER_MAP_LANG_BY_LOCALE: Record<string, string> = {
 export const getWeatherLocaleKey = (locale?: string): string =>
   locale?.trim().toLowerCase().split(/[-_]/)[0] || "ko";
 
+/**
+ * Weather Locale; locale 기준 provider 선택
+ * @param {string} [locale] locale 코드
+ * @return {WeatherProviderKey} 현재 locale에 사용할 weather provider
+ * @example
+ * resolveWeatherProvider("ko-KR")
+ */
+export const resolveWeatherProvider = (locale?: string): WeatherProviderKey => {
+  const localeKey = getWeatherLocaleKey(locale);
+
+  return WEATHER_PROVIDER_BY_LOCALE_KEY[localeKey] ?? WEATHER_DEFAULT_PROVIDER;
+};
+
 /**
  * Weather Locale; KMA provider 사용 여부
  * @param {string} [locale] locale 코드
@@ -43,7 +80,7 @@ export const getWeatherLocaleKey = (locale?: string): string =>
  * isKoreaWeatherLocale("ko-KR")
  */
 export const isKoreaWeatherLocale = (locale?: string): boolean =>
-  getWeatherLocaleKey(locale) === "ko";
+  resolveWeatherProvider(locale) === "kma";
 
 /**
  * Weather Locale; page-header 텍스트 병합