[Add] ScheduleItem

 import { useContext } from "react";
 import { CalendarStateContext } from "../pages/Calendar";
 import { toYMD } from "../utils/Dates";
+import ScheduleItem from "./ScheduleItem";
 
 const GridItem = ({ targetDate }) => {
   const { state } = useContext(CalendarStateContext);
   const { month } = toYMD(state.date);
   const { month: tmonth, date: tdate } = toYMD(targetDate);
 
-  const displayDate = () => {
-    if (month !== tmonth) return tmonth + "/" + tdate;
-    else return tdate;
+  const tempSchedules = [
+    { type: "zoom", category: "오픈소스", label: "", start: [9, 30] },
+    { type: "ecampus", category: "논리회로", label: "요약", end: [23, 59] },
+  ];
+  const renderScheduleItems = () => {
+    if (targetDate.getDay() === 5)
+      return (
+        <>
+          <ScheduleItem schedule={tempSchedules[0]}></ScheduleItem>
+          <ScheduleItem schedule={tempSchedules[1]}></ScheduleItem>
+        </>
+      );
   };
+
   return (
     <div className="GridItem" relative={tmonth - month || null}>
-      <span>{displayDate()}</span>
+      <span className="date">
+        {month !== tmonth ? tmonth + "/" + tdate : tdate}
+      </span>
+      {renderScheduleItems()}
     </div>
   );
 };

+import zoomSymbol from "../assets/zoom.png";
+import ecampusSymbol from "../assets/e-Campus.png";
+
+const ScheduleItem = ({ schedule }) => {
+  const { type, category, label, start, end } = schedule;
+  const selectSymbol = () => {
+    let symbol;
+    switch (type) {
+      case "zoom":
+        symbol = zoomSymbol;
+        break;
+      case "ecampus":
+        symbol = ecampusSymbol;
+        break;
+      default:
+    }
+    return symbol;
+  };
+
+  return (
+    <div className="ScheduleItem">
+      <img className="s_symbol" src={selectSymbol()} alt="404" />
+      {start && <span className="s_start">{start[0] + ":" + start[1]}</span>}
+      {end && <span className="s_end">{end[0] + ":" + end[1]}</span>}
+      <span className="s_category">{category}</span>
+      <span className="s_slabel">{label}</span>
+    </div>
+  );
+};
+
+export default ScheduleItem;

@@ -7,18 +7,6 @@ h2 {
   margin: 12px;
 }
 
-/* Calendar */
-
-.Calendar {
-  display: flex;
-  flex-direction: column;
-}
-
-.content {
-  flex: 1;
-  display: flex;
-}
-
 button {
   cursor: pointer;
   background-color: white;
@@ -46,3 +34,47 @@ button:disabled {
   cursor: auto;
   color: rgb(209, 209, 209);
 }
+
+/* Calendar */
+
+.Calendar {
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+}
+
+.ScheduleItem {
+  height: 23px;
+  display: flex;
+  margin: 1px 0 1px 0;
+  border: solid 3px bisque;
+  border-radius: 3px;
+}
+
+.ScheduleItem > span {
+  line-height: 23px;
+  vertical-align: middle;
+  margin-right: 3px;
+  font-size: small;
+}
+
+.s_start {
+  color: deepskyblue;
+  /* text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; */
+}
+
+.s_end {
+  color: crimson;
+}
+
+.s_symbol {
+  width: 21px;
+  height: 21px;
+  margin: 1px 3px 1px 1px;
+  border-radius: 3px;
+  padding: 0;
+}