ARRAY.FROM PAIN

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -5,11 +5,23 @@ import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['SAT', 'SUN'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
-const grid = Array.from({ length: 5 }, () =>
+const grid = Array.from({ length: 6 }, (_, rowIndex) => {
-  Array.from({ length: 13 }, (_, columnIndex) => (
+  let index = 0;
-    <CalendarCell key={columnIndex} />
+  return Array.from({ length: 13 }, (_, columnIndex) => {
-  ))
+    if (columnIndex == 0) {
+      index += 1;
+      return (
+        <div key={columnIndex} className={styles.timeBlock}>
+          <div className={styles.timeLabelContainer}>
+            <p>{hoursOfDay[index - 1]}</p>
+          </div>
+        </div>
       );
+    } else {
+      return <CalendarCell key={columnIndex} />;
+    }
+  })
+});
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view