[시간표] 버튼 디자인 수정 및 메인 학기 지정 에러 수정 (#482)

BCSDLab · Sep 16, 2024 · 47fe7e5 · 47fe7e5
1 parent ed7e61c
commit 47fe7e5
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 18 deletions.
diff --git a/src/assets/svg/pen-icon.svg b/src/assets/svg/pen-icon.svg
diff --git a/src/pages/TimetablePage/ModifyTimetablePage/DefaultPage/DefaultPage.module.scss b/src/pages/TimetablePage/ModifyTimetablePage/DefaultPage/DefaultPage.module.scss
@@ -90,18 +90,20 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: 155px;
+    width: 139px;
     height: 48px;
     border: 0;
     border-radius: 5px;
     padding: 12px 20px;
-    background-color: #fafafa;
+    background-color: #fff;
     box-shadow: 0 2px 4px 0 #0000000a;
-    font-size: 15.5px;
+    font-size: 18px;
     gap: 8px;
     font-weight: 500;
     color: #4b4b4b;
     cursor: pointer;
+    line-height: 28.8px;
+    font-family: Pretendard, sans-serif;
   }
 
   &__trash-can-icon {
@@ -112,6 +114,12 @@
   &__lecture-list {
     width: 613px;
   }
+
+  &__pen-icon {
+    display: flex;
+    width: 24px;
+    height: 24px;
+  }
 }
 
 .timetable {

diff --git a/src/pages/TimetablePage/ModifyTimetablePage/DefaultPage/index.tsx b/src/pages/TimetablePage/ModifyTimetablePage/DefaultPage/index.tsx
@@ -100,7 +100,7 @@ export default function DefaultPage({ frameId }: { frameId: string | undefined }
                 onClick={() => navigate('/timetable')}
               >
                 <PenIcon className={styles['page__pen-icon']} />
-                시간표 저장
+                수정 완료
               </button>
             </div>
             <ErrorBoundary fallbackClassName="loading">

diff --git a/src/pages/TimetablePage/components/MainTimetable/MyLectureTimetable.module.scss b/src/pages/TimetablePage/components/MainTimetable/MyLectureTimetable.module.scss
@@ -29,13 +29,16 @@
     padding: 12px 20px;
     width: 155px;
     height: 48px;
-    background-color: #fafafa;
-    font-family: Pretendard, sans-serif;
+    background-color: #fff;
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    display: flex;
     font-weight: 500;
-    font-size: 15.5px;
-    line-height: 21.48px;
+    font-size: 18px;
+    line-height: 28.8px;
     color: #4b4b4b;
-    cursor: pointer;
+    align-items: center;
 
     &:hover {
       background-color: #eee;
@@ -45,4 +48,10 @@
       background-color: #e1e1e1;
     }
   }
+
+  &__edit-icon {
+    display: flex;
+    width: 24px;
+    height: 24px;
+  }
 }
diff --git a/src/pages/TimetablePage/components/MainTimetable/index.tsx b/src/pages/TimetablePage/components/MainTimetable/index.tsx
@@ -57,7 +57,7 @@ function MainTimetable({ frameId }: { frameId: number }) {
           className={styles.page__button}
           onClick={() => navigate(`/timetable/modify/regular/${token ? frameId : semester}`)}
         >
-          <EditIcon />
+          <EditIcon className={styles['page__edit-icon']} />
           시간표 수정
         </button>
       </div>

diff --git a/...ablePage/components/TimetableList/TimetableSettingModal/TimetableSettingModal.module.scss b/...ablePage/components/TimetableList/TimetableSettingModal/TimetableSettingModal.module.scss
@@ -100,6 +100,17 @@
     color: #8e8e8e;
   }
 
+  &__set-default-timetable-message {
+    display: flex;
+    font-family: Pretendard, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 25.6px;
+    text-align: left;
+    color: #8e8e8e;
+    padding: 12px 32px 6px;
+  }
+
   &__button {
     display: flex;
     padding: 16px 24px 24px;

diff --git a/src/pages/TimetablePage/components/TimetableList/TimetableSettingModal/index.tsx b/src/pages/TimetablePage/components/TimetableList/TimetableSettingModal/index.tsx
@@ -78,12 +78,24 @@ export default function TimetableSettingModal({
             onChange={(e) => setFocusFrame({ ...focusFrame, timetable_name: e.target.value })}
           />
         </div>
-        <div className={styles['container__setting-message']}>
-          <button type="button" className={styles.container__checkbox} onClick={toggleIsChecked}>
-            {focusFrame.is_main ? <CheckedIcon /> : <NotCheckedIcon />}
-          </button>
-          <div className={styles['container__set-default-timetable']}>기본 시간표로 설정하기</div>
-        </div>
+        {focusFrame.is_main ? (
+          <div className={styles['container__set-default-timetable-message']}>
+            기본 시간표로 설정되었습니다.
+          </div>
+        ) : (
+          <div className={styles['container__setting-message']}>
+            <button
+              type="button"
+              className={styles.container__checkbox}
+              onClick={toggleIsChecked}
+            >
+              {focusFrame.is_main ? <CheckedIcon /> : <NotCheckedIcon />}
+            </button>
+            <div className={styles['container__set-default-timetable']}>
+              기본 시간표로 설정하기
+            </div>
+          </div>
+        )}
         <div className={styles.container__button}>
           <button
             type="button"