Storybook Story

src/stories/components/CalendarGrid.stories.tsx

@@ -0,0 +1,19 @@
+// Calendar.stories.tsx
+import React from 'react';
+import Calendar from 'src/views/components/common/CalendarGrid/CalendarGrid';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Common/Calendar',
+  component: Calendar,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+    tags: ['autodocs'],
+  }
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/views/components/common/CalendarGrid/CalendarGrid.module.scss

@@ -29,9 +29,7 @@
     gap: 10px;
 }
 
-.dayy {
-    display: grid;
-    grid-template-columns: auto repeat(14, 1fr);
+.day {
     gap: 5px;
 }
 

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

@@ -3,7 +3,7 @@ import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 
-const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
+const daysOfWeek = Object.values(DAY_MAP);
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
 
 /**
@@ -16,7 +16,7 @@ const Calendar: React.FC = (props) => {
       <div className={styles.calendar}>
         <div className={styles.dayLabelContainer}></div>
         {daysOfWeek.map((day, dayIndex) => (
-          <div key={dayIndex} className={styles.dayy}>
+          <div key={dayIndex} className={styles.day}>
             <div className={styles.dayLabelContainer}>
               <div className={styles.dayLabel}>{day}</div>
             </div>