[Style] Combine .css

@@ -98,6 +98,7 @@ const GridItem = ({ targetDate }) => {
       className="GridItem gi"
       relative={month - calMonth || null}
       onClick={click}
+      scope={calState.scope}
     >
       <span className="date gi">
         {calMonth !== month ? month + "/" + date : date}

@@ -3,7 +3,6 @@ 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 = () => {

@@ -3,7 +3,6 @@ import GridItem from "./GridItem.js";
 
 import { CalendarStateContext } from "../pages/Calendar";
 import { moveDate, toSunday } from "../utils/Dates";
-import "../styles/Month.css";
 
 const GridHead = () => {
   const days = ["일", "월", "화", "수", "목", "금", "토"];

-import { useRef } from "react";
+import { useContext, useRef } from "react";
 import zoomSymbol from "../assets/zoom.png";
 import ecampusSymbol from "../assets/e-Campus.png";
+import { CalendarStateContext } from "pages/Calendar";
 
 const ScheduleItem = ({ schedule, finish }) => {
+  const { state: calState } = useContext(CalendarStateContext);
   const {
     name: subjectName,
     nickname: subjectNickname,
@@ -19,6 +21,8 @@ const ScheduleItem = ({ schedule, finish }) => {
   } = schedule;
   let sTime = startTime ? startTime.substring(0, 5) : ""; //HHMM
   let eTime = endTime ? endTime.substring(0, 5) : "";
+  const subStr =
+    calState.scope !== "month" ? `${subjectNickname || subjectName}` : null;
 
   const selectSymbol = () => {
     let symbol;
@@ -57,6 +61,11 @@ const ScheduleItem = ({ schedule, finish }) => {
       onClick={click}
       ref={thisRef}
     >
+      {subStr && (
+        <span className="s_substr ss">
+          {subStr} <br />
+        </span>
+      )}
       <img className="s_symbol ss" src={selectSymbol()} alt="404" />
       {startTime && <span className="s_start ss">{sTime}</span>}
       {endTime && <span className="s_end ss">{eTime}</span>}

@@ -3,7 +3,6 @@ import GridItem from "./GridItem.js";
 
 import { CalendarStateContext } from "../pages/Calendar";
 import { moveDate, toSunday } from "../utils/Dates";
-import "../styles/Week.css";
 
 const GridHead = () => {
   const days = ["일", "월", "화", "수", "목", "금", "토"];

 import React, { useEffect, useReducer, useState } from "react";
 import { useNavigate, Route, Routes } from "react-router-dom";
+import localforage from "localforage";
+import axios from "axios";
 
 import Month from "../components/Month";
 import Header from "../components/Header";
 import Side from "../components/Side";
-import localforage from "localforage";
-import axios from "axios";
 import Week from "../components/Week";
+import Day from "components/Day";
+import "../styles/Calendar.css";
+import "../styles/Header.css";
 
 export const CalendarStateContext = React.createContext();
 
@@ -80,7 +83,7 @@ const Calendar = () => {
           <Routes>
             <Route path="/month/*" element={<Month />} />
             <Route path="/week/*" element={<Week />} />
-            <Route path="/day/*" element={<></>} />
+            <Route path="/day/*" element={<Day />} />
           </Routes>
         </div>
       </div>

-.Month {
+.Month,
+.Week {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
 
+.Grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  overflow-y: scroll;
+  height: calc(100vh - 115px);
+  border: solid thin gray;
+}
+
+.Row {
+  display: flex;
+  overflow-y: scroll;
+  height: calc(100vh - 115px);
+  border: solid thin gray;
+}
+
+.Day {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow-y: scroll;
+  height: calc(100vh - 80px);
+  border: solid thin gray;
+  margin-top: 5px;
+}
+
+/* Common  */
+
 .GridItem,
 .GridHeadItem {
   flex-basis: 100px;
@@ -33,14 +61,6 @@
   margin-right: 16.8px;
 }
 
-.Grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-  overflow-y: scroll;
-  height: calc(100vh - 115px);
-  border: solid thin gray;
-}
-
 .GridItem[relative] > span {
   color: gray;
 }

-.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: scroll;
-  height: calc(100vh - 115px);
-  border: solid thin gray;
-}
-
-.GridItem[relative] > span {
-  color: gray;
-}