feat(Cluster): Cluster component의 icons prop에 React element를 사용할 수 있도록 변경 (#55)

* feat(Cluster): Cluster component의 icons prop에 React element를 사용할 수 있도록 변경

* fix: script-id와 전역객체에 naver 지도 객체가 있을 때 얼리 리턴되도록 변경

---------

Co-authored-by: socar-dosii <dosii@socar.kr>

Author: josworks27

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r2don/react-naver-map",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "author": {
     "name": "r2don",
     "email": "leejj2002@naver.com"

src/classes/Cluster.ts

@@ -1,5 +1,5 @@
-import { MarkerClustering } from "./MarkerClustering";
 import type { Nullable } from "../types";
+import { MarkerClustering } from "./MarkerClustering";
 
 /**
  * 마커를 가지고 있는 클러스터를 정의합니다.

src/components/Cluster.tsx

@@ -1,12 +1,25 @@
-import React, { cloneElement, ReactElement, Ref, useRef } from "react";
-import { useMapContext } from "../context";
+import React, {
+  Ref,
+  cloneElement,
+  isValidElement,
+  useRef,
+  type ReactElement,
+} from "react";
+import { renderToStaticMarkup } from "react-dom/server";
 import { ClusterOptions, MarkerClustering } from "../classes";
+import { useMapContext } from "../context";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect";
+import type { ArrayToUnion } from "../types";
 import type { MarkerRef } from "./marker/type";
 
+interface ClusterPropsOptions
+  extends Omit<Partial<ClusterOptions>, "map" | "markers" | "icons"> {
+  icons?: Array<ArrayToUnion<ClusterOptions["icons"]> | ReactElement>;
+}
+
 interface ClusterProps {
   children: Array<ReactElement<{ ref: Ref<MarkerRef> }>>;
-  options?: Omit<Partial<ClusterOptions>, "map" | "markers">;
+  options?: ClusterPropsOptions;
 }
 
 export const Cluster = ({ children, options }: ClusterProps) => {
@@ -17,8 +30,21 @@ export const Cluster = ({ children, options }: ClusterProps) => {
   useIsomorphicLayoutEffect(() => {
     import("../classes/MarkerClustering").then(({ MarkerClustering }) => {
       if (clusterRef.current) return;
+
+      const icons = options?.icons?.map((icon) => {
+        // ReactElement 타입(React.ReactElement<any, string | React.JSXElementConstructor<any>>)일 경우, HTML 문자열로 변환합니다.
+        if (isValidElement<any>(icon)) {
+          return {
+            content: renderToStaticMarkup(icon),
+          };
+        }
+        // 그 외 타입(string | naver.maps.ImageIcon | naver.maps.SymbolIcon | naver.maps.HtmlIcon)이면 그대로 반환합니다.
+        return icon;
+      });
+
       const cluster = new MarkerClustering({
         ...options,
+        icons,
         map,
         markers: Object.values(markersRef.current)
           .filter((ref) => !!ref.getMarker)

src/hooks/useNaverMapInit/index.ts

@@ -32,7 +32,7 @@ export const useNaverMapInit: UseNaverMapInit = ({
       setInitResult({ isLoaded: false, isError: false });
       return;
     }
-    if (document.getElementById(SCRIPT_ID)) {
+    if (document.getElementById(SCRIPT_ID) && Boolean(window?.naver.maps)) {
       setInitResult({ isLoaded: true, isError: false });
       return;
     }

src/types/ArrayToUnion.ts

@@ -0,0 +1,2 @@
+export type ArrayToUnion<T extends readonly unknown[]> =
+  T extends readonly (infer R)[] ? R : never;

src/types/index.ts

@@ -1,3 +1,4 @@
+export * from "./AnyFunction";
+export * from "./ArrayToUnion";
 export * from "./Nullable";
 export * from "./ValueOf";
-export * from "./AnyFunction";