Fix Little Issue

Author: kcyoow

src/app/components/routemap/Animation.tsx

@@ -27,19 +27,24 @@ export const circleAnimation = (
     jungang: boolean[]
   },
 ) => {
-  const tableArray = tabArray
+  const newTableArray = {
+    direct: [...tabArray.direct],
+    cycle: [...tabArray.cycle],
+    yesulin: [...tabArray.yesulin],
+    jungang: [...tabArray.jungang],
+  }
   for (let i = type.index; i <= type.index + 1; i++) {
     if (type.dotType === 'direct') {
-      tableArray.direct[i] = true
+      newTableArray.direct[i] = true
     } else if (type.dotType === 'cycle') {
-      tableArray.cycle[i] = true
+      newTableArray.cycle[i] = true
     } else if (type.dotType === 'yesulin') {
-      tableArray.yesulin[i] = true
+      newTableArray.yesulin[i] = true
     } else if (type.dotType === 'jungang') {
-      tableArray.jungang[i] = true
+      newTableArray.jungang[i] = true
     }
   }
-  setTableArray(tableArray)
+  setTableArray(newTableArray)
 }
 
 const timetableType = (type: string, index: number) => {
@@ -111,6 +116,10 @@ export const useAnimation = (tab: string) => {
   const timetables = useTimeTableContext().timetable
   const checkTable = React.useRef<SingleShuttleSchedule>()
 
+  React.useEffect(() => {
+    checkTable.current = undefined
+  }, [])
+
   useEffect(() => {
     const tableArray = {
       direct: [false, false, false, false, false],
@@ -119,12 +128,12 @@ export const useAnimation = (tab: string) => {
       jungang: [false, false, false, false, false, false],
     }
 
+    setTimetable(tableArray)
+
     if (checkTable.current === timetables) return
 
     checkTable.current = timetables
 
-    setTimetable(tableArray)
-
     const animateType = CircleAnimateType(tab, timetables)
 
     animateType.forEach((item) => {

src/app/components/routemap/Responsive.tsx

@@ -1,19 +1,21 @@
 import React, { useEffect } from 'react'
 
-const Responsive = () => {
+const useResponsive = () => {
   const [screenWidth, setScreenWidth] = React.useState(window.innerWidth)
 
   useEffect(() => {
-    window.addEventListener('resize', () => setScreenWidth(window.innerWidth))
+    const handleResize = () => {
+      setScreenWidth(window.innerWidth)
+    }
+
+    window.addEventListener('resize', handleResize)
 
     return () => {
-      window.removeEventListener('resize', () =>
-        setScreenWidth(window.innerWidth),
-      )
+      window.removeEventListener('resize', handleResize)
     }
   }, [])
 
   return screenWidth
 }
 
-export default Responsive
+export default useResponsive

src/app/components/routemap/RouteVisual.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import tw from 'twin.macro'
 
 import Animation, { useAnimation } from '@/components/routemap/Animation'
-import Responsive from '@/components/routemap/Responsive'
+import useResponsive from '@/components/routemap/Responsive'
 
 const RouteLine = styled.div`
   ${tw`absolute transition duration-150 ease-in-out z-0 h-[0.2rem] top-1 rt1:top-[0.2rem] rt1:h-[0.16rem] left-[0.6rem] max-w-[13.125rem]`}
@@ -35,7 +35,7 @@ const LineRoute = (props: {
   isPrevStop: (line: string, index: number) => boolean
   index: number
 }) => {
-  const screenWidth = Responsive()
+  const screenWidth = useResponsive()
 
   if (props.rootStatus === 'direct' && props.index === 4) return
   else if (props.index === 5) return

src/app/components/shuttle/Shuttle.tsx

@@ -422,10 +422,12 @@ export const Shuttle = ({ location }: ShuttleStop) => {
 
   useEffect(() => {
     if (timetable.data !== undefined) {
-      const filtered = timetable.data.filter((val) => isAfterCurrentTime(val))
-      filtered[0] === undefined
-        ? setTimetable({ time: '', type: 'NA' })
-        : setTimetable(filtered[0])
+      setTimeout(() => {
+        const filtered = timetable.data.filter((val) => isAfterCurrentTime(val))
+        filtered[0] === undefined
+          ? setTimetable({ time: '', type: 'NA' })
+          : setTimetable(filtered[0])
+      }, 3000)
     }
   }, [timetable.data, setTimetable])
 

src/app/context/TimeTableContext.tsx

@@ -22,8 +22,11 @@ export const TimeTableContextProvider = ({
     time: '',
     type: 'NA',
   })
+
+  const value = React.useMemo(() => ({ timetable, setTimetable }), [timetable])
+
   return (
-    <TimeTableContext.Provider value={{ timetable, setTimetable }}>
+    <TimeTableContext.Provider value={value}>
       {children}
     </TimeTableContext.Provider>
   )