ERP-node/frontend/components/screen/ResponsiveScreenContainer.tsx

import React, { useRef } from "react";

interface ResponsiveScreenContainerProps {
  children: React.ReactNode;
  designWidth: number;
  designHeight: number;
  screenName?: string;
}

/**
 * 화면 컨테이너
 * 설계된 원본 크기 그대로 화면을 표시합니다.
 */
export const ResponsiveScreenContainer: React.FC<ResponsiveScreenContainerProps> = ({
  children,
  designWidth,
  designHeight,
  screenName,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);

  const screenStyle = {
    width: `${designWidth}px`,
    height: `${designHeight}px`,
  };

  const wrapperStyle = {
    width: `${designWidth}px`,
    height: `${designHeight}px`,
    overflow: "auto",
  };

  return (
    <div className="h-full w-full overflow-auto bg-gray-50">
      <div style={wrapperStyle}>
        <div style={screenStyle}>{children}</div>
      </div>
    </div>
  );
};

export default ResponsiveScreenContainer;