@uniai-fe/uds-templates 0.5.9 → 0.5.11

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>

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,151 +1,158 @@
-.weather-base-container {
-  width: fit-content;
+.weather-page-header {
   display: flex;
   align-items: center;
-
-  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-address {
   display: flex;
   align-items: center;
+  gap: var(--weather-address-gap);
+  width: fit-content;
+}
 
-  dt {
-    margin-right: 0.8rem;
-    font-size: 0;
-
-    span {
-      color: var(--color-cool-gray-35);
-    }
-  }
+.weather-address-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--weather-address-icon-size);
+  height: var(--weather-address-icon-size);
+  flex: 0 0 auto;
+}
 
-  dd {
-    font-size: 0;
-    display: flex;
-    align-items: flex-start;
+.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);
+}
 
-    span {
-      color: var(--color-cool-gray-10);
-      font-weight: 600;
-    }
-  }
+.weather-address-date {
+  color: var(--weather-label-color);
 }
 
-.weather-base-divider {
-  width: 1px;
-  height: 1.3rem;
-  margin: 0 0.8rem;
-  background: var(--color-cool-gray-85);
+.weather-today-container {
+  display: flex;
+  align-items: center;
+  gap: var(--weather-item-gap);
+  width: fit-content;
 }
 
-.weather-address {
+.weather-today-text {
   display: flex;
   align-items: center;
+  gap: var(--weather-item-gap);
   width: fit-content;
+}
 
-  &-icon {
-    width: 1.6rem;
-    height: 1.6rem;
-    margin-right: 0.4rem;
-    position: relative;
-  }
-
-  &-text {
-    width: fit-content;
-    margin-right: 1rem;
-    display: flex;
-    align-items: center;
-
-    span {
-      font-size: 1.6rem;
-      color: var(--color-cool-gray-10);
-      font-weight: 600;
-      white-space: nowrap;
-      transform: translateY(0.1rem);
-    }
-  }
+.weather-next-days-container {
+  display: flex;
+  align-items: center;
+  gap: var(--weather-item-gap);
+  width: fit-content;
 }
 
-.weather-today-container {
-  @extend .weather-base-container;
+.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);
+}
 
-  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);
+}
 
-  .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);
+}
 
-  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);
+}
 
-  .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 {
-  width: fit-content;
-  height: 2.6rem;
-  padding: 0 1rem;
-  margin-left: 1rem;
-  border-radius: 0.8rem;
-  background-color: var(--color-cool-gray-95, #f4f6f8);
   display: flex;
   align-items: center;
-
-  &-text {
-    height: fit-content;
-    font-size: 0;
-
-    span {
-      font-size: 1.2rem;
-      color: var(--color-blue-55, #007cdb);
-      font-weight: 600;
-      line-height: 1.6;
-    }
-  }
+  justify-content: center;
+  width: fit-content;
+  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-next-days-container {
-  @extend .weather-base-container;
+.weather-alert-loading {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  height: var(--weather-page-header-height);
 }
 
-.weather-next-days-text {
-  @extend .weather-base-text-info;
-
-  dt {
-    margin-right: 0.8rem;
-  }
-
-  dd:nth-of-type(n + 2) {
-    margin-left: 0.8rem;
+.weather-alert-text {
+  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);
+}
 
-    .unit {
-      font-size: 1rem;
-    }
-  }
+.weather-alert-text span {
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
 }

package/src/weather/types/base.ts

@@ -22,6 +22,26 @@ export type WeatherGeoCoordinate = {
   lng: number | null;
 };
 
+/**
+ * 날씨 API locale 요청 옵션.
+ * @property {string} [locale] 요청 언어 코드. 기본 지원값은 ko, en, ja이며 타입은 확장 가능한 string으로 유지한다.
+ */
+export interface WeatherApiLocaleOptions {
+  /**
+   * 요청 언어 코드. 기본 지원값은 ko, en, ja이며 타입은 확장 가능한 string으로 유지한다.
+   */
+  locale?: string;
+}
+
+/**
+ * OpenWeatherMap 요청 파라미터.
+ * @property {number | null} lat 위도
+ * @property {number | null} lng 경도
+ * @property {string} [locale] 요청 언어 코드
+ */
+export type WeatherOpenWeatherMapParams = WeatherGeoCoordinate &
+  WeatherApiLocaleOptions;
+
 /**
  * 좌표와 주소 정보를 함께 담는 구조.
  * @property {string | null} address 좌표 주소

package/src/weather/types/index.ts

@@ -2,3 +2,5 @@ export type * from "./base";
 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/page-header.ts

@@ -0,0 +1,277 @@
+import type {
+  API_Res_WeatherKoreaForecast,
+  API_Res_WeatherKoreaNextDays,
+  API_Res_WeatherKoreaNow,
+} from "./api";
+import type {
+  OWM_Res_Weather_Forecast,
+  OWM_Res_Weather_Now,
+} from "./open-weather-map";
+
+/**
+ * Weather Page Header; locale 옵션
+ * @property {string} [locale] 표시 언어 코드. 기본 지원값은 ko, en, ja이며 타입은 확장 가능한 string으로 유지한다.
+ */
+export interface WeatherLocaleOptions {
+  /**
+   * 표시 언어 코드. 기본 지원값은 ko, en, ja이며 타입은 확장 가능한 string으로 유지한다.
+   */
+  locale?: string;
+}
+
+/**
+ * Weather Page Header; 텍스트 옵션
+ * @property {string} currentWeatherLoading 현재 날씨 로딩 문구
+ * @property {string} forecastWeatherLoading 예보 날씨 로딩 문구
+ * @property {string} alertLoading 특보 로딩 문구
+ * @property {string} currentLabel 현재 기온 라벨
+ * @property {string} maxTemperatureLabel 최고 기온 라벨
+ * @property {string} minTemperatureLabel 최저 기온 라벨
+ * @property {string} humidityLabel 습도 라벨
+ * @property {string} tomorrowLabel 내일 라벨
+ * @property {string} dayAfterTomorrowLabel 모레 라벨
+ * @property {string} weatherIconAlt 날씨 아이콘 기본 대체 텍스트
+ * @property {string} addressIconAlt 위치 아이콘 대체 텍스트
+ * @property {string} conditionFallbackLabel 날씨 상태 fallback 텍스트
+ * @property {string} alertPreliminaryLevelLabel 예비 특보 수준 라벨
+ * @property {string} alertWatchLevelLabel 주의보 수준 라벨
+ * @property {string} alertCancelCommandLabel 특보 해제 명령 라벨
+ * @property {string} alertIssueCommandLabel 특보 발령 명령 라벨
+ */
+export interface WeatherPageHeaderTexts {
+  /**
+   * 현재 날씨 로딩 문구
+   */
+  currentWeatherLoading: string;
+  /**
+   * 예보 날씨 로딩 문구
+   */
+  forecastWeatherLoading: string;
+  /**
+   * 특보 로딩 문구
+   */
+  alertLoading: string;
+  /**
+   * 현재 기온 라벨
+   */
+  currentLabel: string;
+  /**
+   * 최고 기온 라벨
+   */
+  maxTemperatureLabel: string;
+  /**
+   * 최저 기온 라벨
+   */
+  minTemperatureLabel: string;
+  /**
+   * 습도 라벨
+   */
+  humidityLabel: string;
+  /**
+   * 내일 라벨
+   */
+  tomorrowLabel: string;
+  /**
+   * 모레 라벨
+   */
+  dayAfterTomorrowLabel: string;
+  /**
+   * 날씨 아이콘 기본 대체 텍스트
+   */
+  weatherIconAlt: string;
+  /**
+   * 위치 아이콘 대체 텍스트
+   */
+  addressIconAlt: string;
+  /**
+   * 날씨 상태 fallback 텍스트
+   */
+  conditionFallbackLabel: string;
+  /**
+   * 예비 특보 수준 라벨
+   */
+  alertPreliminaryLevelLabel: string;
+  /**
+   * 주의보 수준 라벨
+   */
+  alertWatchLevelLabel: string;
+  /**
+   * 특보 해제 명령 라벨
+   */
+  alertCancelCommandLabel: string;
+  /**
+   * 특보 발령 명령 라벨
+   */
+  alertIssueCommandLabel: string;
+}
+
+/**
+ * Weather Page Header; locale과 텍스트 override 조합 옵션
+ * @property {string} [locale] 표시 언어 코드
+ * @property {Partial<WeatherPageHeaderTexts>} [texts] 서비스에서 주입한 표시 문구
+ */
+export interface WeatherPageHeaderLocaleOptions extends WeatherLocaleOptions {
+  /**
+   * 서비스에서 주입한 표시 문구
+   */
+  texts?: Partial<WeatherPageHeaderTexts>;
+}
+
+/**
+ * Weather Page Header; KMA weather query 결과
+ * @property {API_Res_WeatherKoreaNow} [now] 현재 날씨 응답
+ * @property {API_Res_WeatherKoreaForecast} [forecast] 예보 날씨 응답
+ * @property {boolean} isFetchingNow 현재 날씨 조회 상태
+ * @property {boolean} isFetchingForecast 예보 날씨 조회 상태
+ */
+export interface WeatherPageHeaderKoreaWeather {
+  /**
+   * 현재 날씨 응답
+   */
+  now?: API_Res_WeatherKoreaNow;
+  /**
+   * 예보 날씨 응답
+   */
+  forecast?: API_Res_WeatherKoreaForecast;
+  /**
+   * 현재 날씨 조회 상태
+   */
+  isFetchingNow: boolean;
+  /**
+   * 예보 날씨 조회 상태
+   */
+  isFetchingForecast: boolean;
+}
+
+/**
+ * Weather Page Header; OpenWeatherMap query 결과
+ * @property {OWM_Res_Weather_Now} [now] 현재 날씨 응답
+ * @property {OWM_Res_Weather_Forecast} [forecast] 예보 날씨 응답
+ * @property {boolean} isFetchingNow 현재 날씨 조회 상태
+ * @property {boolean} isFetchingForecast 예보 날씨 조회 상태
+ */
+export interface WeatherPageHeaderOpenWeatherMapWeather {
+  /**
+   * 현재 날씨 응답
+   */
+  now?: OWM_Res_Weather_Now;
+  /**
+   * 예보 날씨 응답
+   */
+  forecast?: OWM_Res_Weather_Forecast;
+  /**
+   * 현재 날씨 조회 상태
+   */
+  isFetchingNow: boolean;
+  /**
+   * 예보 날씨 조회 상태
+   */
+  isFetchingForecast: boolean;
+}
+
+/**
+ * Weather Page Header; 상위 container에서 준비한 weather query 결과
+ * @property {WeatherPageHeaderKoreaWeather} [koreaWeather] KMA weather query 결과
+ * @property {WeatherPageHeaderOpenWeatherMapWeather} [openWeatherMapWeather] OpenWeatherMap query 결과
+ */
+export interface WeatherPageHeaderDataOptions {
+  /**
+   * KMA weather query 결과
+   */
+  koreaWeather?: WeatherPageHeaderKoreaWeather;
+  /**
+   * OpenWeatherMap query 결과
+   */
+  openWeatherMapWeather?: WeatherPageHeaderOpenWeatherMapWeather;
+}
+
+/**
+ * Weather Page Header; container props
+ * @property {string} [locale] 표시 언어 코드
+ * @property {Partial<WeatherPageHeaderTexts>} [texts] 서비스에서 주입한 표시 문구
+ */
+export type WeatherPageHeaderContainerProps = WeatherPageHeaderLocaleOptions;
+
+/**
+ * Weather Page Header; address props
+ * @property {string} [locale] 표시 언어 코드
+ * @property {Partial<WeatherPageHeaderTexts>} [texts] 서비스에서 주입한 표시 문구
+ */
+export type WeatherPageHeaderAddressProps = WeatherPageHeaderLocaleOptions;
+
+/**
+ * Weather Page Header; today props
+ * @property {string} [locale] 표시 언어 코드
+ * @property {Partial<WeatherPageHeaderTexts>} [texts] 서비스에서 주입한 표시 문구
+ * @property {WeatherPageHeaderKoreaWeather} [koreaWeather] KMA weather query 결과
+ * @property {WeatherPageHeaderOpenWeatherMapWeather} [openWeatherMapWeather] OpenWeatherMap query 결과
+ */
+export type WeatherPageHeaderTodayProps = WeatherPageHeaderLocaleOptions &
+  WeatherPageHeaderDataOptions;
+
+/**
+ * Weather Page Header; forecast props
+ * @property {string} [locale] 표시 언어 코드
+ * @property {Partial<WeatherPageHeaderTexts>} [texts] 서비스에서 주입한 표시 문구
+ * @property {WeatherPageHeaderKoreaWeather} [koreaWeather] KMA weather query 결과
+ * @property {WeatherPageHeaderOpenWeatherMapWeather} [openWeatherMapWeather] OpenWeatherMap query 결과
+ */
+export type WeatherPageHeaderForecastProps = WeatherPageHeaderLocaleOptions &
+  WeatherPageHeaderDataOptions;
+
+/**
+ * Weather Page Header; alert props
+ * @property {string} [locale] 표시 언어 코드
+ * @property {Partial<WeatherPageHeaderTexts>} [texts] 서비스에서 주입한 표시 문구
+ */
+export type WeatherPageHeaderAlertProps = WeatherPageHeaderLocaleOptions;
+
+/**
+ * Weather Page Header; next days props
+ * @property {string} title 날짜 라벨
+ * @property {API_Res_WeatherKoreaNextDays} [data] 예보 데이터
+ * @property {string} [locale] 표시 언어 코드
+ * @property {Partial<WeatherPageHeaderTexts>} [texts] 서비스에서 주입한 표시 문구
+ */
+export interface WeatherPageHeaderNextDaysProps extends WeatherPageHeaderLocaleOptions {
+  /**
+   * 날짜 라벨
+   */
+  title: string;
+  /**
+   * 예보 데이터
+   */
+  data?: API_Res_WeatherKoreaNextDays;
+}
+
+/**
+ * Weather Icon; 날씨 아이콘 props
+ * @property {string | null} [code] 날씨 아이콘 코드
+ * @property {string | null} [name] 날씨 상태 이름
+ * @property {string} [alt] 아이콘 대체 텍스트 fallback
+ */
+export interface WeatherIconProps {
+  /**
+   * 날씨 아이콘 코드
+   */
+  code?: string | null;
+  /**
+   * 날씨 상태 이름
+   */
+  name?: string | null;
+  /**
+   * 아이콘 대체 텍스트 fallback
+   */
+  alt?: string;
+}
+
+/**
+ * Weather Address Icon; 위치 아이콘 props
+ * @property {string} [alt] 아이콘 대체 텍스트
+ */
+export interface WeatherAddressIconProps {
+  /**
+   * 아이콘 대체 텍스트
+   */
+  alt?: string;
+}

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/index.ts

@@ -2,3 +2,4 @@ export * from "./location";
 export * from "./date-time";
 export * from "./weather";
 export * from "./alert";
+export * from "./locale";