차트 수정

features/trade/components/layout/DashboardLayout.tsx

@@ -1,4 +1,6 @@
 import { ReactNode } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 interface DashboardLayoutProps {
@@ -6,14 +8,22 @@ interface DashboardLayoutProps {
   chart: ReactNode;
   orderBook: ReactNode;
   orderForm: ReactNode;
+  isChartVisible: boolean;
+  onToggleChart: () => void;
   className?: string;
 }
 
+/**
+ * @description 트레이드 본문 레이아웃을 구성합니다. 상단 차트 영역은 보임/숨김 토글을 지원합니다.
+ * @see features/trade/components/layout/TradeDashboardContent.tsx 상위 컴포넌트에서 차트 토글 상태를 관리하고 본 레이아웃에 전달합니다.
+ */
 export function DashboardLayout({
   header,
   chart,
   orderBook,
   orderForm,
+  isChartVisible,
+  onToggleChart,
   className,
 }: DashboardLayoutProps) {
   return (
@@ -35,36 +45,66 @@ export function DashboardLayout({
       {/* 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",
+          "flex-1 min-h-0 overflow-y-auto",
+          "xl:overflow-hidden",
         )}
       >
-        {/* Left Column: Chart & Info */}
-        <div
-          className={cn(
-            "flex flex-col border-border dark:border-brand-800/45",
-            // 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>
+        <div className="flex min-h-full flex-col xl:h-full xl:min-h-0">
+          {/* ========== CHART SECTION ========== */}
+          <section className="flex-none border-b border-border dark:border-brand-800/45">
+            <div className="flex items-center justify-between gap-2 bg-muted/20 px-3 py-1.5 dark:bg-brand-900/30 sm:px-4">
+              <div className="min-w-0">
+                <p className="text-xs font-semibold text-foreground dark:text-brand-50 sm:text-sm">
+                  실시간 차트
+                </p>
+                <p className="text-[10px] text-muted-foreground dark:text-brand-100/70 sm:text-[11px]">
+                  거래 화면 집중을 위해 기본은 접힌 상태입니다.
+                </p>
+              </div>
+              {/* UI 흐름: 차트 토글 버튼 -> onToggleChart 호출 -> TradeDashboardContent의 상태 변경 -> 차트 wrapper 높이 반영 */}
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={onToggleChart}
+                className="h-7 gap-1 border-brand-200 bg-white 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-8 sm:px-3 sm:text-xs"
+                aria-expanded={isChartVisible}
+              >
+                {isChartVisible ? (
+                  <>
+                    차트 숨기기 <ChevronUp className="h-3.5 w-3.5" />
+                  </>
+                ) : (
+                  <>
+                    차트 보이기 <ChevronDown className="h-3.5 w-3.5" />
+                  </>
+                )}
+              </Button>
+            </div>
 
-        {/* Right Column: Order Book & Order Form */}
-        <div className="flex min-h-0 w-full flex-none flex-col bg-background dark:bg-brand-900/12 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 dark:border-brand-800/45 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
+              className={cn(
+                "overflow-hidden border-t border-border/70 transition-[max-height,opacity] duration-200 dark:border-brand-800/45",
+                isChartVisible ? "max-h-[56vh] opacity-100" : "max-h-0 opacity-0",
+              )}
+            >
+              <div className="h-[34vh] min-h-[280px] w-full sm:h-[40vh] xl:h-[34vh] 2xl:h-[38vh]">
+                {chart}
+              </div>
+            </div>
+          </section>
+
+          {/* ========== ORDERBOOK + ORDER SECTION ========== */}
+          <div className="flex flex-1 min-h-0 flex-col xl:flex-row xl:overflow-hidden">
+            <section className="flex min-h-0 flex-col border-b border-border dark:border-brand-800/45 xl:flex-1 xl:border-b-0 xl:border-r">
+              <div className="h-[390px] min-h-0 sm:h-[430px] xl:h-full">
+                {orderBook}
+              </div>
+            </section>
+
+            <section className="flex min-h-0 flex-col bg-background dark:bg-brand-900/12 xl:w-[430px] 2xl:w-[470px]">
+              <div className="min-h-[320px] xl:h-full">{orderForm}</div>
+            </section>
           </div>
         </div>
       </div>

features/trade/components/layout/TradeDashboardContent.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import type { KisRuntimeCredentials } from "@/features/settings/store/use-kis-runtime-store";
 import { StockLineChart } from "@/features/trade/components/chart/StockLineChart";
 import { StockHeader } from "@/features/trade/components/header/StockHeader";
@@ -41,6 +42,9 @@ export function TradeDashboardContent({
   change,
   changeRate,
 }: TradeDashboardContentProps) {
+  // [State] 차트 영역 보임/숨김 상태
+  const [isChartVisible, setIsChartVisible] = useState(false);
+
   return (
     <div
       className={cn(
@@ -93,6 +97,8 @@ export function TradeDashboardContent({
           />
         }
         orderForm={<OrderForm stock={selectedStock ?? undefined} />}
+        isChartVisible={isChartVisible}
+        onToggleChart={() => setIsChartVisible((prev) => !prev)}
       />
     </div>
   );