[Merge] 'feature/recommandpage' into 'frontend'

@@ -14,7 +14,7 @@
     "nodemon": "^2.0.16",
     "nodemon": "^2.0.16",
     "react": "^18.1.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-redux": "^8.0.1",
+    "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-scripts": "5.0.1",
     "redux": "^4.1.2",
     "redux": "^4.1.2",

@@ -2,6 +2,7 @@ import './App.css';
 import RegisterPage from './component/views/RegisterPage/RegisterPage';
 import RegisterPage from './component/views/RegisterPage/RegisterPage';
 import LoginPage from './component/views/LoginPage/LoginPage';
 import LoginPage from './component/views/LoginPage/LoginPage';
 import MainPage from './component/views/MainPage/MainPage';
 import MainPage from './component/views/MainPage/MainPage';
+import RecommandPage from './component/views/RecommandPage/RecommandPage';
 import { Route, Routes } from 'react-router-dom';
 import { Route, Routes } from 'react-router-dom';
 import WeatherPage from './component/views/WeatherPage/WeatherPage';
 import WeatherPage from './component/views/WeatherPage/WeatherPage';
 
 
@@ -13,6 +14,7 @@ function App() {
         <Route exact path = "/register" element = {<RegisterPage/>}/>
         <Route exact path = "/register" element = {<RegisterPage/>}/>
         <Route exact path = "/main" element = {<MainPage/>}/>
         <Route exact path = "/main" element = {<MainPage/>}/>
         <Route exact path = "/weather" element = {<WeatherPage/>}/>
         <Route exact path = "/weather" element = {<WeatherPage/>}/>
+        <Route exact path = "/recommand" element = {<RecommandPage/>}/>
       </Routes>
       </Routes>
     </div>
     </div>
   );
   );

+import React, { useCallback, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import "../style/RecommandPage.scss"
+
+function RecommandPage(props) {
+
+    const clothesResult = useSelector((state) => state.clothes.clothesRecommend);
+
+    const [IsRain, setIsRain] = useState("");
+    const [TopPath, setTopPath] = useState('');
+    const [BottomPath, setBottomPath] = useState('');
+
+    useEffect(() => {
+        clothesResult.then((result) => {
+            console.log(result);
+            console.log(result.top);
+            console.log(result.bottom);
+
+            if (result.umbrella == 1) {
+                setIsRain("비 예보가 있습니다. 우산을 꼭 챙겨주세요!");
+            }
+            else {
+                setIsRain("비 예보가 없습니다!");
+            }
+
+            setTopPath(result.top);
+            setBottomPath(result.bottom);
+        })
+    }, [clothesResult])
+
+    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) => {
+        navigate('../login');
+    })
+
+    const navigate_register = useCallback((event) => {
+        navigate('../register');
+    })  
+
+    return (
+        <> 
+        <dir id = "header">
+            <dir className="clock">
+            <h1 id="clock">{Time}</h1>
+            </dir>
+            <dir className="title">
+                <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>
+        </dir>
+
+        <div id = "recommand_body">
+            <dir className="fashion_recommand">
+                <dir className="rainOrnot">{IsRain}</dir>
+                <dir className="clothes">
+                    <dir className="Top">
+                        <h1>TOP</h1>
+                        <img src={TopPath} className='Top_Image' />
+                    </dir>
+                    <dir className="Bottom">
+                        <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>
+
+        <dir id = "footer">
+            <dir className="footer_logo">
+            <h1>logo</h1>
+            </dir>
+            <dir className="footer_info">
+                <p>경희대학교</p>
+                <p>컴퓨터공학과 김건희ㅣ오석진ㅣ손수민</p>
+            </dir>
+        </dir>
+    </>
+    );
+};
+
+export default RecommandPage;
+

+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background-color: rgb(245, 235, 223);
+  }
+  img {
+    width: 300px;
+    height: 300px;
+    object-fit: cover;
+  }
+  
+  #recommand_body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top: 2px solid;
+    border-bottom: 2px solid;
+  
+    .fashion_recommand {
+      border: 2px solid;
+      width: 90%;
+      height: 200%;
+      margin-top: 150px;
+      margin-bottom: 30px;
+    
+    .rainOrnot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 20px;
+      margin-left: 100px;
+      margin-right: 100px;
+      font-size :30px;
+      font-weight: bold;
+    }
+    .clothes{
+        display:flex;
+        justify-content: space-between;
+        align-items: space-between;
+
+        .Top{
+            display:flex;
+            flex-wrap: wrap;
+            flex-direction: column;
+            font-size: 30px;
+            border: 2px solid;
+            color:rgb(0, 0, 0);
+            justify-content: center;
+            align-items: center;
+            margin-top: 50px;
+            margin-bottom: 50px;
+            margin-left: 1%;
+            margin-right: 1%;
+        }
+
+        .Bottom{
+            display:flex;
+            flex-wrap: wrap;
+            flex-direction: column;
+            font-size: 30px;
+            border: 2px solid;
+            color:rgb(0, 0, 0);
+            justify-content: center;
+            align-items: center;
+            margin-top: 50px;
+            margin-bottom: 50px;
+            margin-left: 1%;
+            margin-right: 1%;
+        }
+        
+        .Head{
+            display:flex;
+            flex-wrap: wrap;
+            flex-direction: column;
+            font-size: 30px;
+            border: 2px solid;
+            color:rgb(0, 0, 0);
+            justify-content: center;
+            align-items: center;
+            margin-top: 50px;
+            margin-bottom: 50px;
+            margin-left: 1%;
+            margin-right: 1%;
+        }
+        .Shoes{
+            display:flex;
+            flex-wrap: wrap;
+            flex-direction: column;
+            font-size: 30px;
+            border: 2px solid;
+            color:rgb(0, 0, 0);
+            justify-content: center;
+            align-items: center;
+            margin-top: 50px;
+            margin-bottom: 50px;
+            margin-left: 1%;
+            margin-right: 1%;
+        }
+    }
+  }
+}
+  
\ No newline at end of file

@@ -3,7 +3,6 @@ import axios from 'axios';
 const USER_REGISTER = 'user/REGISTER';
 const USER_REGISTER = 'user/REGISTER';
 const USER_LOGIN = 'user/LOGIN';
 const USER_LOGIN = 'user/LOGIN';
 const USER_LOGOUT = 'user/LOGOUT';
 const USER_LOGOUT = 'user/LOGOUT';
-const USER_DATA = 'user/DATA';
 
 
 export function register (dataToSubmit) {
 export function register (dataToSubmit) {
 
 
@@ -32,9 +31,8 @@ export function logout(dataToSubmit) {
 
 
     return {
     return {
       type: USER_LOGOUT,
       type: USER_LOGOUT,
-      payload: req,
     }
     }
-};
+  }
 
 
 export default function (state = {}, action) {
 export default function (state = {}, action) {
   switch (action.type) {
   switch (action.type) {