From 08b86f8aabf3e39d552e3165a0357cd3f56e0633 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Thu, 3 Oct 2024 14:58:37 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20useFetch=20=EC=BA=90=EC=8B=B1=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PItemContainer/MainPItemContainer.tsx     |  0
 src/hooks/useFetch.ts                         | 13 +++++-
 src/store/useCacheStore.ts                    | 42 +++++++++++++++++++
 3 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 src/components/PItemContainer/MainPItemContainer.tsx
 create mode 100644 src/store/useCacheStore.ts

diff --git a/src/components/PItemContainer/MainPItemContainer.tsx b/src/components/PItemContainer/MainPItemContainer.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/hooks/useFetch.ts b/src/hooks/useFetch.ts
index 82a6d3c8..0d295f30 100644
--- a/src/hooks/useFetch.ts
+++ b/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 };
 }
diff --git a/src/store/useCacheStore.ts b/src/store/useCacheStore.ts
new file mode 100644
index 00000000..07511ed0
--- /dev/null
+++ b/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 };
+    }),
+}));