341 lines
13 KiB
TypeScript
341 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { useParams, useSearchParams } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Loader2, ArrowLeft, Smartphone, Tablet, RotateCcw, RotateCw } from "lucide-react";
|
|
import { screenApi } from "@/lib/api/screen";
|
|
import { ScreenDefinition } from "@/types/screen";
|
|
import { useRouter } from "next/navigation";
|
|
import { toast } from "sonner";
|
|
import { ScreenPreviewProvider } from "@/contexts/ScreenPreviewContext";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
|
|
import { TableSearchWidgetHeightProvider } from "@/contexts/TableSearchWidgetHeightContext";
|
|
import { ScreenContextProvider } from "@/contexts/ScreenContext";
|
|
import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
|
|
import { ActiveTabProvider } from "@/contexts/ActiveTabContext";
|
|
import {
|
|
PopLayoutDataV5,
|
|
GridMode,
|
|
isV5Layout,
|
|
createEmptyPopLayoutV5,
|
|
GAP_PRESETS,
|
|
GRID_BREAKPOINTS,
|
|
detectGridMode,
|
|
} from "@/components/pop/designer/types/pop-layout";
|
|
import PopRenderer from "@/components/pop/designer/renderers/PopRenderer";
|
|
import {
|
|
useResponsiveModeWithOverride,
|
|
type DeviceType,
|
|
} from "@/hooks/useDeviceOrientation";
|
|
|
|
// 디바이스별 크기 (너비만, 높이는 콘텐츠 기반)
|
|
const DEVICE_SIZES: Record<DeviceType, Record<"landscape" | "portrait", { width: number; label: string }>> = {
|
|
mobile: {
|
|
landscape: { width: 600, label: "모바일 가로" },
|
|
portrait: { width: 375, label: "모바일 세로" },
|
|
},
|
|
tablet: {
|
|
landscape: { width: 1024, label: "태블릿 가로" },
|
|
portrait: { width: 820, label: "태블릿 세로" },
|
|
},
|
|
};
|
|
|
|
// 모드 키 변환
|
|
const getModeKey = (device: DeviceType, isLandscape: boolean): GridMode => {
|
|
if (device === "tablet") {
|
|
return isLandscape ? "tablet_landscape" : "tablet_portrait";
|
|
}
|
|
return isLandscape ? "mobile_landscape" : "mobile_portrait";
|
|
};
|
|
|
|
// ========================================
|
|
// 메인 컴포넌트 (v5 그리드 시스템 전용)
|
|
// ========================================
|
|
|
|
function PopScreenViewPage() {
|
|
const params = useParams();
|
|
const searchParams = useSearchParams();
|
|
const router = useRouter();
|
|
const screenId = parseInt(params.screenId as string);
|
|
|
|
const isPreviewMode = searchParams.get("preview") === "true";
|
|
|
|
// 반응형 모드 감지 (화면 크기에 따라 tablet/mobile, landscape/portrait 자동 전환)
|
|
// 프리뷰 모드에서는 수동 전환 가능
|
|
const { mode, setDevice, setOrientation, isAutoDetect } = useResponsiveModeWithOverride(
|
|
isPreviewMode ? "tablet" : undefined,
|
|
isPreviewMode ? true : undefined
|
|
);
|
|
|
|
// 현재 모드 정보
|
|
const deviceType = mode.device;
|
|
const isLandscape = mode.isLandscape;
|
|
|
|
const { user } = useAuth();
|
|
|
|
const [screen, setScreen] = useState<ScreenDefinition | null>(null);
|
|
const [layout, setLayout] = useState<PopLayoutDataV5>(createEmptyPopLayoutV5());
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// 뷰포트 너비 (클라이언트 사이드에서만 계산, 최대 1366px)
|
|
const [viewportWidth, setViewportWidth] = useState(1024); // 기본값: 태블릿 가로
|
|
|
|
// 모드 결정:
|
|
// - 프리뷰 모드: 수동 선택한 device/orientation 사용
|
|
// - 일반 모드: 화면 너비 기준으로 자동 결정 (GRID_BREAKPOINTS와 일치)
|
|
const currentModeKey = isPreviewMode
|
|
? getModeKey(deviceType, isLandscape)
|
|
: detectGridMode(viewportWidth);
|
|
|
|
useEffect(() => {
|
|
const updateViewportWidth = () => {
|
|
setViewportWidth(Math.min(window.innerWidth, 1366));
|
|
};
|
|
|
|
updateViewportWidth();
|
|
window.addEventListener("resize", updateViewportWidth);
|
|
return () => window.removeEventListener("resize", updateViewportWidth);
|
|
}, []);
|
|
|
|
// 화면 및 POP 레이아웃 로드
|
|
useEffect(() => {
|
|
const loadScreen = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const screenData = await screenApi.getScreen(screenId);
|
|
setScreen(screenData);
|
|
|
|
try {
|
|
const popLayout = await screenApi.getLayoutPop(screenId);
|
|
|
|
if (popLayout && isV5Layout(popLayout)) {
|
|
// v5 레이아웃 로드
|
|
setLayout(popLayout);
|
|
const componentCount = Object.keys(popLayout.components).length;
|
|
console.log(`[POP] v5 레이아웃 로드됨: ${componentCount}개 컴포넌트`);
|
|
} else if (popLayout) {
|
|
// 다른 버전 레이아웃은 빈 v5로 처리
|
|
console.log("[POP] 레거시 레이아웃 감지, 빈 레이아웃으로 시작합니다:", popLayout.version);
|
|
setLayout(createEmptyPopLayoutV5());
|
|
} else {
|
|
console.log("[POP] 레이아웃 없음");
|
|
setLayout(createEmptyPopLayoutV5());
|
|
}
|
|
} catch (layoutError) {
|
|
console.warn("[POP] 레이아웃 로드 실패:", layoutError);
|
|
setLayout(createEmptyPopLayoutV5());
|
|
}
|
|
} catch (error) {
|
|
console.error("[POP] 화면 로드 실패:", error);
|
|
setError("화면을 불러오는데 실패했습니다.");
|
|
toast.error("화면을 불러오는데 실패했습니다.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (screenId) {
|
|
loadScreen();
|
|
}
|
|
}, [screenId]);
|
|
|
|
const currentDevice = DEVICE_SIZES[deviceType][isLandscape ? "landscape" : "portrait"];
|
|
const hasComponents = Object.keys(layout.components).length > 0;
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex h-screen w-full items-center justify-center bg-gray-100">
|
|
<div className="text-center">
|
|
<Loader2 className="mx-auto h-10 w-10 animate-spin text-blue-500" />
|
|
<p className="mt-4 text-gray-600">POP 화면 로딩 중...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !screen) {
|
|
return (
|
|
<div className="flex h-screen w-full items-center justify-center bg-gray-100">
|
|
<div className="text-center max-w-md p-6">
|
|
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
|
|
<span className="text-2xl">!</span>
|
|
</div>
|
|
<h2 className="mb-2 text-xl font-bold text-gray-800">화면을 찾을 수 없습니다</h2>
|
|
<p className="mb-4 text-gray-600">{error || "요청하신 POP 화면이 존재하지 않습니다."}</p>
|
|
<Button onClick={() => router.back()} variant="outline">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
돌아가기
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ScreenPreviewProvider isPreviewMode={isPreviewMode}>
|
|
<ActiveTabProvider>
|
|
<TableOptionsProvider>
|
|
<div className="h-screen bg-gray-100 flex flex-col overflow-hidden">
|
|
{/* 상단 툴바 (프리뷰 모드에서만) */}
|
|
{isPreviewMode && (
|
|
<div className="sticky top-0 z-50 bg-white border-b shadow-sm">
|
|
<div className="flex items-center justify-between px-4 py-2">
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="ghost" size="sm" onClick={() => window.close()}>
|
|
<ArrowLeft className="h-4 w-4 mr-1" />
|
|
닫기
|
|
</Button>
|
|
<span className="text-sm font-medium">{screen.screenName}</span>
|
|
<span className="text-xs text-gray-400">
|
|
({currentModeKey.replace("_", " ")})
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
|
|
<Button
|
|
variant={deviceType === "mobile" ? "default" : "ghost"}
|
|
size="sm"
|
|
onClick={() => setDevice("mobile")}
|
|
className="gap-1"
|
|
>
|
|
<Smartphone className="h-4 w-4" />
|
|
모바일
|
|
</Button>
|
|
<Button
|
|
variant={deviceType === "tablet" ? "default" : "ghost"}
|
|
size="sm"
|
|
onClick={() => setDevice("tablet")}
|
|
className="gap-1"
|
|
>
|
|
<Tablet className="h-4 w-4" />
|
|
태블릿
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
|
|
<Button
|
|
variant={isLandscape ? "default" : "ghost"}
|
|
size="sm"
|
|
onClick={() => setOrientation(true)}
|
|
className="gap-1"
|
|
>
|
|
<RotateCw className="h-4 w-4" />
|
|
가로
|
|
</Button>
|
|
<Button
|
|
variant={!isLandscape ? "default" : "ghost"}
|
|
size="sm"
|
|
onClick={() => setOrientation(false)}
|
|
className="gap-1"
|
|
>
|
|
<RotateCcw className="h-4 w-4" />
|
|
세로
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 자동 감지 모드 버튼 */}
|
|
<Button
|
|
variant={isAutoDetect ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => {
|
|
setDevice(undefined);
|
|
setOrientation(undefined);
|
|
}}
|
|
className="gap-1"
|
|
>
|
|
자동
|
|
</Button>
|
|
</div>
|
|
|
|
<Button variant="ghost" size="sm" onClick={() => window.location.reload()}>
|
|
<RotateCcw className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* POP 화면 컨텐츠 */}
|
|
<div className={`flex-1 flex flex-col ${isPreviewMode ? "py-4 overflow-auto items-center" : ""}`}>
|
|
{/* 현재 모드 표시 (일반 모드) */}
|
|
{!isPreviewMode && (
|
|
<div className="absolute top-2 right-2 z-10 bg-black/50 text-white text-xs px-2 py-1 rounded">
|
|
{currentModeKey.replace("_", " ")}
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-gray-800" : "w-full"}`}
|
|
style={isPreviewMode ? {
|
|
width: currentDevice.width,
|
|
maxHeight: "80vh",
|
|
flexShrink: 0,
|
|
} : undefined}
|
|
>
|
|
{/* v5 그리드 렌더러 */}
|
|
{hasComponents ? (
|
|
<div
|
|
className="mx-auto min-h-full"
|
|
style={{ maxWidth: 1366 }}
|
|
>
|
|
{(() => {
|
|
// Gap 프리셋 계산
|
|
const currentGapPreset = layout.settings.gapPreset || "medium";
|
|
const gapMultiplier = GAP_PRESETS[currentGapPreset]?.multiplier || 1.0;
|
|
const breakpoint = GRID_BREAKPOINTS[currentModeKey];
|
|
const adjustedGap = Math.round(breakpoint.gap * gapMultiplier);
|
|
const adjustedPadding = Math.max(8, Math.round(breakpoint.padding * gapMultiplier));
|
|
|
|
return (
|
|
<PopRenderer
|
|
layout={layout}
|
|
viewportWidth={isPreviewMode ? currentDevice.width : viewportWidth}
|
|
currentMode={currentModeKey}
|
|
isDesignMode={false}
|
|
overrideGap={adjustedGap}
|
|
overridePadding={adjustedPadding}
|
|
/>
|
|
);
|
|
})()}
|
|
</div>
|
|
) : (
|
|
// 빈 화면
|
|
<div className="flex flex-col items-center justify-center min-h-[400px] p-8 text-center">
|
|
<div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
|
|
<Smartphone className="h-8 w-8 text-gray-400" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-800 mb-2">
|
|
화면이 비어있습니다
|
|
</h3>
|
|
<p className="text-sm text-gray-500 max-w-xs">
|
|
POP 화면 디자이너에서 컴포넌트를 추가하여 화면을 구성하세요.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TableOptionsProvider>
|
|
</ActiveTabProvider>
|
|
</ScreenPreviewProvider>
|
|
);
|
|
}
|
|
|
|
// Provider 래퍼
|
|
export default function PopScreenViewPageWrapper() {
|
|
return (
|
|
<TableSearchWidgetHeightProvider>
|
|
<ScreenContextProvider>
|
|
<SplitPanelProvider>
|
|
<PopScreenViewPage />
|
|
</SplitPanelProvider>
|
|
</ScreenContextProvider>
|
|
</TableSearchWidgetHeightProvider>
|
|
);
|
|
}
|