@uniai-fe/uds-templates 0.1.16 → 0.1.17

package/src/page-frame/desktop/styles/variables.scss

@@ -0,0 +1,28 @@
+:root {
+  --uds-page-frame-background: var(--color-common-100);
+
+  --uds-page-header-height: 7.2rem;
+  --uds-page-header-border: var(--color-border-standard-cool-gray);
+  --uds-page-header-padding-horizontal: var(--spacing-padding-9, 2.8rem);
+  --uds-page-header-padding-vertical: var(--spacing-padding-5, 1.2rem);
+  --uds-page-header-background: var(--uds-page-frame-background);
+  --uds-page-header-item-gap: var(--spacing-padding-5, 1.2rem);
+
+  --uds-page-nav-width: 7.2rem;
+  --uds-page-nav-border: var(--color-border-standard-cool-gray);
+  --uds-page-nav-background: var(--uds-page-frame-background);
+
+  --uds-page-nav-logo-height: var(--uds-page-header-height, 7.2rem);
+
+  --uds-page-nav-list-padding-horizontal: 0rem;
+  --uds-page-nav-list-padding-vertical: var(--spacing-padding-9, 2.4rem);
+  --uds-page-nav-item-height: var(--theme-size-meduum-2, 4.8rem);
+  --uds-page-nav-item-gap: var(--spacing-gap-6, 1.6rem);
+  --uds-page-nav-item-color-default: var(--color-label-standard);
+  --uds-page-nav-item-color-active: var(--color-primary-default);
+  --uds-page-nav-icon-size: var(--theme-size-small-2, 2.4rem);
+
+  --uds-page-body-background: var(--uds-page-frame-background);
+  --uds-page-body-padding-horizontal: var(--spacing-padding-9, 2.8rem);
+  --uds-page-body-padding-vertical: var(--spacing-padding-9, 2.8rem);
+}

package/src/page-frame/desktop/types/nav.ts

@@ -0,0 +1,77 @@
+import type { SitemapDataType } from "../../types";
+
+/**
+ * PageFrame; Desktop Nav Logo Props
+ */
+export interface PageFrameDesktopNavLogoProps {
+  /**
+   * 로고 클릭 시 이동할 링크 주소.
+   * 기본값은 "/" (홈) 입니다.
+   */
+  href?: string;
+  /**
+   * 로고 이미지 src 속성 값.
+   */
+  src: string;
+  /**
+   * 로고 이미지 alt 속성 값.
+   */
+  alt: string;
+  /**
+   * 로고 이미지 width 속성 값.
+   */
+  width: number;
+  /**
+   * 로고 이미지 height 속성 값.
+   */
+  height: number;
+  /**
+   * 로고 이미지 priority 속성 값.
+   */
+  priority?: boolean;
+  /**
+   * 커스텀 로고 콘텐츠.
+   * 제공 시, src, alt, label props는 무시됩니다.
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * PageFrame; Desktop Nav Item Props
+ */
+export interface PageFrameDesktopNavItemProps {
+  /**
+   * 경로.
+   */
+  path: string;
+  /**
+   * 아이콘.
+   */
+  icon?: React.ReactNode;
+  /**
+   * 메뉴 이름.
+   */
+  menuName: React.ReactNode;
+  /**
+   * 이름 숨김 여부.
+   */
+  isHideName?: boolean;
+}
+
+/**
+ * PageFrame; Desktop Nav Props
+ */
+export interface PageFrameDesktopNavProps {
+  /**
+   * logo 옵션
+   */
+  logo?: PageFrameDesktopNavLogoProps;
+  /**
+   * 사이트맵 데이터 배열.
+   */
+  sitemap: SitemapDataType[];
+  /**
+   * 현재 경로.
+   */
+  currentPath?: string;
+}

package/src/page-frame/index.tsx

@@ -1,3 +1,5 @@
 export * from "./container";
 export * from "./mobile";
 export * from "./navigation";
+export * from "./types";
+export { default as PageFrameDesktop } from "./desktop";

package/src/page-frame/mobile/index.scss

@@ -1,7 +1,7 @@
 .page-frame-mobile {
   width: 100%;
   height: 100%;
-  min-height: var(--page-frame-height, var(--frame-device-height, 812px));
+  min-height: var(--uds-page-frame-height, var(--frame-device-height, 812px));
   max-height: 100dvh;
   background-color: var(--color-common-100, #ffffff);
 }

package/src/page-frame/types/index.ts

@@ -0,0 +1,69 @@
+import type { CSSProperties, ReactNode, SyntheticEvent } from "react";
+import type { SitemapBase } from "@uniai-fe/util-functions";
+
+/**
+ * page-frame 컴포넌트에서 공통으로 사용하는 기본 Props
+ */
+export type ComponentBaseProps<ClickElement extends Element = HTMLElement> = {
+  children: ReactNode;
+} & Partial<{
+  className: string;
+  clickEvent: (event?: SyntheticEvent<ClickElement>) => void;
+}>;
+
+/**
+ * 커스텀 CSS 변수를 명시적으로 다루기 위한 스타일 타입
+ */
+export type CSSVarStyle<Variable extends string> = CSSProperties & {
+  [Key in Variable]?: string;
+};
+
+/**
+ * 페이지 프레임에서 사용하는 네비게이션 옵셔널 속성
+ */
+export type SitemapPageOptionsType = {
+  popup?: boolean;
+  auth?: string[];
+  pageStyle?: string;
+};
+
+/**
+ * Sidebar/ Breadcrumb 등을 구성하는 기본 노드 타입
+ */
+export type SitemapDataType = SitemapPageOptionsType &
+  SitemapBase & {
+    routeKey: string;
+    name: string;
+    depth: SitemapDataType[];
+    icon?: ReactNode;
+    navDepthDisabled?: boolean;
+  };
+
+/**
+ * Breadcrumb 매칭 결과 구조
+ */
+export type SitemapMatchDataType = {
+  category: SitemapDataType | null;
+  depth: SitemapDataType | null;
+};
+
+/**
+ * 헤더 프로필 선택 옵션
+ */
+export interface SelectOptionType<OptionDataType = unknown> {
+  key: string;
+  value: string | number;
+  optionName: string | ReactNode;
+  selected: boolean;
+  disabled?: boolean;
+  data?: OptionDataType;
+}
+
+/**
+ * 헤더 알림 항목 데이터
+ */
+export type PageHeaderNotifyDataType = {
+  key: string;
+  content: ReactNode;
+  timestamp: string | Date;
+};

package/src/weather/apis/index.ts

@@ -0,0 +1,4 @@
+export * from "./korea/client";
+export * from "./korea/server";
+export * from "./open-weather-map/client";
+export * from "./open-weather-map/server";

package/src/weather/apis/korea/client.ts

@@ -0,0 +1,93 @@
+"use client";
+
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { getQueryString } from "@uniai-fe/util-functions";
+import type {
+  API_Req_WeatherKorea,
+  API_Req_WeatherKoreaAlert,
+  API_Res_WeatherKoreaAlert,
+  API_Res_WeatherKoreaForecast,
+  API_Res_WeatherKoreaNow,
+} from "../../types";
+import { isValidGridCoordinate } from "../../utils/validate";
+
+/**
+ * 기상청 API; 현재날씨 fetch
+ * @method GET
+ * @param {API_Req_WeatherKorea} params - API 요청 파라미터
+ * @param {number} params.nx - X 좌표
+ * @param {number} params.ny - Y 좌표
+ * @param {string} [params.base_date] - 기준 날짜
+ * @param {string} [params.base_time] - 기준 시간
+ */
+export const getWeatherKoreaNow = async (params: API_Req_WeatherKorea) =>
+  await (await fetch(`/api/weather/korea/now${getQueryString(params)}`)).json();
+
+/**
+ * 기상청 API; 내일/모레 예보 fetch
+ * @method GET
+ * @param {API_Req_WeatherKorea} params - API 요청 파라미터
+ * @param {number} params.nx - X 좌표
+ * @param {string} params.ny - Y 좌표
+ * @param {string} [params.base_date] - 기준 날짜
+ * @param {string} [params.base_time] - 기준 시간
+ */
+export const getWeatherKoreaForecast = async (params: API_Req_WeatherKorea) =>
+  await (
+    await fetch(`/api/weather/korea/forecast${getQueryString(params)}`)
+  ).json();
+
+/**
+ * 기상청 API; 특보 fetch
+ * @method GET
+ * @param {API_Req_WeatherKoreaAlert} params - API 요청 파라미터
+ * @param {number} params.farm_idx - 농장 ID
+ */
+export const getWeatherKoreaAlert = async (params: API_Req_WeatherKoreaAlert) =>
+  await (
+    await fetch(`/api/weather/korea/alert${getQueryString(params)}`)
+  ).json();
+
+/**
+ * 기상청 API; 현재 날씨 react query
+ * @method GET
+ */
+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 }),
+    staleTime: 10 * 60 * 1000, // 10분
+    refetchInterval: 5 * 60 * 1000, // 5분
+    refetchOnWindowFocus: true,
+  });
+
+/**
+ * 기상청 API; 내일/모레 예보 react query
+ * @method GET
+ */
+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 }),
+    staleTime: 30 * 60 * 1000, // 30분
+  });
+
+/**
+ * 기상청 API; 특보 react query
+ * @method GET
+ */
+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,
+    staleTime: 60 * 60 * 1000, // 1시간
+  });

package/src/weather/apis/korea/server.ts

@@ -0,0 +1,253 @@
+"use server";
+
+import { setDebugResponseHeaders } from "@uniai-fe/util-next";
+import type {
+  API_Res_WeatherKoreaAlert,
+  API_Res_WeatherKoreaForecast,
+  API_Res_WeatherKoreaNextDays,
+  API_Res_WeatherKoreaNow,
+  API_Res_WeatherKoreaToday,
+  KMA_Req_Weather,
+  KMA_Res_WeatherForecast,
+  KMA_Res_WeatherNow,
+} from "../../types";
+import WEATHER_KOREA_RESPONSE from "../../data/response";
+import { getWeatherBaseMoments } from "../../utils/date-time";
+import { extractWeatherSummary } from "../../utils";
+import type { NextResponse } from "next/server";
+import {
+  generateBackendQueryUrl_GET,
+  nextAPILog,
+} from "@uniai-fe/util-functions";
+
+// const { generateBackendQueryUrl_GET } = weatherApi;
+// const weatherLog = weatherApi.logger;
+
+/**
+ * 기상청 API; base URL
+ * "본 저작물은 기상청에서 'OO년'작성하여 공공누리 제1유형으로 개방한 '저작물명(작성자:OOO)'을 이용하였으며, 해당 저작물은 '기상청 API허브(apihub.kma.go.kr)에서 무료로 다운받으실 수 있습니다."
+ */
+
+const API_BASE = "https://apihub.kma.go.kr/api";
+/**
+ * 기상청 API; 날씨정보 URL
+ */
+const API_WEATHER = "/typ02/openApi/VilageFcstInfoService_2.0";
+
+const QUERY_URL = {
+  forecast: `${API_WEATHER}/getVilageFcst`,
+  now: `${API_WEATHER}/getUltraSrtFcst`,
+  alert: `/avic/weather-alert`,
+};
+
+const { API_RES_RAW, API_RES_BASE } = WEATHER_KOREA_RESPONSE;
+
+const getWeatherParams = ({
+  authKey,
+  category,
+  searchParams,
+}: {
+  authKey: string;
+  category: "now" | "forecast";
+  searchParams: URLSearchParams;
+}): KMA_Req_Weather => {
+  const { base_date, base_time } = getWeatherBaseMoments(category);
+
+  return {
+    pageNo: "1",
+    numOfRows: "1000",
+    authKey,
+    base_date,
+    base_time,
+    dataType: "JSON",
+    nx: 0,
+    ny: 0,
+    ...Object.fromEntries(searchParams.entries()),
+  };
+};
+
+/**
+ * 기상청 API; 현재 날씨
+ * @method GET
+ */
+export const routeWeatherKoreaNow = async ({
+  domain = API_BASE,
+  authKey,
+  routeUrl,
+  searchParams,
+}: {
+  authKey: string;
+  routeUrl: string;
+  searchParams: URLSearchParams;
+} & Partial<{
+  domain: string;
+}>): Promise<API_Res_WeatherKoreaNow> => {
+  const NOW_DATA: API_Res_WeatherKoreaToday = {
+    ...API_RES_BASE,
+    temperature: null,
+    humidity: null,
+  };
+  const resDefault: API_Res_WeatherKoreaNow = {
+    raw: API_RES_RAW as KMA_Res_WeatherNow,
+    today: NOW_DATA,
+  };
+
+  if (!authKey) {
+    nextAPILog("GET", routeUrl, "기상청 현재날씨 API", {
+      error: "API Key를 확인하세요.",
+    });
+    return resDefault;
+  }
+
+  const queryParams = Object.fromEntries(
+    Object.entries(
+      getWeatherParams({ authKey, category: "now", searchParams }),
+    ).map(([key, value]) => [key, String(value)]),
+  );
+
+  // 요청 URL 구성
+  const url = generateBackendQueryUrl_GET({
+    domain,
+    routeUrl,
+    queryUrl: QUERY_URL.now,
+    searchParams: new URLSearchParams(queryParams),
+  });
+
+  // nextAPILog("GET", routeUrl, url, { searchParams, queryParams });
+
+  try {
+    const res: KMA_Res_WeatherNow = await (await fetch(url)).json();
+    resDefault.raw = res;
+    return extractWeatherSummary.now(resDefault, res);
+  } catch (error) {
+    nextAPILog("GET", routeUrl, url, { error });
+
+    return resDefault;
+  }
+};
+
+/**
+ * 기상청 API; 내일, 모래 예보
+ * @method GET
+ */
+export const routeWeatherKoreaForecast = async ({
+  domain = API_BASE,
+  authKey,
+  routeUrl,
+  searchParams,
+}: {
+  authKey: string;
+  routeUrl: string;
+  searchParams: URLSearchParams;
+} & Partial<{
+  domain: string;
+}>): Promise<API_Res_WeatherKoreaForecast> => {
+  const FORECAST_DATA: API_Res_WeatherKoreaNextDays = {
+    ...API_RES_BASE,
+    max_temperature: null,
+    min_temperature: null,
+  };
+  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,
+  };
+
+  if (!authKey) {
+    nextAPILog("GET", routeUrl, "기상청 예보날씨 API", {
+      error: "API Key를 확인하세요.",
+    });
+    return resDefault;
+  }
+
+  const queryParams = Object.fromEntries(
+    Object.entries(
+      getWeatherParams({ authKey, category: "forecast", searchParams }),
+    ).map(([key, value]) => [key, String(value)]),
+  );
+
+  // 요청 URL 구성
+  const url = generateBackendQueryUrl_GET({
+    domain,
+    routeUrl,
+    queryUrl: QUERY_URL.forecast,
+    searchParams: new URLSearchParams(queryParams),
+  });
+
+  // nextAPILog("GET", routeUrl, url, { searchParams, queryParams });
+
+  try {
+    const res: KMA_Res_WeatherForecast = await (await fetch(url)).json();
+    resDefault.raw = res;
+    return extractWeatherSummary.forecast(resDefault, res);
+  } catch (error) {
+    nextAPILog("GET", routeUrl, url, { error });
+
+    return resDefault;
+  }
+};
+
+/**
+ * 기상청 API; 특보 - 구역코드 조회
+ */
+// export const getWeatherKoreaAlertRegionCodes = async ({
+//   routeUrl,
+//   searchParams,
+// }: {
+//   routeUrl: string;
+//   searchParams: URLSearchParams;
+// }) => {
+//   const params = new URLSearchParams({
+//     authKey,
+//     dataType: "JSON",
+//     pageNo: "1",
+//     numOfRows: "1000",
+//     korName: "",
+//   });
+//   const url = `${QUERY_URL.alert}?${params.toString()}`;
+//   nextAPILog("GET", routeUrl, url, { params, searchParams });
+
+//   const regions = await (await fetch(url)).json();
+
+//   return regions;
+// };
+
+/**
+ * 기상청 API; 특보
+ */
+export const routeWeatherKoreaAlert = async ({
+  domain,
+  routeUrl,
+  searchParams,
+}: {
+  domain: string;
+  routeUrl: string;
+  searchParams: URLSearchParams;
+}): Promise<NextResponse<API_Res_WeatherKoreaAlert>> => {
+  const params = new URLSearchParams({
+    // authKey,
+    // dataType: "JSON",
+    // reg: "",
+    // wrn: "",
+    // disp: "0",
+    // fe: "f",
+    // tm: "",
+  });
+  const url = generateBackendQueryUrl_GET({
+    domain,
+    routeUrl,
+    queryUrl: QUERY_URL.alert,
+    searchParams,
+  });
+
+  nextAPILog("GET", routeUrl, url, { params, searchParams });
+  const info = await (await fetch(url)).json();
+
+  return setDebugResponseHeaders<API_Res_WeatherKoreaAlert>({
+    res: info,
+    domain,
+    queryUrl: QUERY_URL.alert,
+    searchParams,
+  });
+};

package/src/weather/apis/open-weather-map/client.ts

@@ -0,0 +1,69 @@
+"use client";
+
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import type { OWM_Res_Weather_Now, WeatherGeoCoordinate } from "../../types";
+import { getQueryString, isValidNumber } from "@uniai-fe/util-functions";
+
+/**
+ * 글로벌 날씨 API; 현재 날씨 fetch
+ * @method GET
+ * @route https://api.openweathermap.org/data/2.5/weather
+ * @see https://openweathermap.org/current
+ * @param {WeatherGeoCoordinate} params - API 요청 파라미터
+ * @param {number} params.lat - 위도
+ * @param {number} params.lon - 경도
+ */
+export const getWeatherOpenWeatherMapNow = async (
+  params: WeatherGeoCoordinate,
+) =>
+  await (
+    await fetch(`/api/weather/open-weather-map/now${getQueryString(params)}`)
+  ).json();
+
+/**
+ * 글로벌 날씨 API; 예보 날씨 (4 days) fetch
+ * @method GET
+ * @route https://pro.openweathermap.org/data/2.5/weather/forecast/hourly
+ * @see https://openweathermap.org/api/hourly-forecast
+ * @param {WeatherGeoCoordinate} params - API 요청 파라미터
+ * @param {number} params.lat - 위도
+ * @param {number} params.lon - 경도
+ */
+export const getWeatherOpenWeatherMapForecast = async (
+  params: WeatherGeoCoordinate,
+) =>
+  await (
+    await fetch(
+      `/api/weather/open-weather-map/forecast${getQueryString(params)}`,
+    )
+  ).json();
+
+/**
+ * 글로벌 날씨 API; 현재 날씨 react query
+ * @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),
+    staleTime: 10 * 60 * 1000, // 10분
+    refetchInterval: 5 * 60 * 1000, // 5분
+    refetchOnWindowFocus: true,
+  });
+
+/**
+ * 글로벌 날씨 API; 예보 날씨 (4 days) react query
+ * @method GET
+ */
+export const useQueryWeatherOpenWeatherMapForecast = (
+  params: WeatherGeoCoordinate,
+) =>
+  useQuery({
+    queryKey: ["weather_open_weather_map_forecast", ...Object.values(params)],
+    queryFn: () => getWeatherOpenWeatherMapForecast(params),
+    enabled: isValidNumber(params.lat) && isValidNumber(params.lng),
+    staleTime: 30 * 60 * 1000, // 30분
+  });