Merge pull request #144 from prgrms-fe-devcourse/143-feature/usefetch…

…-caching

Feat: useFetch 캐싱 기능 추가

src/hooks/useFetch.ts

@@ -1,3 +1,4 @@
+import { useCacheStore } from '@/store/useCacheStore';
 import replaceTextProperties from '@/utils/extractInnermostValues';
 import { useEffect, useState } from 'react';
 import { xml2json } from 'xml-js';
@@ -11,14 +12,22 @@ import { xml2json } from 'xml-js';
 export default function useFetch<T>(url: string) {
   const [data, setData] = useState<T>();
   const [isLoading, setIsLoading] = useState(false);
+  const { caches, registerCache } = useCacheStore(state => state);
+
   useEffect(() => {
+    if (caches[url]) {
+      setData(caches[url].data as T);
+      return;
+    }
     const fetchData = async () => {
       setIsLoading(true);
       try {
         const response = await fetch(url);
         const xmlText = await response.text();
         const jsonData = JSON.parse(xml2json(xmlText, { compact: true, spaces: 2 }));
-        setData(replaceTextProperties<T>(jsonData));
+        const parsedData = replaceTextProperties<T>(jsonData);
+        setData(parsedData);
+        registerCache(url, parsedData);
       } catch (error) {
         console.error('Error fetching data:', error);
       } finally {
@@ -27,7 +36,7 @@ export default function useFetch<T>(url: string) {
     };
 
     fetchData();
-  }, [url]);
+  }, [url, caches, registerCache]);
 
   return { data, isLoading };
 }

src/store/useCacheStore.ts

@@ -0,0 +1,42 @@
+import { create } from 'zustand';
+
+interface Cache {
+  data: unknown;
+  timestamp: number;
+}
+
+export const useCacheStore = create<{
+  caches: { [url: string]: Cache };
+  hasCache: (url: string) => boolean;
+  registerCache: (url: string, data: unknown) => void;
+  clear: (url: string) => void;
+}>((set, get) => ({
+  caches: {},
+  hasCache: (url: string) => {
+    const cache = get().caches[url];
+    if (!cache) return false;
+    const currentTime = Date.now();
+    const expirationTime = 5 * 60 * 1000; // 5분 (밀리초 단위)
+    return currentTime - cache.timestamp < expirationTime;
+  },
+  registerCache: (url: string, data: unknown) => {
+    if (!get().hasCache(url)) {
+      set(state => ({
+        ...state,
+        caches: {
+          ...state.caches,
+          [url]: {
+            data,
+            timestamp: Date.now(),
+          },
+        },
+      }));
+    }
+  },
+  clear: (url: string) =>
+    set(state => {
+      const restCaches = { ...state.caches };
+      delete restCaches[url];
+      return { ...state, caches: restCaches };
+    }),
+}));