김건희 / OSSW_Weather_Briefing

Go to a project
Toggle navigation Toggle navigation pinning
김건희
0ce17ed5 1 parent e0133333

[Update] Login, Register Files

Inline Side-by-side
Showing 10 changed files with 128 additions and 194 deletions
Stack trace:
Frame Function Args
000005FF340 0018006286E (001802901B2, 0018026DE3E, 0000000005E, 000005FAEA0)
000005FF340 0018004846A (00000000000, 00000000000, 7FFE00000000, 00000001000)
000005FF340 001800484A2 (00000000000, 0000000005A, 0000000005E, 00000000000)
000005FF340 001800D3E58 (00000000000, 00100000000, 0018026D9F2, 000005FBFEC)
000005FF340 0018012C857 (00000000000, 00180223E20, 00180223E10, 000005FDDE0)
000005FF340 001800488B4 (0018030F940, 000005FDDE0, 00000000000, 00000000000)
000005FF340 0018004A01F (0007FFE0384, 00000000000, 00000000000, 00000000000)
000005FF340 001800D4E98 (00000000000, 00000000000, 00000000000, 00000000000)
000005FF5E0 7FFE062E9A1D (00180040000, 00000000001, 00000000000, 000005FF528)
000005FF5E0 7FFE0633C1E7 (7FFE0630DB00, 000007F3901, 7FFE00000001, 00000000001)
000005FF5E0 7FFE0633BF7A (000007F3900, 000005FF5E0, 000007F4270, 00000070000)
000005FF5E0 7FFE0633C000 (00000000010, 00000000000, 7FFE06401A90, 000005FF678)
00000000000 7FFE063A3C2A (00000000000, 00000000000, 00000000001, 00000000000)
00000000000 7FFE06344CDB (7FFE062D0000, 00000000000, 00000347000, 00000000000)
00000000000 7FFE06344B63 (00000000000, 00000000000, 00000000000, 00000000000)
00000000000 7FFE06344B0E (00000000000, 00000000000, 00000000000, 00000000000)
End of stack trace
......@@ -10380,6 +10380,11 @@
"integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==",
"dev": true
},
"redux-promise-middleware": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/redux-promise-middleware/-/redux-promise-middleware-6.1.2.tgz",
"integrity": "sha512-ZqZu/nnSzGgwTtNbGoGVontpk7LjTOv0kigtt3CcgXI9gpq+8WlfXTXRZD0WTD5yaohRq0q2nYmJXSTjwXs83Q=="
},
"redux-thunk": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
......
......@@ -18,6 +18,7 @@
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"redux": "^4.1.2",
"redux-promise-middleware": "^6.1.2",
"redux-thunk": "^2.4.1",
"web-vitals": "^2.1.4"
},
......
......@@ -2,7 +2,6 @@ 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() {
......@@ -12,7 +11,6 @@ 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>
);
......
......@@ -2,17 +2,19 @@ import React, { useCallback, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { login } from "../../../modules/user";
import { address } from "../../../modules/weather";
import "../style/LoginPage.scss"
function LoginPage(props) {
const dispatch = useDispatch();
const navigate = useNavigate();
const loginResult = useSelector((state) => state.user.loginSuccess);
const loginResult = useSelector((state) => state.user.loginData);
const [Id, setId] = useState("");
const [Password, setPassword] = useState("");
const [checkLogin, setCheckLogin] = useState(false);
const [checkIdError, setCheckIdError] = useState(false);
const [checkPasswordError, setCheckPasswordError] = useState(false);
const [checkLoginError, setCheckLoginError] = useState(false);
......@@ -20,6 +22,18 @@ function LoginPage(props) {
const idRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/;
const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-?])(?=.*[0-9]).{8,25}$/;
if (checkLogin === true) {
loginResult.then((result) => {
if (result.loginSuccess === true) {
alert('로그인에 성공하였습니다.');
navigate('/main');
}
else {
alert('로그인에 실패하였습니다.');
}
})
}
const onIdHandler = useCallback((event) => {
setId(event.currentTarget.value);
......@@ -66,17 +80,8 @@ function LoginPage(props) {
};
dispatch(login(UserData));
loginResult.then((result) => {
console.log(result);
if (result.loginSuccess === true) {
alert('로그인 완료!');
navigate('/');
}
else {
alert('로그인 실패ㅜㅜ');
}
})
dispatch(address());
setCheckLogin(true);
}
......
import React, { useCallback, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { address } from "../../../modules/weather";
import "../style/MainPage.scss"
function MainPage(props) {
const dispatch = useDispatch();
const navigate = useNavigate();
const addressResult = useSelector((state) => state.weather.address);
const user = useSelector((state) => state.user.loginData);
//이름, 성별, 시구동주소
const [Name, setName] = useState("");
const [Sex, setSex] = useState("");
......@@ -10,6 +19,7 @@ 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 [checkCityAddError, setCheckCityAddError] = useState(true);
......@@ -29,6 +39,17 @@ function MainPage(props) {
const [Time, setTime] = useState("00:00:00");
if (checkAddress === false) {
addressResult.then((result) => {
console.log(result);
});
user.then((result) => {
console.log(result);
})
setCheckAddress(true);
}
const currentTime = () => {
const date = new Date();
const hours = String(date.getHours()).padStart(2, "0");
......@@ -108,34 +129,35 @@ function MainPage(props) {
const onSubmitHandler = useCallback((event) => { //제출 전 오류 확인 함수
event.preventDefault(); //체크박스 미리 클릭 방지
if (checkNameError || Name === "") {
setCheckSubmitError(true);
}
else if (checkSexError || Sex === "") {
setCheckSubmitError(true);
}
else if (checkCityAddError || CityAdd === "") {
setCheckSubmitError(true);
}
else if (checkGuAddError || GuAdd === "") {
setCheckSubmitError(true);
}
else if (checkDongAddError || DongAdd === "") {
setCheckSubmitError(true);
}
else {
setCheckSubmitError(false);
}
// if (checkNameError || Name === "") {
// setCheckSubmitError(true);
// }
// else if (checkSexError || Sex === "") {
// setCheckSubmitError(true);
// }
// else if (checkCityAddError || CityAdd === "") {
// setCheckSubmitError(true);
// }
// else if (checkGuAddError || GuAdd === "") {
// setCheckSubmitError(true);
// }
// else if (checkDongAddError || DongAdd === "") {
// setCheckSubmitError(true);
// }
// else {
// setCheckSubmitError(false);
// }
if (!checkSubmitError) {
const submitdata = {
name: Name,
sex: Sex,
city: CityAdd,
gu: GuAdd,
dong: DongAdd
};
}
// if (!checkSubmitError) {
// const submitdata = {
// name: Name,
// sex: Sex,
// city: CityAdd,
// gu: GuAdd,
// dong: DongAdd
// };
// }
}, [checkNameError, checkSexError, checkCityAddError, checkDongAddError, checkGuAddError, checkSubmitError, Name, Sex, CityAdd, GuAdd, DongAdd]);
return (
......
......@@ -15,8 +15,9 @@ function RegisterPage(props) {
const [Id, setId] = useState("");
const [Password, setPassword] = useState("");
const [PasswordCheck, setPasswordCheck] = useState("");
const [PasswordError, setPasswordError] = useState(false);
const [PasswordError, setPasswordError] = useState(false);
const [checkRegister, setCheckRegister] = useState(false);
const [checkNameError, setCheckNameError] = useState(false);
const [checkSexError, setCheckSexError] = useState(true);
const [checkIdError, setCheckIdError] = useState(false);
......@@ -26,6 +27,21 @@ function RegisterPage(props) {
const idRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/;
const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-?])(?=.*[0-9]).{8,25}$/;
if (checkRegister === true) {
registerResult.then((result) => {
if (result.registerSuccess === '1') {
alert('회원 가입에 성공하였습니다.');
navigate('/login');
}
else if (result.registerSuccess === '0') {
alert('중복된 아이디가 존재합니다.');
}
else {
alert('회원 가입에 실패하였습니다.');
}
})
}
const onIdHandler = useCallback((event) => {
setId(event.currentTarget.value);
......@@ -106,24 +122,11 @@ function RegisterPage(props) {
// 액션생성함수
dispatch(register(UserData));
registerResult.then((result) => {
console.log(result);
if (result.registerSuccess === '1') {
alert('회원 가입 완료!');
navigate('/login');
}
else if (result.registerSuccess === '0') {
alert('중복된 아이디 존재ㅠㅠ');
}
else {
alert('회원 가입 실패ㅜㅜ');
}
})
setCheckRegister(true);
};
}, [checkIdError, checkNameError, checkPasswordError, checkRegisterError, checkSexError, Password, PasswordCheck, Sex, dispatch, registerResult]);
}, [checkIdError, checkNameError, checkPasswordError, checkRegisterError, checkSexError, Password, PasswordCheck, Sex, dispatch, registerResult, checkRegister]);
return (
<div id="body">
......
import React, { useCallback, useState } from "react";
import "../style/SelectPage.scss"
function SelectPage(props) {
const today = new Date();
const today_year = today.getFullYear();
const today_month = today.getMonth();
const today_date = today.getDate();
const tomorrow = new Date(today.setDate(today.getDate() + 1));
const tomorrow_year = tomorrow.getFullYear();
const tomorrow_month = tomorrow.getMonth();
const tomorrow_date = tomorrow.getDate();
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()
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">{today_year}년 {today_month + 1}월 {today_date}일</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">{tomorrow_year}년 {tomorrow_month + 1}월 {tomorrow_date}일</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
......@@ -2,10 +2,11 @@ import axios from 'axios';
const USER_REGISTER = 'user/REGISTER';
const USER_LOGIN = 'user/LOGIN';
const USER_LOGOUT = 'user/LOGOUT';
export async function register (dataToSubmit) {
export function register (dataToSubmit) {
const req = await axios.post('http://localhost:4000/api/register', dataToSubmit)
const req = axios.post('http://localhost:4000/api/register', dataToSubmit)
.then(res => res.data);
return {
......@@ -24,13 +25,26 @@ export function login(dataToSubmit) {
}
};
export function logout(dataToSubmit) {
const req = axios.post('http://localhost:4000/api/logout', dataToSubmit)
.then(res => res.data);
return {
type: USER_LOGOUT,
payload: req,
}
};
export default function (state = {}, action) {
switch (action.type) {
case USER_REGISTER:
return { ...state, registerSuccess: action.payload };
break;
case USER_LOGIN:
return { ...state, loginSuccess: action.payload };
return { ...state, loginData: action.payload };
break;
case USER_LOGOUT:
return { ...state, loginData: action.payload };
break;
default:
return state;
......