-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
137 lines (126 loc) · 3.75 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import React, { useEffect, useState } from "react";
import {
StyleSheet,
Text,
View,
ScrollView,
Dimensions,
ActivityIndicator,
Alert,
} from "react-native";
import { StatusBar } from "expo-status-bar";
import { lineStyle } from "./style/line"; // 묶을 수 있는 것을 묶어라
import { weatherStyle } from "./style/weatherStyle";
import { DateDisplay, WeatherDisplay, WeatherDetails } from "./components";
import * as Location from "expo-location";
import { fetchWeatherData } from "./service/weaderService";
import {
getDayOfWeek,
getFormattedDate,
getFormattedTime,
} from "./Util/fomatDate";
const SCREEN_WIDTH = Dimensions.get("window").width;
interface Day {
dt_txt: string;
main: {
temp: number;
temp_max: string;
temp_min: string;
feels_like: string;
humidity: string;
};
weather: {
description: string;
}[];
pop: string;
wind: {
speed: string;
};
}
export default function App() {
const [city, setCity] = useState<string>("Loading...");
const [days, setDays] = useState<Day[]>([]);
const [ok, setOk] = useState<boolean>(true);
const [loading, setLoading] = useState<boolean>(true);
const getLocationAndWeather = async () => {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== "granted") {
Alert.alert(
"WEATHERCARD의 사용자의 날씨 데이터를 받기 위해 위치 정보 필요합니다.",
"제공 받은 날씨 정보를 통해서 사용자에게 날씨 데이터를 부여해주고 있습니다. 위치정보를 기반으로 하기 때문에 위치정보를 혀용해주세요",
[
{
text: "확인",
onPress: () => {
getLocationAndWeather();
},
},
],
{ cancelable: false }
);
return;
}
const {
coords: { latitude, longitude },
} = await Location.getCurrentPositionAsync({ accuracy: 5 });
const [{ city }]: any = await Location.reverseGeocodeAsync(
{ latitude, longitude },
{ useGoogleMaps: false }
);
setCity(city);
try {
const json = await fetchWeatherData(latitude, longitude);
setCity(json.city.name);
setDays(json.list);
} catch (error) {
console.error("Error fetching weather data:", error);
}
setLoading(false);
};
useEffect(() => {
getLocationAndWeather();
}, []);
return (
<View style={weatherStyle.container}>
<StatusBar style="dark" />
<ScrollView
horizontal={true}
style={weatherStyle.scrollView}
pagingEnabled
>
{days.length === 0 ? (
<View
style={{ ...weatherStyle.innerContainer, alignItems: "center" }}
>
<ActivityIndicator color="black" size="large" />
</View>
) : (
days.map(({ dt_txt, main, wind, weather, pop }, index) => (
<View key={index} style={weatherStyle.innerContainer}>
<View style={{ height: 80 }} />
<DateDisplay
day={getDayOfWeek(dt_txt)}
date={getFormattedDate(dt_txt)}
time={getFormattedTime(dt_txt)}
/>
<View style={lineStyle.line1}></View>
<WeatherDisplay
temperature={Math.round(main.temp)}
weather={weather[0].description}
/>
<View style={lineStyle.line1}></View>
<WeatherDetails
high={main.temp_max}
low={main.temp_min}
feel={main.feels_like}
precipitation={pop}
wind={wind.speed}
humidity={main.humidity}
/>
</View>
))
)}
</ScrollView>
</View>
);
}