Merge remote-tracking branch 'origin/kimpen' into hijinju

server/client/package.json

@@ -24,7 +24,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "proxy": "http://localhost:3030"
   },
   "proxy": "http://localhost:3030",
   "eslintConfig": {

server/client/src/Pages/HomePage.js

@@ -2,6 +2,14 @@ import React, { useState, useEffect } from 'react';
 import Menu from '../Components/Menu';
 import Calendar from '../Components/Calendar';
 import styled from 'styled-components';
+import moment from 'moment';
+import "moment/locale/ko";
+
+moment.locale("ko", {
+    week: {
+        dow: 1
+    }
+});
 
 const Drop = styled.div`
     & button {
@@ -9,8 +17,36 @@ const Drop = styled.div`
     }
 `
 
+const Schedule = styled.div`
+    & ul {
+        list-style-type: none;
+    }
+`
+
 function Home() {
-    const [click, setState] = useState();
+    const [show, setShow] = useState(false);
+    const [weeks, setWeeks] = useState([]);
+
+    useEffect(() => {
+        Dateform();
+    }, []);
+
+    function Dateform() {
+        let today = moment();
+        let weeks = [];
+        let dates = { start: null, end: null };
+        for (let i = 0; i < 6; i++) {
+            if (i !== 0) {
+                today.add(7, 'd');
+            }
+
+            dates.start = today.startOf('week').format("MMM Do");
+            dates.end = today.endOf('week').weekday(4).format("MMM Do");
+            const week = dates.start + "  ~  " + dates.end;
+            weeks.push(week);
+        };
+        setWeeks([...weeks])
+    };
 
     return (
         <div>
@@ -27,43 +63,19 @@ function Home() {
                 </p>
 
                 <Drop className="row dropdown mt-1 mb-2">
+                    <div className="container">
+                        <Drop className="row dropdown mt-5 mb-5">
                             <button className="btn btn-lg dropdown-toggle mx-auto col-5" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 기간을 선택해주십시오.
                     </button>
                             <div className="dropdown-menu col-5" aria-labelledby="dropdownMenuButton">
-                        <a className="dropdown-item" href="#">10 / 5 ~ 10 / 9</a>
-                        <a className="dropdown-item" href="#">10 / 12 ~ 10 / 16</a>
-                        <a className="dropdown-item" href="#">10 / 19 ~ 10 / 23</a>
+                                {weeks.map((week, index) => (
+                                    <a className="dropdown-item" href="#" onClick={() => setShow(true)}>{week}</a>
+                                ))}
                             </div>
                         </Drop>
-
-                <ul className="nav nav-tabs nav-justified mt-4" id="myTab" role="tablist">
-                    <li className="nav-item">
-                        <a className="nav-link active" id="7-tab" data-toggle="tab" href="#7" role="tab"> 7-223 </a>
-                    </li>
-                    <li className="nav-item">
-                        <a className="nav-link" id="9-tab" data-toggle="tab" href="#9" role="tab"> 9-116 </a>
-                    </li>
-                    <li className="nav-item">
-                        <a className="nav-link" id="25-tab" data-toggle="tab" href="#25" role="tab"> 25-307 </a>
-                    </li>
-                </ul>
-
-                <div className="tab-content" id="myTabContent">
-                    <div className="tab-pane fade show active" id="7" role="tabpanel">
-                        
-                    {/* <Calendar />
-                    <div className="container mt-1 mb-2"></div> */}
-
-                    </div>
-
-                    <div className="tab-pane fade" id="9" role="tabpanel" aria-labelledby="9-tab">
-                    </div>
-
-                    <div className="tab-pane fade" id="25" role="tabpanel" aria-labelledby="25-tab">
-                    </div>
-
                     </div>
+                </Drop>
             </div>
         </div>
     )