50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { ReactNode, useEffect, useRef } from "react";
|
||
|
|
import { useDeveloperMode, ComponentMetadata } from '@/contexts/DeveloperModeContext';
|
||
|
|
|
||
|
|
interface PageLayoutProps {
|
||
|
|
children: ReactNode;
|
||
|
|
maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
|
||
|
|
devMetadata?: ComponentMetadata;
|
||
|
|
versionInfo?: ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PageLayout({ children, maxWidth = "full", devMetadata, versionInfo }: PageLayoutProps) {
|
||
|
|
const { setCurrentMetadata } = useDeveloperMode();
|
||
|
|
const metadataRef = useRef<ComponentMetadata | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
// Only update if metadata actually changed
|
||
|
|
if (devMetadata && JSON.stringify(devMetadata) !== JSON.stringify(metadataRef.current)) {
|
||
|
|
metadataRef.current = devMetadata;
|
||
|
|
setCurrentMetadata(devMetadata);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 컴포넌트 언마운트 시 메타데이터 초기화
|
||
|
|
return () => {
|
||
|
|
setCurrentMetadata(null);
|
||
|
|
metadataRef.current = null;
|
||
|
|
};
|
||
|
|
}, []); // Empty dependency array - only run on mount/unmount
|
||
|
|
|
||
|
|
const maxWidthClasses = {
|
||
|
|
sm: "max-w-3xl",
|
||
|
|
md: "max-w-5xl",
|
||
|
|
lg: "max-w-6xl",
|
||
|
|
xl: "max-w-7xl",
|
||
|
|
"2xl": "max-w-[1600px]",
|
||
|
|
full: "w-full"
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`p-4 md:p-6 space-y-4 md:space-y-6 ${maxWidthClasses[maxWidth]} mx-auto w-full relative`}>
|
||
|
|
{versionInfo && (
|
||
|
|
<div className="absolute top-4 right-4 z-10">
|
||
|
|
{versionInfo}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|