김건희 / OSSW_Weather_Briefing

Go to a project
Toggle navigation Toggle navigation pinning
손수민
da5a7561 1 parent 0471c48c

[ADD] ClothesRecommandPage Layout Files

Inline Side-by-side
Showing 11 changed files with 231 additions and 16 deletions
...@@ -19,10 +19,10 @@ ...@@ -19,10 +19,10 @@
19 "nodemon": "^2.0.16", 19 "nodemon": "^2.0.16",
20 "react": "^18.1.0", 20 "react": "^18.1.0",
21 "react-dom": "^18.1.0", 21 "react-dom": "^18.1.0",
22 - "react-redux": "^8.0.1", 22 + "react-redux": "^8.0.2",
23 "react-router-dom": "^6.3.0", 23 "react-router-dom": "^6.3.0",
24 "react-scripts": "5.0.1", 24 "react-scripts": "5.0.1",
25 - "redux": "^4.1.2", 25 + "redux": "^4.2.0",
26 "redux-thunk": "^2.4.1", 26 "redux-thunk": "^2.4.1",
27 "web-vitals": "^2.1.4" 27 "web-vitals": "^2.1.4"
28 }, 28 },
...@@ -14201,9 +14201,9 @@ ...@@ -14201,9 +14201,9 @@
14201 "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" 14201 "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
14202 }, 14202 },
14203 "node_modules/react-redux": { 14203 "node_modules/react-redux": {
14204 - "version": "8.0.1", 14204 + "version": "8.0.2",
14205 - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.1.tgz", 14205 + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz",
14206 - "integrity": "sha512-LMZMsPY4DYdZfLJgd7i79n5Kps5N9XVLCJJeWAaPYTV+Eah2zTuBjTxKtNEbjiyitbq80/eIkm55CYSLqAub3w==", 14206 + "integrity": "sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==",
14207 "dependencies": { 14207 "dependencies": {
14208 "@babel/runtime": "^7.12.1", 14208 "@babel/runtime": "^7.12.1",
14209 "@types/hoist-non-react-statics": "^3.3.1", 14209 "@types/hoist-non-react-statics": "^3.3.1",
...@@ -14530,9 +14530,9 @@ ...@@ -14530,9 +14530,9 @@
14530 } 14530 }
14531 }, 14531 },
14532 "node_modules/redux": { 14532 "node_modules/redux": {
14533 - "version": "4.1.2", 14533 + "version": "4.2.0",
14534 - "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz", 14534 + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
14535 - "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==", 14535 + "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
14536 "dependencies": { 14536 "dependencies": {
14537 "@babel/runtime": "^7.9.2" 14537 "@babel/runtime": "^7.9.2"
14538 } 14538 }
...@@ -27852,9 +27852,9 @@ ...@@ -27852,9 +27852,9 @@
27852 "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" 27852 "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
27853 }, 27853 },
27854 "react-redux": { 27854 "react-redux": {
27855 - "version": "8.0.1", 27855 + "version": "8.0.2",
27856 - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.1.tgz", 27856 + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz",
27857 - "integrity": "sha512-LMZMsPY4DYdZfLJgd7i79n5Kps5N9XVLCJJeWAaPYTV+Eah2zTuBjTxKtNEbjiyitbq80/eIkm55CYSLqAub3w==", 27857 + "integrity": "sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==",
27858 "requires": { 27858 "requires": {
27859 "@babel/runtime": "^7.12.1", 27859 "@babel/runtime": "^7.12.1",
27860 "@types/hoist-non-react-statics": "^3.3.1", 27860 "@types/hoist-non-react-statics": "^3.3.1",
...@@ -28088,9 +28088,9 @@ ...@@ -28088,9 +28088,9 @@
28088 } 28088 }
28089 }, 28089 },
28090 "redux": { 28090 "redux": {
28091 - "version": "4.1.2", 28091 + "version": "4.2.0",
28092 - "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz", 28092 + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
28093 - "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==", 28093 + "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
28094 "requires": { 28094 "requires": {
28095 "@babel/runtime": "^7.9.2" 28095 "@babel/runtime": "^7.9.2"
28096 } 28096 }
......
...@@ -14,10 +14,10 @@ ...@@ -14,10 +14,10 @@
14 "nodemon": "^2.0.16", 14 "nodemon": "^2.0.16",
15 "react": "^18.1.0", 15 "react": "^18.1.0",
16 "react-dom": "^18.1.0", 16 "react-dom": "^18.1.0",
17 - "react-redux": "^8.0.1", 17 + "react-redux": "^8.0.2",
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.2.0",
21 "redux-thunk": "^2.4.1", 21 "redux-thunk": "^2.4.1",
22 "web-vitals": "^2.1.4" 22 "web-vitals": "^2.1.4"
23 }, 23 },
......
...@@ -3,6 +3,7 @@ import RegisterPage from './component/views/RegisterPage/RegisterPage'; ...@@ -3,6 +3,7 @@ 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'; 5 import SelectPage from './component/views/SelectPage/SelectPage';
6 +import RecommandPage from './component/views/RecommandPage/RecommandPage';
6 import { Route, Routes } from 'react-router-dom'; 7 import { Route, Routes } from 'react-router-dom';
7 8
8 function App() { 9 function App() {
...@@ -13,6 +14,7 @@ function App() { ...@@ -13,6 +14,7 @@ function App() {
13 <Route exact path = "/register" element = {<RegisterPage/>}/> 14 <Route exact path = "/register" element = {<RegisterPage/>}/>
14 <Route exact path = "/main" element = {<MainPage/>}/> 15 <Route exact path = "/main" element = {<MainPage/>}/>
15 <Route exact path = "/select" element = {<SelectPage/>}/> 16 <Route exact path = "/select" element = {<SelectPage/>}/>
17 + <Route exact path = "/recommand" element = {<RecommandPage/>}/>
16 </Routes> 18 </Routes>
17 </div> 19 </div>
18 ); 20 );
......
1 +import React, { useCallback, useState } from "react";
2 +import { useNavigate } from "react-router-dom";
3 +import { useDispatch, useSelector } from "react-redux";
4 +import "../style/RecommandPage.scss"
5 +import { image } from "../../../modules/user";
6 +import TopImage from '../../../../src/img/1841764_3_500.png';
7 +import BottomImage from '../../../../src/img/1926048_1_500.png';
8 +import HeadImage from '../../../../src/img/2479141_1_500.png';
9 +import ShoesImage from '../../../../src/img/1439535_8_500.png';
10 +
11 +
12 +function RecommandPage(props) {
13 + const dispatch = useDispatch();
14 + const navigate = useNavigate();
15 +
16 + const mainpageResult = useSelector((state) => state.user.mainpageSuccess);
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 + const navigate_login = useCallback((event) => {
35 + navigate('../login');
36 + })
37 +
38 + const navigate_register = useCallback((event) => {
39 + navigate('../register');
40 + })
41 +
42 + return (
43 + <>
44 + <dir id = "header">
45 + <dir className="clock">
46 + <h1 id="clock">{Time}</h1>
47 + </dir>
48 + <dir className="title">
49 + <h1>Weather_Briefing</h1>
50 + </dir>
51 + <dir className="Login-Register">
52 + <button type="button" onClick={navigate_login}>Login</button>
53 + <button type="button" onClick={navigate_register}>Register</button>
54 + </dir>
55 + </dir>
56 +
57 + <div id = "recommand_body">
58 + <dir className="fashion_recommand">
59 + <dir className="rainOrnot">비/눈 예보가 없습니다. </dir>
60 + <dir className="clothes">
61 + <dir className="Top">
62 + <h1>TOP</h1>
63 + <img src={TopImage} className='Top_Image' />
64 + </dir>
65 + <dir className="Bottom">
66 + <h1>BOTTOM</h1>
67 + <img src={BottomImage} className='Bottom_Image' />
68 + </dir>
69 + <dir className="Head">
70 + <h1>HEAD</h1>
71 + <img src={HeadImage} className='Head_Image' />
72 + </dir>
73 + <dir className="Shoes">
74 + <h1>SHOES</h1>
75 + <img src={ShoesImage} className='Shoes_Image' />
76 + </dir>
77 + </dir>
78 + </dir>
79 + </div>
80 +
81 + <dir id = "footer">
82 + <dir className="footer_logo">
83 + <h1>logo</h1>
84 + </dir>
85 + <dir className="footer_info">
86 + <p>경희대학교</p>
87 + <p>컴퓨터공학과 김건희ㅣ오석진ㅣ손수민</p>
88 + </dir>
89 + </dir>
90 + </>
91 + );
92 +};
93 +
94 +export default RecommandPage;
95 +
1 +* {
2 + margin: 0;
3 + padding: 0;
4 + box-sizing: border-box;
5 + background-color: rgb(245, 235, 223);
6 + }
7 + img {
8 + width: 300px;
9 + height: 300px;
10 + object-fit: cover;
11 + }
12 +
13 + #recommand_body {
14 + display: flex;
15 + justify-content: center;
16 + align-items: center;
17 + border-top: 2px solid;
18 + border-bottom: 2px solid;
19 +
20 + .fashion_recommand {
21 + border: 2px solid;
22 + width: 90%;
23 + height: 200%;
24 + margin-top: 150px;
25 + margin-bottom: 30px;
26 +
27 + .rainOrnot {
28 + display: flex;
29 + justify-content: center;
30 + align-items: center;
31 + margin-top: 20px;
32 + margin-left: 100px;
33 + margin-right: 100px;
34 + font-size :30px;
35 + font-weight: bold;
36 + }
37 + .clothes{
38 + display:flex;
39 + justify-content: space-between;
40 + align-items: space-between;
41 +
42 + .Top{
43 + display:flex;
44 + flex-wrap: wrap;
45 + flex-direction: column;
46 + font-size: 30px;
47 + border: 2px solid;
48 + color:rgb(0, 0, 0);
49 + justify-content: center;
50 + align-items: center;
51 + margin-top: 50px;
52 + margin-bottom: 50px;
53 + margin-left: 1%;
54 + margin-right: 1%;
55 + }
56 +
57 + .Bottom{
58 + display:flex;
59 + flex-wrap: wrap;
60 + flex-direction: column;
61 + font-size: 30px;
62 + border: 2px solid;
63 + color:rgb(0, 0, 0);
64 + justify-content: center;
65 + align-items: center;
66 + margin-top: 50px;
67 + margin-bottom: 50px;
68 + margin-left: 1%;
69 + margin-right: 1%;
70 + }
71 +
72 + .Head{
73 + display:flex;
74 + flex-wrap: wrap;
75 + flex-direction: column;
76 + font-size: 30px;
77 + border: 2px solid;
78 + color:rgb(0, 0, 0);
79 + justify-content: center;
80 + align-items: center;
81 + margin-top: 50px;
82 + margin-bottom: 50px;
83 + margin-left: 1%;
84 + margin-right: 1%;
85 + }
86 + .Shoes{
87 + display:flex;
88 + flex-wrap: wrap;
89 + flex-direction: column;
90 + font-size: 30px;
91 + border: 2px solid;
92 + color:rgb(0, 0, 0);
93 + justify-content: center;
94 + align-items: center;
95 + margin-top: 50px;
96 + margin-bottom: 50px;
97 + margin-left: 1%;
98 + margin-right: 1%;
99 + }
100 + }
101 + }
102 +}
103 +
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,6 +2,7 @@ import axios from 'axios'; ...@@ -2,6 +2,7 @@ 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_MAINPAGE = 'user/MAINPAGE';
5 6
6 export function register(dataToSubmit) { 7 export function register(dataToSubmit) {
7 8
...@@ -24,6 +25,17 @@ export function login(dataToSubmit) { ...@@ -24,6 +25,17 @@ export function login(dataToSubmit) {
24 } 25 }
25 }; 26 };
26 27
28 +export function mainpage(dataToSubmit) {
29 + const req = axios.post('http://localhost:4000/api/mainpage', dataToSubmit)
30 + .then(res => res.data);
31 +
32 + return {
33 + type: USER_MAINPAGE,
34 + payload: req,
35 + }
36 +};
37 +
38 +
27 export default function (state = {}, action) { 39 export default function (state = {}, action) {
28 switch (action.type) { 40 switch (action.type) {
29 case USER_REGISTER: 41 case USER_REGISTER:
...@@ -32,6 +44,9 @@ export default function (state = {}, action) { ...@@ -32,6 +44,9 @@ export default function (state = {}, action) {
32 case USER_LOGIN: 44 case USER_LOGIN:
33 return { ...state, loginSuccess: action.payload }; 45 return { ...state, loginSuccess: action.payload };
34 break; 46 break;
47 + case USER_MAINPAGE:
48 + return { ...state, mainpageSuccess: action.payload };
49 + break;
35 default: 50 default:
36 return state; 51 return state;
37 } 52 }
......