Showing
30 changed files
with
83 additions
and
14 deletions
1 | -import React, { useCallback, useState } from "react"; | 1 | +import React, { useCallback, useEffect, useState } from "react"; |
2 | -import { useNavigate } from "react-router-dom"; | ||
3 | import { useDispatch, useSelector } from "react-redux"; | 2 | import { useDispatch, useSelector } from "react-redux"; |
3 | +import { useNavigate } from "react-router-dom"; | ||
4 | import "../style/RecommandPage.scss" | 4 | import "../style/RecommandPage.scss" |
5 | -import { image } from "../../../modules/user"; | 5 | +import axios from 'axios'; |
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 | 6 | ||
11 | 7 | ||
12 | function RecommandPage(props) { | 8 | function RecommandPage(props) { |
9 | + | ||
13 | const dispatch = useDispatch(); | 10 | const dispatch = useDispatch(); |
14 | const navigate = useNavigate(); | 11 | const navigate = useNavigate(); |
15 | 12 | ||
16 | - const mainpageResult = useSelector((state) => state.user.mainpageSuccess); | ||
17 | - | ||
18 | const [Time, setTime] = useState("00:00:00"); | 13 | const [Time, setTime] = useState("00:00:00"); |
19 | 14 | ||
20 | const currentTime = () => { | 15 | const currentTime = () => { |
... | @@ -39,6 +34,80 @@ function RecommandPage(props) { | ... | @@ -39,6 +34,80 @@ function RecommandPage(props) { |
39 | navigate('../register'); | 34 | navigate('../register'); |
40 | }) | 35 | }) |
41 | 36 | ||
37 | + const [initData, setInitData] = useState([{ | ||
38 | + inputData: { | ||
39 | + today: '', | ||
40 | + time: '', | ||
41 | + temperature: '', | ||
42 | + rainper: '', | ||
43 | + weather: '' | ||
44 | + }, | ||
45 | + }]) | ||
46 | + | ||
47 | + // 원활한 데이터 관리를 위해 글 갯수를 파악한다. | ||
48 | + | ||
49 | + useEffect(async() => { | ||
50 | + try{ | ||
51 | + const res = await axios.get('/api/weatherData') | ||
52 | + const _inputData = await res.data.map((weatherData) => ( | ||
53 | + { | ||
54 | + today: weatherData.today, | ||
55 | + time: weatherData.time, | ||
56 | + temperature: weatherData.temperature, | ||
57 | + rainper: weatherData.rainper, | ||
58 | + weather: weatherData.weather | ||
59 | + }) | ||
60 | + ) | ||
61 | + // initData 그릇에 concat 으로 추가 | ||
62 | + setInitData(initData.concat(_inputData)) | ||
63 | + } catch(e){ | ||
64 | + console.error(e.message) | ||
65 | + } | ||
66 | + },[]) | ||
67 | + | ||
68 | + const [Rainstring, setRainstring] = useState(""); | ||
69 | + const rain = () => { | ||
70 | + if(initData.inputData.rainper > 0) { | ||
71 | + setRainstring("비 예보가 있습니다. 우산을 꼭 챙겨주세요!"); | ||
72 | + } | ||
73 | + else { | ||
74 | + setRainstring("비 예보가 없습니다!"); | ||
75 | + } | ||
76 | + } | ||
77 | + | ||
78 | + const [topPath, settopPath] = useState([""]); | ||
79 | + const [bottomPath, setbottomPath] = useState([""]); | ||
80 | + | ||
81 | + const clothesImage = () => { | ||
82 | + if(initData.inputData.weather == 0) { | ||
83 | + settopPath(['../../../../src/img/weather0/기모옷.jpg', '../../../../src/img/weather0/패딩.jpg']); | ||
84 | + setbottomPath(['../../../../src/img/weather0/조거팬츠.jpg']); | ||
85 | + } | ||
86 | + else if(initData.inputData.weather == 1) { | ||
87 | + settopPath(['../../../../src/img/weather1/가죽자켓.jpg', '../../../../src/img/weather1/청자켓.jpg', | ||
88 | + '../../../../src/img/weather1/울코트.jpg', '../../../../src/img/weather1/트렌치코트.jpg', '../../../../src/img/weather1/후드티.jpg']); | ||
89 | + setbottomPath(['../../../../src/img/weather1/청바지.jpg']); | ||
90 | + } | ||
91 | + else if(initData.inputData.weather == 2) { | ||
92 | + settopPath(['../../../../src/img/weather2/가디건.jpg', '../../../../src/img/weather2/니트.jpg', | ||
93 | + '../../../../src/img/weather2/맨투맨.jpg', '../../../../src/img/weather2/자켓.jpg']); | ||
94 | + setbottomPath(['../../../../src/img/weather2/슬랙스.jpg', '../../../../src/img/weather2/롱스커트.jpg']); | ||
95 | + } | ||
96 | + else if(initData.inputData.weather == 3) { | ||
97 | + settopPath(['../../../../src/img/weather3/린넨셔츠.jpg', '../../../../src/img/weather3/블라우스.jpg']); | ||
98 | + setbottomPath(['../../../../src/img/weather3/스타킹.jpg', '../../../../src/img/weather2/면바지.jpg']); | ||
99 | + } | ||
100 | + else { | ||
101 | + settopPath(['../../../../src/img/weather4/민소매(남).jpg', '../../../../src/img/weather4/민소매(여).jpg', | ||
102 | + '../../../../src/img/weather4/반팔.jpg']); | ||
103 | + setbottomPath(['../../../../src/img/weather4/치마(여).jpg', '../../../../src/img/weather4/반바지.jpg', | ||
104 | + '../../../../src/img/weather4/핫팬츠.jpg']); | ||
105 | + } | ||
106 | + } | ||
107 | + | ||
108 | + const topClothes = topPath[Math.floor(Math.random() * topPath.length)]; | ||
109 | + const bottomClothes = bottomPath[Math.floor(Math.random() * bottomPath.length)]; | ||
110 | + | ||
42 | return ( | 111 | return ( |
43 | <> | 112 | <> |
44 | <dir id = "header"> | 113 | <dir id = "header"> |
... | @@ -56,23 +125,23 @@ function RecommandPage(props) { | ... | @@ -56,23 +125,23 @@ function RecommandPage(props) { |
56 | 125 | ||
57 | <div id = "recommand_body"> | 126 | <div id = "recommand_body"> |
58 | <dir className="fashion_recommand"> | 127 | <dir className="fashion_recommand"> |
59 | - <dir className="rainOrnot">비/눈 예보가 없습니다. </dir> | 128 | + <dir className="rainOrnot">{Rainstring}</dir> |
60 | <dir className="clothes"> | 129 | <dir className="clothes"> |
61 | <dir className="Top"> | 130 | <dir className="Top"> |
62 | <h1>TOP</h1> | 131 | <h1>TOP</h1> |
63 | - <img src={TopImage} className='Top_Image' /> | 132 | + <img src={topClothes} className='Top_Image' /> |
64 | </dir> | 133 | </dir> |
65 | <dir className="Bottom"> | 134 | <dir className="Bottom"> |
66 | <h1>BOTTOM</h1> | 135 | <h1>BOTTOM</h1> |
67 | - <img src={BottomImage} className='Bottom_Image' /> | 136 | + <img src={bottomClothes} className='Bottom_Image' /> |
68 | </dir> | 137 | </dir> |
69 | <dir className="Head"> | 138 | <dir className="Head"> |
70 | <h1>HEAD</h1> | 139 | <h1>HEAD</h1> |
71 | - <img src={HeadImage} className='Head_Image' /> | 140 | + <img src={topClothes} className='Head_Image' /> |
72 | </dir> | 141 | </dir> |
73 | <dir className="Shoes"> | 142 | <dir className="Shoes"> |
74 | <h1>SHOES</h1> | 143 | <h1>SHOES</h1> |
75 | - <img src={ShoesImage} className='Shoes_Image' /> | 144 | + <img src={bottomClothes} className='Shoes_Image' /> |
76 | </dir> | 145 | </dir> |
77 | </dir> | 146 | </dir> |
78 | </dir> | 147 | </dir> | ... | ... |

12.2 KB

19.9 KB

28.2 KB

13.5 KB
weather_briefing/src/img/weather0/기모옷.jpg
0 → 100644

4.94 KB
weather_briefing/src/img/weather0/조거팬츠.jpg
0 → 100644

3.82 KB
weather_briefing/src/img/weather0/패딩.jpg
0 → 100644

5.42 KB
weather_briefing/src/img/weather1/가죽자켓.jpg
0 → 100644

19.4 KB
weather_briefing/src/img/weather1/울코트.jpg
0 → 100644

5.12 KB
weather_briefing/src/img/weather1/청바지.jpg
0 → 100644

39.2 KB
weather_briefing/src/img/weather1/청자켓.jpg
0 → 100644

40.8 KB
weather_briefing/src/img/weather1/트렌치코트.jpg
0 → 100644

61.7 KB
weather_briefing/src/img/weather1/후드티.jpg
0 → 100644

44.1 KB
weather_briefing/src/img/weather2/가디건.jpg
0 → 100644

15.1 KB
weather_briefing/src/img/weather2/니트.jpg
0 → 100644

1.4 KB
weather_briefing/src/img/weather2/롱스커트.jpg
0 → 100644

31 KB
weather_briefing/src/img/weather2/맨투맨.jpg
0 → 100644

844 KB
weather_briefing/src/img/weather2/슬랙스.jpg
0 → 100644

6.17 KB
weather_briefing/src/img/weather2/자켓.jpg
0 → 100644

22 KB
weather_briefing/src/img/weather3/린넨셔츠.jpg
0 → 100644

37.4 KB
weather_briefing/src/img/weather3/면바지.jpg
0 → 100644

7.47 KB
weather_briefing/src/img/weather3/블라우스.jpg
0 → 100644

27.4 KB
weather_briefing/src/img/weather3/스타킹.jpg
0 → 100644

25.5 KB
weather_briefing/src/img/weather4/민소매(남).jpg
0 → 100644
.jpg)
24.8 KB
weather_briefing/src/img/weather4/민소매(여).jpg
0 → 100644
.jpg)
27.6 KB
weather_briefing/src/img/weather4/반바지.jpg
0 → 100644

14.3 KB
weather_briefing/src/img/weather4/반팔.jpg
0 → 100644

19.4 KB
weather_briefing/src/img/weather4/치마(여).jpg
0 → 100644
.jpg)
10.2 KB
weather_briefing/src/img/weather4/핫팬츠.jpg
0 → 100644

14.9 KB
-
Please register or login to post a comment