[EC-92] feat: 출결 Indicator 추가 (#74)

Author: DaeJungYoon

client/src/pages/studentAttendance/StudentAttendance.jsx

@@ -59,7 +59,25 @@ export default function StudentAttendance() {
         </div>
         <div className={styles.attendanceCalendar}>
           <DashBoardItem width={'100%'}>
-            <Calendar attendanceData={attendanceData}></Calendar>
+            <div className={styles.legendContainer}>
+              <div className={styles.legend}>
+                <div className={styles.legendItem}>
+                  <span className={styles.lateIndicator}></span>
+                  <span>지각</span>
+                </div>
+                <div className={styles.legendItem}>
+                  <span className={styles.earlyLeaveIndicator}></span>
+                  <span>조퇴</span>
+                </div>
+                <div className={styles.legendItem}>
+                  <span className={styles.absentIndicator}></span>
+                  <span>결석</span>
+                </div>
+              </div>
+            </div>
+            <div className={styles.calendarWrapper}>
+              <Calendar attendanceData={attendanceData}></Calendar>
+            </div>
           </DashBoardItem>
         </div>
       </div>

client/src/pages/studentAttendance/StudentAttendance.module.css

@@ -33,7 +33,7 @@
   bottom: 0;
   left: var(--padding-medium);
   right: var(--padding-medium);
-  width: auto; 
+  width: auto;
 }
 
 .attendanceCurrent {
@@ -47,9 +47,23 @@
 
 .attendanceCalendar {
   width: 50%;
+  height: 100%;
 }
+
 .attendanceCalendar > div {
   height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.legendContainer {
+  margin-bottom: 15px;
+  padding-top: 15px;
+}
+
+.calendarWrapper {
+  flex: 1;
+  min-height: 0;
 }
 
 .attendanceType {
@@ -59,3 +73,38 @@
   gap: 15px;
   flex: 1;
 }
+
+.legend {
+  display: flex;
+  justify-content: flex-start;
+  padding-left: 15px;
+}
+
+.legendItem {
+  display: flex;
+  align-items: center;
+  margin-right: 15px;
+  font-size: 14px;
+}
+
+.earlyLeaveIndicator,
+.absentIndicator,
+.lateIndicator {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-right: 5px;
+  border-radius: 50%;
+}
+
+.earlyLeaveIndicator {
+  background-color: var(--primary-100);
+}
+
+.absentIndicator {
+  background-color: var(--border-100);
+}
+
+.lateIndicator {
+  background-color: var(--primary-200);
+}