@uniai-fe/uds-templates 0.5.8 → 0.5.10

package/src/weather/styles/weather.scss

@@ -1,151 +1,150 @@
-.weather-base-container {
-  width: fit-content;
+.weather-page-header {
   display: flex;
   align-items: center;
-
-  span {
-    font-size: 1.4rem;
-  }
+  gap: 1.6rem;
+  width: fit-content;
+  height: 2.4rem;
+  white-space: nowrap;
 }
 
 .weather-base-icon {
+  position: relative;
   width: 2.5rem;
   height: 2.4rem;
-  position: relative;
+  flex: 0 0 auto;
 }
 
-.weather-base-text-info {
+.weather-address {
   display: flex;
   align-items: center;
+  gap: 0.4rem;
+  width: fit-content;
+}
 
-  dt {
-    margin-right: 0.8rem;
-    font-size: 0;
-
-    span {
-      color: var(--color-cool-gray-35);
-    }
-  }
+.weather-address-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.6rem;
+  height: 1.6rem;
+  flex: 0 0 auto;
+}
 
-  dd {
-    font-size: 0;
-    display: flex;
-    align-items: flex-start;
+.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;
+}
 
-    span {
-      color: var(--color-cool-gray-10);
-      font-weight: 600;
-    }
-  }
+.weather-address-date {
+  color: var(--color-cool-gray-40);
 }
 
-.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: 0.8rem;
+  width: fit-content;
 }
 
-.weather-address {
+.weather-today-text {
   display: flex;
   align-items: center;
+  gap: 0.8rem;
   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: 0.8rem;
+  width: fit-content;
 }
 
-.weather-today-container {
-  @extend .weather-base-container;
+.weather-temperature-text {
+  color: var(--color-cool-gray-10);
+  font-size: 0;
+  font-weight: 500;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
 
-  span {
-    white-space: nowrap;
-  }
+.weather-humidity-text {
+  color: var(--color-cool-gray-10);
+  font-size: 0;
+  font-weight: 500;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
 
-  .empty-text {
-    font-size: 1.4rem;
-    padding-right: 4rem;
-  }
+.weather-forecast-text {
+  color: var(--color-cool-gray-10);
+  font-size: 0;
+  font-weight: 500;
+  line-height: 1.5;
+  letter-spacing: 0;
 }
 
-.weather-today-temperature {
-  margin-left: 1rem;
-  display: flex;
-  align-items: flex-start;
+.weather-label {
+  color: var(--color-cool-gray-40);
+  font-size: 1.3rem;
+  font-weight: 500;
+}
 
-  span {
-    font-size: 2rem;
-    font-weight: 700;
-    color: var(--color-blue-55);
-  }
+.weather-value {
+  color: var(--color-cool-gray-10);
+  font-size: 1.3rem;
+  font-weight: 600;
+}
 
-  .unit {
-    font-size: 1.2rem;
-  }
+.weather-unit {
+  color: var(--color-cool-gray-10);
+  font-size: 0.84rem;
+  font-weight: 600;
 }
 
-.weather-today-humidity {
-  margin-left: 1.4rem;
+.weather-range {
+  color: var(--color-cool-gray-10);
+  font-size: 1.3rem;
+  font-weight: 600;
 }
 
 .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: 2rem;
+  padding: 0 0.6rem;
+  border-radius: 0.6rem;
+  background-color: var(--color-blue-95);
 }
 
-.weather-next-days-container {
-  @extend .weather-base-container;
+.weather-alert-loading {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  height: 2.4rem;
 }
 
-.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(--color-blue-55);
+  font-size: 1.1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
 
-    .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,4 @@ export type * from "./base";
 export type * from "./api";
 export type * from "./korea";
 export type * from "./open-weather-map";
+export type * from "./page-header";

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

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

package/src/weather/utils/locale.ts

@@ -0,0 +1,73 @@
+import type { WeatherPageHeaderTexts } from "../types";
+
+const WEATHER_PAGE_HEADER_DEFAULT_TEXTS: WeatherPageHeaderTexts = {
+  currentWeatherLoading: "현재 날씨 불러오는 중...",
+  forecastWeatherLoading: "예보 날씨 불러오는 중...",
+  alertLoading: "특보 불러오는 중...",
+  currentLabel: "현재",
+  maxTemperatureLabel: "최고:",
+  minTemperatureLabel: "최저:",
+  humidityLabel: "습도",
+  tomorrowLabel: "내일",
+  dayAfterTomorrowLabel: "모레",
+  weatherIconAlt: "날씨 아이콘",
+  addressIconAlt: "날씨 위치",
+  conditionFallbackLabel: "-",
+  alertPreliminaryLevelLabel: "예비특보",
+  alertWatchLevelLabel: "주의보",
+  alertCancelCommandLabel: "해제",
+  alertIssueCommandLabel: "발령",
+};
+
+const OPEN_WEATHER_MAP_LANG_BY_LOCALE: Record<string, string> = {
+  ko: "kr",
+  en: "en",
+  ja: "ja",
+};
+
+/**
+ * Weather Locale; locale 기준 키 정규화
+ * @param {string} [locale] locale 코드
+ * @return {string} 전달된 locale의 기본 언어 코드
+ * @example
+ * getWeatherLocaleKey("ko-KR")
+ */
+export const getWeatherLocaleKey = (locale?: string): string =>
+  locale?.trim().toLowerCase().split(/[-_]/)[0] || "ko";
+
+/**
+ * Weather Locale; KMA provider 사용 여부
+ * @param {string} [locale] locale 코드
+ * @return {boolean} KMA provider 대상 locale 여부
+ * @example
+ * isKoreaWeatherLocale("ko-KR")
+ */
+export const isKoreaWeatherLocale = (locale?: string): boolean =>
+  getWeatherLocaleKey(locale) === "ko";
+
+/**
+ * Weather Locale; page-header 텍스트 병합
+ * @param {Partial<WeatherPageHeaderTexts>} [texts] 서비스에서 주입한 텍스트
+ * @return {WeatherPageHeaderTexts} 기본 fallback과 서비스 주입 텍스트를 병합한 텍스트
+ * @example
+ * resolveWeatherPageHeaderTexts({ humidityLabel: "습도" })
+ */
+export const resolveWeatherPageHeaderTexts = (
+  texts?: Partial<WeatherPageHeaderTexts>,
+): WeatherPageHeaderTexts => ({
+  ...WEATHER_PAGE_HEADER_DEFAULT_TEXTS,
+  ...texts,
+});
+
+/**
+ * Weather Locale; OpenWeatherMap API lang 값 변환
+ * @param {string} [locale] locale 코드
+ * @return {string} OpenWeatherMap lang 파라미터
+ * @example
+ * getOpenWeatherMapLang("ko")
+ */
+export const getOpenWeatherMapLang = (locale?: string): string => {
+  const localeKey = getWeatherLocaleKey(locale);
+
+  return OPEN_WEATHER_MAP_LANG_BY_LOCALE[localeKey] ?? localeKey;
+};