refactor: 학사일정 리팩토링

* 학사일정에서 오늘이 해당되는 내용은 파란색으로 표시 * 학사일정 페이지에서 우측 상단에 현재 날짜 표시
LikeKNU · Sep 24, 2024 · 5a22617 · 5a22617
1 parent cf42550
commit 5a22617
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 5 deletions.
diff --git a/app/calendar/components/CalendarItem.tsx b/app/calendar/components/CalendarItem.tsx
@@ -13,7 +13,8 @@ const CalendarItem = ({ item }: { item: ScheduleProps }) => {
       <FontText fontWeight="500" style={[styles.date, { color: colors[theme].gray100 }]}>
         {item.scheduleDate}
       </FontText>
-      <FontText fontWeight="500" style={[styles.contents]}>{item.scheduleContents}</FontText>
+      <FontText fontWeight="500"
+                style={[styles.contents, { color: item.isToday ? colors.blue : colors[theme].contrast }]}>{item.scheduleContents}</FontText>
     </View>
   );
 };

diff --git a/app/calendar/components/ScheduleItem.tsx b/app/calendar/components/ScheduleItem.tsx
@@ -13,9 +13,15 @@ const ScheduleItem = ({ schedule }: ScheduleItemProps) => {
 
   return (
     <View style={[styles.container, { borderLeftColor: colors[theme].contrast }]}>
-      <FontText fontWeight="500"
-                style={[styles.date, { color: colors[theme].gray100 }]}>{schedule.scheduleDate}</FontText>
-      <FontText fontWeight="500">{schedule.scheduleContents}</FontText>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <FontText fontWeight="500"
+                  style={[styles.date, { color: colors[theme].gray100 }]}>
+          {schedule.scheduleDate}
+        </FontText>
+      </View>
+      <FontText fontWeight="500" style={{ color: schedule.isToday ? colors.blue : colors[theme].contrast }}>
+        {schedule.scheduleContents}
+      </FontText>
     </View>
   );
 };

diff --git a/app/calendar/index.tsx b/app/calendar/index.tsx
@@ -5,6 +5,7 @@ import PageLayout from '@/common/components/PageLayout';
 import { useTheme } from '@/common/contexts/ThemeContext';
 import FontText from '@/common/text/FontText';
 import colors from '@/constants/colors';
+import { useEffect } from 'react';
 import { SectionList, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -17,9 +18,32 @@ const CalendarPage = () => {
     data: calendar.scheduleWrapper
   })) : [];
 
+  const getCurrentDate = () => {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = now.getMonth() + 1;
+    const date = now.getDate();
+    const day = now.getDay();
+    return { year, month, date, day };
+  };
+
+  const getDayOfWeek = (day: number) => {
+    const days = ['일', '월', '화', '수', '목', '금', '토'];
+    return days[day];
+  };
+
+  const { year, month, date, day } = getCurrentDate();
+
   return (
     <PageLayout edges={['top']}>
-      <BackHeader title="학사일정" />
+      <BackHeader title="학사일정" button={
+        <View style={{ alignItems: 'flex-end' }}>
+          <FontText style={{ color: colors[theme].gray100 }}>{`${year}`}</FontText>
+          <FontText fontWeight="500" style={{ color: colors[theme].gray100 }}>
+            {`${month}월 ${date}일(${getDayOfWeek(day)})`}
+          </FontText>
+        </View>
+      } />
       <SectionList
         contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: bottom }}
         sections={sectionedData}

diff --git a/types/calendarTypes.ts b/types/calendarTypes.ts
@@ -2,6 +2,7 @@ export interface ScheduleProps {
   scheduleId: string;
   scheduleContents: string;
   scheduleDate: string;
+  isToday: boolean;
 }
 
 export interface CalendarProps {