기간

server/client/package-lock.json

@@ -8542,6 +8542,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.0.tgz",
+      "integrity": "sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -12961,6 +12966,44 @@
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
       "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
     },
+    "tui-calendar": {
+      "version": "1.12.14",
+      "resolved": "https://registry.npmjs.org/tui-calendar/-/tui-calendar-1.12.14.tgz",
+      "integrity": "sha512-wJuRBxw+1Yq1NG1Fb1fs2beDlFFmnObaBusXcRTyIH+j3ICzo+g7ic/KI+4mQ3WBgEuBRNkwSUejmaua6qFPTg==",
+      "requires": {
+        "tui-code-snippet": "^1.5.0",
+        "tui-date-picker": "^4.0.2",
+        "tui-time-picker": "^2.0.1"
+      }
+    },
+    "tui-code-snippet": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/tui-code-snippet/-/tui-code-snippet-1.5.2.tgz",
+      "integrity": "sha512-6UqTlQaaC1KLcmC0HAoq5dtl1G4Fib+R+NC7pmaV7kiIlZ7JqKhUmnOoGRcreAyzd81UTK/vCvhrw9QJskpCFQ=="
+    },
+    "tui-date-picker": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/tui-date-picker/-/tui-date-picker-4.1.0.tgz",
+      "integrity": "sha512-ls/8yGuWe9MPa9SzL5iQiuyVpmDCdcJgyfg5O73U0sw+ba6Y1NLOuyRDrSFaT4tKg5jm3zeLD98I9jhYCT7P/g==",
+      "requires": {
+        "tui-time-picker": "^2.0.3"
+      }
+    },
+    "tui-time-picker": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tui-time-picker/-/tui-time-picker-2.0.3.tgz",
+      "integrity": "sha512-S9pkPyAhixYMYsWIA/acaLBuoFBJGohWl9sQyWzSupqEYY4s+QNStl3kJ76Q29VkTl51+LrXm+0SJ1inP0Sheg==",
+      "requires": {
+        "tui-code-snippet": "^2.2.0"
+      },
+      "dependencies": {
+        "tui-code-snippet": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/tui-code-snippet/-/tui-code-snippet-2.3.2.tgz",
+          "integrity": "sha512-6jGbM/m7A2L59lJSripwMVp87awrWgJXezlLV8GuAha3s0k01E4+MndoU5WlXd4dauVRgzHhKguTVslx/jMehw=="
+        }
+      }
+    },
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",

server/client/package.json

@@ -10,12 +10,14 @@
     "bootstrap": "^4.5.2",
     "formik": "^2.1.5",
     "jquery": "^3.5.1",
+    "moment": "^2.29.0",
     "popper.js": "^1.16.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "styled-components": "^5.2.0",
+    "tui-calendar": "^1.12.14",
     "yup": "^0.29.3"
   },
   "scripts": {

server/client/src/Pages/HomePage.js

 import React, { useState, useEffect } from 'react';
 import Menu from '../Components/Menu';
 import styled from 'styled-components';
+import moment from 'moment';
+import "moment/locale/ko";
+
+moment.locale("ko", {
+    week: {
+        dow: 1
+    }
+});
 
 const Drop = styled.div`
     & button {
@@ -36,7 +44,28 @@ const Schedule = styled.div`
 `
 
 function Home() {
-    const [click, setState] = useState();
+    const [show, setShow] = useState(false);
+    const [weeks, setWeeks] = useState([]);
+
+    useEffect(() => {
+        Dateform();
+    }, []);
+
+    function Dateform() {
+        let today = moment();
+        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>
@@ -47,9 +76,9 @@ function Home() {
                         기간을 선택해주십시오.
                     </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>
                 <Schedule className="row cd-schedule cd-schedule--loading margin-top-lg margin-bottom-lg js-cd-schedule">

server/client/src/Pages/LoginPage.js

@@ -5,10 +5,10 @@ import { Formik } from 'formik';
 import * as Yup from 'yup';
 
 const Log = styled.div`
-    background-color: #981e1e;
+    background-color: #7B031D;
 `
 const Logo = styled.div`
-    background-color: #E76A6A;
+    background-color: rgb(239, 218, 200);
 `
 
 function Login() {