김건희 / OSSW_Weather_Briefing

Go to a project
Toggle navigation Toggle navigation pinning
김건희
55c1f4f6 1 parent 5b12fb22

[Update] Layout Design

Inline Side-by-side
Showing 7 changed files with 96 additions and 51 deletions
1 import React, { useCallback, useEffect, useState } from "react"; 1 import React, { useCallback, useEffect, 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 { logout } from "../../../modules/user";
4 import { todayInformation, tommorrowInformation } from "../../../modules/weather"; 5 import { todayInformation, tommorrowInformation } from "../../../modules/weather";
5 import "../style/MainPage.scss" 6 import "../style/MainPage.scss"
6 7
...@@ -126,6 +127,19 @@ function MainPage(props) { ...@@ -126,6 +127,19 @@ function MainPage(props) {
126 } 127 }
127 }, [checkDongAddError]); 128 }, [checkDongAddError]);
128 129
130 + const onClickTitle = useCallback((event) => {
131 + navigate('/main')
132 + })
133 +
134 + const onClickLogout = useCallback((event) => {
135 + dispatch(logout());
136 + navigate('../login');
137 + })
138 +
139 + const onClickRegister = useCallback((event) => {
140 + navigate('../register');
141 + })
142 +
129 const onSubmitHandler = useCallback((event) => { //제출 전 오류 확인 함수 143 const onSubmitHandler = useCallback((event) => { //제출 전 오류 확인 함수
130 event.preventDefault(); //체크박스 미리 클릭 방지 144 event.preventDefault(); //체크박스 미리 클릭 방지
131 145
...@@ -156,6 +170,8 @@ function MainPage(props) { ...@@ -156,6 +170,8 @@ function MainPage(props) {
156 dotY : result[i].dotY, 170 dotY : result[i].dotY,
157 } 171 }
158 172
173 + console.log(dotData)
174 +
159 dispatch(todayInformation(dotData)); 175 dispatch(todayInformation(dotData));
160 dispatch(tommorrowInformation(dotData)); 176 dispatch(tommorrowInformation(dotData));
161 177
...@@ -171,12 +187,12 @@ function MainPage(props) { ...@@ -171,12 +187,12 @@ function MainPage(props) {
171 return ( 187 return (
172 <> 188 <>
173 <dir id = "header"> 189 <dir id = "header">
174 - <dir className="header_title"> 190 + <dir className="header_title" onClick = {onClickTitle}>
175 <h1>Weather_Briefing</h1> 191 <h1>Weather_Briefing</h1>
176 </dir> 192 </dir>
177 <dir className="header_choice_box"> 193 <dir className="header_choice_box">
178 - <button type="button">Login</button> 194 + <button type="button" onClick = {onClickLogout}>Logout</button>
179 - <button type="button">Register</button> 195 + <button type="button" onClick = {onClickRegister}>Register</button>
180 </dir> 196 </dir>
181 </dir> 197 </dir>
182 198
......
1 import React, { useCallback, useEffect, useState } from "react"; 1 import React, { useCallback, useEffect, 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 { logout } from "../../../modules/user";
4 import "../style/RecommandPage.scss" 5 import "../style/RecommandPage.scss"
5 6
6 function RecommandPage(props) { 7 function RecommandPage(props) {
...@@ -11,6 +12,8 @@ function RecommandPage(props) { ...@@ -11,6 +12,8 @@ function RecommandPage(props) {
11 const [TopPath, setTopPath] = useState(''); 12 const [TopPath, setTopPath] = useState('');
12 const [BottomPath, setBottomPath] = useState(''); 13 const [BottomPath, setBottomPath] = useState('');
13 14
15 + const dispatch = useDispatch();
16 +
14 useEffect(() => { 17 useEffect(() => {
15 clothesResult.then((result) => { 18 clothesResult.then((result) => {
16 console.log(result); 19 console.log(result);
...@@ -31,42 +34,28 @@ function RecommandPage(props) { ...@@ -31,42 +34,28 @@ function RecommandPage(props) {
31 34
32 const navigate = useNavigate(); 35 const navigate = useNavigate();
33 36
34 - const [Time, setTime] = useState("00:00:00"); 37 + const onClickLogout = useCallback((event) => {
35 - 38 + dispatch(logout());
36 - const currentTime = () => { 39 + navigate('../login');
37 - const date = new Date();
38 - const hours = String(date.getHours()).padStart(2, "0");
39 - const minutes = String(date.getMinutes()).padStart(2, "0");
40 - const seconds = String(date.getSeconds()).padStart(2, "0");
41 - setTime(hours+":"+minutes+":"+seconds);
42 - }
43 -
44 - const startTimer = () => {
45 - setInterval(currentTime, 1000)
46 - }
47 -
48 - startTimer()
49 -
50 - const navigate_login = useCallback((event) => {
51 - navigate('../login');
52 }) 40 })
53 41
54 - const navigate_register = useCallback((event) => { 42 + const onClickRegister = useCallback((event) => {
55 navigate('../register'); 43 navigate('../register');
56 }) 44 })
57 45
46 + const onClickTitle = useCallback((event) => {
47 + navigate('/main')
48 + })
49 +
58 return ( 50 return (
59 <> 51 <>
60 <dir id = "header"> 52 <dir id = "header">
61 - <dir className="clock"> 53 + <dir className="header_title" onClick = {onClickTitle}>
62 - <h1 id="clock">{Time}</h1>
63 - </dir>
64 - <dir className="title">
65 <h1>Weather_Briefing</h1> 54 <h1>Weather_Briefing</h1>
66 </dir> 55 </dir>
67 - <dir className="Login-Register"> 56 + <dir className="header_choice_box">
68 - <button type="button" onClick={navigate_login}>Login</button> 57 + <button type="button" onClick={onClickLogout}>Logout</button>
69 - <button type="button" onClick={navigate_register}>Register</button> 58 + <button type="button" onClick={onClickRegister}>Register</button>
70 </dir> 59 </dir>
71 </dir> 60 </dir>
72 61
...@@ -82,14 +71,6 @@ function RecommandPage(props) { ...@@ -82,14 +71,6 @@ function RecommandPage(props) {
82 <h1>BOTTOM</h1> 71 <h1>BOTTOM</h1>
83 <img src={BottomPath} className='Bottom_Image' /> 72 <img src={BottomPath} className='Bottom_Image' />
84 </dir> 73 </dir>
85 - {/* <dir className="Head">
86 - <h1>HEAD</h1>
87 - <img src="../../../img/조거팬츠.jpg" className='Head_Image' />
88 - </dir>
89 - <dir className="Shoes">
90 - <h1>SHOES</h1>
91 - <img src="../../../../src/img/조거팬츠.jpg" className='Shoes_Image' />
92 - </dir> */}
93 </dir> 74 </dir>
94 </dir> 75 </dir>
95 </div> 76 </div>
......
...@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from "react"; ...@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, 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 { recommend } from "../../../modules/clothes"; 4 import { recommend } from "../../../modules/clothes";
5 +import { logout } from "../../../modules/user";
5 import "../style/WeatherPage.scss" 6 import "../style/WeatherPage.scss"
6 function WeatherPage(props) { 7 function WeatherPage(props) {
7 const dispatch = useDispatch(); 8 const dispatch = useDispatch();
...@@ -141,6 +142,19 @@ function WeatherPage(props) { ...@@ -141,6 +142,19 @@ function WeatherPage(props) {
141 }); 142 });
142 }, [user]) 143 }, [user])
143 144
145 + const onClickLogout = useCallback((event) => {
146 + dispatch(logout());
147 + navigate('../login');
148 + })
149 +
150 + const onClickRegister = useCallback((event) => {
151 + navigate('../register');
152 + })
153 +
154 + const onClickTitle = useCallback((event) => {
155 + navigate('/main')
156 + })
157 +
144 const onSubmitHandler = useCallback((event) => { 158 const onSubmitHandler = useCallback((event) => {
145 event.preventDefault(); //체크박스 미리 클릭 방지 159 event.preventDefault(); //체크박스 미리 클릭 방지
146 let todayWeather = ''; 160 let todayWeather = '';
...@@ -170,13 +184,13 @@ function WeatherPage(props) { ...@@ -170,13 +184,13 @@ function WeatherPage(props) {
170 184
171 return ( 185 return (
172 <> 186 <>
173 - <dir id = "header"> 187 + <dir id = "header">
174 - <dir className="header_title"> 188 + <dir className="header_title" onClick = {onClickTitle}>
175 <h1>Weather_Briefing</h1> 189 <h1>Weather_Briefing</h1>
176 </dir> 190 </dir>
177 - <dir className="Login-Register"> 191 + <dir className="header_choice_box">
178 - <button type="button" >Login</button> 192 + <button type="button" onClick = {onClickLogout}>Logout</button>
179 - <button type="button" >Register</button> 193 + <button type="button" onClick = {onClickRegister}>Register</button>
180 </dir> 194 </dir>
181 </dir> 195 </dir>
182 <div id = "body"> 196 <div id = "body">
......
...@@ -9,6 +9,43 @@ ...@@ -9,6 +9,43 @@
9 height: 300px; 9 height: 300px;
10 object-fit: cover; 10 object-fit: cover;
11 } 11 }
12 +
13 + #header {
14 + display: flex;
15 + position: fixed;
16 + justify-content: center;
17 + align-items: center;
18 + height: 15%;
19 + width: 100%;
20 + border-top: 2px solid;
21 + border-bottom: 2px solid;
22 +
23 + .header_title {
24 + display: flex;
25 + justify-content: center;
26 + align-items: center;
27 + margin-left: 300px;
28 + margin-right: 300px;
29 + h1 {
30 + font-size: 50px;
31 + font-family: 'Times New Roman', Times, serif;
32 + color: rgb(0, 0, 0);
33 + }
34 + }
35 + .header_choice_box {
36 + display: flex;
37 + justify-content: right;
38 + align-items: right;
39 + margin-right: 10x;
40 + }
41 + button {
42 + width: 70px;
43 + height: 25px;
44 + font-size: 15px;
45 + font-weight: bold;
46 + cursor: pointer;
47 + }
48 + }
12 49
13 #recommand_body { 50 #recommand_body {
14 display: flex; 51 display: flex;
...@@ -19,7 +56,7 @@ ...@@ -19,7 +56,7 @@
19 56
20 .fashion_recommand { 57 .fashion_recommand {
21 border: 2px solid; 58 border: 2px solid;
22 - width: 90%; 59 + width: 50%;
23 height: 200%; 60 height: 200%;
24 margin-top: 150px; 61 margin-top: 150px;
25 margin-bottom: 30px; 62 margin-bottom: 30px;
...@@ -50,7 +87,7 @@ ...@@ -50,7 +87,7 @@
50 align-items: center; 87 align-items: center;
51 margin-top: 50px; 88 margin-top: 50px;
52 margin-bottom: 50px; 89 margin-bottom: 50px;
53 - margin-left: 1%; 90 + margin-left: 5%;
54 margin-right: 1%; 91 margin-right: 1%;
55 } 92 }
56 93
...@@ -66,7 +103,7 @@ ...@@ -66,7 +103,7 @@
66 margin-top: 50px; 103 margin-top: 50px;
67 margin-bottom: 50px; 104 margin-bottom: 50px;
68 margin-left: 1%; 105 margin-left: 1%;
69 - margin-right: 1%; 106 + margin-right: 5%;
70 } 107 }
71 108
72 .Head{ 109 .Head{
......
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
14 align-items: center; 14 align-items: center;
15 margin-left: 300px; 15 margin-left: 300px;
16 margin-right: 300px; 16 margin-right: 300px;
17 + cursor:pointer;
17 h1 { 18 h1 {
18 font-size: 50px; 19 font-size: 50px;
19 font-family: 'Times New Roman', Times, serif; 20 font-family: 'Times New Roman', Times, serif;
......
...@@ -2,8 +2,8 @@ import axios from "axios"; ...@@ -2,8 +2,8 @@ import axios from "axios";
2 2
3 const CLOTHES_RECOMMEND = 'weather/RECOMMEND'; 3 const CLOTHES_RECOMMEND = 'weather/RECOMMEND';
4 4
5 -export function recommend() { 5 +export function recommend(dataToSubmit) {
6 - const req = axios.post('http://localhost:4000/api/clothes') 6 + const req = axios.post('http://localhost:4000/api/clothes', dataToSubmit)
7 .then(res => res.data); 7 .then(res => res.data);
8 8
9 return { 9 return {
......
...@@ -27,10 +27,8 @@ export function coordinate(dataToSubmit) { ...@@ -27,10 +27,8 @@ export function coordinate(dataToSubmit) {
27 }; 27 };
28 28
29 export function todayInformation(dataToSubmit) { 29 export function todayInformation(dataToSubmit) {
30 -
31 const req = axios.post('http://localhost:4000/api/weather', dataToSubmit) 30 const req = axios.post('http://localhost:4000/api/weather', dataToSubmit)
32 .then(res => res.data); 31 .then(res => res.data);
33 -
34 return { 32 return {
35 type: WEATHER_TODAY_INFORMATION, 33 type: WEATHER_TODAY_INFORMATION,
36 payload: req, 34 payload: req,
...@@ -38,10 +36,8 @@ export function todayInformation(dataToSubmit) { ...@@ -38,10 +36,8 @@ export function todayInformation(dataToSubmit) {
38 }; 36 };
39 37
40 export function tommorrowInformation(dataToSubmit) { 38 export function tommorrowInformation(dataToSubmit) {
41 -
42 const req = axios.post('http://localhost:4000/api/tommorrow', dataToSubmit) 39 const req = axios.post('http://localhost:4000/api/tommorrow', dataToSubmit)
43 .then(res => res.data); 40 .then(res => res.data);
44 -
45 return { 41 return {
46 type: WEATHER_TOMMORROW_INFORMATION, 42 type: WEATHER_TOMMORROW_INFORMATION,
47 payload: req, 43 payload: req,
......