Merge pull request #83 from Team-INSERT/feat/timetable

시간표 페이지 완성

src/apis/httpClient/httpClient.ts

@@ -160,7 +160,7 @@ export const axiosConfig: HttpClientConfig = {
 export default {
   oauth: new HttpClient("api/auth/oauth/bsm", axiosConfig),
   user: new HttpClient("api/user", axiosConfig),
-  timetable: new HttpClient("api/timetable", axiosConfig),
+  timetable: new HttpClient("api/timeTable", axiosConfig),
   post: new HttpClient("api/post/", axiosConfig),
   recomment: new HttpClient("api/recomment", axiosConfig),
   comment: new HttpClient("api/comment", axiosConfig),

src/assets/data/emptyClassInfo.ts

@@ -1,11 +1,16 @@
 import { IClassInfo } from "@/interfaces";
 
 const emptyClassInfo: IClassInfo = {
-  className: "",
-  endTime: "23:59:59",
-  startTime: "00:00:00",
-  type: "normal",
-  isNow: false,
+  period: "",
+  subject: "",
+  endTime: {
+    hour: 0,
+    minute: 0,
+  },
+  startTime: {
+    hour: 0,
+    minute: 0,
+  },
 };
 
 export default emptyClassInfo;

src/assets/data/emptyTimetable.ts

@@ -1,67 +1,102 @@
 import { ITimetable } from "@/interfaces";
 
 const emptyTimetable: ITimetable = {
-  SUN: [
+  SUNDAY: [
     {
-      className: "",
-      endTime: "23:59:59",
-      startTime: "00:00:00",
-      type: "normal",
-      isNow: false,
+      period: "",
+      subject: "",
+      startTime: {
+        hour: 0,
+        minute: 0,
+      },
+      endTime: {
+        hour: 24,
+        minute: 0,
+      },
     },
   ],
-  FRI: [
+  FRIDAY: [
     {
-      className: "",
-      endTime: "23:59:59",
-      startTime: "00:00:00",
-      type: "normal",
-      isNow: false,
+      period: "",
+      subject: "",
+      startTime: {
+        hour: 0,
+        minute: 0,
+      },
+      endTime: {
+        hour: 24,
+        minute: 0,
+      },
     },
   ],
-  SAT: [
+  SATURDAY: [
     {
-      className: "",
-      endTime: "23:59:59",
-      startTime: "00:00:00",
-      type: "normal",
-      isNow: false,
+      period: "",
+      subject: "",
+      startTime: {
+        hour: 0,
+        minute: 0,
+      },
+      endTime: {
+        hour: 24,
+        minute: 0,
+      },
     },
   ],
-  TUE: [
+  TUESDAY: [
     {
-      className: "",
-      endTime: "23:59:59",
-      startTime: "00:00:00",
-      type: "normal",
-      isNow: false,
+      period: "",
+      subject: "",
+      startTime: {
+        hour: 0,
+        minute: 0,
+      },
+      endTime: {
+        hour: 24,
+        minute: 0,
+      },
     },
   ],
-  THU: [
+  THURSDAY: [
     {
-      className: "",
-      endTime: "23:59:59",
-      startTime: "00:00:00",
-      type: "normal",
-      isNow: false,
+      period: "",
+      subject: "",
+      startTime: {
+        hour: 0,
+        minute: 0,
+      },
+      endTime: {
+        hour: 24,
+        minute: 0,
+      },
     },
   ],
-  MON: [
+  MONDAY: [
     {
-      className: "",
-      endTime: "23:59:59",
-      startTime: "00:00:00",
-      type: "normal",
-      isNow: false,
+      period: "",
+      subject: "",
+      startTime: {
+        hour: 0,
+        minute: 0,
+      },
+      endTime: {
+        hour: 24,
+        minute: 0,
+      },
     },
   ],
-  WED: [
+  WEDNESDAY: [
     {
-      className: "",
-      endTime: "23:59:59",
-      startTime: "00:00:00",
-      type: "normal",
-      isNow: false,
+      period: "",
+      subject: "",
+      startTime: {
+        hour: 0,
+        minute: 0,
+      },
+      endTime: {
+        hour: 24,
+        minute: 0,
+      },
     },
   ],
 };

src/helpers/getTimetableType.helper.ts

@@ -0,0 +1,12 @@
+const getTimetableType = (type: string) => {
+  switch (type) {
+    case "bar":
+      return "막대 형식";
+    case "table":
+      return "표 형식";
+    default:
+      return type;
+  }
+};
+
+export default getTimetableType;

src/helpers/index.ts

@@ -9,3 +9,4 @@ export { default as checkPostValid } from "./checkPostValid.helper";
 export { default as checkTextOverflow } from "./checkTextOverflow.helper";
 export { default as getTextDepth } from "./getTextDepth.helper";
 export { default as getMealName } from "./getMealName.helper";
+export { default as getTimetableType } from "./getTimetableType.helper";

src/hooks/useDate.ts

@@ -10,23 +10,27 @@ interface GetDateType {
 }
 
 interface DateType {
-  type?: "KOR" | "ENG";
+  type?: "KOR" | "ENG" | "ENG_DETAIL";
 }
 
 interface TranslateType {
-  to: "KOR" | "ENG";
-}
-
-interface TimeDiffType {
-  endTime: string;
-  startTime: string;
+  to: "KOR" | "ENG" | "ENG_DETAIL";
 }
 
 interface IFormatDateOptions {
   summary: boolean;
 }
 
 const weekdaysENG = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+const weekdaysENGDetail = [
+  "SUNDAY",
+  "MONDAY",
+  "TUESDAY",
+  "WEDNESDAY",
+  "THURSDAY",
+  "FRIDAY",
+  "SATURDAY",
+];
 const weekdaysKOR = ["일", "월", "화", "수", "목", "금", "토"];
 
 const useDate = () => {
@@ -79,45 +83,56 @@ const useDate = () => {
     const today = dayjs().day();
 
     if (type === "KOR") return weekdaysKOR[today];
-
+    if (type === "ENG_DETAIL") return weekdaysENGDetail[today];
     return weekdaysENG[today];
   };
 
   const translateDay = (date: string, { to }: TranslateType) => {
     if (to === "KOR") {
+      if (date.includes("DAY")) {
+        const index = weekdaysENGDetail.indexOf(date);
+        return weekdaysKOR[index];
+      }
       const index = weekdaysENG.indexOf(date);
       return weekdaysKOR[index];
     }
 
+    if (to === "ENG_DETAIL") {
+      const index = weekdaysKOR.indexOf(date);
+      return weekdaysENGDetail[index];
+    }
+
     const index = weekdaysKOR.indexOf(date);
     return weekdaysENG[index];
   };
 
   const getDiffDayTime = (from: string, to: string) => {
-    const fromDayTime = dayjs(from, "HH:mm:ss");
-    const toDayTime = dayjs(to, "HH:mm:ss");
+    const fromDayTime = dayjs(from, "HH:mm");
+    const toDayTime = dayjs(to, "HH:mm");
 
     return fromDayTime.diff(toDayTime);
   };
 
   const getDiffNowDayTime = (day: string) => {
-    const currentDayTime = dayjs(day, "HH:mm:ss");
+    const currentDayTime = dayjs(day, "HH:mm");
     const nowDayTime = dayjs();
 
     return nowDayTime.diff(currentDayTime);
   };
 
-  const getDiffTimeProgress = ({ endTime, startTime }: TimeDiffType) => {
-    const diffClassDayTime = getDiffDayTime(endTime, startTime);
-    const diffNowDayTime = getDiffNowDayTime(startTime);
+  const getDiffTimeProgress = () => {
+    const nowTime = "00:00";
+    const dayTime = getDiffDayTime("24:00", "00:00");
+    const diffNowDayTime = getDiffNowDayTime(nowTime);
 
-    const classProgress = (diffNowDayTime / diffClassDayTime) * 240;
+    const classProgress = diffNowDayTime / dayTime;
     return classProgress;
   };
 
   return {
     weekdaysENG,
     weekdaysKOR,
+    weekdaysENGDetail,
     currentYearsWithSchool,
     unformatDate,
     formatDate,

src/hooks/useTimetableBar.ts

@@ -1,17 +1,9 @@
 import React from "react";
-import { emptyClassInfo } from "@/assets/data";
 import useDate from "@/hooks/useDate";
-import { ITimetable } from "@/interfaces";
 
-interface IUserTimeTableBarProps {
-  weekday: string;
-  dayTimeTable: ITimetable;
-}
-
-const useTimetableBar = ({ weekday, dayTimeTable }: IUserTimeTableBarProps) => {
+const useTimetableBar = () => {
   const date = useDate();
   const [nowDate, setNowDate] = React.useState("");
-  const [currentClass, setCurrentClass] = React.useState(emptyClassInfo);
   const [isScrollBox, setIsScrollBox] = React.useState(false);
 
   const scrollRef = React.useRef<HTMLDivElement>(null);
@@ -20,28 +12,26 @@ const useTimetableBar = ({ weekday, dayTimeTable }: IUserTimeTableBarProps) => {
   const 현재시간과동기화 = () => {
     const HMSDate = date.getHMSDate();
     setNowDate(HMSDate);
-
-    const classProgress = date.getDiffTimeProgress(currentClass);
-
-    if (scrollRef.current) scrollRef.current.scrollLeft = classProgress;
+    if (scrollRef.current) {
+      const { scrollWidth } = scrollRef.current;
+      const classProgress = date.getDiffTimeProgress() * scrollWidth;
+      scrollRef.current.scrollLeft = classProgress;
+    }
   };
 
   const handleTimetableBarScroll = () => {
-    const classProgress = date.getDiffTimeProgress(currentClass);
-
     if (scrollRef.current) {
-      const 사용자가스크롤했다면 =
-        classProgress - scrollRef.current.scrollLeft > 1;
+      const { scrollWidth } = scrollRef.current;
+      const classProgress = date.getDiffTimeProgress() * scrollWidth;
 
-      if (사용자가스크롤했다면 && intervalRef.current !== null) {
-        clearInterval(intervalRef.current);
-        setIsScrollBox(true);
-        intervalRef.current = null;
-      }
+      const 사용자가스크롤했다면 =
+        Math.abs(classProgress - scrollRef.current.scrollLeft) > 1;
+      if (사용자가스크롤했다면) setIsScrollBox(true);
     }
   };
 
   const synchronizeCurrentTime = () => {
+    if (intervalRef.current && isScrollBox) return;
     intervalRef.current = window.setInterval(현재시간과동기화, 1000);
   };
 
@@ -51,14 +41,19 @@ const useTimetableBar = ({ weekday, dayTimeTable }: IUserTimeTableBarProps) => {
   };
 
   React.useEffect(() => {
-    synchronizeCurrentTime();
-  }, []);
+    if (isScrollBox) {
+      window.clearInterval(intervalRef.current as number);
+      intervalRef.current = null;
+    }
+  }, [isScrollBox]);
 
   React.useEffect(() => {
-    const timetable = dayTimeTable[weekday];
-    const [nowDateClass] = timetable.filter((item) => item.isNow);
-    setCurrentClass(nowDateClass);
-  }, [weekday, dayTimeTable]);
+    synchronizeCurrentTime();
+    return () => {
+      clearInterval(intervalRef.current as number);
+    };
+    // eslint-disable-next-line
+  }, []);
 
   return {
     scrollRef,

src/interfaces/classInfo.interface.ts

@@ -1,7 +1,12 @@
 export default interface IClassInfo {
-  className: string;
-  endTime: string;
-  startTime: string;
-  type: string;
-  isNow: boolean;
+  period: string;
+  subject: string;
+  endTime: {
+    hour: number;
+    minute: number;
+  };
+  startTime: {
+    hour: number;
+    minute: number;
+  };
 }