feat: add submodules to InitParams

src/hooks/useNaverMapInit/index.ts

@@ -18,6 +18,7 @@ import type { InitResult, UseNaverMapInit } from "./types";
  */
 export const useNaverMapInit: UseNaverMapInit = ({
   ncpClientId,
+  submodules,
   onLoad,
   onError,
 }) => {
@@ -35,7 +36,7 @@ export const useNaverMapInit: UseNaverMapInit = ({
 
     const initNaverMapScript = async () => {
       const scriptInitResult = new Promise<InitResult>((resolve, reject) => {
-        const script = createNaverMapScriptByClientId(ncpClientId);
+        const script = createNaverMapScriptByClientId({ ncpClientId, submodules });
         insertNaverMapScriptIntoHead(script);
 
         script.addEventListener("load", function () {

src/hooks/useNaverMapInit/types.ts

@@ -1,5 +1,6 @@
 export interface InitParams {
   ncpClientId: string;
+  submodules?: Submodule[]
   onLoad?: VoidFunction;
   onError?: VoidFunction;
 }
@@ -10,3 +11,9 @@ export interface InitResult {
 }
 
 export type UseNaverMapInit = (params: InitParams) => InitResult;
+
+/**
+ * naver map submodule
+ * @link https://navermaps.github.io/maps.js.ncp/docs/tutorial-4-Submodules.html
+ */
+export type Submodule = "panorama" | "geocoder" | "drawing" | "visualization"

src/hooks/useNaverMapInit/utils/createNaverMapScriptByClientId.ts

@@ -1,10 +1,17 @@
 import { SCRIPT_ID } from "../constants";
 import type { InitParams } from "../types";
 
-export const createNaverMapScriptByClientId = (
-  ncpClientId: InitParams["ncpClientId"],
-) => {
+export const createNaverMapScriptByClientId = ({
+  ncpClientId,
+  submodules,
+}: Pick<InitParams, "ncpClientId" | "submodules">) => {
   const script = document.createElement("script");
+  let paramsString = `ncpClientId=${ncpClientId}`;
+
+  if (submodules?.length) {
+    paramsString = paramsString.concat(`&submodules=${submodules.join(",")}`);
+  }
+
   script.id = SCRIPT_ID;
   script.type = "text/javascript";
   script.src = `https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${ncpClientId}`;