refactor : api 와 상분 관련해서 세분화 및 분류,

- api : 유틸함수, api에서 가져오는 정보 유형, 타입등을 기준으로 폴더를 생성하고 api,ts를 보다 상세하게 파일로 생성해 분류
- 상수 : 상수 변수명을 대문자로 변경, 상수들을 단순히 나열하는 것이 아니라 관련된 것끼리 모아서 객체를 생성하고 이에 따라 타입과 메서드 변경 ,상수들을 모아서 관련별로 파일을 생성해  contstants폴더로 이동

src/component/Hourly.tsx

@@ -2,11 +2,11 @@ import React, { useEffect, useRef, useState } from "react";
 import { checkDayOrNight } from "../App";
 import {
   DailyWeather,
-  directionArray,
   HourWeather,
   SunRiseAndSet,
   WindType,
 } from "../modules/weather";
+import { WIND_DIRECTION, WIND_DIRECTION_ARRAY } from "../constants";
 import SkyIcon from "./SkyIcon";
 import { TiLocationArrow } from "react-icons/ti";
 import { CSSProperties } from "styled-components";
@@ -130,7 +130,10 @@ type TdWindyProperty = {
 };
 const TdWindy = ({ date, hours, wind }: TdWindyProperty) => {
   const ymdt = `${date}${hours.slice(0, 2)}`;
-  const index = wind.vec === "북풍" ? 0 : directionArray.indexOf(wind.vec);
+  const index =
+    WIND_DIRECTION[wind.vec] === "북풍"
+      ? 0
+      : WIND_DIRECTION_ARRAY.indexOf(wind.vec);
   const angle: number = (360 / 16) * index;
   const deg = -15 + angle;
   const arrowStyle: CSSProperties = {

src/component/Nation.tsx

@@ -11,6 +11,7 @@ import { weekArray } from "./Week";
 import mapImg from "../assets/map.jpg";
 import SkyIcon from "./SkyIcon";
 import { checkDayOrNight } from "../App";
+import { AREA } from "../constants";
 const now = "now";
 const am = "am";
 const pm = "pm";
@@ -56,10 +57,7 @@ const Zone = ({ daytime, area, targetTime, targetDaylater }: ZoneProperty) => {
   })();
 
   return (
-    <div
-      id={`zone_${areaName === "울릉/독도" ? "울릉독도" : areaName}`}
-      className="zone"
-    >
+    <div id={`zone_${areaName}`} className="zone">
       <SkyIcon skyType={zoneWeatherData.sky} daytime={daytime} />
       <div className="text">
         <span className="areaName">{areaName}</span>

src/component/Now.tsx

@@ -3,7 +3,6 @@ import { GiWaterDrop } from "react-icons/gi";
 import styled, { CSSProperties } from "styled-components";
 import { checkDayOrNight } from "../App";
 import {
-  gradeArray,
   NowWeather,
   PmType,
   SunRiseAndSet,
@@ -12,25 +11,20 @@ import {
 import ScrollBtn from "./ScrollBtn";
 import SkyIcon from "./SkyIcon";
 import { BiDotsHorizontalRounded } from "react-icons/bi";
+import { PM_STATE, SKY, WIND_DIRECTION } from "../constants";
 const Dd = styled.dd`
   color: ${(props) =>
-    props.className === gradeArray[0]
-      ? "#42a5f5"
-      : props.className === gradeArray[1]
-      ? "#15921b"
-      : props.className === gradeArray[2]
-      ? "#ff7b00"
-      : props.className === gradeArray[3]
-      ? "#ef5350"
-      : "#6d6d6d"};
+    props.className !== "notYet"
+      ? PM_STATE[props.className as keyof typeof PM_STATE].color
+      : PM_STATE.undefined.color};
 `;
 type PmDdProperty = {
   grade: PmType;
 };
 const PmDd = ({ grade }: PmDdProperty) => {
   return (
     <Dd className={grade === null ? "notYet" : grade}>
-      {grade === null ? <BiDotsHorizontalRounded /> : grade}
+      {grade === null ? <BiDotsHorizontalRounded /> : PM_STATE[grade].name}
     </Dd>
   );
 };
@@ -211,7 +205,7 @@ const Now = ({ nowWeather, tomorrowWeather, todaySunInform }: NowProperty) => {
             {nowWeather.tmp}
             <span className="degree">°</span>
           </div>
-          <div className="sky">{nowWeather.sky}</div>
+          <div className="sky">{SKY[nowWeather.sky]}</div>
         </div>
       </div>
       <div className="now_quickArea">
@@ -240,7 +234,7 @@ const Now = ({ nowWeather, tomorrowWeather, todaySunInform }: NowProperty) => {
                     </li>
                     <li>
                       <dl>
-                        <dt>{nowWeather.wind.vec}</dt>
+                        <dt>{WIND_DIRECTION[nowWeather.wind.vec]}</dt>
                         <dd>
                           {nowWeather.wind.wsd}
                           <span className="unit">m/s</span>
@@ -308,7 +302,7 @@ const Now = ({ nowWeather, tomorrowWeather, todaySunInform }: NowProperty) => {
               name="현재 날씨"
               type="button"
             >
-              <span className="scrn-only">현재 날씨</span>
+              <span className="screen-only">현재 날씨</span>
             </button>
             <button
               className={
@@ -318,7 +312,7 @@ const Now = ({ nowWeather, tomorrowWeather, todaySunInform }: NowProperty) => {
               name="내일 날씨"
               type="button"
             >
-              <span className="scrn-only">내일 날씨</span>
+              <span className="screen-only">내일 날씨</span>
             </button>
           </div>
         </div>

src/component/SkyIcon.tsx

@@ -129,50 +129,50 @@ export const SunnyNightIcon = () => {
 const SkyIcon = ({ skyType, daytime }: SkyIconProperty) => {
   return (
     <div className="skyIcon">
-      {skyType === "구름많고 눈" && (
+      {skyType === "cldSnow" && (
         <div className="overlapping">
           <CloudyIcon className="behind" rain={false} shower={false} />
           <SnowIcon className="front" />
         </div>
       )}
-      {skyType === "구름많고 비" && (
+      {skyType === "cldRain" && (
         <CloudyIcon className="behind" rain={true} shower={false} />
       )}
-      {skyType === "구름많고 비/눈" && (
+      {skyType === "cldRainSnow" && (
         <div className="overlapping">
           <CloudyIcon className="behind" rain={true} shower={false} />
           <SnowIcon className="front" />
         </div>
       )}
-      {(skyType === "소나기" ||
-        skyType === "한때 비" ||
-        skyType === "구름많고 소나기") && (
+      {(skyType === "shower" ||
+        skyType === "spellRain" ||
+        skyType === "cldShower") && (
         <CloudyIcon className="" rain={false} shower={true} />
       )}
-      {skyType === "구름많음" && (
+      {skyType === "cloudy" && (
         <CloudyIcon className="" rain={false} shower={false} />
       )}
-      {skyType === "눈" && <SnowIcon className="" />}
-      {skyType === "맑음" && (daytime ? <SunnyDayIcon /> : <SunnyNightIcon />)}
-      {skyType === "흐리고 눈" && (
+      {skyType === "snow" && <SnowIcon className="" />}
+      {skyType === "sunny" && (daytime ? <SunnyDayIcon /> : <SunnyNightIcon />)}
+      {skyType === "vrCldSnow" && (
         <div className="overlapping">
           <VeryCloudyIcon className={"behind"} rain={false} shower={false} />
           <SnowIcon className="front" />
         </div>
       )}
-      {(skyType === "비" || skyType === "흐리고 비") && (
+      {(skyType === "rainy" || skyType === "vrCldRain") && (
         <VeryCloudyIcon className={undefined} rain={true} shower={false} />
       )}
-      {(skyType === "비 또는 눈" || skyType === "흐리고 비/눈") && (
+      {(skyType === "snowRain" || skyType === "vrCldRainSnow") && (
         <div className="overlapping">
           <VeryCloudyIcon className={"behind"} rain={true} shower={false} />
           <SnowIcon className="front" />
         </div>
       )}
-      {skyType === "흐리고 소나기" && (
+      {skyType === "vrCldShower" && (
         <VeryCloudyIcon className={undefined} rain={false} shower={true} />
       )}
-      {skyType === "흐림" && (
+      {skyType === "veryCloudy" && (
         <VeryCloudyIcon className={undefined} rain={false} shower={false} />
       )}
     </div>

src/component/Sun.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { SunRiseAndSet } from "../modules/weather";
 import { HiArrowSmDown, HiArrowSmUp } from "react-icons/hi";
-import { changeTwoDigit } from "../modules/api";
 import { CSSProperties } from "styled-components";
+import { changeTwoDigit } from "../modules/api/forecast/time";
 type SunIconAreaProperty = {
   sunrise: boolean;
 };

src/constants/api.ts

@@ -0,0 +1,97 @@
+import { Api } from "../modules/api/types/weather";
+
+export const SORT = {
+  shortFcast: "VilageFcstInfoService_2.0",
+  midFcast: "MidFcstInfoService",
+};
+export const AP_INFORM_API_URL =
+  "http://apis.data.go.kr/B552584/ArpltnInforInqireSvc";
+
+export const SUN_API_URL =
+  "http://apis.data.go.kr/B090041/openapi/service/RiseSetInfoService";
+
+/**
+ * 단기 예보
+ * ultraSrtNcst: 초단기실황조회 :현재,
+ * ultraSrtFcst:초단기예보조회 : 현재부터 6시간이내
+ *  vilageFcst : 단기예보조회 :현재부터 3일 이내
+ */
+export const INQURY_SHORT = {
+  ultraSrtNcst: "getUltraSrtNcst",
+  ultraSrtFcst: "getUltraSrtFcst",
+  vilageFcst: "getVilageFcst",
+};
+/**
+ *중기 예보
+ *midLandFcst :중기 육상예보:강수확률,날씨;
+ *midTa :중기기온조회;
+ */
+export const INQURY_MID = {
+  midLandFcst: "getMidLandFcst",
+  midTa: "getMidTa",
+};
+/**
+ * 대기오염 예보
+ * ctprvnRltmMesureDnsty : 시도별 실시간 대기오염 측정 정보 조회
+ * minuDustFrcstDspth :시도별 대기오염 예보
+ */
+export const INQURY_AIR = {
+  ctprvnRltmMesureDnsty: "getCtprvnRltmMesureDnsty",
+  minuDustFrcstDspth: "getMinuDustFrcstDspth",
+};
+
+export const INQURY_SUN = "getLCRiseSetInfo";
+
+export const FETCH_URL = {
+  svfcast: "svfcast",
+  sky: "sky",
+  usncst: "usncst",
+  midFcastLandItems: "midFcast_landItems",
+  midFcastTaItems: "midFcast_taItems",
+  apNow: "apNow",
+  apfcst: "apfcst",
+};
+
+export const SVF_BASE_TIME = {
+  am2: "0200",
+  am5: "0500",
+  am8: "0800",
+  am11: "1100",
+  pm2: "1400",
+  pm5: "1700",
+  pm8: "2000",
+  pm11: "2300",
+};
+
+/**
+ * Api for short-term forecast
+ */
+const API_URL = "https://apis.data.go.kr/1360000/";
+
+export const SHORT_FCAST_API: Api = {
+  url: `${API_URL}${SORT.shortFcast}`,
+  inqury: INQURY_SHORT,
+};
+/**
+ * Api for medium term forecas
+ */
+export const MID_FCAST_API: Api = {
+  url: `${API_URL}${SORT.midFcast}`,
+  inqury: INQURY_MID,
+};
+
+/**
+ * Api for air pollution
+ */
+export const AP_INFORMATION_API: Api = {
+  url: AP_INFORM_API_URL,
+  inqury: INQURY_AIR,
+};
+
+/**
+ * Api for sunset and sunrise
+ */
+export const SUN_API: Api = {
+  url: SUN_API_URL,
+  inqury: INQURY_SUN,
+};