[시간표] 시간 자동 조정 기능

src/components/TimetablePage/Listbox/NewListbox.module.scss

@@ -42,6 +42,11 @@
       }
     }
 
+    svg {
+      transform: rotate(360deg);
+      transition: transform 0.3s ease;
+    }
+
     &:hover {
       background-color: #f5f5f5;
     }
@@ -53,12 +58,9 @@
     &--selected {
       background-color: #175c8e33;
 
-      &:hover {
-        background-color: #175c8e33;
-      }
-
-      &:active {
-        background-color: #175c8e33;
+      svg {
+        transform: rotate(180deg);
+        transition: transform 0.3s ease;
       }
     }
 
@@ -68,6 +70,11 @@
 
       &--opened {
         border: 1px solid #cacaca;
+
+        svg {
+          transform: rotate(180deg);
+          transition: transform 0.3s ease;
+        }
       }
     }
 
@@ -78,6 +85,11 @@
 
       &--opened {
         border: 1px solid #cacaca;
+
+        svg {
+          transform: rotate(180deg);
+          transition: transform 0.3s ease;
+        }
       }
     }
   }

src/components/TimetablePage/Listbox/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { cn } from '@bcsdlab/utils';
 import { ReactComponent as DownArrowIcon } from 'assets/svg/down-arrow-icon.svg';
-import { ReactComponent as UpArrowIcon } from 'assets/svg/up-arrow-icon.svg';
 import useBooleanState from 'utils/hooks/state/useBooleanState';
 import { useOutsideClick } from 'utils/hooks/ui/useOutsideClick';
 import styles from './Listbox.module.scss';
@@ -63,7 +62,7 @@ function Listbox({
         })}
       >
         {value !== null ? list.find((item) => item.value === value)?.label : '학부'}
-        {version !== 'default' && (isOpenedPopup ? <UpArrowIcon /> : <DownArrowIcon />)}
+        {version !== 'default' && <DownArrowIcon />}
       </button>
       {isOpenedPopup && (
         <ul className={styleClasses.select__content} role="listbox">

src/pages/TimetablePage/ModifyTimetablePage/DefaultPage/DefaultPage.module.scss

@@ -90,7 +90,6 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: 139px;
     height: 48px;
     border: 0;
     border-radius: 5px;

src/pages/TimetablePage/components/CustomLecture/index.tsx

@@ -176,11 +176,31 @@ function CustomLecture({ frameId }: { frameId: string | undefined }) {
     e: { target: { value: string } },
   ) => {
     const { target } = e;
-    const newTimeInfo = {
+    let newTimeInfo = {
       ...timeSpaceComponents[index].time,
       [key]: target?.value,
     };
-    const newTimetableTime = changeToTimetableTime(newTimeInfo);
+
+    let newTimetableTime = changeToTimetableTime(newTimeInfo);
+    // 올바르지 않은 시간을 선택했을 시
+    if (newTimetableTime.length === 0) {
+      const newStartTime = Number(newTimeInfo.startHour.slice(0, 2));
+      const newEndTime = Number(newTimeInfo.endHour.slice(0, 2));
+      if (key.slice(0, 5) === 'start') {
+        newTimeInfo = {
+          ...newTimeInfo,
+          endHour: `${newStartTime + 1}시`,
+          endMinute: newStartTime + 1 === 24 ? '00분' : newTimeInfo.startMinute,
+        };
+      } else {
+        newTimeInfo = {
+          ...newTimeInfo,
+          startHour: newEndTime - 1 < 10 ? '09시' : `${newEndTime - 1}시`,
+          startMinute: newEndTime - 1 < 9 ? '00분' : newTimeInfo.endMinute,
+        };
+      }
+      newTimetableTime = changeToTimetableTime(newTimeInfo);
+    }
     const updatedTime = addWeekTime(timeSpaceComponents[index].week, newTimetableTime);
     const updatedComponents = [...timeSpaceComponents];
     updatedComponents[index] = {
@@ -344,8 +364,8 @@ function CustomLecture({ frameId }: { frameId: string | undefined }) {
                     <Listbox list={HOUR} value={time.startHour} onChange={handleLectureTimeByTime('startHour', index)} version="addLecture" />
                     <Listbox list={MINUTE} value={time.startMinute} onChange={handleLectureTimeByTime('startMinute', index)} version="addLecture" />
                     <span>-</span>
-                    <Listbox list={HOUR} value={time.endHour} onChange={handleLectureTimeByTime('endHour', index)} version="addLecture" />
-                    <Listbox list={MINUTE} value={time.endMinute} onChange={handleLectureTimeByTime('endMinute', index)} version="addLecture" />
+                    <Listbox list={[...HOUR, { label: '24시', value: '24시' }]} value={time.endHour} onChange={handleLectureTimeByTime('endHour', index)} version="addLecture" />
+                    <Listbox list={time.endHour === '24시' ? [{ label: '00분', value: '00분' }] : MINUTE} value={time.endMinute} onChange={handleLectureTimeByTime('endMinute', index)} version="addLecture" />
                   </div>
                 </div>
               </div>

src/pages/TimetablePage/components/MainTimetable/MyLectureTimetable.module.scss

@@ -8,14 +8,17 @@
   }
 
   &__total-grades {
-    margin-right: 75px;
+    position: absolute;
+    left: 16px;
+    top: 18px;
   }
 
   &__filter {
     display: flex;
     position: relative;
-    justify-content: flex-end;
+    width: 776px;
     align-items: flex-end;
+    justify-content: flex-end;
     gap: 16px;
     margin-bottom: 14px;
   }
@@ -27,9 +30,9 @@
     border: none;
     border-radius: 5px;
     padding: 12px 20px;
-    width: 155px;
     height: 48px;
     background-color: #fff;
+    font-family: Pretendard, sans-serif;
     cursor: pointer;
     justify-content: center;
     font-weight: 500;