107 lines
4.3 KiB
TypeScript
107 lines
4.3 KiB
TypeScript
import { ReactNode } from "react";
|
|
import { ChevronDown, ChevronUp } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface DashboardLayoutProps {
|
|
header?: ReactNode;
|
|
chart: ReactNode;
|
|
orderBook: ReactNode;
|
|
orderForm: ReactNode;
|
|
isChartVisible: boolean;
|
|
onToggleChart: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* @description 트레이드 본문을 업비트 스타일의 2단 레이아웃으로 렌더링합니다.
|
|
* @summary UI 흐름: TradeDashboardContent -> DashboardLayout -> 상단(차트) + 하단(호가/주문) 배치
|
|
* @see features/trade/components/layout/TradeDashboardContent.tsx - 차트 토글 상태와 슬롯 컴포넌트를 전달합니다.
|
|
*/
|
|
export function DashboardLayout({
|
|
header,
|
|
chart,
|
|
orderBook,
|
|
orderForm,
|
|
isChartVisible,
|
|
onToggleChart,
|
|
className,
|
|
}: DashboardLayoutProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex h-full min-h-0 flex-col bg-background dark:bg-[linear-gradient(135deg,rgba(53,35,86,0.18),rgba(13,13,20,0.98))]",
|
|
className,
|
|
)}
|
|
>
|
|
{/* ========== 1. OPTIONAL HEADER AREA ========== */}
|
|
{header && (
|
|
<div className="flex-none border-b border-brand-100 bg-white dark:border-brand-800/45 dark:bg-brand-900/22">
|
|
{header}
|
|
</div>
|
|
)}
|
|
|
|
{/* ========== 2. MAIN CONTENT AREA ========== */}
|
|
<div className="flex-1 min-h-0 overflow-y-auto xl:overflow-hidden">
|
|
<div className="flex min-h-full flex-col xl:h-full xl:min-h-0 xl:overflow-hidden">
|
|
{/* ========== TOP: CHART AREA ========== */}
|
|
<section className="flex min-h-0 flex-col border-b border-border dark:border-brand-800/45 xl:h-[34%] xl:min-h-[200px]">
|
|
{/* 모바일 전용 차트 토글 */}
|
|
<div className="flex items-center justify-between gap-2 bg-muted/15 px-3 py-1.5 dark:bg-brand-900/25 sm:px-4 xl:hidden">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<span className="h-2 w-2 rounded-full bg-green-400 shadow-[0_0_6px_rgba(74,222,128,0.6)]" />
|
|
<p className="text-xs font-semibold text-foreground dark:text-brand-50">
|
|
실시간 차트
|
|
</p>
|
|
</div>
|
|
{/* UI 흐름: 토글 클릭 -> onToggleChart -> 상위 상태 변경 -> 차트 표시/숨김 */}
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={onToggleChart}
|
|
className="h-6 gap-1 border-brand-200 bg-white/70 px-2 text-[11px] text-brand-700 hover:bg-brand-50 dark:border-brand-700/55 dark:bg-brand-900/35 dark:text-brand-100 dark:hover:bg-brand-800/35 sm:h-7 sm:px-3"
|
|
aria-expanded={isChartVisible}
|
|
>
|
|
{isChartVisible ? (
|
|
<>
|
|
숨기기 <ChevronUp className="h-3 w-3" />
|
|
</>
|
|
) : (
|
|
<>
|
|
펼치기 <ChevronDown className="h-3 w-3" />
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
<div
|
|
className={cn(
|
|
"overflow-hidden border-t border-border/70 transition-[max-height,opacity] duration-300 dark:border-brand-800/45 xl:flex-1 xl:min-h-0 xl:max-h-none xl:opacity-100",
|
|
isChartVisible ? "max-h-[64vh] opacity-100" : "max-h-0 opacity-0",
|
|
)}
|
|
>
|
|
<div className="h-[29vh] min-h-[200px] w-full sm:h-[33vh] xl:h-full xl:min-h-0">
|
|
{chart}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ========== BOTTOM: ORDERBOOK + ORDER AREA ========== */}
|
|
<section className="flex flex-1 min-h-0 flex-col xl:grid xl:grid-cols-[minmax(0,1fr)_480px] 2xl:grid-cols-[minmax(0,1fr)_540px] xl:overflow-hidden">
|
|
<div className="flex min-h-0 flex-col border-b border-border dark:border-brand-800/45 xl:border-b-0 xl:border-r">
|
|
<div className="min-h-0 xl:h-full xl:min-h-0">
|
|
{orderBook}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex min-h-0 flex-col bg-background dark:bg-brand-900/12">
|
|
<div className="min-h-[280px] xl:h-full xl:min-h-0">{orderForm}</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|