@uniai-fe/uds-templates 0.5.8 → 0.5.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/package.json +1 -1
- package/src/cctv/components/pagination/list/Item.tsx +9 -0
- package/src/modal/components/core/Root.tsx +38 -1
- package/src/weather/apis/korea/client.ts +50 -15
- package/src/weather/apis/korea/server.ts +2 -2
- package/src/weather/apis/open-weather-map/client.ts +45 -15
- package/src/weather/apis/open-weather-map/server.ts +8 -2
- package/src/weather/components/icon/Address.tsx +7 -6
- package/src/weather/components/icon/Weather.tsx +4 -5
- package/src/weather/components/page-header/Address.tsx +36 -2
- package/src/weather/components/page-header/Alert.tsx +43 -16
- package/src/weather/components/page-header/Container.tsx +33 -5
- package/src/weather/components/page-header/Forecast.tsx +48 -7
- package/src/weather/components/page-header/NextDays.tsx +25 -22
- package/src/weather/components/page-header/Today.tsx +134 -91
- package/src/weather/hooks/useOpenWeatherMap.ts +22 -3
- package/src/weather/hooks/useWeatherKorea.ts +16 -4
- package/src/weather/hooks/useWeatherKoreaAlert.ts +13 -4
- package/src/weather/img/marker.svg +4 -0
- package/src/weather/styles/weather.scss +107 -108
- package/src/weather/types/base.ts +20 -0
- package/src/weather/types/index.ts +1 -0
- package/src/weather/types/page-header.ts +277 -0
- package/src/weather/utils/index.ts +1 -0
- package/src/weather/utils/locale.ts +73 -0
- package/src/weather/utils/weather.ts +112 -0
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import type {
|
|
2
2
|
API_Res_WeatherKoreaBase,
|
|
3
3
|
API_Res_WeatherKoreaForecast,
|
|
4
|
+
API_Res_WeatherKoreaNextDays,
|
|
4
5
|
API_Res_WeatherKoreaNow,
|
|
5
6
|
KMA_Res_WeatherItem,
|
|
6
7
|
KMA_Res_WeatherForecast,
|
|
7
8
|
KMA_Res_WeatherNow,
|
|
9
|
+
OWM_Res_Weather_Forecast,
|
|
10
|
+
OWM_Res_Weather_Forecast_Item,
|
|
8
11
|
} from "../types";
|
|
9
12
|
import { getMoments } from "./date-time";
|
|
10
13
|
|
|
@@ -217,6 +220,115 @@ const getWeatherCondition = ({
|
|
|
217
220
|
};
|
|
218
221
|
};
|
|
219
222
|
|
|
223
|
+
/**
|
|
224
|
+
* 날씨 도구; OpenWeatherMap 아이콘 코드를 weather icon 코드로 변환
|
|
225
|
+
* @param {string} [icon] OpenWeatherMap icon 코드
|
|
226
|
+
* @return {string} weather icon 코드
|
|
227
|
+
*/
|
|
228
|
+
export const getOpenWeatherMapConditionCode = (icon?: string): string => {
|
|
229
|
+
switch (icon) {
|
|
230
|
+
case "01d":
|
|
231
|
+
case "01n":
|
|
232
|
+
return "sky-1";
|
|
233
|
+
case "02d":
|
|
234
|
+
case "02n":
|
|
235
|
+
case "03d":
|
|
236
|
+
case "03n":
|
|
237
|
+
case "04d":
|
|
238
|
+
case "04n":
|
|
239
|
+
return "sky-2";
|
|
240
|
+
case "09d":
|
|
241
|
+
case "09n":
|
|
242
|
+
return "drop-rain-3";
|
|
243
|
+
case "10d":
|
|
244
|
+
case "10n":
|
|
245
|
+
return "drop-rain-1";
|
|
246
|
+
case "11d":
|
|
247
|
+
case "11n":
|
|
248
|
+
return "drop-rain-thunder";
|
|
249
|
+
case "13d":
|
|
250
|
+
case "13n":
|
|
251
|
+
return "drop-snow";
|
|
252
|
+
case "50d":
|
|
253
|
+
case "50n":
|
|
254
|
+
return "sky-4";
|
|
255
|
+
default:
|
|
256
|
+
return "sky-1";
|
|
257
|
+
}
|
|
258
|
+
};
|
|
259
|
+
|
|
260
|
+
const getLocalDateKey = (date: Date): string => {
|
|
261
|
+
const month = String(date.getMonth() + 1).padStart(2, "0");
|
|
262
|
+
const day = String(date.getDate()).padStart(2, "0");
|
|
263
|
+
|
|
264
|
+
return `${date.getFullYear()}-${month}-${day}`;
|
|
265
|
+
};
|
|
266
|
+
|
|
267
|
+
const getForecastItemDateKey = (item: OWM_Res_Weather_Forecast_Item): string =>
|
|
268
|
+
item.dt_txt?.slice(0, 10) || getLocalDateKey(new Date(item.dt * 1000));
|
|
269
|
+
|
|
270
|
+
const toOpenWeatherMapNextDay = (
|
|
271
|
+
items: OWM_Res_Weather_Forecast_Item[],
|
|
272
|
+
): API_Res_WeatherKoreaNextDays | undefined => {
|
|
273
|
+
if (items.length === 0) return undefined;
|
|
274
|
+
|
|
275
|
+
const conditionItem =
|
|
276
|
+
items.find(item => item.dt_txt?.includes("12:00")) ||
|
|
277
|
+
items[Math.floor(items.length / 2)];
|
|
278
|
+
const temperatures = items.flatMap(item => [
|
|
279
|
+
item.main.temp_min,
|
|
280
|
+
item.main.temp_max,
|
|
281
|
+
item.main.temp,
|
|
282
|
+
]);
|
|
283
|
+
|
|
284
|
+
return {
|
|
285
|
+
sky: null,
|
|
286
|
+
drop: null,
|
|
287
|
+
rainAmount: null,
|
|
288
|
+
snowAmount: null,
|
|
289
|
+
windSpeed: null,
|
|
290
|
+
condition: getOpenWeatherMapConditionCode(
|
|
291
|
+
conditionItem?.weather?.[0]?.icon,
|
|
292
|
+
),
|
|
293
|
+
conditionName: conditionItem?.weather?.[0]?.description || null,
|
|
294
|
+
max_temperature:
|
|
295
|
+
temperatures.length > 0 ? Math.round(Math.max(...temperatures)) : null,
|
|
296
|
+
min_temperature:
|
|
297
|
+
temperatures.length > 0 ? Math.round(Math.min(...temperatures)) : null,
|
|
298
|
+
};
|
|
299
|
+
};
|
|
300
|
+
|
|
301
|
+
/**
|
|
302
|
+
* 날씨 도구; OpenWeatherMap 예보 응답을 page-header next days 형태로 변환
|
|
303
|
+
* @param {OWM_Res_Weather_Forecast} [forecast] OpenWeatherMap 예보 응답
|
|
304
|
+
* @return {{ day_1?: API_Res_WeatherKoreaNextDays; day_2?: API_Res_WeatherKoreaNextDays }} 내일/모레 예보
|
|
305
|
+
*/
|
|
306
|
+
export const getOpenWeatherMapNextDays = (
|
|
307
|
+
forecast?: OWM_Res_Weather_Forecast,
|
|
308
|
+
): {
|
|
309
|
+
day_1?: API_Res_WeatherKoreaNextDays;
|
|
310
|
+
day_2?: API_Res_WeatherKoreaNextDays;
|
|
311
|
+
} => {
|
|
312
|
+
if (!Array.isArray(forecast?.list)) return {};
|
|
313
|
+
|
|
314
|
+
const todayKey = getLocalDateKey(new Date());
|
|
315
|
+
const grouped = forecast.list.reduce<
|
|
316
|
+
Record<string, OWM_Res_Weather_Forecast_Item[]>
|
|
317
|
+
>((days, item) => {
|
|
318
|
+
const dateKey = getForecastItemDateKey(item);
|
|
319
|
+
if (dateKey === todayKey) return days;
|
|
320
|
+
|
|
321
|
+
days[dateKey] = [...(days[dateKey] || []), item];
|
|
322
|
+
return days;
|
|
323
|
+
}, {});
|
|
324
|
+
const [day1Key, day2Key] = Object.keys(grouped).sort();
|
|
325
|
+
|
|
326
|
+
return {
|
|
327
|
+
day_1: day1Key ? toOpenWeatherMapNextDay(grouped[day1Key]) : undefined,
|
|
328
|
+
day_2: day2Key ? toOpenWeatherMapNextDay(grouped[day2Key]) : undefined,
|
|
329
|
+
};
|
|
330
|
+
};
|
|
331
|
+
|
|
220
332
|
export function now(
|
|
221
333
|
outputResponse: API_Res_WeatherKoreaNow,
|
|
222
334
|
apiResponse: KMA_Res_WeatherNow,
|