atomsystem 0.4.3 → 0.5.1

package/components/blocks/RealtimeChartBlock.tsx

@@ -1,7 +1,14 @@
 'use client';
 
-import React, { useState, useEffect, useId } from 'react';
-import { Play, Pause, TrendingUp, TrendingDown, Clock, Activity, RefreshCw } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { Card, Button, Badge } from '@/components/ui';
+import {
+  Play,
+  Pause,
+  TrendingUp,
+  TrendingDown,
+  Activity,
+} from 'lucide-react';
 
 interface ChartPoint {
   time: string;
@@ -30,11 +37,7 @@ export function RealtimeChartBlock() {
   const [chartType, setChartType] = useState<'line' | 'candle'>('line');
   const [timeframe, setTimeframe] = useState<'1m' | '5m' | '1h' | '1d'>('1m');
   const [hoveredPoint, setHoveredPoint] = useState<ChartPoint | null>(null);
-  const [tickFlash, setTickFlash] = useState<'up' | 'down' | null>(null);
 
-  const gradientId = useId();
-
-  // 실시간 틱 데이터 시뮬레이션
   useEffect(() => {
     if (!isPlaying) return;
     const interval = setInterval(() => {
@@ -46,21 +49,13 @@ export function RealtimeChartBlock() {
         const newLow = Math.min(newPrice, last.low);
         const newVolume = Math.round(2000 + Math.random() * 4000);
 
-        setTickFlash(delta >= 0 ? 'up' : 'down');
-        setTimeout(() => setTickFlash(null), 400);
-
         const now = new Date();
         const timeStr = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
 
-        const newPoint: ChartPoint = {
-          time: timeStr,
-          price: newPrice,
-          high: newHigh,
-          low: newLow,
-          volume: newVolume,
-        };
-
-        return [...prev.slice(1), newPoint];
+        return [
+          ...prev.slice(1),
+          { time: timeStr, price: newPrice, high: newHigh, low: newLow, volume: newVolume },
+        ];
       });
     }, 1200);
 
@@ -73,14 +68,13 @@ export function RealtimeChartBlock() {
   const pctDiff = ((priceDiff / firstPoint.price) * 100).toFixed(2);
   const isPositive = priceDiff >= 0;
 
-  // 차트 좌표 계산
   const prices = data.map((d) => d.price);
   const minPrice = Math.min(...prices) * 0.998;
   const maxPrice = Math.max(...prices) * 1.002;
   const range = maxPrice - minPrice || 1;
 
   const svgWidth = 600;
-  const svgHeight = 200;
+  const svgHeight = 220;
   const paddingX = 20;
   const paddingY = 20;
 
@@ -88,274 +82,161 @@ export function RealtimeChartBlock() {
   const getY = (price: number) => svgHeight - paddingY - ((price - minPrice) / range) * (svgHeight - paddingY * 2);
 
   const pointsPath = data.map((d, i) => `${i === 0 ? 'M' : 'L'} ${getX(i)} ${getY(d.price)}`).join(' ');
-  const areaPath = `${pointsPath} L ${getX(data.length - 1)} ${svgHeight} L ${getX(0)} ${svgHeight} Z`;
 
   return (
-    <div className="w-full bg-(--bg-primary) rounded-2xl border border-(--border-subtle) shadow-sm overflow-hidden p-5 sm:p-6 transition-colors">
-      {/* Top Header & Actions */}
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-4 border-b border-(--border-subtle)">
+    <Card className="overflow-hidden bg-(--bg-primary) border border-(--border-subtle) transition-colors">
+      {/* 1. Header: Minimalist Price & Controls */}
+      <div className="p-4 sm:p-5 border-b border-(--border-subtle) flex flex-col sm:flex-row sm:items-center justify-between gap-3">
         <div>
-          <div className="flex items-center gap-2 mb-1">
-            <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
-              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
-              LIVE TICK
+          <div className="flex items-center gap-2 mb-0.5">
+            <span className="font-mono text-xs font-semibold text-(--text-secondary)">KRW-ATOM</span>
+            <span className={`text-xs font-mono font-medium ${isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}>
+              {isPositive ? '+' : ''}{pctDiff}%
             </span>
-            <span className="text-xs font-medium text-(--text-muted)">KRW-ATOM / 실시간 지수</span>
           </div>
-          <div className="flex items-baseline gap-3">
-            <h2
-              className={`text-2xl sm:text-3xl font-extrabold tracking-tight transition-colors duration-300 ${
-                tickFlash === 'up'
-                  ? 'text-emerald-500'
-                  : tickFlash === 'down'
-                  ? 'text-rose-500'
-                  : 'text-(--text-primary)'
-              }`}
-            >
-              ₩{currentPoint.price.toLocaleString()}
-            </h2>
-            <div
-              className={`inline-flex items-center gap-1 text-xs sm:text-sm font-semibold px-2 py-0.5 rounded-md ${
-                isPositive
-                  ? 'text-emerald-600 bg-emerald-500/10 dark:text-emerald-400'
-                  : 'text-rose-600 bg-rose-500/10 dark:text-rose-400'
-              }`}
-            >
-              {isPositive ? <TrendingUp className="w-3.5 h-3.5" /> : <TrendingDown className="w-3.5 h-3.5" />}
-              <span>{isPositive ? '+' : ''}{priceDiff.toLocaleString()}원 ({isPositive ? '+' : ''}{pctDiff}%)</span>
-            </div>
+          <div className="text-xl font-bold tracking-tight text-(--text-primary)">
+            ₩{currentPoint.price.toLocaleString()}
           </div>
         </div>
 
-        {/* Controls Toolbar */}
-        <div className="flex flex-wrap items-center gap-2">
-          {/* Timeframe Filter */}
-          <div className="flex bg-(--bg-secondary) p-0.5 rounded-lg border border-(--border-subtle) text-xs">
+        <div className="flex items-center gap-2">
+          {/* Timeframe Button Group */}
+          <div className="flex rounded-(--radius-sm) border border-(--border-subtle) p-0.5 text-xs bg-(--bg-secondary)">
             {(['1m', '5m', '1h', '1d'] as const).map((tf) => (
-              <button
+              <Button
                 key={tf}
+                variant={timeframe === tf ? 'primary' : 'ghost'}
+                size="sm"
                 onClick={() => setTimeframe(tf)}
-                className={`px-2.5 py-1 rounded-md font-medium transition-colors ${
-                  timeframe === tf
-                    ? 'bg-(--bg-primary) text-(--text-primary) shadow-xs font-semibold'
-                    : 'text-(--text-secondary) hover:text-(--text-primary)'
-                }`}
+                className="px-2 py-0.5 text-xs h-auto"
               >
                 {tf}
-              </button>
+              </Button>
             ))}
           </div>
 
-          {/* Chart Type Toggle */}
-          <div className="flex bg-(--bg-secondary) p-0.5 rounded-lg border border-(--border-subtle) text-xs">
-            <button
+          {/* Type Button Group */}
+          <div className="flex rounded-(--radius-sm) border border-(--border-subtle) p-0.5 text-xs bg-(--bg-secondary)">
+            <Button
+              variant={chartType === 'line' ? 'primary' : 'ghost'}
+              size="sm"
               onClick={() => setChartType('line')}
-              data-active={chartType === 'line'}
-              className={`px-2.5 py-1 rounded-md font-medium transition-colors ${
-                chartType === 'line'
-                  ? 'bg-(--bg-primary) text-(--text-primary) shadow-xs font-semibold'
-                  : 'text-(--text-secondary) hover:text-(--text-primary)'
-              }`}
+              className="px-2 py-0.5 text-xs h-auto"
             >
-              라인
-            </button>
-            <button
+              Line
+            </Button>
+            <Button
+              variant={chartType === 'candle' ? 'primary' : 'ghost'}
+              size="sm"
               onClick={() => setChartType('candle')}
-              data-active={chartType === 'candle'}
-              className={`px-2.5 py-1 rounded-md font-medium transition-colors ${
-                chartType === 'candle'
-                  ? 'bg-(--bg-primary) text-(--text-primary) shadow-xs font-semibold'
-                  : 'text-(--text-secondary) hover:text-(--text-primary)'
-              }`}
+              className="px-2 py-0.5 text-xs h-auto"
             >
-              캔들
-            </button>
+              Candle
+            </Button>
           </div>
 
           {/* Play/Pause Button */}
-          <button
+          <Button
+            variant="outline"
+            size="sm"
             onClick={() => setIsPlaying(!isPlaying)}
-            aria-label={isPlaying ? '일시정지' : '실시간 재생'}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-(--bg-secondary) hover:bg-(--border-subtle) text-(--text-primary) border border-(--border-subtle) transition-colors"
+            aria-label={isPlaying ? 'Pause stream' : 'Resume stream'}
+            title={isPlaying ? 'Pause stream' : 'Resume stream'}
+            className="px-2.5 py-1 text-xs h-auto flex items-center gap-1.5"
           >
-            {isPlaying ? (
-              <>
-                <Pause className="w-3.5 h-3.5 text-amber-500" />
-                <span>일시정지</span>
-              </>
-            ) : (
-              <>
-                <Play className="w-3.5 h-3.5 text-emerald-500 fill-emerald-500" />
-                <span>재생</span>
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* KPI Stats Pill Row */}
-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 my-4">
-        <div className="p-2.5 rounded-xl bg-(--bg-secondary)/60 border border-(--border-subtle)">
-          <div className="text-[10px] text-(--text-muted) font-medium">최고가 (High)</div>
-          <div className="text-xs sm:text-sm font-bold text-rose-500">₩{Math.max(...data.map(d => d.high)).toLocaleString()}</div>
-        </div>
-        <div className="p-2.5 rounded-xl bg-(--bg-secondary)/60 border border-(--border-subtle)">
-          <div className="text-[10px] text-(--text-muted) font-medium">최저가 (Low)</div>
-          <div className="text-xs sm:text-sm font-bold text-blue-500">₩{Math.min(...data.map(d => d.low)).toLocaleString()}</div>
-        </div>
-        <div className="p-2.5 rounded-xl bg-(--bg-secondary)/60 border border-(--border-subtle)">
-          <div className="text-[10px] text-(--text-muted) font-medium">실시간 거래량</div>
-          <div className="text-xs sm:text-sm font-bold text-(--text-primary)">{currentPoint.volume.toLocaleString()} ATOM</div>
-        </div>
-        <div className="p-2.5 rounded-xl bg-(--bg-secondary)/60 border border-(--border-subtle)">
-          <div className="text-[10px] text-(--text-muted) font-medium">마지막 체결</div>
-          <div className="text-xs sm:text-sm font-bold text-(--text-primary) flex items-center gap-1">
-            <Clock className="w-3 h-3 text-(--text-muted)" />
-            {currentPoint.time}
-          </div>
+            {isPlaying ? <Pause className="w-3.5 h-3.5" /> : <Play className="w-3.5 h-3.5" />}
+            <span className="text-xs font-medium">{isPlaying ? '일시정지' : '재생'}</span>
+          </Button>
         </div>
       </div>
 
-      {/* Main SVG Interactive Chart */}
-      <div className="relative w-full h-56 sm:h-64 mt-2 select-none">
-        <svg
-          viewBox={`0 0 ${svgWidth} ${svgHeight}`}
-          className="w-full h-full overflow-visible"
-          preserveAspectRatio="none"
-          onMouseLeave={() => setHoveredPoint(null)}
-        >
-          <defs>
-            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor="var(--accent-primary, #3182f6)" stopOpacity="0.35" />
-              <stop offset="100%" stopColor="var(--accent-primary, #3182f6)" stopOpacity="0.0" />
-            </linearGradient>
-          </defs>
+      {/* 2. Pure SVG Canvas (Zero-dependency, Token-based) */}
+      <div className="p-4 sm:p-5">
+        <div className="relative w-full h-56">
+          <svg
+            className="w-full h-full overflow-visible"
+            viewBox={`0 0 ${svgWidth} ${svgHeight}`}
+            preserveAspectRatio="none"
+          >
+            <defs>
+              <linearGradient id="chartGradientToken" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="var(--accent-primary)" stopOpacity="0.22" />
+                <stop offset="100%" stopColor="var(--accent-primary)" stopOpacity="0.0" />
+              </linearGradient>
+            </defs>
+
+            {/* Subtle Grid Lines */}
+            <line x1={paddingX} y1={paddingY} x2={svgWidth - paddingX} y2={paddingY} stroke="var(--border-subtle)" strokeDasharray="4 4" />
+            <line x1={paddingX} y1={svgHeight / 2} x2={svgWidth - paddingX} y2={svgHeight / 2} stroke="var(--border-subtle)" strokeDasharray="4 4" />
+            <line x1={paddingX} y1={svgHeight - paddingY} x2={svgWidth - paddingX} y2={svgHeight - paddingY} stroke="var(--border-subtle)" strokeDasharray="4 4" />
+
+            {/* Area */}
+            <path
+              d={`${pointsPath} L ${getX(data.length - 1)} ${svgHeight - paddingY} L ${getX(0)} ${svgHeight - paddingY} Z`}
+              fill="url(#chartGradientToken)"
+            />
 
-          {/* Grid lines */}
-          <line x1="0" y1={svgHeight * 0.25} x2={svgWidth} y2={svgHeight * 0.25} stroke="currentColor" strokeDasharray="3 3" className="text-(--border-subtle)" />
-          <line x1="0" y1={svgHeight * 0.5} x2={svgWidth} y2={svgHeight * 0.5} stroke="currentColor" strokeDasharray="3 3" className="text-(--border-subtle)" />
-          <line x1="0" y1={svgHeight * 0.75} x2={svgWidth} y2={svgHeight * 0.75} stroke="currentColor" strokeDasharray="3 3" className="text-(--border-subtle)" />
+            {/* Path */}
+            <path
+              d={pointsPath}
+              fill="none"
+              stroke="var(--accent-primary)"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
 
-          {chartType === 'line' ? (
-            <>
-              {/* Area fill */}
-              <path d={areaPath} fill={`url(#${gradientId})`} />
-              {/* Stroke line */}
-              <path
-                d={pointsPath}
-                fill="none"
-                stroke="var(--accent-primary, #3182f6)"
-                strokeWidth="2.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
+            {/* Points */}
+            {data.map((d, i) => (
+              <circle
+                key={i}
+                cx={getX(i)}
+                cy={getY(d.price)}
+                r={hoveredPoint === d ? 5 : 3}
+                fill="var(--bg-primary)"
+                stroke="var(--accent-primary)"
+                strokeWidth="2"
+                className="cursor-pointer transition-all"
+                onMouseEnter={() => setHoveredPoint(d)}
               />
-              {/* Data points dots */}
-              {data.map((d, i) => (
-                <circle
-                  key={i}
-                  cx={getX(i)}
-                  cy={getY(d.price)}
-                  r={i === data.length - 1 ? 4.5 : 2.5}
-                  className="fill-(--accent-primary) transition-all duration-300"
-                />
-              ))}
-            </>
-          ) : (
-            /* Candlestick view */
-            data.map((d, i) => {
-              const x = getX(i);
-              const isUp = d.price >= (data[i - 1]?.price || d.price);
-              const candleTop = getY(Math.max(d.price, data[i - 1]?.price || d.price));
-              const candleBottom = getY(Math.min(d.price, data[i - 1]?.price || d.price));
-              const candleHeight = Math.max(3, candleBottom - candleTop);
-              const colorClass = isUp ? 'fill-emerald-500 stroke-emerald-500' : 'fill-rose-500 stroke-rose-500';
-
-              return (
-                <g key={i}>
-                  {/* High/Low wick */}
-                  <line
-                    x1={x}
-                    y1={getY(d.high)}
-                    x2={x}
-                    y2={getY(d.low)}
-                    strokeWidth="1.5"
-                    className={colorClass}
-                  />
-                  {/* Body */}
-                  <rect
-                    x={x - 8}
-                    y={candleTop}
-                    width={16}
-                    height={candleHeight}
-                    rx={2}
-                    className={colorClass}
-                  />
-                </g>
-              );
-            })
-          )}
+            ))}
+          </svg>
 
-          {/* Interactive Hover Crosshair */}
           {hoveredPoint && (
-            <g>
-              <line
-                x1={getX(data.indexOf(hoveredPoint))}
-                y1={0}
-                x2={getX(data.indexOf(hoveredPoint))}
-                y2={svgHeight}
-                stroke="var(--accent-primary, #3182f6)"
-                strokeDasharray="2 2"
-                strokeWidth="1.5"
-              />
-              <circle
-                cx={getX(data.indexOf(hoveredPoint))}
-                cy={getY(hoveredPoint.price)}
-                r={6}
-                className="fill-(--accent-primary) stroke-white stroke-2"
-              />
-            </g>
+            <div
+              className="absolute top-2 pointer-events-none transform -translate-x-1/2 bg-(--bg-primary) px-2.5 py-1 rounded-(--radius-sm) border border-(--border-strong) shadow-md text-xs"
+              style={{
+                left: `${(data.indexOf(hoveredPoint) / (data.length - 1)) * 100}%`,
+              }}
+            >
+              <div className="font-semibold text-(--text-primary)">₩{hoveredPoint.price.toLocaleString()}</div>
+              <div className="text-[11px] text-(--text-secondary)">{hoveredPoint.time} · Vol: {hoveredPoint.volume}</div>
+            </div>
           )}
-
-          {/* Hover hit areas */}
-          {data.map((d, i) => (
-            <rect
-              key={i}
-              x={getX(i) - 15}
-              y={0}
-              width={30}
-              height={svgHeight}
-              fill="transparent"
-              className="cursor-crosshair"
-              onMouseEnter={() => setHoveredPoint(d)}
-            />
-          ))}
-        </svg>
-
-        {/* Hover Tooltip Overlay */}
-        {hoveredPoint && (
-          <div
-            className="absolute top-2 pointer-events-none transform -translate-x-1/2 bg-(--bg-primary)/95 backdrop-blur-md px-3 py-1.5 rounded-lg border border-(--border-strong) shadow-lg text-xs"
-            style={{
-              left: `${(data.indexOf(hoveredPoint) / (data.length - 1)) * 100}%`,
-            }}
-          >
-            <div className="font-semibold text-(--text-primary)">₩{hoveredPoint.price.toLocaleString()}</div>
-            <div className="text-[10px] text-(--text-secondary)">{hoveredPoint.time} · 거래량 {hoveredPoint.volume}</div>
-          </div>
-        )}
+        </div>
       </div>
 
-      {/* Footer Info */}
-      <div className="flex items-center justify-between text-[11px] text-(--text-muted) pt-3 border-t border-(--border-subtle) mt-3">
-        <div className="flex items-center gap-1.5">
-          <Activity className="w-3.5 h-3.5 text-(--accent-primary)" />
-          <span>W3C DTCG 시맨틱 토큰 100% 바인딩</span>
+      {/* 3. Metrics Summary Strip: Clean Monochrome */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 border-t border-(--border-subtle) divide-x divide-(--border-subtle) text-xs">
+        <div className="p-3 px-4">
+          <div className="text-[11px] text-(--text-muted)">24h High</div>
+          <div className="font-mono text-xs text-(--text-primary) mt-0.5">₩{maxPrice.toFixed(0)}</div>
+        </div>
+        <div className="p-3 px-4">
+          <div className="text-[11px] text-(--text-muted)">24h Low</div>
+          <div className="font-mono text-xs text-(--text-primary) mt-0.5">₩{minPrice.toFixed(0)}</div>
         </div>
-        <div className="flex items-center gap-1">
-          <RefreshCw className={`w-3 h-3 ${isPlaying ? 'animate-spin' : ''}`} />
-          <span>실시간 1.2s 주기 폴링 시뮬레이션</span>
+        <div className="p-3 px-4">
+          <div className="text-[11px] text-(--text-muted)">24h Volume</div>
+          <div className="font-mono text-xs text-(--text-primary) mt-0.5">38,420 ATOM</div>
+        </div>
+        <div className="p-3 px-4">
+          <div className="text-[11px] text-(--text-muted)">Change</div>
+          <div className={`font-mono text-xs mt-0.5 ${isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}>
+            {isPositive ? '+' : ''}{priceDiff.toLocaleString()} 원
+          </div>
         </div>
       </div>
-    </div>
+    </Card>
   );
 }