김건희 / 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 94 additions and 49 deletions
import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { logout } from "../../../modules/user";
import { todayInformation, tommorrowInformation } from "../../../modules/weather";
import "../style/MainPage.scss"
......@@ -126,6 +127,19 @@ function MainPage(props) {
}
}, [checkDongAddError]);
const onClickTitle = useCallback((event) => {
navigate('/main')
})
const onClickLogout = useCallback((event) => {
dispatch(logout());
navigate('../login');
})
const onClickRegister = useCallback((event) => {
navigate('../register');
})
const onSubmitHandler = useCallback((event) => { //제출 전 오류 확인 함수
event.preventDefault(); //체크박스 미리 클릭 방지
......@@ -156,6 +170,8 @@ function MainPage(props) {
dotY : result[i].dotY,
}
console.log(dotData)
dispatch(todayInformation(dotData));
dispatch(tommorrowInformation(dotData));
......@@ -171,12 +187,12 @@ function MainPage(props) {
return (
<>
<dir id = "header">
<dir className="header_title">
<dir className="header_title" onClick = {onClickTitle}>
<h1>Weather_Briefing</h1>
</dir>
<dir className="header_choice_box">
<button type="button">Login</button>
<button type="button">Register</button>
<button type="button" onClick = {onClickLogout}>Logout</button>
<button type="button" onClick = {onClickRegister}>Register</button>
</dir>
</dir>
......
import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { logout } from "../../../modules/user";
import "../style/RecommandPage.scss"
function RecommandPage(props) {
......@@ -11,6 +12,8 @@ function RecommandPage(props) {
const [TopPath, setTopPath] = useState('');
const [BottomPath, setBottomPath] = useState('');
const dispatch = useDispatch();
useEffect(() => {
clothesResult.then((result) => {
console.log(result);
......@@ -31,42 +34,28 @@ function RecommandPage(props) {
const navigate = useNavigate();
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 navigate_login = useCallback((event) => {
const onClickLogout = useCallback((event) => {
dispatch(logout());
navigate('../login');
})
const navigate_register = useCallback((event) => {
const onClickRegister = useCallback((event) => {
navigate('../register');
})
const onClickTitle = useCallback((event) => {
navigate('/main')
})
return (
<>
<dir id = "header">
<dir className="clock">
<h1 id="clock">{Time}</h1>
</dir>
<dir className="title">
<dir className="header_title" onClick = {onClickTitle}>
<h1>Weather_Briefing</h1>
</dir>
<dir className="Login-Register">
<button type="button" onClick={navigate_login}>Login</button>
<button type="button" onClick={navigate_register}>Register</button>
<dir className="header_choice_box">
<button type="button" onClick={onClickLogout}>Logout</button>
<button type="button" onClick={onClickRegister}>Register</button>
</dir>
</dir>
......@@ -82,14 +71,6 @@ function RecommandPage(props) {
<h1>BOTTOM</h1>
<img src={BottomPath} className='Bottom_Image' />
</dir>
{/* <dir className="Head">
<h1>HEAD</h1>
<img src="../../../img/조거팬츠.jpg" className='Head_Image' />
</dir>
<dir className="Shoes">
<h1>SHOES</h1>
<img src="../../../../src/img/조거팬츠.jpg" className='Shoes_Image' />
</dir> */}
</dir>
</dir>
</div>
......
......@@ -2,6 +2,7 @@ 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 { logout } from "../../../modules/user";
import "../style/WeatherPage.scss"
function WeatherPage(props) {
const dispatch = useDispatch();
......@@ -141,6 +142,19 @@ function WeatherPage(props) {
});
}, [user])
const onClickLogout = useCallback((event) => {
dispatch(logout());
navigate('../login');
})
const onClickRegister = useCallback((event) => {
navigate('../register');
})
const onClickTitle = useCallback((event) => {
navigate('/main')
})
const onSubmitHandler = useCallback((event) => {
event.preventDefault(); //체크박스 미리 클릭 방지
let todayWeather = '';
......@@ -171,12 +185,12 @@ function WeatherPage(props) {
return (
<>
<dir id = "header">
<dir className="header_title">
<dir className="header_title" onClick = {onClickTitle}>
<h1>Weather_Briefing</h1>
</dir>
<dir className="Login-Register">
<button type="button" >Login</button>
<button type="button" >Register</button>
<dir className="header_choice_box">
<button type="button" onClick = {onClickLogout}>Logout</button>
<button type="button" onClick = {onClickRegister}>Register</button>
</dir>
</dir>
<div id = "body">
......
......@@ -10,6 +10,43 @@
object-fit: cover;
}
#header {
display: flex;
position: fixed;
justify-content: center;
align-items: center;
height: 15%;
width: 100%;
border-top: 2px solid;
border-bottom: 2px solid;
.header_title {
display: flex;
justify-content: center;
align-items: center;
margin-left: 300px;
margin-right: 300px;
h1 {
font-size: 50px;
font-family: 'Times New Roman', Times, serif;
color: rgb(0, 0, 0);
}
}
.header_choice_box {
display: flex;
justify-content: right;
align-items: right;
margin-right: 10x;
}
button {
width: 70px;
height: 25px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
}
#recommand_body {
display: flex;
justify-content: center;
......@@ -19,7 +56,7 @@
.fashion_recommand {
border: 2px solid;
width: 90%;
width: 50%;
height: 200%;
margin-top: 150px;
margin-bottom: 30px;
......@@ -50,7 +87,7 @@
align-items: center;
margin-top: 50px;
margin-bottom: 50px;
margin-left: 1%;
margin-left: 5%;
margin-right: 1%;
}
......@@ -66,7 +103,7 @@
margin-top: 50px;
margin-bottom: 50px;
margin-left: 1%;
margin-right: 1%;
margin-right: 5%;
}
.Head{
......
......@@ -14,6 +14,7 @@
align-items: center;
margin-left: 300px;
margin-right: 300px;
cursor:pointer;
h1 {
font-size: 50px;
font-family: 'Times New Roman', Times, serif;
......
......@@ -2,8 +2,8 @@ import axios from "axios";
const CLOTHES_RECOMMEND = 'weather/RECOMMEND';
export function recommend() {
const req = axios.post('http://localhost:4000/api/clothes')
export function recommend(dataToSubmit) {
const req = axios.post('http://localhost:4000/api/clothes', dataToSubmit)
.then(res => res.data);
return {
......
......@@ -27,10 +27,8 @@ export function coordinate(dataToSubmit) {
};
export function todayInformation(dataToSubmit) {
const req = axios.post('http://localhost:4000/api/weather', dataToSubmit)
.then(res => res.data);
return {
type: WEATHER_TODAY_INFORMATION,
payload: req,
......@@ -38,10 +36,8 @@ export function todayInformation(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,
......