gis 편집

apps/sn/src/features/windowPopup/lib/openWindowPopup.ts

@@ -17,17 +17,51 @@ const buildQueryString = (params: OpenWindowPopupParams = {}) => {
   return queryString ? `?${queryString}` : "";
 };
 
-const buildPopupFeatures = (width: number, height: number) => {
+const clamp = (value: number, min: number, max: number) => {
+  if (max < min) return min;
+  return Math.min(Math.max(value, min), max);
+};
+
+const buildPopupFeatures = (
+  width: number,
+  height: number,
+  placement: "center" | "browser-left" = "center",
+) => {
   const screenLeft = window.screenX ?? window.screenLeft ?? 0;
   const screenTop = window.screenY ?? window.screenTop ?? 0;
   const outerWidth = window.outerWidth || window.screen.width;
   const outerHeight = window.outerHeight || window.screen.height;
-  const left = Math.max(0, screenLeft + Math.round((outerWidth - width) / 2));
-  const top = Math.max(0, screenTop + Math.round((outerHeight - height) / 2));
+  const screen = window.screen as Screen & {
+    availLeft?: number;
+    availTop?: number;
+  };
+  const availableLeft = screen.availLeft ?? 0;
+  const availableTop = screen.availTop ?? 0;
+  const availableWidth = window.screen.availWidth || outerWidth;
+  const availableHeight = window.screen.availHeight || outerHeight;
+  const safeWidth = Math.min(width, Math.max(360, availableWidth - 48));
+  const safeHeight = Math.min(height, Math.max(420, availableHeight - 72));
+  const minLeft = availableLeft;
+  const minTop = availableTop + 24;
+  const maxLeft = availableLeft + availableWidth - safeWidth - 16;
+  const maxTop = availableTop + availableHeight - safeHeight - 24;
+  const left =
+    placement === "browser-left"
+      ? clamp(screenLeft, minLeft, maxLeft)
+      : clamp(
+          screenLeft + Math.round((outerWidth - safeWidth) / 2),
+          availableLeft + 16,
+          maxLeft,
+        );
+  const top = clamp(
+    screenTop + Math.round((outerHeight - safeHeight) / 2),
+    minTop,
+    maxTop,
+  );
 
   return [
-    `width=${width}`,
-    `height=${height}`,
+    `width=${safeWidth}`,
+    `height=${safeHeight}`,
     `left=${left}`,
     `top=${top}`,
     "resizable=yes",
@@ -48,7 +82,11 @@ export const openWindowPopup = (
 
   const definition = windowPopupDefinitions[popupKey];
   const popupUrl = `/popup/${popupKey}${buildQueryString(params)}`;
-  const popupFeatures = buildPopupFeatures(definition.width, definition.height);
+  const popupFeatures = buildPopupFeatures(
+    definition.width,
+    definition.height,
+    "placement" in definition ? definition.placement : undefined,
+  );
   const popupWindow = window.open(
     popupUrl,
     `sn-popup-${popupKey}`,

apps/sn/src/features/windowPopup/model/popupDefinitions.ts

@@ -105,9 +105,10 @@ export const windowPopupDefinitions = {
   },
   gisEditSessionPopup: {
     key: "gisEditSessionPopup",
-    title: "GIS 편집 세션",
-    width: 520,
-    height: 820,
+    title: "편집 세션",
+    width: 460,
+    height: 640,
+    placement: "browser-left",
   },
   gisManagementPopup: {
     key: "gisManagementPopup",

apps/sn/src/features/windowPopup/model/types.ts

@@ -14,6 +14,7 @@ export type WindowPopupDefinition = {
   title: string;
   width: number;
   height: number;
+  placement?: "center" | "browser-left";
   requiredParams?: string[];
 };