[Add] Display date in each cell

@@ -2,14 +2,23 @@ import "../styles/Grid.css";
 import GridHead from "./GridHead.js";
 import GridRow from "./GridRow.js";
 
-import React from "react";
+import React, { useContext } from "react";
+import { CalendarStateContext } from "../pages/Calendar";
+import { moveDate, toSunday, toYMD } from "../utils/Dates";
 
 const Grid = () => {
+  const [state] = useContext(CalendarStateContext);
+
   const renderRows = () => {
     const rows = [];
+    const ndate = new Date(state.year, state.month - 1, 1);
+    toSunday(ndate);
+
     for (let i = 0; i < 5; i++) {
-      rows.push(<GridRow key={i} />);
+      rows.push(<GridRow key={i} startDate={toYMD(ndate)} />);
+      moveDate(ndate, "week", 1);
     }
+
     return rows;
   };
 

-const GridItem = () => {
-  return <div className="GridItem"></div>;
+import { useContext } from "react";
+import { CalendarStateContext } from "../pages/Calendar";
+
+const GridItem = ({ targetDate }) => {
+  const [state] = useContext(CalendarStateContext);
+  const { month, date } = targetDate;
+
+  const displayDate = () => {
+    if (state.month !== month) return month + "/" + date;
+    else return date;
+  };
+  return (
+    <div className="GridItem" relative={month - state.month || null}>
+      <span>{displayDate()}</span>
+    </div>
+  );
 };
 
 export default GridItem;

+import { moveDate, toYMD } from "../utils/Dates";
 import GridItem from "./GridItem";
 
-const GridRow = () => {
+const GridRow = ({ startDate }) => {
+  const { year, month, date } = startDate;
+
   const renderItems = () => {
     const items = [];
+    const ndate = new Date(year, month - 1, date);
+
     for (let i = 0; i < 7; i++) {
-      items.push(<GridItem key={i} />);
+      items.push(<GridItem key={i} targetDate={toYMD(ndate)} />);
+      moveDate(ndate, "day", 1);
     }
+
     return items;
   };
 

@@ -2,6 +2,7 @@ import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { CalendarStateContext } from "../pages/Calendar";
 import "../styles/Header.css";
+import { moveDate, toYMD } from "../utils/Dates";
 
 const Header = () => {
   const [state, setState] = useContext(CalendarStateContext);
@@ -15,34 +16,10 @@ const Header = () => {
     navigate("/calendar/" + e.target.value);
   };
 
-  const gotoToday = () => {
-    const scope = state.scope;
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = today.getMonth() + 1;
-    const date = today.getDate();
-    setState({ scope, year, month, date });
-  };
-
   const move = (e) => {
-    const scope = state.scope;
     const current = new Date(state.year, state.month - 1, state.date);
-    switch (scope) {
-      case "month":
-        current.setMonth(current.getMonth() + Number(e.target.value));
-        break;
-      case "week":
-        current.setDate(current.getDate() + Number(e.target.value) * 7);
-        break;
-      case "day":
-        current.setDate(current.getDate() + Number(e.target.value));
-        break;
-      default:
-    }
-    const year = current.getFullYear();
-    const month = current.getMonth() + 1;
-    const date = current.getDate();
-    setState({ scope, year, month, date });
+    moveDate(current, state.scope, Number(e.target.value));
+    setState({ scope: state.scope, ...toYMD(current) });
   };
 
   let headLabel;
@@ -64,7 +41,10 @@ const Header = () => {
         <span className="hls">확장 캘린더</span>
       </div>
       <div className="hc">
-        <button className="hcb" onClick={gotoToday}>
+        <button
+          className="hcb"
+          onClick={() => setState({ scope: state.scope, ...toYMD(new Date()) })}
+        >
           오늘
         </button>
         <div className="hcd">

 import React, { useState } from "react";
 import { Route, Routes } from "react-router-dom";
+
 import Grid from "../components/Grid";
 import Header from "../components/Header";
 import "../styles/Home.css";
+import { toYMD } from "../utils/Dates";
 
 export const CalendarStateContext = React.createContext();
 
 const Calendar = () => {
-  const today = new Date();
-  const year = today.getFullYear();
-  const month = today.getMonth() + 1;
-  const date = today.getDate();
-  //const day = today.getDay();
-
   //scope는 day, state는 date
   const [state, setState] = useState({
     scope: "month",
-    year: year,
-    month: month,
-    date: date,
+    ...toYMD(new Date()),
   });
 
   return (

@@ -5,6 +5,7 @@
   height: 150px;
   flex-basis: 100px;
   flex-grow: 1;
+  padding: 5px;
 }
 
 .GridHeadItem {
@@ -23,3 +24,7 @@
   display: flex;
   flex-direction: column;
 }
+
+.GridItem[relative] > span {
+  color: gray;
+}

+function toYMD(dateObj) {
+  const year = dateObj.getFullYear();
+  const month = dateObj.getMonth() + 1;
+  const date = dateObj.getDate();
+
+  return { year, month, date };
+}
+
+function toSunday(dateObj) {
+  const day = dateObj.getDay();
+  moveDate(dateObj, "day", -day);
+}
+
+function moveDate(dateObj, scope, distance) {
+  switch (scope) {
+    case "month":
+      dateObj.setMonth(dateObj.getMonth() + distance);
+      break;
+    case "week":
+      dateObj.setDate(dateObj.getDate() + distance * 7);
+      break;
+    case "day":
+      dateObj.setDate(dateObj.getDate() + distance);
+      break;
+    default:
+  }
+}
+
+export { toYMD, toSunday, moveDate };