fix: add promise caching and error handling in loadNavermapsScript (#128)

* fix: add promise caching and error handling in loadNavermapsScript

- Implement promise caching to prevent duplicate script loading on concurrent calls

- Add null check for window.naver.maps with descriptive error message

- Reset cached promise on failure to allow retry

- Add .catch() in LoadNavermapsScript component to handle rejected promises

* fix: use URL-keyed Map for promise caching instead of single global variable

Different option sets (e.g., different client IDs or submodules) now each get their own cached promise instead of sharing a single global one.

---------

Co-authored-by: elroypedrokameo <infinitygramexray@gmail.com>
Co-authored-by: elroypedrokameo <elroypedrokameo@unnispick.com>

Author: 3 people

packages/react-naver-maps/src/load-navermaps-script.tsx

@@ -4,24 +4,42 @@ import type { ReactElement } from 'react';
 import type { ClientOptions } from './types/client';
 import { loadScript } from './utils/load-script';
 
+const cachedPromises = new Map<string, Promise<typeof naver.maps>>();
+
 export function loadNavermapsScript(options: ClientOptions) {
   const url = makeUrl(options);
 
-  // TODO: Caching Promise
-
-  const promise = loadScript(url).then(() => {
-    const navermaps = window.naver.maps;
-
-    if (navermaps.jsContentLoaded) {
-      return navermaps;
-    }
+  const cached = cachedPromises.get(url);
+  if (cached) {
+    return cached;
+  }
 
-    return new Promise<typeof naver.maps>(resolve => {
-      navermaps.onJSContentLoaded = () => {
-        resolve(navermaps);
-      };
+  const promise = loadScript(url)
+    .then(() => {
+      const navermaps = window.naver?.maps;
+
+      if (!navermaps) {
+        throw new Error('react-naver-maps: Failed to load Naver Maps script. '
+          + 'window.naver.maps is not available. '
+          + 'Please check your client ID and network connection.');
+      }
+
+      if (navermaps.jsContentLoaded) {
+        return navermaps;
+      }
+
+      return new Promise<typeof naver.maps>(resolve => {
+        navermaps.onJSContentLoaded = () => {
+          resolve(navermaps);
+        };
+      });
+    })
+    .catch((err) => {
+      cachedPromises.delete(url);
+      throw err;
     });
-  });
+
+  cachedPromises.set(url, promise);
 
   return promise;
 }
@@ -63,12 +81,16 @@ export function LoadNavermapsScript({
   const [navermaps, setNavermaps] = useState<typeof naver.maps>();
 
   useEffect(() => {
-    loadNavermapsScript(options).then((maps) => {
-      setNavermaps(maps);
-    });
+    loadNavermapsScript(options)
+      .then((maps) => {
+        setNavermaps(maps);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
   }, []);
 
   return (
-    (navermaps && Children) ? <Children/> : null
+    (navermaps && Children) ? <Children /> : null
   );
 }