손수민

[Update] Function Setting

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>
......