대시보드 중간 커밋

features/dashboard/components/layout/DashboardLayout.tsx

@@ -0,0 +1,73 @@
+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 flex-col bg-background",
+        // Mobile: Scrollable page height
+        "min-h-[calc(100vh-64px)]",
+        // Desktop: Fixed height, no window scroll
+        "xl:h-[calc(100vh-64px)] xl:overflow-hidden",
+        className,
+      )}
+    >
+      {/* 1. Header Area */}
+      <div className="flex-none border-b border-border bg-background">
+        {header}
+      </div>
+
+      {/* 2. Main Content Area */}
+      <div
+        className={cn(
+          "flex flex-1 flex-col",
+          // Mobile: Allow content to flow naturally with spacing
+          "overflow-visible pb-4 gap-4",
+          // Desktop: Internal scrolling, horizontal layout, no page spacing
+          "xl:overflow-hidden xl:flex-row xl:pb-0 xl:gap-0",
+        )}
+      >
+        {/* Left Column: Chart & Info */}
+        <div
+          className={cn(
+            "flex flex-col border-border",
+            // Mobile: Fixed height for chart to ensure visibility
+            "h-[320px] flex-none border-b sm:h-[360px]",
+            // Desktop: Fill remaining space, remove bottom border, add right border
+            "xl:flex-1 xl:h-auto xl:min-h-0 xl:min-w-0 xl:border-b-0 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] xl:pr-2 2xl:w-[500px]">
+          {/* Top: Order Book (Hoga) */}
+          <div className="h-[390px] flex-none overflow-hidden border-t border-border sm:h-[430px] xl:min-h-0 xl:flex-1 xl:h-auto xl:border-t-0 xl:border-b">
+            {orderBook}
+          </div>
+          {/* Bottom: Order Form */}
+          <div className="flex-none h-auto sm:h-auto xl:h-[380px]">
+            {orderForm}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}