대시보드 중간 커밋

features/dashboard/components/layout/DashboardLayout.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+interface DashboardLayoutProps {
+  header: ReactNode;
+  chart: ReactNode;
+  orderBook: ReactNode;
+  orderForm: ReactNode;
+  className?: string;
+}
+
+export function DashboardLayout({
+  header,
+  chart,
+  orderBook,
+  orderForm,
+  className,
+}: DashboardLayoutProps) {
+  return (
+    <div
+      className={cn(
+        "flex h-[calc(100vh-64px)] flex-col overflow-hidden",
+        className,
+      )}
+    >
+      {/* 1. Header Area */}
+      <div className="flex-none border-b border-border bg-background">
+        {header}
+      </div>
+
+      {/* 2. Main Content Area */}
+      <div className="flex flex-1 flex-col overflow-hidden xl:flex-row">
+        {/* Left Column: Chart & Info */}
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col border-border xl:border-r">
+          <div className="flex-1 min-h-0">{chart}</div>
+          {/* Future: Transaction History / Market Depth can go here */}
+        </div>
+
+        {/* Right Column: Order Book & Order Form */}
+        <div className="flex min-h-0 w-full flex-none flex-col bg-background xl:w-[460px] 2xl:w-[500px]">
+          {/* Top: Order Book (Hoga) */}
+          <div className="min-h-[360px] flex-1 overflow-hidden border-t border-border xl:min-h-0 xl:border-t-0 xl:border-b">
+            {orderBook}
+          </div>
+
+          {/* Bottom: Order Form */}
+          <div className="flex-none h-[320px] sm:h-[360px] xl:h-[380px]">
+            {orderForm}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}