편집 창 연동하기

1import {2  completionMessageSchema,3  type EditorSceneInput,4} from "./editor-contract.example";5
6const EDITOR_WINDOW_NAME = "map-editor-child";7const EDITOR_WINDOW_FEATURES = "width=1280,height=860";8
9type MapEditorHostOptions = {10  editorUrl: string;11  getScene: () => EditorSceneInput;12  onSubmit: (scene: EditorSceneInput) => void;13  onCancel?: () => void;14  onError?: (message: string) => void;15};16
17export function createMapEditorHost(options: MapEditorHostOptions) {18  const editorUrl = new URL(options.editorUrl, window.location.href);19  const editorOrigin = editorUrl.origin;20  let editorWindow: Window | null = null;21  let sessionId: string | null = null;22  let initialScene: EditorSceneInput | null = null;23
24  const closeEditor = () => {25    editorWindow?.close();26    editorWindow = null;27    sessionId = null;28    initialScene = null;29  };30
31  const handleMessage = (event: MessageEvent<unknown>) => {32    // 반드시 내가 연 창과 배포된 편집기의 정확한 origin을 함께 확인합니다.33    const targetWindow = editorWindow;34    if (35      !targetWindow ||36      event.source !== targetWindow ||37      event.origin !== editorOrigin38    ) {39      return;40    }41
42    const data = event.data;43    if (44      typeof data !== "object" ||45      data === null ||46      !("type" in data) ||47      typeof data.type !== "string"48    ) {49      return;50    }51
52    if (data.type === "MAP_EDITOR_READY") {53      // 같은 팝업의 재전송에도 세션과 최초 입력을 일관되게 유지합니다.54      if (!sessionId || !initialScene) return;55      targetWindow.postMessage(56        {57          type: "MAP_EDITOR_INIT",58          sessionId,59          scene: initialScene,60        },61        editorOrigin,62      );63      return;64    }65
66    const completion = completionMessageSchema.safeParse(data);67    if (completion.success) {68      if (completion.data.sessionId !== sessionId) {69        return;70      }71
72      closeEditor();73      if (completion.data.type === "MAP_EDITOR_SUBMIT") {74        options.onSubmit(completion.data.scene);75      } else {76        options.onCancel?.();77      }78      return;79    }80
81    if (data.type === "MAP_EDITOR_ERROR") {82      const message =83        "message" in data && typeof data.message === "string"84          ? data.message85          : "지도 편집기에서 오류가 발생했습니다.";86      options.onError?.(message);87    }88  };89
90  window.addEventListener("message", handleMessage);91
92  return {93    open() {94      // 중복 클릭으로 이미 편집 중인 창을 닫거나 데이터를 덮지 않습니다.95      if (editorWindow && !editorWindow.closed) {96        editorWindow.focus();97        return;98      }99      closeEditor();100      initialScene = structuredClone(options.getScene());101      sessionId = crypto.randomUUID();102      editorWindow = window.open(103        editorUrl.href,104        EDITOR_WINDOW_NAME,105        EDITOR_WINDOW_FEATURES,106      );107
108      if (!editorWindow) {109        closeEditor();110        throw new Error("팝업이 차단되었습니다.");111      }112    },113    dispose() {114      window.removeEventListener("message", handleMessage);115      closeEditor();116    },117  };118}

1import { z } from "zod";2
3// 외부 서비스로 복사할 수 있는 최소 검증 예제입니다. 업무별 저장 권한·면적 검증은 별도입니다.4const coordinateSchema = z.tuple([5  z.number().min(-180).max(180),6  z.number().min(-90).max(90),7]);8const lineStringCoordinatesSchema = z.array(coordinateSchema).min(2);9const ringSchema = z10  .array(coordinateSchema)11  .min(3)12  .superRefine((ring, context) => {13    const first = ring[0];14    const last = ring[ring.length - 1];15    const closed = first && last && first[0] === last[0] && first[1] === last[1];16    const vertices = closed ? ring.slice(0, -1) : ring;17    if (18      (closed && ring.length < 4) ||19      new Set(vertices.map((point) => point.join(","))).size < 320    ) {21      context.addIssue({22        code: "custom",23        message: "Polygon에는 서로 다른 정점이 3개 이상 필요합니다.",24      });25    }26  });27const polygonCoordinatesSchema = z.array(ringSchema).min(1);28
29const geometrySchema = z.discriminatedUnion("type", [30  z.object({31    type: z.literal("Point"),32    coordinates: coordinateSchema,33  }),34  z.object({35    type: z.literal("MultiPoint"),36    coordinates: z.array(coordinateSchema).min(1),37  }),38  z.object({39    type: z.literal("LineString"),40    coordinates: lineStringCoordinatesSchema,41  }),42  z.object({43    type: z.literal("MultiLineString"),44    coordinates: z.array(lineStringCoordinatesSchema).min(1),45  }),46  z.object({47    type: z.literal("Polygon"),48    coordinates: polygonCoordinatesSchema,49  }),50  z.object({51    type: z.literal("MultiPolygon"),52    coordinates: z.array(polygonCoordinatesSchema).min(1),53  }),54]);55
56const featureInputSchema = z.object({57  geometry: geometrySchema,58  id: z.string().optional(),59  name: z.string().optional(),60  locked: z.boolean().optional(),61  visible: z.boolean().optional(),62  themeToken: z.string().optional(),63  properties: z.record(z.string(), z.unknown()).optional(),64});65
66export const editorSceneInputSchema = z.object({67  version: z.literal(2),68  features: z.array(featureInputSchema),69  id: z.string().optional(),70  name: z.string().optional(),71  viewport: z72    .object({73      center: coordinateSchema.optional(),74      zoom: z.number().optional(),75    })76    .optional(),77});78
79export const completionMessageSchema = z.discriminatedUnion("type", [80  z.object({81    type: z.literal("MAP_EDITOR_SUBMIT"),82    sessionId: z.string().min(1),83    scene: editorSceneInputSchema,84  }),85  z.object({86    type: z.literal("MAP_EDITOR_CANCEL"),87    sessionId: z.string().min(1),88  }),89]);90
91export type EditorSceneInput = z.infer<typeof editorSceneInputSchema>;

1import type { EditorSceneInput } from "./editor-contract.example";2import { createMapEditorHost } from "./map-editor-host.example";3
4type ServicePageBindings = {5  // 예: https://maps-editor.pages.dev/editor/ 또는 로컬 /editor/6  editorUrl: string;7  openButton: HTMLButtonElement;8  // 창을 열 때 서비스의 현재 데이터를 읽습니다. 입력 예시는 input-scene.example.ts 참고.9  getScene: () => EditorSceneInput;10  // 결과 전체를 다음 편집의 기준 데이터로 보관합니다.11  applyScene: (scene: EditorSceneInput) => void;12  // 사용하는 지도 라이브러리에 맞춰 이 GeoJSON을 반영합니다.13  renderOnMap: (featureCollection: {14    type: "FeatureCollection";15    features: Array<{16      type: "Feature";17      id?: string;18      geometry: EditorSceneInput["features"][number]["geometry"];19      properties: Record<string, unknown>;20    }>;21  }) => void;22  showEditorError: (message: string) => void;23};24
25export function bindMapEditor({26  editorUrl,27  openButton,28  getScene,29  applyScene,30  renderOnMap,31  showEditorError,32}: ServicePageBindings) {33  const mapEditor = createMapEditorHost({34    editorUrl,35    getScene,36    onSubmit(editedScene) {37      // applyScene에서 getScene이 읽는 상태를 갱신하면 다음 편집도 수정본으로 시작합니다.38      applyScene(editedScene);39      // 서비스 지도의 읽기/갱신 API는 지도 라이브러리에 맞게 연결합니다.40      renderOnMap({41        type: "FeatureCollection",42        features: editedScene.features.map((feature) => ({43          type: "Feature",44          id: feature.id,45          geometry: feature.geometry,46          properties: {47            ...feature.properties,48            name: feature.name,49            locked: feature.locked,50            visible: feature.visible,51          },52        })),53      });54    },55    onCancel() {56      // CANCEL에는 scene이 없습니다. applyScene을 호출하지 않아 기존 데이터를 유지합니다.57    },58    onError: showEditorError,59  });60
61  const openEditor = () => {62    try {63      mapEditor.open();64    } catch (error) {65      showEditorError(66        error instanceof Error ? error.message : "편집기를 열지 못했습니다.",67      );68    }69  };70  openButton.addEventListener("click", openEditor);71
72  return () => {73    openButton.removeEventListener("click", openEditor);74    mapEditor.dispose();75  };76}