列車データ取得機能を30秒毎に動くように変更

stateBox/useAllTrainDiagram.js

@@ -1,4 +1,5 @@
 import trainList from "@/assets/originData/trainList";
+import useInterval from "@/lib/useInterval";
 import { AS } from "@/storageControl";
 import React, { createContext, useContext, useEffect, useState } from "react";
 const initialState = {
@@ -19,8 +20,7 @@ export const AllTrainDiagramProvider = ({ children }) => {
     () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)),
     [allTrainDiagram]
   );
-  useEffect(() => {
-    fetch("https://n8n.haruk.in/webhook/JR-shikoku-diagram-migrate-original")
+  const getTrainDiagram = () => fetch("https://n8n.haruk.in/webhook/JR-shikoku-diagram-migrate-original")
       .then((res) => res.json())
       .then((res) => res.data)
       .then((res) => {
@@ -42,9 +42,12 @@ export const AllTrainDiagramProvider = ({ children }) => {
             alert("初回の路線情報の取得に失敗しました。");
           });
       });
-  }, []);
-  useEffect(() => {
-    // カスタム列車データの取得
+  
+  useEffect(getTrainDiagram, []);
+  useInterval(getTrainDiagram, 30000); //30秒毎に全在線列車取得
+
+
+  const getCustomTrainData = ()=>{
     fetch("https://n8n.haruk.in/webhook/jr-shikoku-position-custom-datalist")
       .then((res) => res.json())
       .then((res) => {
@@ -53,7 +56,14 @@ export const AllTrainDiagramProvider = ({ children }) => {
       .catch(() => {
         alert("カスタム列車データの取得に失敗しました。");
       });
+  }
+
+
+  useEffect(() => {
+    // カスタム列車データの取得
+    getCustomTrainData();
   }, []);
+  useInterval(getCustomTrainData, 30000); // 30秒毎にカスタム列車データ取得
 
   return (
     <AllTrainDiagramContext.Provider