refactor(member): 캘린더 이벤트 UI 개선 (#91)

kgu-clab · Apr 9, 2024 · 63b98d4 · 63b98d4
1 parent 5da0b44
commit 63b98d4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/apps/member/src/components/calendar/CalendarSchedule/CalendarSchedule.tsx b/apps/member/src/components/calendar/CalendarSchedule/CalendarSchedule.tsx
@@ -5,14 +5,19 @@ import { useCallback } from 'react';
 import { cn } from '@utils/string';
 import dayjs from 'dayjs';
 
+interface CalendarScheduleProps extends ScheduleItem {
+  day: dayjs.Dayjs;
+}
+
 const CalendarSchedule = ({
+  day,
   title,
   detail,
   startDate,
   endDate,
-}: ScheduleItem) => {
+}: CalendarScheduleProps) => {
   const { openModal } = useModal();
-  const isSameDate = dayjs(startDate).isSame(endDate, 'date');
+  const isDateDiff = dayjs(startDate).diff(endDate, 'd');
 
   const handleScheduleClick = useCallback(
     (detail: string, start: string, end: string) => {
@@ -32,9 +37,24 @@ const CalendarSchedule = ({
 
   return (
     <button
-      className={cn('w-full px-2 text-xs text-left truncate bg-red-100', {
-        'rounded bg-blue-100': isSameDate,
-      })}
+      className={cn(
+        'w-full px-2 text-xs text-left truncate',
+        isDateDiff === 0 ? 'bg-blue-100 rounded' : 'bg-red-100',
+        {
+          'rounded-l bg-red-100':
+            isDateDiff !== 0 && day.isSame(startDate, 'date'),
+        },
+        {
+          'bg-red-100':
+            isDateDiff !== 0 &&
+            day.isAfter(startDate, 'date') &&
+            day.isBefore(endDate, 'date'),
+        },
+        {
+          'rounded-r bg-red-100':
+            isDateDiff !== 0 && day.isSame(endDate, 'date'),
+        },
+      )}
       onClick={() => handleScheduleClick(detail, startDate, endDate)}
     >
       {title}

diff --git a/apps/member/src/components/calendar/CalendarSection/CalendarSection.tsx b/apps/member/src/components/calendar/CalendarSection/CalendarSection.tsx
@@ -51,7 +51,7 @@ const CalendarSection = () => {
             {day.format('D')}
           </p>
           {events[day.format('YYYY-MM-DD')]?.map((event) => (
-            <CalendarSchedule key={event.id} {...event} />
+            <CalendarSchedule key={event.id} day={day} {...event} />
           ))}
         </div>
       </td>,