손수민

[UPDATE] SelectPage Files

......@@ -2,6 +2,7 @@ import './App.css';
import RegisterPage from './component/views/RegisterPage/RegisterPage';
import LoginPage from './component/views/LoginPage/LoginPage';
import MainPage from './component/views/MainPage/MainPage';
import SelectPage from './component/views/SelectPage/SelectPage';
import { Route, Routes } from 'react-router-dom';
function App() {
......@@ -11,6 +12,7 @@ function App() {
<Route exact path = "/login" element = {<LoginPage/>}/>
<Route exact path = "/register" element = {<RegisterPage/>}/>
<Route exact path = "/main" element = {<MainPage/>}/>
<Route exact path = "/select" element = {<SelectPage/>}/>
</Routes>
</div>
);
......
import React, { useCallback, useState } from "react";
import "../style/SelectPage.scss"
function SelectPage(props) {
const [Time, setTime] = useState("00:00:00");
const currentTime = () => {
const date = new Date();
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
setTime(hours+":"+minutes+":"+seconds);
}
const startTimer = () => {
setInterval(currentTime, 1000)
}
startTimer()
const location = useCallback((event) => { //위치
});
const today_date = useCallback((event) => { //오늘 일자
});
const today_weather = useCallback((event) => { //오늘 날씨
});
const today_curtemp = useCallback((event) => { //오늘 현재 온도
});
const today_maxtemp = useCallback((event) => { //오늘 최고 온도
});
const today_mintemp = useCallback((event) => { //오늘 최저 온도
});
const tomorrow_date = useCallback((event) => { //내일 일자
});
const tomorrow_weather = useCallback((event) => { //내일 날씨
});
const tomorrow_curtemp = useCallback((event) => { //내일 현재 온도
});
const tomorrow_maxtemp = useCallback((event) => { //내일 최고 온도
});
const tomorrow_mintemp = useCallback((event) => { //내일 최저 온도
});
return (
<>
<dir id = "header">
<dir className="clock">
<h1 id="clock">{Time}</h1>
</dir>
<dir className="title">
<h1>Weather_Briefing</h1>
</dir>
<dir className="Login-Register">
<button type="button" onclick="location.href='http://localhost:3000/login';">Login</button>
<button type="button" onclick="location.href='http://localhost:3000/register';">Register</button>
</dir>
</dir>
<div id = "body">
<dir className="date">
<p>경기도 용인시 서천구</p>
</dir>
<dir className="today_weather">
<dir className="days">
<h1 id="today">오늘의 날씨</h1>
<h2 id="day">2022 5 12</h2>
</dir>
<dir className="weather">
<h1 id="present_do">14</h1>
<p id="maxmin_do">최고: 22 최저: 7</p>
</dir>
</dir>
<dir className="tomorrow_weather">
<dir className="days">
<h1 id="today">내일의 날씨</h1>
<h2 id="day">2022 5 13</h2>
</dir>
<dir className="weather">
<h1 id="present_do">50</h1>
<p id="maxmin_do">최고: 13 최저: 2</p>
</dir>
</dir>
</div>
<dir id = "footer">
<dir className="logo">
<h1>logo</h1>
</dir>
<dir className="info">
<p>경희대학교</p>
<p>컴퓨터공학과 김건희ㅣ오석진ㅣ손수민</p>
</dir>
</dir>
</>
);
}
export default SelectPage;
\ No newline at end of file
#body {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
border-top: 2px solid;
border-bottom: 2px solid;
.date {
display: flex;
justify-content: center;
align-items: center;
margin-top: 150px;
font-size: 30px;
}
.today_weather {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid;
width: 40%;
margin-top: 30px;
margin-bottom: 20px;
}
.tomorrow_weather {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid;
width: 40%;
margin-top: 30px;
margin-bottom: 120px;
}
.days {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 15px;
margin-right: 200px;
}
}
\ No newline at end of file