1f67576d5d
- ResponsiveScreenContainer에서 자동맞춤 모드들(fit, scale, fullwidth) 제거 - 기본값을 original 모드로 변경하여 설계한 크기 그대로 표시 - 화면 컨테이너가 전체 높이를 사용하도록 레이아웃 수정 - 스크롤 문제 해결을 위해 overflow 설정 최적화
43 lines
926 B
TypeScript
43 lines
926 B
TypeScript
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;
|