모의투자 로직 변경

2026-05-31 14:05:46 +09:00
parent ead97dad5d
commit d6eedf19bb
33 changed files with 1456 additions and 330 deletions
@@ -0,0 +1,39 @@
+/**
+ * 로그인 스플래시 — 중앙→우상단 대각선으로 흐릿한 캔들·호가 실루엣 + 메시 그라데이션
+ */
+import React from 'react';
+import SplashChartBackground from './SplashChartBackground';
+import SplashOrderbookBackground from './SplashOrderbookBackground';
+
+const SplashGradientBackdrop: React.FC = () => (
+  <div className="splash-backdrop" aria-hidden>
+    <div className="splash-backdrop__base" />
+    <div className="splash-backdrop__mesh" />
+
+    <div className="splash-backdrop__orbs">
+      <span className="splash-backdrop__orb splash-backdrop__orb--gold" />
+      <span className="splash-backdrop__orb splash-backdrop__orb--teal" />
+      <span className="splash-backdrop__orb splash-backdrop__orb--indigo" />
+    </div>
+
+    {/* 캔들 + 호가 — 화면 중앙에서 우측 상단으로 퍼지는 그라데이션 마스크 */}
+    <div className="splash-backdrop__market-flow">
+      <div className="splash-backdrop__flow-glow" />
+      <div className="splash-backdrop__flow-inner">
+        <div className="splash-backdrop__chart-layer">
+          <SplashChartBackground />
+        </div>
+        <div className="splash-backdrop__orderbook-layer">
+          <SplashOrderbookBackground />
+        </div>
+      </div>
+    </div>
+
+    <div className="splash-backdrop__grid" />
+    <div className="splash-backdrop__grain" />
+    <div className="splash-backdrop__vignette" />
+    <div className="splash-backdrop__spotlight" />
+  </div>
+);
+
+export default SplashGradientBackdrop;
@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react';
+
+const W = 420;
+const H = 560;
+const ROWS = 14;
+const MID = H / 2;
+
+/** 호가창 실루엣 — 로그인 배경용 */
+export default function SplashOrderbookBackground() {
+  const rows = useMemo(() => {
+    const out: { y: number; askW: number; bidW: number; askPx: number; bidPx: number }[] = [];
+    for (let i = 0; i < ROWS; i++) {
+      const t = i / (ROWS - 1);
+      const y = 36 + t * (H - 72);
+      const dist = Math.abs(y - MID) / MID;
+      const spread = 0.35 + dist * 0.65;
+      const askW = 40 + (1 - dist) * 90 + Math.sin(i * 1.1) * 12;
+      const bidW = 38 + (1 - dist) * 85 + Math.cos(i * 0.9) * 10;
+      const base = 118000 + (0.5 - t) * 4200;
+      out.push({
+        y,
+        askW,
+        bidW,
+        askPx: base + spread * 120,
+        bidPx: base - spread * 115,
+      });
+    }
+    return out;
+  }, []);
+
+  return (
+    <svg
+      className="splash-orderbook-bg"
+      viewBox={`0 0 ${W} ${H}`}
+      preserveAspectRatio="xMidYMid meet"
+      aria-hidden
+    >
+      <rect width={W} height={H} fill="transparent" />
+      <line x1={W / 2} y1={28} x2={W / 2} y2={H - 28} className="splash-ob-mid" />
+      {rows.map((r, i) => (
+        <g key={i}>
+          <rect
+            x={W / 2 - r.askW}
+            y={r.y - 9}
+            width={r.askW}
+            height={18}
+            className="splash-ob-ask-bar"
+            rx="2"
+          />
+          <rect
+            x={W / 2}
+            y={r.y - 9}
+            width={r.bidW}
+            height={18}
+            className="splash-ob-bid-bar"
+            rx="2"
+          />
+          <text x={W / 2 - 10} y={r.y + 4} className="splash-ob-ask-txt" textAnchor="end">
+            {Math.round(r.askPx).toLocaleString()}
+          </text>
+          <text x={W / 2 + 10} y={r.y + 4} className="splash-ob-bid-txt" textAnchor="start">
+            {Math.round(r.bidPx).toLocaleString()}
+          </text>
+        </g>
+      ))}
+      <rect x={W / 2 - 72} y={MID - 14} width={144} height={28} className="splash-ob-spread" rx="4" />
+    </svg>
+  );
+}