refactor: 날짜 추가 정보를 보여주는 컴포넌트를 사용하는 것으로 수정

woowacourse-teams · Sep 15, 2024 · 815f3b2 · 815f3b2
1 parent a5aac39
commit 815f3b2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/frontend/src/components/MeetingCalendar/Date/RangeDate.tsx b/frontend/src/components/MeetingCalendar/Date/RangeDate.tsx
@@ -5,12 +5,12 @@ import {
   s_baseDateText,
   s_dateContainer,
   s_dateText,
-  s_holidayText,
   s_rangeDateButton,
   s_rangeEnd,
   s_rangeStart,
 } from './Date.styles';
 import { getDateInfo } from './Date.utils';
+import DateExtraInfo from './DateExtraInfo';
 
 interface RangeDateProps {
   dateInfo: DateInfo;
@@ -71,9 +71,12 @@ export default function RangeDate({
       ]}
     >
       <span css={[s_baseDateText]}>{date}</span>
-      {isRangeStart && <span css={s_holidayText}>시작</span>}
-      {isRangeEnd && <span css={s_holidayText}>끝</span>}
-      {!isRangeStart && !isRangeEnd && <span css={s_holidayText}>{holidayName || '\u00A0'}</span>}
+      <DateExtraInfo
+        isToday={isToday}
+        isRangeStart={isRangeStart}
+        isRangeEnd={isRangeEnd}
+        holidayName={holidayName}
+      />
     </button>
   ) : (
     <div key={key} css={s_dateContainer}></div>

diff --git a/frontend/src/components/MeetingCalendar/Date/SingleDate.tsx b/frontend/src/components/MeetingCalendar/Date/SingleDate.tsx
@@ -5,10 +5,10 @@ import {
   s_baseDateText,
   s_dateContainer,
   s_dateText,
-  s_holidayText,
   s_singleDateButton,
 } from './Date.styles';
 import { getDateInfo } from './Date.utils';
+import DateExtraInfo from './DateExtraInfo';
 
 interface SingleCalendarDateProps {
   dateInfo: DateInfo;
@@ -56,7 +56,7 @@ export default function SingleDate({
       ]}
     >
       <span css={[s_baseDateText]}>{date}</span>
-      <span css={s_holidayText}>{holidayName || '\u00A0'}</span>
+      <DateExtraInfo isToday={isToday} holidayName={holidayName} />
     </button>
   ) : (
     <div key={key} css={s_dateContainer}></div>