Design: 오늘 날짜는 그냥 볼드처리만

chichoon · Jul 11, 2022 · c557dfe · c557dfe
1 parent 0752ae6
commit c557dfe
Showing 3 changed files with 5 additions and 9 deletions.
diff --git a/src/router/Calendar/OverviewCalendar/CalendarBody/CalendarDateElement.tsx b/src/router/Calendar/OverviewCalendar/CalendarBody/CalendarDateElement.tsx
@@ -21,6 +21,7 @@ const CalendarDateElement = ({ date, songOfTheDay, ifOtherMonth }: IProps) => {
   const buttonRef = useRef(null);
   const isHovering = useHoverDirty(buttonRef);
   const tooltipString = songOfTheDay ? `${songOfTheDay.date}\n${songOfTheDay.title}` : '';
+  const isToday = today.isSame(date, 'day');
 
   return (
     <li className={styles.calendarButtonWrapper}>
@@ -31,15 +32,13 @@ const CalendarDateElement = ({ date, songOfTheDay, ifOtherMonth }: IProps) => {
             className={cx(styles.dateWrapper, styles.songAvailable, { [styles.otherMonthDate]: ifOtherMonth })}
             ref={buttonRef}
           >
-            {date.date()}
-            {today.isSame(date) && <div className={styles.today}>오늘</div>}
+            <span className={cx({ [styles.today]: isToday })}>{date.date()}</span>
           </Link>
           <Tooltip tooltipString={tooltipString} position='topMiddle' isShown={isHovering} />
         </>
       ) : (
         <div className={cx(styles.dateWrapper, { [styles.otherMonthDate]: ifOtherMonth })}>
-          {date.date()}
-          {today.isSame(date, 'day') && <div className={styles.today}>오늘</div>}
+          <span className={cx({ [styles.today]: isToday })}>{date.date()}</span>
         </div>
       )}
     </li>

diff --git a/src/router/Calendar/OverviewCalendar/CalendarBody/calendarBody.module.scss b/src/router/Calendar/OverviewCalendar/CalendarBody/calendarBody.module.scss
@@ -47,9 +47,6 @@
   }
 
   .today {
-    padding: 5px;
-    margin: 10px 0;
-    text-align: center;
-    background-color: var(--color-middle30);
+    font-weight: 700;
   }
 }
diff --git a/src/router/Calendar/OverviewCalendar/CalendarHeader/calendarHeader.module.scss b/src/router/Calendar/OverviewCalendar/CalendarHeader/calendarHeader.module.scss
@@ -5,7 +5,7 @@
   @include flexbox.flexbox(between, center);
   flex-direction: row;
   width: 100%;
-  margin-bottom: 32px;
+  margin-bottom: 20px;
 
   button {
     font-size: sizes.$FONT_SUBTITLE;