4f10b5e42d
447+ 파일, 4500+ 줄 변경: - gray-* → border/bg-muted/text-foreground/text-muted-foreground - blue-* → primary/ring - red-* → destructive - green-* → emerald (일관성) - indigo-* → primary - yellow/orange → amber (통일) - dark mode 변형도 시맨틱 토큰으로 변환 Made-with: Cursor
43 lines
924 B
TypeScript
43 lines
924 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-muted">
|
|
<div style={wrapperStyle}>
|
|
<div style={screenStyle}>{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ResponsiveScreenContainer;
|