Showing
3 changed files
with
157 additions
and
0 deletions
... | @@ -2,6 +2,7 @@ import './App.css'; | ... | @@ -2,6 +2,7 @@ import './App.css'; |
2 | import RegisterPage from './component/views/RegisterPage/RegisterPage'; | 2 | import RegisterPage from './component/views/RegisterPage/RegisterPage'; |
3 | import LoginPage from './component/views/LoginPage/LoginPage'; | 3 | import LoginPage from './component/views/LoginPage/LoginPage'; |
4 | import MainPage from './component/views/MainPage/MainPage'; | 4 | import MainPage from './component/views/MainPage/MainPage'; |
5 | +import SelectPage from './component/views/SelectPage/SelectPage'; | ||
5 | import { Route, Routes } from 'react-router-dom'; | 6 | import { Route, Routes } from 'react-router-dom'; |
6 | 7 | ||
7 | function App() { | 8 | function App() { |
... | @@ -11,6 +12,7 @@ function App() { | ... | @@ -11,6 +12,7 @@ function App() { |
11 | <Route exact path = "/login" element = {<LoginPage/>}/> | 12 | <Route exact path = "/login" element = {<LoginPage/>}/> |
12 | <Route exact path = "/register" element = {<RegisterPage/>}/> | 13 | <Route exact path = "/register" element = {<RegisterPage/>}/> |
13 | <Route exact path = "/main" element = {<MainPage/>}/> | 14 | <Route exact path = "/main" element = {<MainPage/>}/> |
15 | + <Route exact path = "/select" element = {<SelectPage/>}/> | ||
14 | </Routes> | 16 | </Routes> |
15 | </div> | 17 | </div> |
16 | ); | 18 | ); | ... | ... |
1 | +import React, { useCallback, useState } from "react"; | ||
2 | +import "../style/SelectPage.scss" | ||
3 | + | ||
4 | +function SelectPage(props) { | ||
5 | + | ||
6 | + const [Time, setTime] = useState("00:00:00"); | ||
7 | + | ||
8 | + const currentTime = () => { | ||
9 | + const date = new Date(); | ||
10 | + const hours = String(date.getHours()).padStart(2, "0"); | ||
11 | + const minutes = String(date.getMinutes()).padStart(2, "0"); | ||
12 | + const seconds = String(date.getSeconds()).padStart(2, "0"); | ||
13 | + setTime(hours+":"+minutes+":"+seconds); | ||
14 | + } | ||
15 | + | ||
16 | + const startTimer = () => { | ||
17 | + setInterval(currentTime, 1000) | ||
18 | + } | ||
19 | + | ||
20 | + startTimer() | ||
21 | + | ||
22 | + const location = useCallback((event) => { //위치 | ||
23 | + }); | ||
24 | + | ||
25 | + const today_date = useCallback((event) => { //오늘 일자 | ||
26 | + }); | ||
27 | + | ||
28 | + const today_weather = useCallback((event) => { //오늘 날씨 | ||
29 | + }); | ||
30 | + | ||
31 | + const today_curtemp = useCallback((event) => { //오늘 현재 온도 | ||
32 | + }); | ||
33 | + | ||
34 | + const today_maxtemp = useCallback((event) => { //오늘 최고 온도 | ||
35 | + }); | ||
36 | + | ||
37 | + const today_mintemp = useCallback((event) => { //오늘 최저 온도 | ||
38 | + }); | ||
39 | + | ||
40 | + const tomorrow_date = useCallback((event) => { //내일 일자 | ||
41 | + }); | ||
42 | + | ||
43 | + const tomorrow_weather = useCallback((event) => { //내일 날씨 | ||
44 | + }); | ||
45 | + | ||
46 | + const tomorrow_curtemp = useCallback((event) => { //내일 현재 온도 | ||
47 | + }); | ||
48 | + | ||
49 | + const tomorrow_maxtemp = useCallback((event) => { //내일 최고 온도 | ||
50 | + }); | ||
51 | + | ||
52 | + const tomorrow_mintemp = useCallback((event) => { //내일 최저 온도 | ||
53 | + }); | ||
54 | + | ||
55 | + | ||
56 | + return ( | ||
57 | + <> | ||
58 | + <dir id = "header"> | ||
59 | + <dir className="clock"> | ||
60 | + <h1 id="clock">{Time}</h1> | ||
61 | + </dir> | ||
62 | + <dir className="title"> | ||
63 | + <h1>Weather_Briefing</h1> | ||
64 | + </dir> | ||
65 | + <dir className="Login-Register"> | ||
66 | + <button type="button" onclick="location.href='http://localhost:3000/login';">Login</button> | ||
67 | + <button type="button" onclick="location.href='http://localhost:3000/register';">Register</button> | ||
68 | + </dir> | ||
69 | + </dir> | ||
70 | + | ||
71 | + <div id = "body"> | ||
72 | + <dir className="date"> | ||
73 | + <p>경기도 용인시 서천구</p> | ||
74 | + </dir> | ||
75 | + <dir className="today_weather"> | ||
76 | + <dir className="days"> | ||
77 | + <h1 id="today">오늘의 날씨</h1> | ||
78 | + <h2 id="day">2022년 5월 12일</h2> | ||
79 | + </dir> | ||
80 | + <dir className="weather"> | ||
81 | + <h1 id="present_do">14도</h1> | ||
82 | + <p id="maxmin_do">최고: 22도 ㅣ 최저: 7도</p> | ||
83 | + </dir> | ||
84 | + </dir> | ||
85 | + <dir className="tomorrow_weather"> | ||
86 | + <dir className="days"> | ||
87 | + <h1 id="today">내일의 날씨</h1> | ||
88 | + <h2 id="day">2022년 5월 13일</h2> | ||
89 | + </dir> | ||
90 | + <dir className="weather"> | ||
91 | + <h1 id="present_do">50도</h1> | ||
92 | + <p id="maxmin_do">최고: 13도 ㅣ 최저: 2도</p> | ||
93 | + </dir> | ||
94 | + </dir> | ||
95 | + </div> | ||
96 | + | ||
97 | + <dir id = "footer"> | ||
98 | + <dir className="logo"> | ||
99 | + <h1>logo</h1> | ||
100 | + </dir> | ||
101 | + <dir className="info"> | ||
102 | + <p>경희대학교</p> | ||
103 | + <p>컴퓨터공학과 김건희ㅣ오석진ㅣ손수민</p> | ||
104 | + </dir> | ||
105 | + </dir> | ||
106 | + </> | ||
107 | + ); | ||
108 | +} | ||
109 | + | ||
110 | +export default SelectPage; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | +#body { | ||
2 | + display: flex; | ||
3 | + justify-content: center; | ||
4 | + align-items: center; | ||
5 | + flex-wrap: wrap; | ||
6 | + flex-direction: column; | ||
7 | + border-top: 2px solid; | ||
8 | + border-bottom: 2px solid; | ||
9 | + .date { | ||
10 | + display: flex; | ||
11 | + justify-content: center; | ||
12 | + align-items: center; | ||
13 | + margin-top: 150px; | ||
14 | + font-size: 30px; | ||
15 | + } | ||
16 | + .today_weather { | ||
17 | + display: flex; | ||
18 | + justify-content: center; | ||
19 | + align-items: center; | ||
20 | + border: 2px solid; | ||
21 | + width: 40%; | ||
22 | + margin-top: 30px; | ||
23 | + margin-bottom: 20px; | ||
24 | + } | ||
25 | + .tomorrow_weather { | ||
26 | + display: flex; | ||
27 | + justify-content: center; | ||
28 | + align-items: center; | ||
29 | + border: 2px solid; | ||
30 | + width: 40%; | ||
31 | + margin-top: 30px; | ||
32 | + margin-bottom: 120px; | ||
33 | + } | ||
34 | + .days { | ||
35 | + display: flex; | ||
36 | + justify-content: center; | ||
37 | + align-items: center; | ||
38 | + flex-wrap: wrap; | ||
39 | + flex-direction: column; | ||
40 | + margin-top: 25px; | ||
41 | + margin-bottom: 25px; | ||
42 | + margin-left: 15px; | ||
43 | + margin-right: 200px; | ||
44 | + } | ||
45 | + } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or login to post a comment