조직도 줌 레벨 상향

adminfront/src/components/layout/AppLayout.tsx

@@ -22,13 +22,13 @@ import { useAuth } from "react-oidc-context";
 import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
 import {
   AppSidebar,
+  type ShellSidebarNavItem,
   type ShellTranslator,
   applyShellTheme,
   buildShellProfileSummary,
   buildShellSessionStatus,
   readShellSessionExpiryEnabled,
   readShellTheme,
-  type ShellSidebarNavItem,
   shellLayoutClasses,
   writeShellSessionExpiryEnabled,
 } from "../../../../common/shell";

adminfront/src/components/ui/dialog.tsx

@@ -111,37 +111,36 @@ const DialogPortal = ({ children }: { children?: React.ReactNode }) => {
 };
 DialogPortal.displayName = "DialogPortal";
 
-const DialogClose = React.forwardRef<
-  HTMLButtonElement,
-  DialogTriggerProps
->(({ asChild = false, children, onClick, ...props }, ref) => {
-  const { setOpen } = useDialogContext("DialogClose");
-  const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onClick?.(event);
-    if (!event.defaultPrevented) {
-      setOpen(false);
+const DialogClose = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(
+  ({ asChild = false, children, onClick, ...props }, ref) => {
+    const { setOpen } = useDialogContext("DialogClose");
+    const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) {
+        setOpen(false);
+      }
+    };
+
+    if (asChild && React.isValidElement(children)) {
+      const child = children as React.ReactElement<{
+        onClick?: React.MouseEventHandler<HTMLElement>;
+      }>;
+      return React.cloneElement(child, {
+        ...props,
+        onClick: composeEventHandlers(
+          child.props.onClick as React.MouseEventHandler<HTMLButtonElement>,
+          () => setOpen(false),
+        ),
+      });
     }
-  };
 
-  if (asChild && React.isValidElement(children)) {
-    const child = children as React.ReactElement<{
-      onClick?: React.MouseEventHandler<HTMLElement>;
-    }>;
-    return React.cloneElement(child, {
-      ...props,
-      onClick: composeEventHandlers(
-        child.props.onClick as React.MouseEventHandler<HTMLButtonElement>,
-        () => setOpen(false),
-      ),
-    });
-  }
-
-  return (
-    <button type="button" ref={ref} onClick={handleClose} {...props}>
-      {children}
-    </button>
-  );
-});
+    return (
+      <button type="button" ref={ref} onClick={handleClose} {...props}>
+        {children}
+      </button>
+    );
+  },
+);
 DialogClose.displayName = "DialogClose";
 
 const DialogOverlay = React.forwardRef<
@@ -169,8 +168,8 @@ const DialogOverlay = React.forwardRef<
 DialogOverlay.displayName = "DialogOverlay";
 
 const DialogContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+  HTMLDialogElement,
+  React.HTMLAttributes<HTMLDialogElement>
 >(({ className, children, onKeyDown, ...props }, ref) => {
   const { open, setOpen } = useDialogContext("DialogContent");
 
@@ -194,13 +193,13 @@ const DialogContent = React.forwardRef<
   return (
     <DialogPortal>
       <DialogOverlay />
-      <div
+      <dialog
         ref={ref}
-        role="dialog"
+        open
         aria-modal="true"
         data-state="open"
         className={cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          "fixed left-[50%] top-[50%] z-50 m-0 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-transparent data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
           className,
         )}
         onKeyDown={onKeyDown}
@@ -211,7 +210,7 @@ const DialogContent = React.forwardRef<
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogClose>
-      </div>
+      </dialog>
     </DialogPortal>
   );
 });