@uniai-fe/ui-legacy 0.1.1

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,31 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import { weatherCoordinate } from "../jotai";
+import {
+  useQueryWeatherOpenWeatherMapForecast,
+  useQueryWeatherOpenWeatherMapNow,
+} from "../apis/open-weather-map/client";
+
+export default function useOpenWeatherMap() {
+  const coordinate = useAtomValue(weatherCoordinate);
+
+  const { data: now, isFetching: isFetchingNow } =
+    useQueryWeatherOpenWeatherMapNow({
+      lat: coordinate.lat,
+      lng: coordinate.lng,
+    });
+  const { data: forecast, isFetching: isFetchingForecast } =
+    useQueryWeatherOpenWeatherMapForecast({
+      lat: coordinate.lat,
+      lng: coordinate.lng,
+    });
+
+  return {
+    coordinate,
+    now,
+    forecast,
+    isFetchingNow,
+    isFetchingForecast,
+  };
+}

package/src/weather/hooks/useWeatherKorea.ts

@@ -0,0 +1,58 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useAtomValue } from "jotai";
+import { useQueryWeatherKoreaForecast, useQueryWeatherKoreaNow } from "../apis";
+import type { API_Req_WeatherKorea } from "../../types";
+import { weatherCoordinate } from "../jotai/coordinate";
+import { getWeatherBaseMoments } from "../utils/date-time";
+import { getWeatherGridLocation } from "../utils/location";
+
+export default function useWeatherKorea() {
+  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 (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]);
+
+  const { data: now, isFetching: isFetchingNow } = useQueryWeatherKoreaNow(
+    params.now,
+  );
+
+  const { data: forecast, isFetching: isFetchingForecast } =
+    useQueryWeatherKoreaForecast(params.forecast);
+
+  return {
+    params,
+    coordinate,
+    now,
+    forecast,
+    isFetchingNow,
+    isFetchingForecast,
+  };
+}

package/src/weather/hooks/useWeatherKoreaAlert.ts

@@ -0,0 +1,22 @@
+"use client";
+
+import { useMemo } from "react";
+import { useAtomValue } from "jotai";
+import { useQueryWeatherKoreaAlert } from "../apis";
+import { weatherFarmIdx } from "../jotai/farm-idx";
+
+export default function useWeatherKoreaAlert() {
+  const farm_idx = useAtomValue(weatherFarmIdx);
+
+  const { data, isFetching } = useQueryWeatherKoreaAlert({
+    farm_idx: farm_idx === 507 || !farm_idx ? 507 : farm_idx,
+  });
+
+  const alert = useMemo(() => data?.alerts || [], [data]);
+
+  return {
+    farm_idx,
+    alert,
+    isFetching,
+  };
+}

package/src/weather/index.tsx

@@ -0,0 +1,4 @@
+export * from "./utils";
+export * from "./apis";
+export * from "./jotai";
+export * from "./hooks";

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/styled.tsx

@@ -0,0 +1,13 @@
+import StyledWeatherAlert from "./styles/styled-components/alert";
+import StyledWeatherBase from "./styles/styled-components/base";
+import StyledWeatherNextDays from "./styles/styled-components/next-days";
+import StyledWeatherToday from "./styles/styled-components/today";
+
+const StyledWeather = {
+  ...StyledWeatherBase,
+  Alert: StyledWeatherAlert,
+  Today: StyledWeatherToday,
+  NextDays: StyledWeatherNextDays,
+};
+
+export default StyledWeather;

package/src/weather/styles/styled-components/alert.ts

@@ -0,0 +1,30 @@
+"use client";
+
+import styled from "styled-components";
+
+const container = styled.div`
+  width: fit-content;
+  height: 2.6rem;
+  padding: 0 1rem;
+  margin-left: 1rem;
+  border-radius: 0.8rem;
+  background-color: var(--theme-background-40);
+  display: flex;
+  align-items: center;
+`;
+const text = styled.div`
+  height: fit-content;
+  font-size: 0;
+  span {
+    font-size: 1.4rem;
+    color: var(--color-light-blue-600);
+    font-weight: 500;
+    line-height: 1em;
+  }
+`;
+const StyledWeatherAlert = {
+  container,
+  text,
+};
+
+export default StyledWeatherAlert;

package/src/weather/styles/styled-components/base.ts

@@ -0,0 +1,79 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const container = styled.div`
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  span {
+    font-size: 1.4rem;
+  }
+`;
+
+const icon = styled.figure`
+  width: 2.5rem;
+  height: 2.4rem;
+`;
+
+const textInfo = styled.dl`
+  display: flex;
+  align-items: center;
+  dt {
+    margin-right: 0.8rem;
+    font-size: 0;
+    span {
+      color: var(--color_70);
+    }
+  }
+  dd {
+    font-size: 0;
+    display: flex;
+    align-items: flex-start;
+    span {
+      color: var(--color_90);
+      font-weight: 600;
+    }
+  }
+`;
+
+const divider = styled.div`
+  width: 1px;
+  height: 1.3rem;
+  margin: 0 0.8rem;
+  background: var(--color_30);
+`;
+
+const addressContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const addressIcon = styled.figure`
+  width: 1.6rem;
+  height: 1.6rem;
+  margin-right: 0.4rem;
+`;
+
+const addressText = styled.p`
+  width: fit-content;
+  margin-right: 1rem;
+  display: flex;
+  align-items: center;
+  span {
+    font-size: 1.6rem;
+    color: var(--color_90);
+    font-weight: 600;
+    white-space: nowrap;
+    transform: translateY(0.1rem);
+  }
+`;
+
+const address = {
+  container: addressContainer,
+  icon: addressIcon,
+  text: addressText,
+};
+
+const StyledWeatherBase = { container, icon, textInfo, divider, address };
+
+export default StyledWeatherBase;

package/src/weather/styles/styled-components/next-days.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import { styled } from "styled-components";
+import StyledWeatherBase from "./base";
+
+const container = styled(StyledWeatherBase.container)``;
+
+const textLayout = styled(StyledWeatherBase.textInfo)`
+  dt {
+    margin-right: 0.8rem;
+  }
+  dd:nth-of-type(n + 2) {
+    margin-left: 0.8rem;
+    .unit {
+      font-size: 1rem;
+    }
+  }
+`;
+
+const StyledWeatherNextDays = {
+  container,
+  textLayout,
+};
+
+export default StyledWeatherNextDays;

package/src/weather/styles/styled-components/today.ts

@@ -0,0 +1,40 @@
+"use client";
+
+import { styled } from "styled-components";
+import StyledWeatherBase from "./base";
+
+const container = styled(StyledWeatherBase.container)`
+  span {
+    white-space: nowrap;
+  }
+  .empty-text {
+    font-size: 1.4rem;
+    padding-right: 4rem;
+  }
+`;
+
+const temperature = styled.div`
+  margin-left: 1rem;
+  display: flex;
+  align-items: flex-start;
+  span {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--color-light-blue-600);
+  }
+  .unit {
+    font-size: 1.2rem;
+  }
+`;
+
+const humidity = styled.div`
+  margin-left: 1.4rem;
+`;
+
+const StyledWeatherToday = {
+  container,
+  temperature,
+  humidity,
+};
+
+export default StyledWeatherToday;

package/src/weather/utils/alert.ts

@@ -0,0 +1,30 @@
+/**
+ * 특보 도구; 지역 ID 추출
+ * @param {Array} params
+ * @param {Array<{ lat:number; lon:number; regId:string; }>} params.regions - 지역 목록
+ * @param {[number, number]} params.coordinate - [위도, 경도]
+ */
+export const getRegId = ({
+  regions,
+  coordinate,
+}: {
+  regions: Array<{
+    [dataKey: string]: unknown;
+    lat: number;
+    lon: number;
+    regId: string;
+  }>;
+  coordinate: [number, number];
+}): string | null => {
+  const [lat, lng] = coordinate;
+  let bestId: string | null = null;
+  let min = Infinity;
+  for (const z of regions) {
+    const d = Math.hypot(lat - z.lat, lng - z.lon);
+    if (d < min) {
+      min = d;
+      bestId = z.regId;
+    }
+  }
+  return bestId;
+};

package/src/weather/utils/date-time.ts

@@ -0,0 +1,68 @@
+import type {
+  KMA_Req_BaseMoments,
+  WeatherUtilDateTimeMoments,
+} from "../../types";
+import { dateFormat } from "@uniai-fe/util-functions";
+
+export const getWeatherBaseMoments = (
+  category: "now" | "forecast",
+): KMA_Req_BaseMoments => {
+  const FORECAST_HOURS = [2, 5, 8, 11, 14, 17, 20, 23]; // 발표 시각
+
+  const now = new Date();
+
+  let base_date = "";
+  let base_time = "";
+
+  if (category === "now") {
+    const base = new Date(now.getTime() - 10 * 60 * 1000); // 10분 보정
+    base_date = dateFormat(base).replace(/-/g, "");
+    base_time = `${base.getHours().toString().padStart(2, "0")}00`;
+  } else {
+    const hour = now.getHours();
+    const base = new Date(now);
+    let base_hour: number = hour;
+    if (hour < 2) {
+      base.setDate(base.getDate() - 1);
+      base_hour = 23;
+    }
+
+    // 현재 시각 이전 중 가장 가까운 발표 시각
+    const validHour = FORECAST_HOURS.reduce(
+      (prev, curr) => (curr <= base_hour ? curr : prev),
+      FORECAST_HOURS[0],
+    );
+
+    base_date = dateFormat(base).replace(/-/g, "");
+    base_time = `${validHour.toString().padStart(2, "0")}00`;
+  }
+
+  return { base_date, base_time };
+};
+
+/**
+ * 날씨 도구; 현재 날씨/예보 시각
+ * @util
+ * @return {WeatherUtilDateTimeMoments}
+ * @desc
+ * - now: Date 객체
+ * - today: YYYYMMDD 형식의 문자열
+ * - tomorrow: YYYYMMDD 형식의 문자열
+ * - dayAfterTomorrow: YYYYMMDD 형식의 문자열
+ */
+export const getMoments = (): WeatherUtilDateTimeMoments => {
+  const now = new Date();
+  const today = now.toISOString().slice(0, 10).replace(/-/g, "");
+
+  const tomorrow = new Date(now.getTime() + 86400000)
+    .toISOString()
+    .slice(0, 10)
+    .replace(/-/g, "");
+
+  const dayAfterTomorrow = new Date(now.getTime() + 2 * 86400000)
+    .toISOString()
+    .slice(0, 10)
+    .replace(/-/g, "");
+
+  return { now, today, tomorrow, dayAfterTomorrow };
+};

package/src/weather/utils/index.ts

@@ -0,0 +1,4 @@
+export * from "./location";
+export * from "./date-time";
+export * from "./weather";
+export * from "./alert";

package/src/weather/utils/location.ts

@@ -0,0 +1,159 @@
+import type {
+  GeoCoordinate,
+  KMA_GridCoordinate,
+  KMA_Req_BaseGridCoordinate,
+  WeatherCoordinate,
+} from "../../types";
+
+/**
+ * 날씨 도구; 접속위치 추출
+ * @util
+ * @return {GeoCoordinate}}
+ */
+export const userLocation = async (): Promise<GeoCoordinate> => {
+  if (typeof window === "undefined" || !window.navigator.geolocation) {
+    // console.log("[userLocation] window 없음");
+    return { latitude: null, longitude: null };
+  }
+
+  try {
+    const position = await new Promise<GeolocationPosition>(
+      (resolve, reject) => {
+        window.navigator.geolocation.getCurrentPosition(resolve, reject);
+      },
+    );
+    // console.log("[userLocation] 위치 정보:", position.coords);
+    const res = {
+      latitude: position.coords.latitude,
+      longitude: position.coords.longitude,
+    };
+    return res;
+  } catch (error) {
+    console.error("[userLocation] 위치 정보 에러", error);
+    return { latitude: null, longitude: null };
+  }
+};
+
+/**
+ * 날씨 도구; 위경도 -> 격자 좌표 변환
+ * @util
+ * @param {GeoCoordinate} coordinate - 위경도 좌표
+ * @param {number} coordinate.latitude - 위도
+ * @param {number} coordinate.longitude - 경도
+ * @return {KMA_GridCoordinate} 격자 좌표
+ * @desc
+ * - 위경도 좌표를 기상청 격자 좌표로 변환합니다.
+ * - 출처: 기상청
+ * @see https://apihub.kma.go.kr/
+ * @see https://apihub.kma.go.kr/getAttachFile.do?fileName=%EB%8B%A8%EA%B8%B0%EC%98%88%EB%B3%B4%20%EC%A1%B0%ED%9A%8C%EC%84%9C%EB%B9%84%EC%8A%A4_API%ED%99%9C%EC%9A%A9%EA%B0%80%EC%9D%B4%EB%93%9C_241128.docx
+ */
+export function convertCoordinateToGrid({
+  latitude,
+  longitude,
+}: GeoCoordinate): KMA_GridCoordinate {
+  const res: KMA_GridCoordinate = { x: 0, y: 0 };
+
+  if (latitude === null || longitude === null) return res;
+
+  const RE = 6371.00877; // Earth radius (km)
+  const GRID = 5.0; // Grid spacing (km)
+  const SLAT1 = 30.0; // Projection latitude 1 (degree)
+  const SLAT2 = 60.0; // Projection latitude 2 (degree)
+  const ORIGIN_LONGITUDE = 126.0; // Origin longitude (degree)
+  const ORIGIN_LATITUDE = 38.0; // Origin latitude (degree)
+  const XO = 43; // Origin X coordinate (GRID)
+  const YO = 136; // Origin Y coordinate (GRID)
+
+  const RADIAN = Math.PI / 180.0;
+  const re = RE / GRID;
+  const slat1 = SLAT1 * RADIAN;
+  const slat2 = SLAT2 * RADIAN;
+  const origin_longitude = ORIGIN_LONGITUDE * RADIAN;
+  const origin_latitude = ORIGIN_LATITUDE * RADIAN;
+
+  const sn =
+    Math.log(Math.cos(slat1) / Math.cos(slat2)) /
+    Math.log(
+      Math.tan(Math.PI * 0.25 + slat2 * 0.5) /
+        Math.tan(Math.PI * 0.25 + slat1 * 0.5),
+    );
+
+  const sf = Math.tan(Math.PI * 0.25 + slat1 * 0.5);
+  const sfPow = (Math.pow(sf, sn) * Math.cos(slat1)) / sn;
+
+  const ro =
+    (re * sfPow) /
+    Math.pow(Math.tan(Math.PI * 0.25 + origin_latitude * 0.5), sn);
+
+  const ra =
+    (re * sfPow) /
+    Math.pow(Math.tan(Math.PI * 0.25 + latitude * RADIAN * 0.5), sn);
+  let theta = longitude * RADIAN - origin_longitude;
+  if (theta > Math.PI) theta -= 2.0 * Math.PI;
+  if (theta < -Math.PI) theta += 2.0 * Math.PI;
+  theta *= sn;
+
+  res.x = Math.floor(ra * Math.sin(theta) + XO + 0.5);
+  res.y = Math.floor(ro - ra * Math.cos(theta) + YO + 0.5);
+
+  // console.log("[WEATHER] 위/경도 -> 기상청 격자값", res);
+
+  return res;
+}
+
+/**
+ * 날씨 도구; 위도/경도 -> 기상청 격자 좌표 변환
+ * @util
+ * @param {WeatherCoordinate} [coordinate] - 사용자 위치 이외의 특정 위도/경도 좌표
+ * @param {number} coordinate.lat - 위도
+ * @param {number} coordinate.lng - 경도
+ * @return {KMA_Req_BaseGridCoordinate} 기상청 격자 좌표
+ */
+export async function getWeatherGridLocation(
+  coordinate?: WeatherCoordinate,
+): Promise<KMA_Req_BaseGridCoordinate> {
+  const res: KMA_Req_BaseGridCoordinate = { nx: 0, ny: 0 };
+
+  if (typeof window === "undefined") return res;
+
+  const geo: GeoCoordinate = {
+    latitude: coordinate?.lat ?? null,
+    longitude: coordinate?.lng ?? null,
+  };
+
+  // console.log("[getWeatherLocation] 특정 좌표지정 확인", coordinate);
+
+  // 특정 위경도 좌표를 받지 못하는 경우, 현재 사용자 위치로 지정
+  if (
+    typeof window !== "undefined" &&
+    (typeof coordinate === "undefined" || geo.lat === null || geo.lng === null)
+  ) {
+    const { latitude, longitude } = await userLocation();
+
+    if (latitude === null || longitude === null) {
+      // console.log("[getWeatherLocation] window.navigator 실패", geo);
+      return res;
+    }
+    geo.latitude = latitude;
+    geo.longitude = longitude;
+    // console.log("[getWeatherLocation] 사용자 위치", geo);
+  }
+
+  // 위경도 좌표를 기상청 격자좌표로 변환
+  const grid = convertCoordinateToGrid(geo);
+
+  if (grid.x === 0 || grid.y === 0) {
+    // console.error("[getWeatherLocation] 위치 정보를 가져오는데 실패했습니다.", {
+    //   latitude: geo.latitude,
+    //   longitude: geo.longitude,
+    // });
+    return res;
+  }
+  // console.log("[getWeatherLocation] 기상청 격자좌표", grid);
+
+  res.nx = grid.x;
+  res.ny = grid.y;
+
+  // console.log("[getWeatherLocation] result", res);
+  return res;
+}

package/src/weather/utils/validate.ts

@@ -0,0 +1,9 @@
+import type { KMA_Req_BaseGridCoordinate } from "../../types";
+
+export const isValidGridCoordinate = ({
+  nx,
+  ny,
+}: KMA_Req_BaseGridCoordinate) => {
+  if (isNaN(Number(nx)) || isNaN(Number(ny))) return false;
+  return nx > 0 && ny > 0;
+};