@rchemist/listgrid 0.2.6

package/dist/listgrid/view/ViewEntityFormWrapper.js

@@ -0,0 +1,98 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Suspense, useEffect, useMemo, useState } from 'react';
+import { useSession } from '../auth';
+import { usePathname, useSearchParams } from '../router';
+import { Breadcrumb } from '../ui';
+import { checkAdminMenuPermission, DEFAULT_MENU_ALIAS } from '../menu/MenuPermissionChecker';
+import { LoadingOverlay } from '../ui';
+import { Skeleton } from '../ui';
+import { Alert } from '../ui';
+import { dynamic } from '../utils/lazy';
+// Dynamic import with better optimization
+const ViewEntityForm = dynamic(() => import('../components/form/ViewEntityForm').then((mod) => ({
+    default: mod.ViewEntityForm,
+})), {
+    ssr: false,
+    loading: () => (_jsxs("div", { className: 'relative', children: [_jsx(LoadingOverlay, { visible: true }), _jsx("div", { className: 'w-full h-[400px]' })] })),
+});
+export const ViewEntityFormWrapper = React.memo(({ props, breadcrumbs, anonymous, popupMode: popupModeProp = false }) => {
+    const [mounted, setMounted] = useState(false);
+    const [permissionType, setPermissionType] = useState();
+    const session = useSession();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    // URL 쿼리 파라미터에서 popup=true 감지 또는 prop으로 전달된 값 사용
+    const popupMode = popupModeProp || searchParams.get('popup') === 'true';
+    // popupMode일 때 body에 클래스 추가하여 레이아웃 요소 숨김
+    useEffect(() => {
+        if (popupMode) {
+            document.body.classList.add('popup-mode');
+            return () => {
+                document.body.classList.remove('popup-mode');
+            };
+        }
+        return undefined;
+    }, [popupMode]);
+    // Memoize entity form props to prevent unnecessary re-renders
+    const entityFormProps = useMemo(() => {
+        const finalProps = { ...props };
+        if (permissionType === 'READ') {
+            finalProps.readonly = true;
+        }
+        // 새창(팝업) 모드 전달
+        if (popupMode) {
+            finalProps.popupMode = true;
+        }
+        return finalProps;
+    }, [props, permissionType, popupMode]);
+    useEffect(() => {
+        let isMounted = true;
+        (async () => {
+            if (anonymous) {
+                if (isMounted) {
+                    setPermissionType('ALL');
+                    setMounted(true);
+                }
+                return;
+            }
+            if (session === undefined || pathname === undefined) {
+                return;
+            }
+            try {
+                const permissionType = await checkAdminMenuPermission({
+                    url: pathname,
+                    alias: DEFAULT_MENU_ALIAS,
+                });
+                if (isMounted) {
+                    setPermissionType(permissionType);
+                    setMounted(true);
+                }
+            }
+            catch (error) {
+                console.error('Permission check failed:', error);
+                if (isMounted) {
+                    setPermissionType('NONE');
+                    setMounted(true);
+                }
+            }
+        })();
+        return () => {
+            isMounted = false;
+        };
+    }, [session, pathname, anonymous]);
+    // Memoize breadcrumb component (새창 모드에서는 숨김)
+    const breadcrumbComponent = useMemo(() => {
+        if (popupMode)
+            return null;
+        return _jsx(Breadcrumb, { type: 'basic', items: breadcrumbs });
+    }, [breadcrumbs, popupMode]);
+    if (!mounted) {
+        return (_jsxs("div", { children: [breadcrumbComponent, _jsx("div", { children: _jsx(Skeleton, { visible: true, children: _jsx("div", { className: 'h-100 w-full' }) }) })] }));
+    }
+    if (permissionType === 'NONE') {
+        return (_jsxs("div", { children: [breadcrumbComponent, _jsx("div", { children: _jsx(Alert, { color: 'danger', size: 'md', strong: true, message: `message.no_permission`, className: 'p-10 mt-4', showCloseButton: false }) })] }));
+    }
+    return (_jsxs("div", { children: [breadcrumbComponent, _jsx("div", { children: _jsx(Suspense, { fallback: _jsxs("div", { className: 'relative', children: [_jsx(LoadingOverlay, { visible: true }), _jsx("div", { className: 'w-full h-[400px]' })] }), children: _jsx(ViewEntityForm, { ...entityFormProps }) }) })] }));
+});
+ViewEntityFormWrapper.displayName = 'ViewEntityFormWrapper';

package/dist/listgrid/view/ViewListGridWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BreadcrumbItem } from '../ui';
+import { ViewListGridProps } from '../components/list/types/ViewListGrid.types';
+interface OptimizedViewListGridWrapperProps {
+    props: ViewListGridProps;
+    breadcrumbs?: BreadcrumbItem[];
+    anonymous?: boolean;
+}
+export declare const ViewListGridWrapper: React.FC<OptimizedViewListGridWrapperProps>;
+export {};

package/dist/listgrid/view/ViewListGridWrapper.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Suspense, useEffect, useMemo, useState } from 'react';
+import { useSession } from '../auth';
+import { usePathname } from '../router';
+import { Breadcrumb } from '../ui';
+import { LoadingOverlay } from '../ui';
+import { Skeleton } from '../ui';
+import { dynamic } from '../utils/lazy';
+import { checkAdminMenuPermission, DEFAULT_MENU_ALIAS } from '../menu/MenuPermissionChecker';
+// Dynamic import with better optimization
+const ViewListGrid = dynamic(() => import('../components/list/ViewListGrid').then((mod) => ({
+    default: mod.ViewListGrid,
+})), {
+    ssr: false,
+    loading: () => (_jsxs("div", { className: 'relative', children: [_jsx(LoadingOverlay, { visible: true }), _jsx("div", { className: 'w-full h-[400px]' })] })),
+});
+export const ViewListGridWrapper = React.memo(({ props, breadcrumbs, anonymous }) => {
+    const [mounted, setMounted] = useState(false);
+    const [permissionType, setPermissionType] = useState();
+    const session = useSession();
+    const pathname = usePathname();
+    // Memoize listGrid options to prevent unnecessary re-renders
+    const listGridOptions = useMemo(() => {
+        const options = { ...props.options };
+        if (permissionType === 'READ') {
+            options.readonly = true;
+        }
+        return options;
+    }, [props.options, permissionType]);
+    useEffect(() => {
+        let isMounted = true;
+        let timeoutId;
+        (async () => {
+            if (anonymous) {
+                if (isMounted) {
+                    setPermissionType('ALL');
+                    setMounted(true);
+                }
+                return;
+            }
+            if (pathname === undefined) {
+                return;
+            }
+            // 세션이 undefined인 경우 5초 후 타임아웃 처리
+            if (session === undefined) {
+                timeoutId = setTimeout(() => {
+                    if (isMounted) {
+                        console.warn('Session timeout - 5초 후에도 세션을 가져올 수 없습니다.');
+                        setPermissionType('NONE');
+                        setMounted(true);
+                    }
+                }, 5000);
+                return;
+            }
+            // 세션이 있으면 타임아웃 클리어
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = undefined;
+            }
+            try {
+                const permissionType = await checkAdminMenuPermission({
+                    url: pathname,
+                    alias: DEFAULT_MENU_ALIAS,
+                });
+                if (isMounted) {
+                    setPermissionType(permissionType);
+                    setMounted(true);
+                }
+            }
+            catch (error) {
+                console.error('Permission check failed:', error);
+                if (isMounted) {
+                    setPermissionType('NONE');
+                    setMounted(true);
+                }
+            }
+        })();
+        return () => {
+            isMounted = false;
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [session, pathname, anonymous]);
+    // Memoize breadcrumb component
+    const breadcrumbComponent = useMemo(() => _jsx(Breadcrumb, { type: 'basic', items: breadcrumbs }), [breadcrumbs]);
+    if (!mounted) {
+        return (_jsxs("div", { children: [breadcrumbComponent, _jsx("div", { children: _jsx(Skeleton, { visible: true, children: _jsx("div", { className: 'h-100 w-full' }) }) })] }));
+    }
+    if (permissionType === 'NONE') {
+        return (_jsxs("div", { children: [breadcrumbComponent, _jsx("div", { className: "rcm-permission-denied", children: _jsxs("div", { className: "rcm-permission-denied-inner", children: [_jsx("div", { className: "rcm-permission-denied-icon-wrap", children: _jsx("svg", { className: "rcm-permission-denied-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }) }), _jsx("h3", { className: "rcm-permission-denied-title", children: "\uC811\uADFC \uAD8C\uD55C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4" }), _jsxs("p", { className: "rcm-permission-denied-desc", children: ["\uC774 \uD398\uC774\uC9C0\uC5D0 \uC811\uADFC\uD560 \uC218 \uC788\uB294 \uAD8C\uD55C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.", _jsx("br", {}), "\uAD00\uB9AC\uC790\uC5D0\uAC8C \uBB38\uC758\uD558\uC2DC\uAE30 \uBC14\uB78D\uB2C8\uB2E4."] }), _jsx("button", { onClick: () => window.history.back(), className: "rcm-button", "data-variant": "outline", children: "\uB4A4\uB85C \uAC00\uAE30" })] }) })] }));
+    }
+    return (_jsxs("div", { children: [breadcrumbComponent, _jsx("div", { children: _jsx(Suspense, { fallback: _jsxs("div", { className: 'relative', children: [_jsx(LoadingOverlay, { visible: true }), _jsx("div", { className: 'w-full h-[400px]' })] }), children: _jsx(ViewListGrid, { ...props, options: listGridOptions }) }) })] }));
+});
+ViewListGridWrapper.displayName = 'ViewListGridWrapper';

package/dist/styles/base.css

@@ -0,0 +1,116 @@
+/*
+ * @rchemist/listgrid base stylesheet (Phase 7 split).
+ *
+ * Contains only global root, reset-like declarations, and utility classes.
+ * Layout-oriented composite classes live in `layouts.css`; residual
+ * component-specific styles live in `components.css`. Both import BEFORE
+ * this file so utilities and `.rcm-root` settings can still reference or
+ * tweak component-owned pieces.
+ *
+ * Rules remain unlayered so they beat Tailwind's preflight universal reset.
+ * Host apps override by writing CSS AFTER this file loads — plain cascade
+ * order handles it without `!important`:
+ *
+ *   import "@rchemist/listgrid/styles.css";
+ *
+ *   // In your own stylesheet, loaded after the import above:
+ *   .rcm-button { border-radius: 20px; }     // wins by cascade order
+ *
+ * Class-name contract: every class in this file uses the `rcm-` prefix and
+ * is part of the public contract. Host CSS that targets `rcm-*` selectors
+ * is a supported customization path.
+ */
+
+/* BEGIN — unlayered (see top comment for rationale) */
+/* ------------------------------------------------------------------ *
+     * Root / surfaces
+     * ------------------------------------------------------------------ */
+.rcm-root {
+  font-family: var(--rcm-font-family);
+  font-size: var(--rcm-font-size-md);
+  line-height: var(--rcm-line-height-normal);
+  color: var(--rcm-color-text);
+}
+
+.rcm-surface {
+  background: var(--rcm-color-surface);
+  color: var(--rcm-color-text);
+  border: var(--rcm-border-width) solid var(--rcm-color-border);
+  border-radius: var(--rcm-radius-md);
+}
+
+/* ------------------------------------------------------------------ *
+     * Readonly helper (replaces packages/ui readonlyClass)
+     * ------------------------------------------------------------------ */
+.rcm-readonly {
+  background: var(--rcm-color-surface-disabled);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* ------------------------------------------------------------------ *
+     * Text utilities (size + color, kept minimal)
+     * ------------------------------------------------------------------ */
+.rcm-heading-sm {
+  font-size: var(--rcm-font-size-sm);
+  font-weight: var(--rcm-font-weight-medium);
+  color: var(--rcm-color-text);
+  margin: 0 0 var(--rcm-space-lg) 0;
+}
+
+.rcm-text-xs {
+  font-size: var(--rcm-font-size-xs);
+}
+.rcm-text-sm {
+  font-size: var(--rcm-font-size-sm);
+}
+.rcm-text-muted {
+  color: var(--rcm-color-text-muted);
+}
+.rcm-text-emphasis {
+  color: var(--rcm-color-text);
+  font-weight: var(--rcm-font-weight-medium);
+}
+.rcm-text-info {
+  color: var(--rcm-color-info);
+}
+.rcm-text-warning {
+  color: var(--rcm-color-warning);
+}
+.rcm-text-error {
+  color: var(--rcm-color-error);
+}
+
+/* ------------------------------------------------------------------ *
+     * Utility helpers (sparingly — don't recreate Tailwind here)
+     * ------------------------------------------------------------------ */
+.rcm-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.rcm-scroll-y {
+  overflow-y: auto;
+}
+
+.rcm-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Programmatic focus ring toggled via classList when scrolling to a field
+     * (ViewEntityFormAlerts → onFieldFocus). Replaces Tailwind `ring-2 ring-primary`. */
+.rcm-field-focus-ring {
+  outline: 2px solid var(--rcm-color-primary);
+  outline-offset: 2px;
+}
+
+/* END — unlayered */