@uniai-fe/uds-templates 0.1.16 → 0.1.17

package/src/weather/hooks/index.ts

@@ -0,0 +1,4 @@
+import useOpenWeatherMap from "./useOpenWeatherMap";
+import useWeatherKorea from "./useWeatherKorea";
+
+export { useWeatherKorea, useOpenWeatherMap };

package/src/weather/hooks/useOpenWeatherMap.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import { weatherCoordinate } from "../jotai";
+import {
+  useQueryWeatherOpenWeatherMapForecast,
+  useQueryWeatherOpenWeatherMapNow,
+} from "../apis/open-weather-map/client";
+import { useWeatherMock } from "../context/mock";
+
+export default function useOpenWeatherMap() {
+  const mock = useWeatherMock();
+  const coordinate = useAtomValue(weatherCoordinate);
+  const shouldUseMock = Boolean(mock?.openWeather);
+  // mock 모드일 때는 Query가 실행되지 않도록 NaN 좌표를 전달한다.
+  const queryCoordinate = shouldUseMock
+    ? { lat: Number.NaN, lng: Number.NaN }
+    : coordinate;
+
+  const { data: now, isFetching: isFetchingNow } =
+    useQueryWeatherOpenWeatherMapNow(queryCoordinate);
+  const { data: forecast, isFetching: isFetchingForecast } =
+    useQueryWeatherOpenWeatherMapForecast(queryCoordinate);
+
+  if (mock?.openWeather) {
+    return {
+      coordinate: mock.openWeather.coordinate,
+      now: mock.openWeather.now,
+      forecast: mock.openWeather.forecast,
+      isFetchingNow: mock.openWeather.isFetchingNow ?? false,
+      isFetchingForecast: mock.openWeather.isFetchingForecast ?? false,
+    };
+  }
+
+  return {
+    coordinate,
+    now,
+    forecast,
+    isFetchingNow,
+    isFetchingForecast,
+  };
+}

package/src/weather/hooks/useWeatherKorea.ts

@@ -0,0 +1,78 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useAtomValue } from "jotai";
+import {
+  useQueryWeatherKoreaForecast,
+  useQueryWeatherKoreaNow,
+} from "../apis/korea/client"; // 클라이언트 전용 API만 import해 Storybook 번들에서 server 코드를 배제한다.
+import type { API_Req_WeatherKorea } from "../types";
+import { weatherCoordinate } from "../jotai/coordinate";
+import { getWeatherBaseMoments } from "../utils/date-time";
+import { getWeatherGridLocation } from "../utils/location";
+import { useWeatherMock } from "../context/mock";
+
+export default function useWeatherKorea() {
+  const mock = useWeatherMock();
+  const coordinate = useAtomValue(weatherCoordinate);
+  const [params, setParams] = useState<{
+    [categoryKey: string]: API_Req_WeatherKorea;
+  }>({
+    now: { nx: 0, ny: 0 },
+    forecast: { nx: 0, ny: 0 },
+  });
+
+  useEffect(() => {
+    if (mock?.korea) return;
+    if (typeof window === "undefined") return;
+
+    const nowMoments = getWeatherBaseMoments("now");
+    const forecastMoments = getWeatherBaseMoments("forecast");
+
+    async function updater() {
+      const grid = await getWeatherGridLocation(coordinate);
+      setParams({
+        now: {
+          ...grid,
+          ...nowMoments,
+        },
+        forecast: {
+          ...grid,
+          ...forecastMoments,
+        },
+      });
+    }
+
+    updater();
+  }, [coordinate, mock]);
+
+  const { data: now, isFetching: isFetchingNow } = useQueryWeatherKoreaNow(
+    params.now,
+  );
+
+  const { data: forecast, isFetching: isFetchingForecast } =
+    useQueryWeatherKoreaForecast(params.forecast);
+
+  if (mock?.korea) {
+    return {
+      params: {
+        now: { nx: 0, ny: 0 },
+        forecast: { nx: 0, ny: 0 },
+      },
+      coordinate: mock.korea.coordinate,
+      now: mock.korea.now,
+      forecast: mock.korea.forecast,
+      isFetchingNow: mock.korea.isFetchingNow ?? false,
+      isFetchingForecast: mock.korea.isFetchingForecast ?? false,
+    };
+  }
+
+  return {
+    params,
+    coordinate,
+    now,
+    forecast,
+    isFetchingNow,
+    isFetchingForecast,
+  };
+}

package/src/weather/hooks/useWeatherKoreaAlert.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import { useMemo } from "react";
+import { useAtomValue } from "jotai";
+import { useQueryWeatherKoreaAlert } from "../apis/korea/client"; // server 번들을 피하기 위해 client 모듈에서 직접 import한다.
+import { weatherFarmIdx } from "../jotai/farm-idx";
+import { useWeatherMock } from "../context/mock";
+
+export default function useWeatherKoreaAlert() {
+  const mock = useWeatherMock();
+  const farm_idx = useAtomValue(weatherFarmIdx);
+  const shouldUseMock = Boolean(mock?.koreaAlert);
+  const resolvedFarmIdx = farm_idx === 507 || !farm_idx ? 507 : (farm_idx ?? 0);
+  const queryFarmIdx = shouldUseMock ? 0 : resolvedFarmIdx;
+
+  const { data, isFetching } = useQueryWeatherKoreaAlert({
+    farm_idx: queryFarmIdx,
+  });
+
+  const alert = useMemo(() => data?.alerts || [], [data]);
+
+  if (mock?.koreaAlert) {
+    // WeatherMockProvider를 사용하면 네트워크 호출 없이 스토리/테스트 전용 alert 데이터를 주입할 수 있다.
+    return {
+      farm_idx: null,
+      alert: mock.koreaAlert.alert?.alerts ?? [],
+      isFetching: mock.koreaAlert.isFetching ?? false,
+    };
+  }
+
+  return {
+    farm_idx: resolvedFarmIdx,
+    alert,
+    isFetching,
+  };
+}

package/src/weather/index.tsx

@@ -0,0 +1,11 @@
+// Weather UI 컴포넌트 전용 스타일을 로드한다.
+import "./styles/weather.scss";
+
+export * from "./utils";
+export * from "./apis";
+export * from "./jotai";
+export * from "./hooks";
+export * from "./context/mock";
+export * from "./types";
+export { default as WeatherComponents } from "./components";
+export { default as WeatherPageHeaderContainer } from "./components/page-header/Container";

package/src/weather/jotai/coordinate.ts

@@ -0,0 +1,16 @@
+"use client";
+
+import type { WeatherCoordinate } from "../types";
+import { atomWithReset } from "jotai/utils";
+
+export const weatherCoordinate = atomWithReset<WeatherCoordinate>({
+  address: null,
+  lat: null,
+  lng: null,
+});
+
+export const harimCoordinate: WeatherCoordinate = {
+  address: "전북 익산시",
+  lat: 35.9372719,
+  lng: 126.9601241,
+};

package/src/weather/jotai/farm-idx.ts

@@ -0,0 +1,5 @@
+"use client";
+
+import { atomWithReset } from "jotai/utils";
+
+export const weatherFarmIdx = atomWithReset<number | null>(null);

package/src/weather/jotai/index.ts

@@ -0,0 +1,2 @@
+export * from "./coordinate";
+export * from "./farm-idx";

package/src/weather/styles/weather.scss

@@ -0,0 +1,151 @@
+.weather-base-container {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+
+  span {
+    font-size: 1.4rem;
+  }
+}
+
+.weather-base-icon {
+  width: 2.5rem;
+  height: 2.4rem;
+  position: relative;
+}
+
+.weather-base-text-info {
+  display: flex;
+  align-items: center;
+
+  dt {
+    margin-right: 0.8rem;
+    font-size: 0;
+
+    span {
+      color: var(--color-cool-gray-35);
+    }
+  }
+
+  dd {
+    font-size: 0;
+    display: flex;
+    align-items: flex-start;
+
+    span {
+      color: var(--color-cool-gray-10);
+      font-weight: 600;
+    }
+  }
+}
+
+.weather-base-divider {
+  width: 1px;
+  height: 1.3rem;
+  margin: 0 0.8rem;
+  background: var(--color-cool-gray-85);
+}
+
+.weather-address {
+  display: flex;
+  align-items: center;
+  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-today-container {
+  @extend .weather-base-container;
+
+  span {
+    white-space: nowrap;
+  }
+
+  .empty-text {
+    font-size: 1.4rem;
+    padding-right: 4rem;
+  }
+}
+
+.weather-today-temperature {
+  margin-left: 1rem;
+  display: flex;
+  align-items: flex-start;
+
+  span {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--color-blue-55);
+  }
+
+  .unit {
+    font-size: 1.2rem;
+  }
+}
+
+.weather-today-humidity {
+  margin-left: 1.4rem;
+}
+
+.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;
+    }
+  }
+}
+
+.weather-next-days-container {
+  @extend .weather-base-container;
+}
+
+.weather-next-days-text {
+  @extend .weather-base-text-info;
+
+  dt {
+    margin-right: 0.8rem;
+  }
+
+  dd:nth-of-type(n + 2) {
+    margin-left: 0.8rem;
+
+    .unit {
+      font-size: 1rem;
+    }
+  }
+}

package/src/weather/types/api.ts

@@ -0,0 +1,215 @@
+import type {
+  KMA_Res_WeatherNow,
+  KMA_Res_WeatherForecast,
+  KMA_Res_Base,
+  KMA_Req_BaseGridCoordinate,
+  KMA_Req_BaseMoments,
+  KMA_Res_AlertType,
+  KMA_Res_AlertLevel,
+  KMA_Res_AlertCommand,
+  KMA_Res_WeatherItem,
+} from "./korea";
+
+export type API_Req_WeatherKoreaGrid = KMA_Req_BaseGridCoordinate;
+export type API_Req_WeatherKoreaMoments = KMA_Req_BaseMoments;
+
+/**
+ * 기상청 API; 날씨 요청.
+ */
+export type API_Req_WeatherKorea = API_Req_WeatherKoreaGrid &
+  Partial<API_Req_WeatherKoreaMoments>;
+
+/**
+ * 기상청 API; 특보 요청 파라미터
+ * @property {number | null} farm_idx 농장 식별자
+ */
+export type API_Req_WeatherKoreaAlert = { farm_idx: number | null };
+
+/**
+ * 기상청 API; 특보 응답 타입 - 지역별 특보정보
+ */
+export type API_Res_WeatherKoreaAlertEach = {
+  /**
+   * 상위 지역 코드
+   * @see https://apihub.kma.go.kr/api/typ01/url/wrn_reg.php?tmfc=0&authKey=njld-D40Rb25Xfg-NAW9hA
+   */
+  upper_region_code: string;
+  /**
+   * 상위 지역 이름
+   * @see https://apihub.kma.go.kr/api/typ01/url/wrn_reg.php?tmfc=0&authKey=njld-D40Rb25Xfg-NAW9hA
+   */
+  upper_region_name: string;
+  /**
+   * 특보 지역 코드
+   * @see https://apihub.kma.go.kr/api/typ01/url/wrn_reg.php?tmfc=0&authKey=njld-D40Rb25Xfg-NAW9hA
+   */
+  alert_region_code: string;
+  /**
+   * 특보 지역 이름
+   * @see https://apihub.kma.go.kr/api/typ01/url/wrn_reg.php?tmfc=0&authKey=njld-D40Rb25Xfg-NAW9hA
+   */
+  alert_region_name: string;
+  /**
+   * 특보 발표시간
+   * - yyyymmddhhmm
+   */
+  announcement_time: string;
+  /**
+   * 특보 발효시간
+   * - yyyymmddhhmm
+   */
+  effective_time: string;
+  /** * 특보 종류 (한글) */
+  alert_type: KMA_Res_AlertType;
+  /**
+   * 특보 수준 (한글)
+   * - 경보, 주의, 예비
+   */
+  alert_level: KMA_Res_AlertLevel;
+  /**
+   * 특보 명령 (한글)
+   * - 발표, 변경, 해제
+   */
+  alert_command: KMA_Res_AlertCommand;
+  /**
+   * 특보 해제 예고시점 (한글)
+   * - dd일 오전/오후/밤(HH시 ~ HH시)
+   */
+  cancel_notice_time: string;
+};
+/**
+ * 기상청 API; 특보 응답 타입
+ */
+export type API_Res_WeatherKoreaAlert = {
+  /** * 특보 발표 시간 */
+  api_announcement_time: string | null;
+  /** * 총 특보 개수 */
+  total_count: number;
+  /** * 지역별 특보 */
+  alerts: API_Res_WeatherKoreaAlertEach[];
+};
+
+/**
+ * 기상청 API; 기초 정보
+ * @property {string} condition - 개황 정보
+ */
+export type API_Res_WeatherKoreaBase = {
+  /**
+   * 하늘상태 코드
+   * - 1(맑음)
+   * - 2(구름조금)
+   * - 3(구름많음)
+   * - 4(흐림)
+   */
+  sky: string | null;
+  /**
+   * 강수형태 코드
+   * - 0(없음)
+   * - 1(비)
+   * - 2(비/눈)
+   * - 3(눈)
+   * - 4(소나기)
+   */
+  drop: string | null;
+  /**
+   * 강수량 코드
+   * - 1(약한 비); 3mm/h 미만
+   * - 2(보통 비); 3mm/h 이상 15mm/h 미만
+   * - 3(강한 비); 15mm/h 이상
+   */
+  rainAmount: string | null;
+  /**
+   * 강설량 코드
+   * - 1(보통 눈); 1cm/h 미만
+   * - 2(많은 눈); 1cm/h 이상
+   */
+  snowAmount: string | null;
+  /**
+   * 풍속 코드
+   * - 1(약한 바람); 4m/s 미만
+   * - 2(약간 강한 바람); 4m/s 이상 9m/s 미만
+   * - 3(강한 바람); 9m/s 이상
+   */
+  windSpeed: string | null;
+  /**
+   * 날씨 상태 코드
+   * - sky-1(맑음)
+   * - sky-2(구름조금)
+   * - sky-3(구름많음)
+   * - sky-4(흐림)
+   * - drop-rain-shower(소나기)
+   * - drop-rain(비)
+   * - drop-rain-1(약한 비)
+   * - drop-rain-2(보통 비)
+   * - drop-rain-3(강한 비)
+   * - drop-rain-snow(비/눈)
+   * - drop-rain-snow-1(약한 비/눈)
+   * - drop-rain-snow-2(보통 비/눈)
+   * - drop-rain-snow-3(강한 비/눈)
+   * - drop-snow(눈)
+   * - drop-snow-1(보통 눈)
+   * - drop-snow-2(많은 눈)
+   */
+  condition: string | null;
+  /** 날씨 상태 텍스트 */
+  conditionName: string | null;
+};
+
+/**
+ * 기상청 API; 오늘 날씨
+ * @property {number|string|null} temperature 기온(℃)
+ * @property {number|string|null} humidity 습도(%)
+ */
+export type API_Res_WeatherKoreaToday = API_Res_WeatherKoreaBase & {
+  /** 기온(℃) */
+  temperature: number | string | null;
+  /** 습도(%) */
+  humidity: number | string | null;
+};
+
+/**
+ * 기상청 API; 내일/모레 날씨
+ * @property {number|string|null} max_temperature 최고기온(℃)
+ * @property {number|string|null} min_temperature 최저기온(℃)
+ */
+export type API_Res_WeatherKoreaNextDays = API_Res_WeatherKoreaBase & {
+  /** 최고 기온(℃) */
+  max_temperature: number | string | null;
+  /** 최저 기온(℃) */
+  min_temperature: number | string | null;
+};
+
+/**
+ * 기상청 API; 원본 응답
+ * @property {RAW} raw API 원본 데이터
+ */
+export type API_Res_WeatherKoreaRaw<RAW = KMA_Res_Base<KMA_Res_WeatherItem>> = {
+  /** API 원본 */
+  raw: RAW;
+};
+
+/**
+ * 기상청 API; 초단기 실황 구조
+ * @property {API_Res_WeatherKoreaToday} today 오늘 데이터
+ */
+export type API_Res_WeatherKoreaNow =
+  API_Res_WeatherKoreaRaw<KMA_Res_WeatherNow> & {
+    /** 오늘 날씨 */
+    today: API_Res_WeatherKoreaToday;
+  };
+
+/**
+ * 기상청 API; 단기 예보 구조
+ * @property {API_Res_WeatherKoreaToday} today 오늘 데이터
+ * @property {API_Res_WeatherKoreaNextDays} day_1 내일 데이터
+ * @property {API_Res_WeatherKoreaNextDays} day_2 모레 데이터
+ */
+export type API_Res_WeatherKoreaForecast =
+  API_Res_WeatherKoreaRaw<KMA_Res_WeatherForecast> & {
+    /** 오늘 날씨 */
+    today: API_Res_WeatherKoreaToday;
+    /** 내일 날씨 */
+    day_1: API_Res_WeatherKoreaNextDays;
+    /** 모레 날씨 */
+    day_2: API_Res_WeatherKoreaNextDays;
+  };

package/src/weather/types/base.ts

@@ -0,0 +1,50 @@
+/**
+ * 위경도 좌표.
+ * @property {number | null} latitude 위도
+ * @property {number | null} longitude 경도
+ */
+export type GeoCoordinate = {
+  /** 위도 */
+  latitude: number | null;
+  /** 경도 */
+  longitude: number | null;
+};
+
+/**
+ * 날씨 API에서 사용하는 위경도 좌표.
+ * @property {number | null} lat 위도
+ * @property {number | null} lng 경도
+ */
+export type WeatherGeoCoordinate = {
+  /** 위도 */
+  lat: number | null;
+  /** 경도 */
+  lng: number | null;
+};
+
+/**
+ * 좌표와 주소 정보를 함께 담는 구조.
+ * @property {string | null} address 좌표 주소
+ */
+export type WeatherCoordinate = {
+  /** 좌표 주소 */
+  address: string | null;
+} & WeatherGeoCoordinate;
+
+/**
+ * 날씨 로직에서 사용하는 날짜 기준값 모음.
+ * @property {Date} now 현재 시각
+ * @property {string} today 오늘 날짜(yyyymmdd)
+ * @property {string} tomorrow 내일 날짜(yyyymmdd)
+ * @property {string} dayAfterTomorrow 모레 날짜(yyyymmdd)
+ */
+export type WeatherUtilDateTimeMoments = {
+  /** 현재 시각 */
+  now: Date;
+  /** 오늘 날짜(yyyymmdd) */
+  today: string;
+  /** 내일 날짜(yyyymmdd) */
+  tomorrow: string;
+  /** 모레 날짜(yyyymmdd) */
+  dayAfterTomorrow: string;
+};

package/src/weather/types/index.ts

@@ -0,0 +1,4 @@
+export type * from "./base";
+export type * from "./api";
+export type * from "./korea";
+export type * from "./open-weather-map";