[Update] Function Setting

-import React, { useCallback, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import React, { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import "../style/RecommandPage.scss"
-import { image } from "../../../modules/user";
-import TopImage from '../../../../src/img/1841764_3_500.png';
-import BottomImage from '../../../../src/img/1926048_1_500.png';
-import HeadImage from '../../../../src/img/2479141_1_500.png';
-import ShoesImage from '../../../../src/img/1439535_8_500.png';
+import axios from 'axios';
 
 
 function RecommandPage(props) {
+
     const dispatch = useDispatch();
     const navigate = useNavigate();
 
-    const mainpageResult = useSelector((state) => state.user.mainpageSuccess);
-
     const [Time, setTime] = useState("00:00:00");
 
     const currentTime = () => {
@@ -39,6 +34,80 @@ function RecommandPage(props) {
         navigate('../register');
     })
 
+    const [initData, setInitData] = useState([{
+        inputData: {
+                today: '',
+                time: '',
+                temperature: '',
+                rainper: '',
+                weather: ''
+        },
+    }])
+	
+    // 원활한 데이터 관리를 위해 글 갯수를 파악한다.
+ 
+    useEffect(async() => {
+        try{
+            const res = await axios.get('/api/weatherData')
+            const _inputData = await res.data.map((weatherData) => (
+                {
+                    today: weatherData.today,
+                    time: weatherData.time,
+                    temperature: weatherData.temperature,
+                    rainper: weatherData.rainper,
+                    weather: weatherData.weather
+                })
+            )
+            // initData 그릇에 concat 으로 추가
+            setInitData(initData.concat(_inputData))
+        } catch(e){
+            console.error(e.message)
+        }
+    },[])
+
+    const [Rainstring, setRainstring] = useState("");
+    const rain = () => {
+        if(initData.inputData.rainper > 0) {
+            setRainstring("비 예보가 있습니다. 우산을 꼭 챙겨주세요!");
+        }
+        else {
+            setRainstring("비 예보가 없습니다!");
+        }
+    }
+
+    const [topPath, settopPath] = useState([""]);
+    const [bottomPath, setbottomPath] = useState([""]);
+
+    const clothesImage = () => {
+        if(initData.inputData.weather == 0) {
+            settopPath(['../../../../src/img/weather0/기모옷.jpg', '../../../../src/img/weather0/패딩.jpg']);
+            setbottomPath(['../../../../src/img/weather0/조거팬츠.jpg']);
+        }
+        else if(initData.inputData.weather == 1) {
+            settopPath(['../../../../src/img/weather1/가죽자켓.jpg', '../../../../src/img/weather1/청자켓.jpg', 
+            '../../../../src/img/weather1/울코트.jpg', '../../../../src/img/weather1/트렌치코트.jpg', '../../../../src/img/weather1/후드티.jpg']);
+            setbottomPath(['../../../../src/img/weather1/청바지.jpg']);
+        }
+        else if(initData.inputData.weather == 2) {
+            settopPath(['../../../../src/img/weather2/가디건.jpg', '../../../../src/img/weather2/니트.jpg', 
+            '../../../../src/img/weather2/맨투맨.jpg', '../../../../src/img/weather2/자켓.jpg']);
+            setbottomPath(['../../../../src/img/weather2/슬랙스.jpg', '../../../../src/img/weather2/롱스커트.jpg']);
+        }
+        else if(initData.inputData.weather == 3) {
+            settopPath(['../../../../src/img/weather3/린넨셔츠.jpg', '../../../../src/img/weather3/블라우스.jpg']);
+            setbottomPath(['../../../../src/img/weather3/스타킹.jpg', '../../../../src/img/weather2/면바지.jpg']);
+        }
+        else {
+            settopPath(['../../../../src/img/weather4/민소매(남).jpg', '../../../../src/img/weather4/민소매(여).jpg',
+            '../../../../src/img/weather4/반팔.jpg']);
+            setbottomPath(['../../../../src/img/weather4/치마(여).jpg', '../../../../src/img/weather4/반바지.jpg',
+            '../../../../src/img/weather4/핫팬츠.jpg']);
+        }
+    }
+
+    const topClothes = topPath[Math.floor(Math.random() * topPath.length)];
+    const bottomClothes = bottomPath[Math.floor(Math.random() * bottomPath.length)];
+
     return (
         <> 
         <dir id = "header">
@@ -56,23 +125,23 @@ function RecommandPage(props) {
 
         <div id = "recommand_body">
             <dir className="fashion_recommand">
-                <dir className="rainOrnot">비/눈 예보가 없습니다. </dir>
+                <dir className="rainOrnot">{Rainstring}</dir>
                 <dir className="clothes">
                     <dir className="Top">
                         <h1>TOP</h1>
-                        <img src={TopImage} className='Top_Image' />
+                        <img src={topClothes} className='Top_Image' />
                     </dir>
                     <dir className="Bottom">
                         <h1>BOTTOM</h1>
-                        <img src={BottomImage} className='Bottom_Image' />
+                        <img src={bottomClothes} className='Bottom_Image' />
                     </dir>
                     <dir className="Head">
                         <h1>HEAD</h1>
-                        <img src={HeadImage} className='Head_Image' />
+                        <img src={topClothes} className='Head_Image' />
                     </dir>
                     <dir className="Shoes">
                         <h1>SHOES</h1>
-                        <img src={ShoesImage} className='Shoes_Image' />
+                        <img src={bottomClothes} className='Shoes_Image' />
                     </dir>
                 </dir>
             </dir>