feat: card day grid

src/components/screens/Month/Month.js

@@ -1,8 +1,38 @@
 import React, { Component } from "react";
-import { subDays, format, isToday } from "date-fns";
+import styled from "@emotion/styled";
+import {
+  isAfter,
+  format,
+  addMonths,
+  subMonths,
+  getDaysInMonth,
+  startOfMonth
+} from "date-fns";
 
 import Seek from "../../Seek";
 
+const YearCardGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  grid-gap: 20px;
+  margin-top: 20px;
+`;
+const YearCard = styled.div`
+  color: ${props =>
+    props.disabled
+      ? props.theme.colors.quarternary
+      : props.theme.colors.secondary};
+  border: 1px solid;
+  border-color: ${props => props.theme.colors.quarternary};
+  padding: 30px;
+  border-radius: 5px;
+  text-align: center;
+  user-select: none;
+  &:hover {
+    border-color: ${props => !props.disabled && props.theme.colors.tertiary};
+  }
+`;
+
 class Month extends Component {
   render() {
     const {
@@ -11,15 +41,25 @@ class Month extends Component {
       }
     } = this.props;
     const currentDay = new Date(year, month - 1);
+
+    let yearCards = [];
+    for (let i = 0; i < getDaysInMonth(currentDay); i++) {
+      yearCards.push(<YearCard key={i}>{i + 1}</YearCard>);
+    }
+
     return (
-      <div>
+      <>
         <Seek
           title={format(currentDay, "YYYY MMM")}
-          prev={format(subDays(currentDay, 1), "/YYYY/MM")}
-          next={"asdf"}
-          disableNext={isToday(new Date())}
+          prev={format(subMonths(currentDay, 1), "/YYYY/MM")}
+          next={format(addMonths(currentDay, 1), "/YYYY/MM")}
+          disableNext={isAfter(
+            currentDay,
+            startOfMonth(subMonths(new Date(), 1))
+          )}
         />
-      </div>
+        <YearCardGrid>{yearCards}</YearCardGrid>
+      </>
     );
   }
 }