김건희 / OSSW_Weather_Briefing

Go to a project
Toggle navigation Toggle navigation pinning
김건희
4249ba15 1 parent a1cb903a

[Add] Weather Files

Inline Side-by-side
Showing 10 changed files with 427 additions and 48 deletions
......@@ -3,6 +3,7 @@ import RegisterPage from './component/views/RegisterPage/RegisterPage';
import LoginPage from './component/views/LoginPage/LoginPage';
import MainPage from './component/views/MainPage/MainPage';
import { Route, Routes } from 'react-router-dom';
import WeatherPage from './component/views/WeatherPage/WeatherPage';
function App() {
return (
......@@ -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 = "/weather" element = {<WeatherPage/>}/>
</Routes>
</div>
);
......
import React, { useCallback, useState } from "react";
import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { login } from "../../../modules/user";
......@@ -22,6 +22,7 @@ function LoginPage(props) {
const idRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/;
const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-?])(?=.*[0-9]).{8,25}$/;
useEffect(() => {
if (checkLogin === true) {
loginResult.then((result) => {
if (result.loginSuccess === true) {
......@@ -33,6 +34,7 @@ function LoginPage(props) {
}
})
}
}, [loginResult])
const onIdHandler = useCallback((event) => {
setId(event.currentTarget.value);
......
import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { address, coordinate, information } from "../../../modules/weather";
import { todayInformation, tommorrowInformation } from "../../../modules/weather";
import "../style/MainPage.scss"
function MainPage(props) {
......@@ -19,9 +19,8 @@ function MainPage(props) {
const [GuAdd, setGuAdd] = useState("");
const [DongAdd, setDongAdd] = useState("");
const [checkAddress, setCheckAddress] = useState(false);
const [checkNameError, setCheckNameError] = useState(false);
const [checkSexError, setCheckSexError] = useState(true);
// const [checkNameError, setCheckNameError] = useState(false);
// const [checkSexError, setCheckSexError] = useState(true);
const [checkCityAddError, setCheckCityAddError] = useState(true);
const [checkGuAddError, setCheckGuAddError] = useState(true);
const [checkDongAddError, setCheckDongAddError] = useState(true);
......@@ -34,13 +33,6 @@ function MainPage(props) {
const [Time, setTime] = useState("00:00:00");
useEffect(() => {
user.then((result) => {
setName(result.logData.name);
setSex(result.logData.gender);
})
}, [user])
const currentTime = () => {
const date = new Date();
const hours = String(date.getHours()).padStart(2, "0");
......@@ -55,6 +47,14 @@ function MainPage(props) {
startTimer()
useEffect(() => {
user.then((result) => {
console.log(result);
setName(result.logData.name);
setSex(result.logData.gender);
})
}, [user])
// 시/군/구 주소
useEffect(() => {
const tempList = [];
......@@ -92,23 +92,6 @@ function MainPage(props) {
});
}, [GuAdd]);
const onNameHandler = useCallback((event) => {
setName(event.currentTarget.value);
// 이름 유효성 검사
if (event.currentTarget.value.length < 2) {
setCheckNameError(true);
}
else {
setCheckNameError(false);
}
}, [checkNameError]);
const onSexHandler = useCallback((event) => {
setSex(event.currentTarget.value);
setCheckSexError(false);
}, [checkSexError]);
const onCityAddhandler = useCallback((event) => {
setCityAdd(event.currentTarget.value);
......@@ -146,13 +129,7 @@ function MainPage(props) {
const onSubmitHandler = useCallback((event) => { //제출 전 오류 확인 함수
event.preventDefault(); //체크박스 미리 클릭 방지
if (checkNameError || Name === "") {
setCheckSubmitError(true);
}
else if (checkSexError || Sex === "") {
setCheckSubmitError(true);
}
else if (checkCityAddError || CityAdd === "") {
if (checkCityAddError || CityAdd === "") {
setCheckSubmitError(true);
}
else if (checkGuAddError || GuAdd === "") {
......@@ -171,20 +148,25 @@ function MainPage(props) {
for (let i = 0; i<result.length; i++) {
if (result[i].address1 === CityAdd && result[i].address2 === GuAdd && result[i].address3 === DongAdd) {
console.log(CityAdd, GuAdd, DongAdd);
const dotData = {
address1 : CityAdd,
address2 : GuAdd,
address3 : DongAdd,
dotX : result[i].dotX,
dotY : result[i].dotY,
}
dispatch(information(dotData));
dispatch(todayInformation(dotData));
dispatch(tommorrowInformation(dotData));
navigate('/weather');
break;
}
}
})
}
}, [checkNameError, checkSexError, checkCityAddError, checkDongAddError, checkGuAddError, checkSubmitError, Name, Sex, CityAdd, GuAdd, DongAdd]);
}, [checkCityAddError, checkDongAddError, checkGuAddError, checkSubmitError, Name, Sex, CityAdd, GuAdd, DongAdd]);
return (
<>
......@@ -204,34 +186,28 @@ function MainPage(props) {
<div id = "body">
<div className="info-box">
<p className="info">정보를 입력해주세요.</p>
<div className="main-input-area">
<div className="main-input-area" readOnly>
<li>이름</li>
<input
placeholder={Name}
type="text"
value={Name}
onChange={onNameHandler}
/>
</div>
<div className="main-check-variable">
{checkNameError && <div style={{color : 'red'}}>이름을 두글자 이상 입력해 주세요.</div>}
</div>
<hr/>
<div className="main-input-area">
<div className="main-input-area" readOnly>
<li>성별</li>
<p>남자</p>
<input
type="radio" //라디오 버튼 타입
value = "0"
checked = {Sex === "0"}
onChange={onSexHandler}
/>
<p>여자</p>
<input
type="radio"
value = "1"
checked = {Sex === "1"}
onChange={onSexHandler}
/>
</div>
<hr/>
......
......@@ -27,6 +27,7 @@ function RegisterPage(props) {
const idRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/;
const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-?])(?=.*[0-9]).{8,25}$/;
useEffect(() => {
if (checkRegister === true) {
registerResult.then((result) => {
if (result.registerSuccess === '1') {
......@@ -41,6 +42,7 @@ function RegisterPage(props) {
}
})
}
}, [registerResult])
const onIdHandler = useCallback((event) => {
setId(event.currentTarget.value);
......
import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { recommend } from "../../../modules/clothes";
import "../style/WeatherPage.scss"
function WeatherPage(props) {
const dispatch = useDispatch();
const navigate = useNavigate();
const user = useSelector((state) => state.user.loginData);
const todayWeatherResult = useSelector((state) => state.weather.todayInformation);
const tommorrowWeatherResult = useSelector((state) => state.weather.tommorrowInformation);
const today = new Date();
const detailWeather = [];
let currentHour;
const today_year = today.getFullYear();
const today_month = today.getMonth();
const today_date = today.getDate();
const [todayHighTemperature, setTodayHighTemperature] = useState(-100);
const [todayLowTemperature, setTodayLowTemperature] = useState(100);
const [todayWeatherSymbol, setTodayWeatherSymbol] = useState('☀️');
const [nowWeatherSymbol, setNowWeatherSymbol] = useState('');
const [nowTemperature, setNowTemperature] = useState("");
const [tommorrowHighTemperature, setTommorrowHighTemperature] = useState(-100);
const [tommorrowLowTemperature, setTommorrowLowTemperature] = useState(100);
const [tommorrowWeatherSymbol, setTommorrowWeatherSymbol] = useState('');
const [todayWeatherLevel, setTodayWeatherLevel] = useState('');
const [userGender, setUserGender] = useState('');
const [cityAdd, setCityAdd] = useState('');
const [guAdd, setGuAdd] = useState('');
const [dongAdd, setDongAdd] = useState('');
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()
useEffect(() => {
todayWeatherResult.then((result) => {
let highTemperature = -100;
let lowTemperature = 100;
let symbol = '';
currentHour = Time[0] + Time[1];
// 주소 설정
setCityAdd(result[24].address1);
setGuAdd(result[24].address2);
setDongAdd(result[24].address3);
for (let i = 0; i<24; i++) {
if (i === 13) {
setTodayWeatherLevel(result[i].weather);
}
// 세부 시간 정보
if (i > Number(currentHour)) {
if (result[i].rainPer >= 50) {
symbol = '🌧️';
setTodayWeatherSymbol('🌧️');
}
else if (i > 18 || i < 6) {
symbol = '🌙';
}
else {
symbol = '☀️';
}
const tempData = {
time : result[i].time,
temperature : result[i].temperature,
symbol : symbol,
}
detailWeather.push(tempData);
}
// 현재 시간 정보 다루는 부분
if (i === Number(currentHour)) {
if (result[i].rainPer >= 50) {
setNowWeatherSymbol('🌧️');
}
else if (i >= 18 || i < 6) {
setNowWeatherSymbol('🌙');
}
else {
setNowWeatherSymbol('☀️');
}
setNowTemperature(result[i].temperature);
}
// 하루 온도 정보 다루는 부분
if (result[i].temperature < lowTemperature) {
lowTemperature = result[i].temperature;
}
if (result[i].temperature > highTemperature) {
highTemperature = result[i].temperature;
}
}
setTodayHighTemperature(highTemperature);
setTodayLowTemperature(lowTemperature);
})
}, [todayWeatherResult, Time])
// 내일의 날씨
useEffect(() => {
tommorrowWeatherResult.then((result) => {
console.log(result);
let highTemperature = -100;
let lowTemperature = 100;
let symbol = '☀️';
for (let i = 0; i < 24; i++) {
// symbol 설정
if (result[i].rainPer >= 50) {
symbol = '🌧️';
}
// 내일 온도 정보 다루는 부분
if (result[i].temperature < lowTemperature) {
lowTemperature = result[i].temperature;
}
if (result[i].temperature > highTemperature) {
highTemperature = result[i].temperature;
}
setTommorrowHighTemperature(highTemperature);
setTommorrowLowTemperature(lowTemperature);
setTommorrowWeatherSymbol(symbol);
}
})
}, [tommorrowWeatherResult])
useEffect(() => {
user.then((result) => {
setUserGender(result.logData.gender);
});
}, [user])
const onSubmitHandler = useCallback((event) => {
event.preventDefault(); //체크박스 미리 클릭 방지
let todayWeather = '';
let isRain = 0;
let tempData = [];
if (todayWeatherSymbol === '🌧️') {
isRain = 1;
}
tempData.push(isRain);
console.log(todayWeatherLevel);
console.log(userGender);
console.log(isRain);
const sendData = {
gender : 0,
weather : "1",
rain : isRain
}
console.log(sendData);
dispatch(recommend(sendData))
}, [todayWeatherResult, user]);
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" >Login</button>
<button type="button" >Register</button>
</dir>
</dir>
<div id = "body">
<div className="address">
<p>{cityAdd} {guAdd} {dongAdd}</p>
</div>
<div className="today_weather">
<div className="days">
<h1>오늘의 날씨</h1>
<h2 id="day">{today_year}년 {today_month + 1}월 {today_date}일</h2>
</div>
<div className="today_now_weather_info">
<h2>현재 온도</h2>
<h1 id="present_do">{nowWeatherSymbol} {nowTemperature}도</h1>
</div>
<div className="today_weather_info">
<h2>전체 날씨</h2>
<div className="today_whole_weather">
<h1>{todayWeatherSymbol}</h1>
<div className="today_whole_weather_temperature">
<p>최고: {todayHighTemperature}도</p>
<p>최저: {todayLowTemperature}도</p>
</div>
</div>
</div>
</div>
<div className="tommorrow_weather">
<div className="days">
<h1>내일의 날씨</h1>
<h2 id="day">{today_year}년 {today_month + 1}월 {today_date+1}일</h2>
</div>
<div className="tommorrow_weather_info">
<h2>날씨 정보</h2>
<div className="tommorrow_whole_weather">
<h1>{tommorrowWeatherSymbol}</h1>
<div className="tommorrow_temperator">
<p>최고: {tommorrowHighTemperature}도</p>
<p>최저: {tommorrowLowTemperature}도</p>
</div>
</div>
</div>
</div>
<div className="weather-btn-area" onClick={onSubmitHandler}>
<button className="submit-btn">
양식 제출
</button>
</div>
</div>
</>
);
}
export default WeatherPage;
\ 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;
.address {
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: 50%;
margin-top: 30px;
margin-bottom: 10px;
.today_now_weather_info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-right: 30px;
}
.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;
}
.today_whole_weather{
display: flex;
flex-direction: row;
}
}
.tommorrow_weather {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid;
width: 50%;
margin-top: 20px;
margin-bottom: 20px;
.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;
}
.tommorrow_weather_info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-right: 30px;
.tommorrow_whole_weather{
display: flex;
flex-direction: row;
}
}
}
.weather-btn-area {
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 10px;
button {
width: 150px;
height: 60px;
font-size: 15px;
font-weight: bold;
background-color:rgb(255, 253, 238);
cursor: pointer;
}
}
}
\ No newline at end of file
import { combineReducers } from "redux";
import user from "./user.js";
import weather from "./weather";
import clothes from "./clothes";
const rootReducer = combineReducers({
user,
weather,
clothes,
})
export default rootReducer;
\ No newline at end of file
......
import axios from "axios";
const CLOTHES_RECOMMEND = 'weather/RECOMMEND';
export function recommend() {
const req = axios.post('http://localhost:4000/api/clothes')
.then(res => res.data);
return {
type: CLOTHES_RECOMMEND,
payload: req,
}
}
export default function (state = {}, action) {
switch (action.type) {
case CLOTHES_RECOMMEND:
return { ...state, clothesRecommend: action.payload };
break;
default:
return state;
}
}
\ No newline at end of file
......@@ -3,6 +3,7 @@ import axios from 'axios';
const USER_REGISTER = 'user/REGISTER';
const USER_LOGIN = 'user/LOGIN';
const USER_LOGOUT = 'user/LOGOUT';
const USER_DATA = 'user/DATA';
export function register (dataToSubmit) {
......
......@@ -3,6 +3,7 @@ import axios from "axios";
const WEATHER_ADDRESS = 'weather/ADDRESS';
const WEATHER_COORDINATE = 'weather/COORDINATE';
const WEATHER_TODAY_INFORMATION = 'weather/TODAY_INFORMATION';
const WEATHER_TOMMORROW_INFORMATION = 'weather/TOMMORROW_INFORMATION';
export function address() {
const req = axios.post('http://localhost:4000/api/address')
......@@ -25,7 +26,7 @@ export function coordinate(dataToSubmit) {
}
};
export function information(dataToSubmit) {
export function todayInformation(dataToSubmit) {
const req = axios.post('http://localhost:4000/api/weather', dataToSubmit)
.then(res => res.data);
......@@ -36,6 +37,17 @@ export function information(dataToSubmit) {
}
};
export function tommorrowInformation(dataToSubmit) {
const req = axios.post('http://localhost:4000/api/tommorrow', dataToSubmit)
.then(res => res.data);
return {
type: WEATHER_TOMMORROW_INFORMATION,
payload: req,
}
};
export default function (state = {}, action) {
switch (action.type) {
case WEATHER_ADDRESS:
......@@ -47,6 +59,9 @@ export default function (state = {}, action) {
case WEATHER_TODAY_INFORMATION:
return { ...state, todayInformation: action.payload };
break;
case WEATHER_TOMMORROW_INFORMATION:
return { ...state, tommorrowInformation: action.payload };
break;
default:
return state;
}
......