[Style] Set state type from int to Date

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

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

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

@@ -6,6 +6,7 @@ import { moveDate, toYMD } from "../utils/Dates";
 
 
 const Header = () => {
 const Header = () => {
   const [state, setState] = useContext(CalendarStateContext);
   const [state, setState] = useContext(CalendarStateContext);
+  const { year, month, date } = toYMD(state.date);
 
 
   const navigate = useNavigate();
   const navigate = useNavigate();
   const setScope = (e) => {
   const setScope = (e) => {
@@ -17,19 +18,19 @@ const Header = () => {
   };
   };
 
 
   const move = (e) => {
   const move = (e) => {
-    const current = new Date(state.year, state.month - 1, state.date);
+    const current = new Date(state.date);
     moveDate(current, state.scope, Number(e.target.value));
     moveDate(current, state.scope, Number(e.target.value));
-    setState({ scope: state.scope, ...toYMD(current) });
+    setState({ scope: state.scope, date: current });
   };
   };
 
 
   let headLabel;
   let headLabel;
   switch (state.scope) {
   switch (state.scope) {
     case "month":
     case "month":
     case "week":
     case "week":
-      headLabel = state.year + "년 " + state.month + "월";
+      headLabel = year + "년 " + month + "월";
       break;
       break;
     case "day":
     case "day":
-      headLabel = state.year + "년 " + state.month + "월 " + state.date + "일";
+      headLabel = year + "년 " + month + "월 " + date + "일";
       break;
       break;
     default:
     default:
       headLabel = "unexpected scope";
       headLabel = "unexpected scope";
@@ -43,7 +44,7 @@ const Header = () => {
       <div className="hc">
       <div className="hc">
         <button
         <button
           className="hcb"
           className="hcb"
-          onClick={() => setState({ scope: state.scope, ...toYMD(new Date()) })}
+          onClick={() => setState({ scope: state.scope, date: new Date() })}
         >
         >
           오늘
           오늘
         </button>
         </button>

@@ -4,7 +4,6 @@ import { Route, Routes } from "react-router-dom";
 import Grid from "../components/Grid";
 import Grid from "../components/Grid";
 import Header from "../components/Header";
 import Header from "../components/Header";
 import "../styles/Home.css";
 import "../styles/Home.css";
-import { toYMD } from "../utils/Dates";
 
 
 export const CalendarStateContext = React.createContext();
 export const CalendarStateContext = React.createContext();
 
 
@@ -12,7 +11,7 @@ const Calendar = () => {
   //scope는 day, state는 date
   //scope는 day, state는 date
   const [state, setState] = useState({
   const [state, setState] = useState({
     scope: "month",
     scope: "month",
-    ...toYMD(new Date()),
+    date: new Date(),
   });
   });
 
 
   return (
   return (