78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* ReportDesignerRightPanel.tsx
|
|
*
|
|
* [역할]
|
|
* - 캔버스 오른쪽 고정 패널 (w-[300px])
|
|
* - 컴포넌트 선택 시: 위치/크기/스타일 속성 편집
|
|
* - 미선택 시: 페이지 설정
|
|
*/
|
|
|
|
import { PageSettingsTab } from "./PageSettingsTab";
|
|
import { ComponentStylePanel } from "./properties/ComponentStylePanel";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
|
|
import { PanelRightClose, PanelRightOpen, Settings, Sliders } from "lucide-react";
|
|
|
|
export function ReportDesignerRightPanel() {
|
|
const { selectedComponentId, isRightPanelCollapsed, setIsRightPanelCollapsed } = useReportDesigner();
|
|
|
|
if (isRightPanelCollapsed) {
|
|
return (
|
|
<div className="flex h-full w-10 shrink-0 flex-col items-center border-l border-gray-200 bg-white pt-2 gap-2">
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="h-8 w-8"
|
|
onClick={() => setIsRightPanelCollapsed(false)}
|
|
title="속성 패널 열기"
|
|
>
|
|
<PanelRightOpen className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="h-8 w-8"
|
|
title={selectedComponentId ? "속성" : "페이지 설정"}
|
|
onClick={() => setIsRightPanelCollapsed(false)}
|
|
>
|
|
{selectedComponentId ? <Sliders className="h-4 w-4" /> : <Settings className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full w-[340px] shrink-0 flex-col border-l border-gray-200 bg-white">
|
|
{/* 헤더 */}
|
|
<div className="flex h-12 items-center justify-between border-b border-gray-200 px-4">
|
|
<span className="text-base font-bold text-gray-800">
|
|
{selectedComponentId ? "속성" : "페이지 설정"}
|
|
</span>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="h-7 w-7"
|
|
onClick={() => setIsRightPanelCollapsed(true)}
|
|
title="속성 패널 접기"
|
|
>
|
|
<PanelRightClose className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 컨텐츠 */}
|
|
<div className="min-h-0 flex-1">
|
|
{selectedComponentId ? (
|
|
<ComponentStylePanel />
|
|
) : (
|
|
<ScrollArea className="h-full">
|
|
<PageSettingsTab />
|
|
</ScrollArea>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|