Refactor(What-s-Your-Plan#15): 변수명 수정

sked to Schedule
KIMSEI1124 · Jul 28, 2024 · bbddd2c · bbddd2c
1 parent ada26f3
commit bbddd2c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 28 deletions.
diff --git a/src/components/calendar/CalendarContent.tsx b/src/components/calendar/CalendarContent.tsx
@@ -1,20 +1,22 @@
 import { useState } from 'react';
-import * as Containers from '@/components/common/Container';
+
+import DailyCalendar from './Daily/DailyCalendar';
+import Todo from './Todo';
+
+import CalendarAddIcon from '@/assets/icons/calendarAdd.svg';
 import DatePicker from '@/components/calendar/DatePicker';
+import IndexGroup from '@/components/calendar/IndexGroup';
 import MonthlyCalender from '@/components/calendar/Monthly/MonthlyCalendar';
 import WeeklyCalendar from '@/components/calendar/Weekly/WeeklyCalendar';
-import IndexGroup from '@/components/calendar/IndexGroup';
 import Button from '@/components/common/Button';
+import * as Containers from '@/components/common/Container';
 import ScheduleModal from '@/components/schedule/ScheduleModal';
 import SkedDetailModal from '@/components/schedule/SkedDetailModal';
-
-import CalendarAddIcon from '@/assets/icons/calendarAdd.svg';
 import initialSchedule from '@/constants/ScheduleFormInit';
-import { dateToString } from '@/utils/DateUtils';
 import useDateStore from '@/stores/DateStore';
 import useMemberStore from '@/stores/MemberStore';
-import Todo from './Todo';
-import DailyCalendar from './Daily/DailyCalendar';
+import { dateToString } from '@/utils/DateUtils';
+
 
 type CalendarProps = {
   category: 'MEMBER' | 'GROUP';
@@ -70,7 +72,7 @@ function CalendarContent({ category, groupId }: CalendarProps) {
           <MonthlyCalender
             category={category}
             groupId={groupId}
-            handleSkedClick={openDetail}
+            handleScheduleClick={openDetail}
             needUpdate={needUpdate}
             setUpdateFalse={setUpdateFalse}
             goDay={() => {

diff --git a/src/components/calendar/Monthly/MonthlyCalendar.tsx b/src/components/calendar/Monthly/MonthlyCalendar.tsx
@@ -23,7 +23,7 @@ type MonthlyProps = {
   groupId?: number;
   needUpdate: boolean;
   setUpdateFalse: () => void;
-  handleSkedClick: (id: number) => void;
+  handleScheduleClick: (id: number) => void;
   goDay: () => void;
 };
 
@@ -32,7 +32,7 @@ function MonthlyCalender({
                            groupId,
                            needUpdate,
                            setUpdateFalse,
-                           handleSkedClick,
+                           handleScheduleClick,
                            goDay,
                          }: MonthlyProps) {
   const createInit = (): Array<DateSchedule> => {
@@ -44,7 +44,7 @@ function MonthlyCalender({
   };
 
   const { selectedDate, setSelectedDate, selectedLabels } = useDateStore();
-  const [originSked, setOriginSked] = useState<Array<CalendarSchedule>>([]);
+  const [originSchedule, setOriginSchedule] = useState<Array<CalendarSchedule>>([]);
   const [monthSchedules, setMonthSchedules] =
     useState<Array<DateSchedule>>(createInit());
   const [firstDay, setFirstDay] = useState<Date | null>(null);
@@ -83,7 +83,7 @@ function MonthlyCalender({
       };
       const response = await getCalendars(params);
       if (response) {
-        setOriginSked(response.schedules);
+        setOriginSchedule(response.schedules);
       }
     } else if (category === 'GROUP' && groupId) {
       const params: GetGroupCalendarsParams = {
@@ -93,7 +93,7 @@ function MonthlyCalender({
       };
       const response = await getGroupCalendars(params);
       if (response) {
-        setOriginSked(response.schedules);
+        setOriginSchedule(response.schedules);
       }
     }
   }, [selectedDate, groupId]);
@@ -102,13 +102,13 @@ function MonthlyCalender({
     updateInfo();
   }, [groupId]);
 
-  const filteredSked = useCallback(() => {
-    if (firstDay && originSked) {
+  const filteredSchedule = useCallback(() => {
+    if (firstDay && originSchedule) {
       const init: Array<DateSchedule> = createInit();
 
-      for (const sked of labelFilter(originSked, selectedLabels)) {
-        let idx = getDateDiff(firstDay, sked.start_date);
-        let period = getDateDiff(sked.start_date, sked.end_date);
+      for (const schedule of labelFilter(originSchedule, selectedLabels)) {
+        let idx = getDateDiff(firstDay, schedule.start_date);
+        let period = getDateDiff(schedule.start_date, schedule.end_date);
         if (idx < 0) {
           period += idx;
           idx = 0;
@@ -127,13 +127,13 @@ function MonthlyCalender({
               }
             }
           }
-          init[idx + p][row!].push(sked);
+          init[idx + p][row!].push(schedule);
         }
       }
 
       setMonthSchedules(init);
     }
-  }, [originSked, selectedLabels]);
+  }, [originSchedule, selectedLabels]);
 
   useEffect(() => {
     const newFirst = new Date(
@@ -157,8 +157,8 @@ function MonthlyCalender({
   }, [needUpdate]);
 
   useEffect(() => {
-    filteredSked();
-  }, [filteredSked]);
+    filteredSchedule();
+  }, [filteredSchedule]);
 
   const renderMonthly = useCallback(() => {
     const calendar: Array<JSX.Element> = [];
@@ -174,7 +174,7 @@ function MonthlyCalender({
         calendar.push(
           <MonthlyDay
             key={i}
-            handleSkedClick={handleSkedClick}
+            handleScheduleClick={handleScheduleClick}
             date={date}
             firstDay={firstDay}
             schedules={monthSchedules[i]}

diff --git a/src/components/calendar/Monthly/MonthlyDay.tsx b/src/components/calendar/Monthly/MonthlyDay.tsx
@@ -1,16 +1,17 @@
+import { DateSchedule } from './MonthlyCalendar';
 import * as S from './MonthlyCalendar.styled';
+
 import { LabelColorsType } from '@/assets/styles/colorThemes';
-import { DateSchedule } from './MonthlyCalendar';
-import { isSameDay, stringToDate, getDateDiff } from '@/utils/DateUtils';
 import useDateStore from '@/stores/DateStore';
 import useMemberStore from '@/stores/MemberStore';
+import { isSameDay, stringToDate, getDateDiff } from '@/utils/DateUtils';
 
 type MDayProps = {
   date: Date;
   firstDay: Date;
   schedules: DateSchedule;
   isCurrentMonth: boolean;
-  handleSkedClick: (id: number) => void;
+  handleScheduleClick: (id: number) => void;
   goDay: () => void;
 };
 
@@ -19,7 +20,7 @@ function MonthlyDay({
   firstDay,
   schedules,
   isCurrentMonth,
-  handleSkedClick,
+  handleScheduleClick,
   goDay
 }: MDayProps) {
   const { selectedDate, setSelectedDate } = useDateStore();
@@ -51,7 +52,7 @@ function MonthlyDay({
                 $top={idx}
                 $width={width}
                 onClick={() => {
-                  handleSkedClick(schedule[0].schedule_id);
+                  handleScheduleClick(schedule[0].schedule_id);
                 }}
               >
                 <span className="truncate">{schedule[0].title}</span>