[Style] Change Context type from array to object

@@ -3,7 +3,7 @@ import { CalendarStateContext } from "../pages/Calendar";
 import { toYMD } from "../utils/Dates";
 
 const GridItem = ({ targetDate }) => {
-  const [state] = useContext(CalendarStateContext);
+  const { state } = useContext(CalendarStateContext);
   const { month } = toYMD(state.date);
   const { month: tmonth, date: tdate } = toYMD(targetDate);
 

@@ -5,7 +5,7 @@ import "../styles/Header.css";
 import { moveDate, toYMD } from "../utils/Dates";
 
 const Header = () => {
-  const [state, setState] = useContext(CalendarStateContext);
+  const { state, setState } = useContext(CalendarStateContext);
   const { year, month, date } = toYMD(state.date);
 
   const navigate = useNavigate();

 import React, { useState } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 
-import Grid from "../components/Grid";
+import Month from "../components/Month";
 import Header from "../components/Header";
-import "../styles/Home.css";
+import Side from "../components/Side";
+import Subject from "../utils/Subject";
 
 export const CalendarStateContext = React.createContext();
 
@@ -17,17 +18,40 @@ const Calendar = () => {
     date: new Date(),
   });
 
+  if (!localStorage.getItem("Subjects")) {
+    let tsubs = [];
+    let tcolors = [
+      "red",
+      "green",
+      "blue",
+      "orange",
+      "gold",
+      "aqua",
+      "chartreuse",
+    ];
+    for (let i = 0; i < 7; i++) {
+      tsubs.push(new Subject("과목" + (i + 1), tcolors[i], true));
+    }
+    localStorage.setItem("Subjects", JSON.stringify(tsubs));
+  }
+  const [subs, setSubs] = useState(
+    JSON.parse(localStorage.getItem("Subjects"))
+  );
+
   return (
-    <CalendarStateContext.Provider value={[state, setState]}>
+    <CalendarStateContext.Provider value={{ state, setState, subs, setSubs }}>
       {session ? (
         <div className="Calendar">
           <Header />
+          <div className="content">
+            <Side />
             <Routes>
-            <Route path="/month/*" element={<Grid />} />
+              <Route path="/month/*" element={<Month />} />
               <Route path="/week/*" element={<></>} />
               <Route path="/day/*" element={<></>} />
             </Routes>
           </div>
+        </div>
       ) : (
         <Navigate to="/login" />
       )}