김건희 / OSSW_Weather_Briefing

Go to a project
Toggle navigation Toggle navigation pinning
김건희
5b12fb22 1 parent bf06ec08

[Update] Connect Files

Inline Side-by-side
Showing 4 changed files with 39 additions and 46 deletions
...@@ -171,9 +171,6 @@ function MainPage(props) { ...@@ -171,9 +171,6 @@ function MainPage(props) {
171 return ( 171 return (
172 <> 172 <>
173 <dir id = "header"> 173 <dir id = "header">
174 - <dir className="header_clock">
175 - <h1 id="clock">{Time}</h1>
176 - </dir>
177 <dir className="header_title"> 174 <dir className="header_title">
178 <h1>Weather_Briefing</h1> 175 <h1>Weather_Briefing</h1>
179 </dir> 176 </dir>
......
...@@ -93,16 +93,6 @@ function RecommandPage(props) { ...@@ -93,16 +93,6 @@ function RecommandPage(props) {
93 </dir> 93 </dir>
94 </dir> 94 </dir>
95 </div> 95 </div>
96 -
97 - <dir id = "footer">
98 - <dir className="footer_logo">
99 - <h1>logo</h1>
100 - </dir>
101 - <dir className="footer_info">
102 - <p>경희대학교</p>
103 - <p>컴퓨터공학과 김건희ㅣ오석진ㅣ손수민</p>
104 - </dir>
105 - </dir>
106 </> 96 </>
107 ); 97 );
108 }; 98 };
......
...@@ -3,16 +3,12 @@ import { useDispatch, useSelector } from "react-redux"; ...@@ -3,16 +3,12 @@ import { useDispatch, useSelector } from "react-redux";
3 import { useNavigate } from "react-router-dom"; 3 import { useNavigate } from "react-router-dom";
4 import { recommend } from "../../../modules/clothes"; 4 import { recommend } from "../../../modules/clothes";
5 import "../style/WeatherPage.scss" 5 import "../style/WeatherPage.scss"
6 -
7 function WeatherPage(props) { 6 function WeatherPage(props) {
8 -
9 const dispatch = useDispatch(); 7 const dispatch = useDispatch();
10 const navigate = useNavigate(); 8 const navigate = useNavigate();
11 -
12 const user = useSelector((state) => state.user.loginData); 9 const user = useSelector((state) => state.user.loginData);
13 const todayWeatherResult = useSelector((state) => state.weather.todayInformation); 10 const todayWeatherResult = useSelector((state) => state.weather.todayInformation);
14 const tommorrowWeatherResult = useSelector((state) => state.weather.tommorrowInformation); 11 const tommorrowWeatherResult = useSelector((state) => state.weather.tommorrowInformation);
15 -
16 const today = new Date(); 12 const today = new Date();
17 const detailWeather = []; 13 const detailWeather = [];
18 let currentHour; 14 let currentHour;
...@@ -20,7 +16,6 @@ function WeatherPage(props) { ...@@ -20,7 +16,6 @@ function WeatherPage(props) {
20 const today_year = today.getFullYear(); 16 const today_year = today.getFullYear();
21 const today_month = today.getMonth(); 17 const today_month = today.getMonth();
22 const today_date = today.getDate(); 18 const today_date = today.getDate();
23 -
24 const [todayHighTemperature, setTodayHighTemperature] = useState(-100); 19 const [todayHighTemperature, setTodayHighTemperature] = useState(-100);
25 const [todayLowTemperature, setTodayLowTemperature] = useState(100); 20 const [todayLowTemperature, setTodayLowTemperature] = useState(100);
26 const [todayWeatherSymbol, setTodayWeatherSymbol] = useState('☀️'); 21 const [todayWeatherSymbol, setTodayWeatherSymbol] = useState('☀️');
...@@ -31,13 +26,10 @@ function WeatherPage(props) { ...@@ -31,13 +26,10 @@ function WeatherPage(props) {
31 const [tommorrowWeatherSymbol, setTommorrowWeatherSymbol] = useState(''); 26 const [tommorrowWeatherSymbol, setTommorrowWeatherSymbol] = useState('');
32 const [todayWeatherLevel, setTodayWeatherLevel] = useState(''); 27 const [todayWeatherLevel, setTodayWeatherLevel] = useState('');
33 const [userGender, setUserGender] = useState(''); 28 const [userGender, setUserGender] = useState('');
34 -
35 const [cityAdd, setCityAdd] = useState(''); 29 const [cityAdd, setCityAdd] = useState('');
36 const [guAdd, setGuAdd] = useState(''); 30 const [guAdd, setGuAdd] = useState('');
37 const [dongAdd, setDongAdd] = useState(''); 31 const [dongAdd, setDongAdd] = useState('');
38 -
39 const [Time, setTime] = useState("00:00:00"); 32 const [Time, setTime] = useState("00:00:00");
40 -
41 const currentTime = () => { 33 const currentTime = () => {
42 const date = new Date(); 34 const date = new Date();
43 const hours = String(date.getHours()).padStart(2, "0"); 35 const hours = String(date.getHours()).padStart(2, "0");
...@@ -53,9 +45,7 @@ function WeatherPage(props) { ...@@ -53,9 +45,7 @@ function WeatherPage(props) {
53 startTimer() 45 startTimer()
54 46
55 useEffect(() => { 47 useEffect(() => {
56 -
57 todayWeatherResult.then((result) => { 48 todayWeatherResult.then((result) => {
58 -
59 let highTemperature = -100; 49 let highTemperature = -100;
60 let lowTemperature = 100; 50 let lowTemperature = 100;
61 let symbol = ''; 51 let symbol = '';
...@@ -68,11 +58,9 @@ function WeatherPage(props) { ...@@ -68,11 +58,9 @@ function WeatherPage(props) {
68 setDongAdd(result[24].address3); 58 setDongAdd(result[24].address3);
69 59
70 for (let i = 0; i<24; i++) { 60 for (let i = 0; i<24; i++) {
71 -
72 if (i === 13) { 61 if (i === 13) {
73 setTodayWeatherLevel(result[i].weather); 62 setTodayWeatherLevel(result[i].weather);
74 } 63 }
75 -
76 // 세부 시간 정보 64 // 세부 시간 정보
77 if (i > Number(currentHour)) { 65 if (i > Number(currentHour)) {
78 if (result[i].rainPer >= 50) { 66 if (result[i].rainPer >= 50) {
...@@ -85,16 +73,13 @@ function WeatherPage(props) { ...@@ -85,16 +73,13 @@ function WeatherPage(props) {
85 else { 73 else {
86 symbol = '☀️'; 74 symbol = '☀️';
87 } 75 }
88 -
89 const tempData = { 76 const tempData = {
90 time : result[i].time, 77 time : result[i].time,
91 temperature : result[i].temperature, 78 temperature : result[i].temperature,
92 symbol : symbol, 79 symbol : symbol,
93 } 80 }
94 -
95 detailWeather.push(tempData); 81 detailWeather.push(tempData);
96 } 82 }
97 -
98 // 현재 시간 정보 다루는 부분 83 // 현재 시간 정보 다루는 부분
99 if (i === Number(currentHour)) { 84 if (i === Number(currentHour)) {
100 if (result[i].rainPer >= 50) { 85 if (result[i].rainPer >= 50) {
...@@ -109,17 +94,14 @@ function WeatherPage(props) { ...@@ -109,17 +94,14 @@ function WeatherPage(props) {
109 94
110 setNowTemperature(result[i].temperature); 95 setNowTemperature(result[i].temperature);
111 } 96 }
112 -
113 // 하루 온도 정보 다루는 부분 97 // 하루 온도 정보 다루는 부분
114 if (result[i].temperature < lowTemperature) { 98 if (result[i].temperature < lowTemperature) {
115 lowTemperature = result[i].temperature; 99 lowTemperature = result[i].temperature;
116 } 100 }
117 -
118 if (result[i].temperature > highTemperature) { 101 if (result[i].temperature > highTemperature) {
119 highTemperature = result[i].temperature; 102 highTemperature = result[i].temperature;
120 } 103 }
121 } 104 }
122 -
123 setTodayHighTemperature(highTemperature); 105 setTodayHighTemperature(highTemperature);
124 setTodayLowTemperature(lowTemperature); 106 setTodayLowTemperature(lowTemperature);
125 }) 107 })
...@@ -139,20 +121,16 @@ function WeatherPage(props) { ...@@ -139,20 +121,16 @@ function WeatherPage(props) {
139 if (result[i].rainPer >= 50) { 121 if (result[i].rainPer >= 50) {
140 symbol = '🌧️'; 122 symbol = '🌧️';
141 } 123 }
142 -
143 // 내일 온도 정보 다루는 부분 124 // 내일 온도 정보 다루는 부분
144 if (result[i].temperature < lowTemperature) { 125 if (result[i].temperature < lowTemperature) {
145 lowTemperature = result[i].temperature; 126 lowTemperature = result[i].temperature;
146 } 127 }
147 -
148 if (result[i].temperature > highTemperature) { 128 if (result[i].temperature > highTemperature) {
149 highTemperature = result[i].temperature; 129 highTemperature = result[i].temperature;
150 } 130 }
151 -
152 setTommorrowHighTemperature(highTemperature); 131 setTommorrowHighTemperature(highTemperature);
153 setTommorrowLowTemperature(lowTemperature); 132 setTommorrowLowTemperature(lowTemperature);
154 setTommorrowWeatherSymbol(symbol); 133 setTommorrowWeatherSymbol(symbol);
155 -
156 } 134 }
157 }) 135 })
158 }, [tommorrowWeatherResult]) 136 }, [tommorrowWeatherResult])
...@@ -165,22 +143,19 @@ function WeatherPage(props) { ...@@ -165,22 +143,19 @@ function WeatherPage(props) {
165 143
166 const onSubmitHandler = useCallback((event) => { 144 const onSubmitHandler = useCallback((event) => {
167 event.preventDefault(); //체크박스 미리 클릭 방지 145 event.preventDefault(); //체크박스 미리 클릭 방지
168 -
169 let todayWeather = ''; 146 let todayWeather = '';
170 let isRain = 0; 147 let isRain = 0;
171 -
172 let tempData = []; 148 let tempData = [];
173 149
174 if (todayWeatherSymbol === '🌧️') { 150 if (todayWeatherSymbol === '🌧️') {
175 isRain = 1; 151 isRain = 1;
176 } 152 }
177 - tempData.push(isRain);
178 153
154 + tempData.push(isRain);
179 console.log(todayWeatherLevel); 155 console.log(todayWeatherLevel);
180 console.log(userGender); 156 console.log(userGender);
181 console.log(isRain); 157 console.log(isRain);
182 158
183 - // 추천 페이지로 보낼 데이터
184 const sendData = { 159 const sendData = {
185 gender : 0, 160 gender : 0,
186 weather : "1", 161 weather : "1",
...@@ -188,18 +163,15 @@ function WeatherPage(props) { ...@@ -188,18 +163,15 @@ function WeatherPage(props) {
188 } 163 }
189 164
190 console.log(sendData); 165 console.log(sendData);
191 -
192 dispatch(recommend(sendData)) 166 dispatch(recommend(sendData))
167 + navigate('/recommand')
193 168
194 }, [todayWeatherResult, user]); 169 }, [todayWeatherResult, user]);
195 170
196 return ( 171 return (
197 <> 172 <>
198 <dir id = "header"> 173 <dir id = "header">
199 - <dir className="clock"> 174 + <dir className="header_title">
200 - <h1 id="clock">{Time}</h1>
201 - </dir>
202 - <dir className="title">
203 <h1>Weather_Briefing</h1> 175 <h1>Weather_Briefing</h1>
204 </dir> 176 </dir>
205 <dir className="Login-Register"> 177 <dir className="Login-Register">
...@@ -207,7 +179,6 @@ function WeatherPage(props) { ...@@ -207,7 +179,6 @@ function WeatherPage(props) {
207 <button type="button" >Register</button> 179 <button type="button" >Register</button>
208 </dir> 180 </dir>
209 </dir> 181 </dir>
210 -
211 <div id = "body"> 182 <div id = "body">
212 <div className="address"> 183 <div className="address">
213 <p>{cityAdd} {guAdd} {dongAdd}</p> 184 <p>{cityAdd} {guAdd} {dongAdd}</p>
...@@ -258,5 +229,4 @@ function WeatherPage(props) { ...@@ -258,5 +229,4 @@ function WeatherPage(props) {
258 </> 229 </>
259 ); 230 );
260 } 231 }
261 -
262 export default WeatherPage; 232 export default WeatherPage;
...\ No newline at end of file ...\ No newline at end of file
......
1 +#header {
2 + display: flex;
3 + position: fixed;
4 + justify-content: center;
5 + align-items: center;
6 + height: 15%;
7 + width: 100%;
8 + border-top: 2px solid;
9 + border-bottom: 2px solid;
10 +
11 + .header_title {
12 + display: flex;
13 + justify-content: center;
14 + align-items: center;
15 + margin-left: 300px;
16 + margin-right: 300px;
17 + h1 {
18 + font-size: 50px;
19 + font-family: 'Times New Roman', Times, serif;
20 + color: rgb(0, 0, 0);
21 + }
22 + }
23 + .header_choice_box {
24 + display: flex;
25 + justify-content: right;
26 + align-items: right;
27 + margin-right: 10x;
28 + }
29 + button {
30 + width: 70px;
31 + height: 25px;
32 + font-size: 15px;
33 + font-weight: bold;
34 + cursor: pointer;
35 + }
36 + }
1 #body { 37 #body {
2 display: flex; 38 display: flex;
3 justify-content: center; 39 justify-content: center;
......