CalendarBtn 생성 및 적용

client/src/components/Buttons/CalendarBtn.js

+import styles from "./buttons.module.scss";
+
+const CalendarBtn = ({ date }) => {
+    return (
+        <div className={`d-inline-block position-relative text-center ${styles.calendar}`}>
+            <strong className="position-absolute top-0 text-white">Today</strong>
+            <span>10</span>
+        </div>
+    )
+}
+
+export default CalendarBtn
\ No newline at end of file

client/src/components/Buttons/buttons.module.scss

@@ -39,3 +39,30 @@
     background-color: #6c757d;
     border-color: #6c757d;
 }
+
+.calendar {
+    font-size: 0.435em;
+    width: 7em;
+    height: 7.2em;
+    border-radius: 0.4em;
+    box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
+    overflow: hidden;
+
+    & * {
+        display: block;
+        width: 100%;
+    }
+
+    & strong {
+        padding: 0.4em 0;
+        background-color: crimson;
+        box-shadow: 0 2px 0 crimson;
+    }
+
+    & span {
+        font-size: 3em;
+        letter-spacing: -0.05em;
+        padding-top: 1em;
+        font-family: "Plex-Medi";
+    }
+}
\ No newline at end of file

client/src/pages/Admin/AdminPage.js

+import CalendarBtn from "../../components/Buttons/CalendarBtn.js";
 import styles from "./admin.module.scss";
 
 const AdminPage = () => {
     return (
         <>
             <p className={`position-absolute user-select-none ${styles.status}`}>관리자님, 환영합니다. | <span className={styles.cursor}>로그아웃</span></p>
+            <div className="position-absolute" style={{ top: "7px", left: "7px" }}>
+                <CalendarBtn date="2021-09-28" />
+            </div>
         </>
     )
 }

client/src/pages/HomePage.js

 import Menu from "../components/Menu/Menu.js";
+import CalendarBtn from "../components/Buttons/CalendarBtn.js";
 import Footer from "../components/Footer.js";
 
 const HomePage = () => {
     return (
         <>
             <Menu />
+            <div className="position-absolute" style={{ top: "9px", right: "8px" }}>
+                <CalendarBtn date="2021-10-28" />
+            </div>
             <Footer pathname="schedule/edit" />
         </>
     )