김건희 / 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
1 +Stack trace:
2 +Frame Function Args
3 +000005FF340 0018006286E (001802901B2, 0018026DE3E, 0000000005E, 000005FAEA0)
4 +000005FF340 0018004846A (00000000000, 00000000000, 7FFE00000000, 00000001000)
5 +000005FF340 001800484A2 (00000000000, 0000000005A, 0000000005E, 00000000000)
6 +000005FF340 001800D3E58 (00000000000, 00100000000, 0018026D9F2, 000005FBFEC)
7 +000005FF340 0018012C857 (00000000000, 00180223E20, 00180223E10, 000005FDDE0)
8 +000005FF340 001800488B4 (0018030F940, 000005FDDE0, 00000000000, 00000000000)
9 +000005FF340 0018004A01F (0007FFE0384, 00000000000, 00000000000, 00000000000)
10 +000005FF340 001800D4E98 (00000000000, 00000000000, 00000000000, 00000000000)
11 +000005FF5E0 7FFE062E9A1D (00180040000, 00000000001, 00000000000, 000005FF528)
12 +000005FF5E0 7FFE0633C1E7 (7FFE0630DB00, 000007F3901, 7FFE00000001, 00000000001)
13 +000005FF5E0 7FFE0633BF7A (000007F3900, 000005FF5E0, 000007F4270, 00000070000)
14 +000005FF5E0 7FFE0633C000 (00000000010, 00000000000, 7FFE06401A90, 000005FF678)
15 +00000000000 7FFE063A3C2A (00000000000, 00000000000, 00000000001, 00000000000)
16 +00000000000 7FFE06344CDB (7FFE062D0000, 00000000000, 00000347000, 00000000000)
17 +00000000000 7FFE06344B63 (00000000000, 00000000000, 00000000000, 00000000000)
18 +00000000000 7FFE06344B0E (00000000000, 00000000000, 00000000000, 00000000000)
19 +End of stack trace
...@@ -10380,6 +10380,11 @@ ...@@ -10380,6 +10380,11 @@
10380 "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==", 10380 "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==",
10381 "dev": true 10381 "dev": true
10382 }, 10382 },
10383 + "redux-promise-middleware": {
10384 + "version": "6.1.2",
10385 + "resolved": "https://registry.npmjs.org/redux-promise-middleware/-/redux-promise-middleware-6.1.2.tgz",
10386 + "integrity": "sha512-ZqZu/nnSzGgwTtNbGoGVontpk7LjTOv0kigtt3CcgXI9gpq+8WlfXTXRZD0WTD5yaohRq0q2nYmJXSTjwXs83Q=="
10387 + },
10383 "redux-thunk": { 10388 "redux-thunk": {
10384 "version": "2.4.1", 10389 "version": "2.4.1",
10385 "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", 10390 "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
......
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
18 "react-router-dom": "^6.3.0", 18 "react-router-dom": "^6.3.0",
19 "react-scripts": "5.0.1", 19 "react-scripts": "5.0.1",
20 "redux": "^4.1.2", 20 "redux": "^4.1.2",
21 + "redux-promise-middleware": "^6.1.2",
21 "redux-thunk": "^2.4.1", 22 "redux-thunk": "^2.4.1",
22 "web-vitals": "^2.1.4" 23 "web-vitals": "^2.1.4"
23 }, 24 },
......
...@@ -2,7 +2,6 @@ import './App.css'; ...@@ -2,7 +2,6 @@ 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';
6 import { Route, Routes } from 'react-router-dom'; 5 import { Route, Routes } from 'react-router-dom';
7 6
8 function App() { 7 function App() {
...@@ -12,7 +11,6 @@ function App() { ...@@ -12,7 +11,6 @@ function App() {
12 <Route exact path = "/login" element = {<LoginPage/>}/> 11 <Route exact path = "/login" element = {<LoginPage/>}/>
13 <Route exact path = "/register" element = {<RegisterPage/>}/> 12 <Route exact path = "/register" element = {<RegisterPage/>}/>
14 <Route exact path = "/main" element = {<MainPage/>}/> 13 <Route exact path = "/main" element = {<MainPage/>}/>
15 - <Route exact path = "/select" element = {<SelectPage/>}/>
16 </Routes> 14 </Routes>
17 </div> 15 </div>
18 ); 16 );
......
...@@ -2,17 +2,19 @@ import React, { useCallback, useState } from "react"; ...@@ -2,17 +2,19 @@ import React, { useCallback, useState } from "react";
2 import { useDispatch, useSelector } from "react-redux"; 2 import { useDispatch, useSelector } from "react-redux";
3 import { useNavigate } from "react-router-dom"; 3 import { useNavigate } from "react-router-dom";
4 import { login } from "../../../modules/user"; 4 import { login } from "../../../modules/user";
5 +import { address } from "../../../modules/weather";
5 import "../style/LoginPage.scss" 6 import "../style/LoginPage.scss"
6 7
7 function LoginPage(props) { 8 function LoginPage(props) {
8 const dispatch = useDispatch(); 9 const dispatch = useDispatch();
9 const navigate = useNavigate(); 10 const navigate = useNavigate();
10 11
11 - const loginResult = useSelector((state) => state.user.loginSuccess); 12 + const loginResult = useSelector((state) => state.user.loginData);
12 13
13 const [Id, setId] = useState(""); 14 const [Id, setId] = useState("");
14 const [Password, setPassword] = useState(""); 15 const [Password, setPassword] = useState("");
15 16
17 + const [checkLogin, setCheckLogin] = useState(false);
16 const [checkIdError, setCheckIdError] = useState(false); 18 const [checkIdError, setCheckIdError] = useState(false);
17 const [checkPasswordError, setCheckPasswordError] = useState(false); 19 const [checkPasswordError, setCheckPasswordError] = useState(false);
18 const [checkLoginError, setCheckLoginError] = useState(false); 20 const [checkLoginError, setCheckLoginError] = useState(false);
...@@ -20,6 +22,18 @@ function LoginPage(props) { ...@@ -20,6 +22,18 @@ function LoginPage(props) {
20 const idRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/; 22 const idRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/;
21 const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-?])(?=.*[0-9]).{8,25}$/; 23 const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-?])(?=.*[0-9]).{8,25}$/;
22 24
25 + if (checkLogin === true) {
26 + loginResult.then((result) => {
27 + if (result.loginSuccess === true) {
28 + alert('로그인에 성공하였습니다.');
29 + navigate('/main');
30 + }
31 + else {
32 + alert('로그인에 실패하였습니다.');
33 + }
34 + })
35 + }
36 +
23 const onIdHandler = useCallback((event) => { 37 const onIdHandler = useCallback((event) => {
24 setId(event.currentTarget.value); 38 setId(event.currentTarget.value);
25 39
...@@ -66,17 +80,8 @@ function LoginPage(props) { ...@@ -66,17 +80,8 @@ function LoginPage(props) {
66 }; 80 };
67 81
68 dispatch(login(UserData)); 82 dispatch(login(UserData));
69 - loginResult.then((result) => { 83 + dispatch(address());
70 - console.log(result); 84 + setCheckLogin(true);
71 -
72 - if (result.loginSuccess === true) {
73 - alert('로그인 완료!');
74 - navigate('/');
75 - }
76 - else {
77 - alert('로그인 실패ㅜㅜ');
78 - }
79 - })
80 85
81 } 86 }
82 87
......
1 import React, { useCallback, useState } from "react"; 1 import React, { useCallback, useState } from "react";
2 +import { useDispatch, useSelector } from "react-redux";
3 +import { useNavigate } from "react-router-dom";
4 +import { address } from "../../../modules/weather";
2 import "../style/MainPage.scss" 5 import "../style/MainPage.scss"
3 6
4 function MainPage(props) { 7 function MainPage(props) {
5 8
9 + const dispatch = useDispatch();
10 + const navigate = useNavigate();
11 +
12 + const addressResult = useSelector((state) => state.weather.address);
13 + const user = useSelector((state) => state.user.loginData);
14 +
6 //이름, 성별, 시구동주소 15 //이름, 성별, 시구동주소
7 const [Name, setName] = useState(""); 16 const [Name, setName] = useState("");
8 const [Sex, setSex] = useState(""); 17 const [Sex, setSex] = useState("");
...@@ -10,6 +19,7 @@ function MainPage(props) { ...@@ -10,6 +19,7 @@ function MainPage(props) {
10 const [GuAdd, setGuAdd] = useState(""); 19 const [GuAdd, setGuAdd] = useState("");
11 const [DongAdd, setDongAdd] = useState(""); 20 const [DongAdd, setDongAdd] = useState("");
12 21
22 + const [checkAddress, setCheckAddress] = useState(false);
13 const [checkNameError, setCheckNameError] = useState(false); 23 const [checkNameError, setCheckNameError] = useState(false);
14 const [checkSexError, setCheckSexError] = useState(true); 24 const [checkSexError, setCheckSexError] = useState(true);
15 const [checkCityAddError, setCheckCityAddError] = useState(true); 25 const [checkCityAddError, setCheckCityAddError] = useState(true);
...@@ -29,6 +39,17 @@ function MainPage(props) { ...@@ -29,6 +39,17 @@ function MainPage(props) {
29 39
30 const [Time, setTime] = useState("00:00:00"); 40 const [Time, setTime] = useState("00:00:00");
31 41
42 + if (checkAddress === false) {
43 + addressResult.then((result) => {
44 + console.log(result);
45 + });
46 + user.then((result) => {
47 + console.log(result);
48 + })
49 +
50 + setCheckAddress(true);
51 + }
52 +
32 const currentTime = () => { 53 const currentTime = () => {
33 const date = new Date(); 54 const date = new Date();
34 const hours = String(date.getHours()).padStart(2, "0"); 55 const hours = String(date.getHours()).padStart(2, "0");
...@@ -108,34 +129,35 @@ function MainPage(props) { ...@@ -108,34 +129,35 @@ function MainPage(props) {
108 const onSubmitHandler = useCallback((event) => { //제출 전 오류 확인 함수 129 const onSubmitHandler = useCallback((event) => { //제출 전 오류 확인 함수
109 event.preventDefault(); //체크박스 미리 클릭 방지 130 event.preventDefault(); //체크박스 미리 클릭 방지
110 131
111 - if (checkNameError || Name === "") { 132 + // if (checkNameError || Name === "") {
112 - setCheckSubmitError(true); 133 + // setCheckSubmitError(true);
113 - } 134 + // }
114 - else if (checkSexError || Sex === "") { 135 + // else if (checkSexError || Sex === "") {
115 - setCheckSubmitError(true); 136 + // setCheckSubmitError(true);
116 - } 137 + // }
117 - else if (checkCityAddError || CityAdd === "") { 138 + // else if (checkCityAddError || CityAdd === "") {
118 - setCheckSubmitError(true); 139 + // setCheckSubmitError(true);
119 - } 140 + // }
120 - else if (checkGuAddError || GuAdd === "") { 141 + // else if (checkGuAddError || GuAdd === "") {
121 - setCheckSubmitError(true); 142 + // setCheckSubmitError(true);
122 - } 143 + // }
123 - else if (checkDongAddError || DongAdd === "") { 144 + // else if (checkDongAddError || DongAdd === "") {
124 - setCheckSubmitError(true); 145 + // setCheckSubmitError(true);
125 - } 146 + // }
126 - else { 147 + // else {
127 - setCheckSubmitError(false); 148 + // setCheckSubmitError(false);
128 - } 149 + // }
129 150
130 - if (!checkSubmitError) { 151 + // if (!checkSubmitError) {
131 - const submitdata = { 152 + // const submitdata = {
132 - name: Name, 153 + // name: Name,
133 - sex: Sex, 154 + // sex: Sex,
134 - city: CityAdd, 155 + // city: CityAdd,
135 - gu: GuAdd, 156 + // gu: GuAdd,
136 - dong: DongAdd 157 + // dong: DongAdd
137 - }; 158 + // };
138 - } 159 + // }
160 +
139 }, [checkNameError, checkSexError, checkCityAddError, checkDongAddError, checkGuAddError, checkSubmitError, Name, Sex, CityAdd, GuAdd, DongAdd]); 161 }, [checkNameError, checkSexError, checkCityAddError, checkDongAddError, checkGuAddError, checkSubmitError, Name, Sex, CityAdd, GuAdd, DongAdd]);
140 162
141 return ( 163 return (
......
...@@ -15,8 +15,9 @@ function RegisterPage(props) { ...@@ -15,8 +15,9 @@ function RegisterPage(props) {
15 const [Id, setId] = useState(""); 15 const [Id, setId] = useState("");
16 const [Password, setPassword] = useState(""); 16 const [Password, setPassword] = useState("");
17 const [PasswordCheck, setPasswordCheck] = useState(""); 17 const [PasswordCheck, setPasswordCheck] = useState("");
18 - const [PasswordError, setPasswordError] = useState(false); 18 + const [PasswordError, setPasswordError] = useState(false);
19 - 19 +
20 + const [checkRegister, setCheckRegister] = useState(false);
20 const [checkNameError, setCheckNameError] = useState(false); 21 const [checkNameError, setCheckNameError] = useState(false);
21 const [checkSexError, setCheckSexError] = useState(true); 22 const [checkSexError, setCheckSexError] = useState(true);
22 const [checkIdError, setCheckIdError] = useState(false); 23 const [checkIdError, setCheckIdError] = useState(false);
...@@ -26,6 +27,21 @@ function RegisterPage(props) { ...@@ -26,6 +27,21 @@ function RegisterPage(props) {
26 const idRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/; 27 const idRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/;
27 const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-?])(?=.*[0-9]).{8,25}$/; 28 const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-?])(?=.*[0-9]).{8,25}$/;
28 29
30 + if (checkRegister === true) {
31 + registerResult.then((result) => {
32 + if (result.registerSuccess === '1') {
33 + alert('회원 가입에 성공하였습니다.');
34 + navigate('/login');
35 + }
36 + else if (result.registerSuccess === '0') {
37 + alert('중복된 아이디가 존재합니다.');
38 + }
39 + else {
40 + alert('회원 가입에 실패하였습니다.');
41 + }
42 + })
43 + }
44 +
29 const onIdHandler = useCallback((event) => { 45 const onIdHandler = useCallback((event) => {
30 setId(event.currentTarget.value); 46 setId(event.currentTarget.value);
31 47
...@@ -106,24 +122,11 @@ function RegisterPage(props) { ...@@ -106,24 +122,11 @@ function RegisterPage(props) {
106 122
107 // 액션생성함수 123 // 액션생성함수
108 dispatch(register(UserData)); 124 dispatch(register(UserData));
109 - registerResult.then((result) => { 125 + setCheckRegister(true);
110 - console.log(result);
111 -
112 - if (result.registerSuccess === '1') {
113 - alert('회원 가입 완료!');
114 - navigate('/login');
115 - }
116 - else if (result.registerSuccess === '0') {
117 - alert('중복된 아이디 존재ㅠㅠ');
118 - }
119 - else {
120 - alert('회원 가입 실패ㅜㅜ');
121 - }
122 - })
123 126
124 }; 127 };
125 128
126 - }, [checkIdError, checkNameError, checkPasswordError, checkRegisterError, checkSexError, Password, PasswordCheck, Sex, dispatch, registerResult]); 129 + }, [checkIdError, checkNameError, checkPasswordError, checkRegisterError, checkSexError, Password, PasswordCheck, Sex, dispatch, registerResult, checkRegister]);
127 130
128 return ( 131 return (
129 <div id="body"> 132 <div id="body">
......
1 -import React, { useCallback, useState } from "react";
2 -import "../style/SelectPage.scss"
3 -
4 -function SelectPage(props) {
5 -
6 - const today = new Date();
7 -
8 - const today_year = today.getFullYear();
9 - const today_month = today.getMonth();
10 - const today_date = today.getDate();
11 -
12 - const tomorrow = new Date(today.setDate(today.getDate() + 1));
13 -
14 - const tomorrow_year = tomorrow.getFullYear();
15 - const tomorrow_month = tomorrow.getMonth();
16 - const tomorrow_date = tomorrow.getDate();
17 -
18 - const [Time, setTime] = useState("00:00:00");
19 -
20 - const currentTime = () => {
21 - const date = new Date();
22 - const hours = String(date.getHours()).padStart(2, "0");
23 - const minutes = String(date.getMinutes()).padStart(2, "0");
24 - const seconds = String(date.getSeconds()).padStart(2, "0");
25 - setTime(hours+":"+minutes+":"+seconds);
26 - }
27 -
28 - const startTimer = () => {
29 - setInterval(currentTime, 1000)
30 - }
31 -
32 - startTimer()
33 -
34 - return (
35 - <>
36 - <dir id = "header">
37 - <dir className="clock">
38 - <h1 id="clock">{Time}</h1>
39 - </dir>
40 - <dir className="title">
41 - <h1>Weather_Briefing</h1>
42 - </dir>
43 - <dir className="Login-Register">
44 - <button type="button" onclick="location.href='http://localhost:3000/login';">Login</button>
45 - <button type="button" onclick="location.href='http://localhost:3000/register';">Register</button>
46 - </dir>
47 - </dir>
48 -
49 - <div id = "body">
50 - <dir className="date">
51 - <p>경기도 용인시 서천구</p>
52 - </dir>
53 - <dir className="today_weather">
54 - <dir className="days">
55 - <h1 id="today">오늘의 날씨</h1>
56 - <h2 id="day">{today_year}년 {today_month + 1}월 {today_date}일</h2>
57 - </dir>
58 - <dir className="weather">
59 - <h1 id="present_do">14도</h1>
60 - <p id="maxmin_do">최고: 22도 ㅣ 최저: 7도</p>
61 - </dir>
62 - </dir>
63 - <dir className="tomorrow_weather">
64 - <dir className="days">
65 - <h1 id="today">내일의 날씨</h1>
66 - <h2 id="day">{tomorrow_year}년 {tomorrow_month + 1}월 {tomorrow_date}일</h2>
67 - </dir>
68 - <dir className="weather">
69 - <h1 id="present_do">50도</h1>
70 - <p id="maxmin_do">최고: 13도 ㅣ 최저: 2도</p>
71 - </dir>
72 - </dir>
73 - </div>
74 -
75 - <dir id = "footer">
76 - <dir className="logo">
77 - <h1>logo</h1>
78 - </dir>
79 - <dir className="info">
80 - <p>경희대학교</p>
81 - <p>컴퓨터공학과 김건희ㅣ오석진ㅣ손수민</p>
82 - </dir>
83 - </dir>
84 - </>
85 - );
86 -}
87 -
88 -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
...@@ -2,10 +2,11 @@ import axios from 'axios'; ...@@ -2,10 +2,11 @@ import axios from 'axios';
2 2
3 const USER_REGISTER = 'user/REGISTER'; 3 const USER_REGISTER = 'user/REGISTER';
4 const USER_LOGIN = 'user/LOGIN'; 4 const USER_LOGIN = 'user/LOGIN';
5 +const USER_LOGOUT = 'user/LOGOUT';
5 6
6 -export async function register (dataToSubmit) { 7 +export function register (dataToSubmit) {
7 8
8 - const req = await axios.post('http://localhost:4000/api/register', dataToSubmit) 9 + const req = axios.post('http://localhost:4000/api/register', dataToSubmit)
9 .then(res => res.data); 10 .then(res => res.data);
10 11
11 return { 12 return {
...@@ -24,13 +25,26 @@ export function login(dataToSubmit) { ...@@ -24,13 +25,26 @@ export function login(dataToSubmit) {
24 } 25 }
25 }; 26 };
26 27
28 +export function logout(dataToSubmit) {
29 + const req = axios.post('http://localhost:4000/api/logout', dataToSubmit)
30 + .then(res => res.data);
31 +
32 + return {
33 + type: USER_LOGOUT,
34 + payload: req,
35 + }
36 +};
37 +
27 export default function (state = {}, action) { 38 export default function (state = {}, action) {
28 switch (action.type) { 39 switch (action.type) {
29 case USER_REGISTER: 40 case USER_REGISTER:
30 return { ...state, registerSuccess: action.payload }; 41 return { ...state, registerSuccess: action.payload };
31 break; 42 break;
32 case USER_LOGIN: 43 case USER_LOGIN:
33 - return { ...state, loginSuccess: action.payload }; 44 + return { ...state, loginData: action.payload };
45 + break;
46 + case USER_LOGOUT:
47 + return { ...state, loginData: action.payload };
34 break; 48 break;
35 default: 49 default:
36 return state; 50 return state;
......