[Add] Week calendar

+import React, { useContext } from "react";
+import GridItem from "./GridItem.js";
+
+import { CalendarStateContext } from "../pages/Calendar";
+import { moveDate, toSunday } from "../utils/Dates";
+import "../styles/Week.css";
+
+const GridHead = () => {
+  const days = ["일", "월", "화", "수", "목", "금", "토"];
+  const renderItems = () => {
+    const items = [];
+    for (let i = 0; i < 7; i++) {
+      items.push(
+        <div className="GridHeadItem" key={i}>
+          {days[i]}
+        </div>
+      );
+    }
+    return items;
+  };
+
+  return <div className="GridHead">{renderItems()}</div>;
+};
+
+const Row = () => {
+  const { state } = useContext(CalendarStateContext);
+
+  const renderItems = () => {
+    const items = [];
+    const ndate = new Date(state.date);
+    toSunday(ndate);
+
+    for (let i = 0; i < 6; i++) {
+      items.push(<GridItem key={i} targetDate={new Date(ndate)} />);
+      moveDate(ndate, "day", 1);
+    }
+
+    return items;
+  };
+
+  return <div className="Row">{renderItems()}</div>;
+};
+
+const Week = () => {
+  return (
+    <div className="Week">
+      <GridHead />
+      <Row />
+    </div>
+  );
+};
+
+export default Week;

@@ -6,6 +6,7 @@ import Header from "../components/Header";
 import Side from "../components/Side";
 import localforage from "localforage";
 import axios from "axios";
+import Week from "../components/Week";
 
 export const CalendarStateContext = React.createContext();
 
@@ -77,7 +78,7 @@ const Calendar = () => {
           <Side />
           <Routes>
             <Route path="/month/*" element={<Month />} />
-            <Route path="/week/*" element={<></>} />
+            <Route path="/week/*" element={<Week />} />
             <Route path="/day/*" element={<></>} />
           </Routes>
         </div>

@@ -64,7 +64,7 @@ button:disabled {
 }
 
 .s_start {
-  color: deepskyblue;
+  color: blue;
   /* text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; */
 }
 
@@ -87,6 +87,7 @@ button:disabled {
   left: 20px;
   background: rgb(246, 246, 246);
   border: solid thin black;
+  border-radius: 5px;
   display: none;
   padding: 10px;
   cursor: auto;

+.Week {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.GridItem,
+.GridHeadItem {
+  flex-basis: 100px;
+  flex-grow: 1;
+}
+
+.GridItem {
+  border: solid thin lightgray;
+  display: flex;
+  flex-direction: column;
+  /* height: 150px; */
+  padding: 5px;
+}
+
+.GridHeadItem {
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  padding: 10px 5px 10px 5px;
+}
+
+.GridHead {
+  display: flex;
+}
+
+.GridHead {
+  margin-right: 16.8px;
+}
+
+.Row {
+  display: flex;
+  overflow-y: auto;
+  height: calc(100vh - 115px);
+  border: solid thin gray;
+}
+
+.GridItem[relative] > span {
+  color: gray;
+}