모의투자 로직 변경
This commit is contained in:
Macbook
@@ -12974,3 +12974,41 @@ html.theme-light .tam-disclaimer { color: #90a4ae; }
|
||||
.app-download-ios-note {
|
||||
margin-top: 12px; font-size: 11px; color: var(--text3); line-height: 1.45;
|
||||
}
|
||||
|
||||
/* ── 정식 로그인 유도 (게스트·매매 기능) ─────────────────────────────────── */
|
||||
.formal-login-gate {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: calc(100vh - 48px);
|
||||
padding: 32px 24px;
|
||||
text-align: center;
|
||||
background: var(--bg);
|
||||
}
|
||||
.formal-login-gate__title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
.formal-login-gate__desc {
|
||||
margin: 0 0 24px;
|
||||
max-width: 420px;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: var(--text2);
|
||||
}
|
||||
.formal-login-gate__btn {
|
||||
padding: 12px 28px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.formal-login-gate__btn:hover {
|
||||
filter: brightness(1.06);
|
||||
}
|
||||
|
||||
+61
-13
@@ -86,6 +86,13 @@ import LiveStrategyPanel from './components/LiveStrategyPanel';
|
||||
import { TradeNotificationProvider } from './contexts/TradeNotificationContext';
|
||||
import { VerificationIssueNotificationProvider } from './contexts/VerificationIssueNotificationContext';
|
||||
import { LiveSignalNotifier, type LiveSignalNotifierHandle } from './components/LiveSignalNotifier';
|
||||
import { FormalLoginGate } from './components/FormalLoginGate';
|
||||
import {
|
||||
isFormalLogin,
|
||||
isTradingMenuPage,
|
||||
isTradingSettingsCategory,
|
||||
FORMAL_LOGIN_REQUIRED_MSG,
|
||||
} from './utils/tradingAccess';
|
||||
import { NotifyTopMenuBar, ChartToolbarNotify } from './components/NotifyUiBindings';
|
||||
import { AppNotificationLayer } from './components/AppNotificationLayer';
|
||||
import TradeNotificationListPage from './components/TradeNotificationListPage';
|
||||
@@ -163,7 +170,13 @@ function App() {
|
||||
const [guestMode, setGuestMode] = useState(() =>
|
||||
isAppEntered() && !getAuthSession(),
|
||||
);
|
||||
const formalLogin = isFormalLogin(authUser, guestMode);
|
||||
const [loginOpen, setLoginOpen] = useState(false);
|
||||
|
||||
const requireFormalLogin = useCallback(() => {
|
||||
window.alert(FORMAL_LOGIN_REQUIRED_MSG);
|
||||
setLoginOpen(true);
|
||||
}, []);
|
||||
const [appDownloadOpen, setAppDownloadOpen] = useState(false);
|
||||
|
||||
// 전역 지표 파라미터 + 시각 설정 DB 동기화
|
||||
@@ -593,13 +606,17 @@ function App() {
|
||||
}, []);
|
||||
|
||||
const guardedSetMenuPage = useCallback((page: MenuPage) => {
|
||||
if (!formalLogin && isTradingMenuPage(page)) {
|
||||
requireFormalLogin();
|
||||
return;
|
||||
}
|
||||
if (page === 'notifications' && !canMenu('notifications')) return;
|
||||
if (page !== 'notifications' && !canMenu(page)) {
|
||||
setMenuPage(firstAllowedTopMenu(menuPermissions));
|
||||
return;
|
||||
}
|
||||
setMenuPage(page);
|
||||
}, [canMenu, menuPermissions]);
|
||||
}, [canMenu, menuPermissions, formalLogin, requireFormalLogin]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!menuPermsLoaded) return;
|
||||
@@ -814,12 +831,13 @@ function App() {
|
||||
|
||||
/** STOMP 구독 대상 — 가상투자 실행 중이면 투자대상 종목, 아니면 관심종목 */
|
||||
const monitoredMarkets = useMemo(() => {
|
||||
if (!formalLogin) return [];
|
||||
if (isVirtualActive) return virtualMonitoredMarkets;
|
||||
if (!appDefaults.liveStrategyCheck || !appDefaults.liveStrategyId) return [];
|
||||
const set = new Set(watchlist);
|
||||
if (symbol) set.add(symbol);
|
||||
return [...set];
|
||||
}, [isVirtualActive, virtualMonitoredMarkets, watchlist, symbol, appDefaults.liveStrategyCheck, appDefaults.liveStrategyId]);
|
||||
}, [formalLogin, isVirtualActive, virtualMonitoredMarkets, watchlist, symbol, appDefaults.liveStrategyCheck, appDefaults.liveStrategyId]);
|
||||
|
||||
const [marketSubscriptions, setMarketSubscriptions] = useState<{ market: string; candleType: string }[]>([]);
|
||||
|
||||
@@ -1693,7 +1711,7 @@ function App() {
|
||||
markets={monitoredMarkets}
|
||||
marketSubscriptions={liveStompSubscriptions}
|
||||
activeMarket={symbol}
|
||||
enabled={monitoredMarkets.length > 0}
|
||||
enabled={formalLogin && monitoredMarkets.length > 0}
|
||||
popupEnabled={appDefaults.tradeAlertPopup ?? true}
|
||||
chartMarkersActive={menuPage === 'chart'}
|
||||
onMarkersChange={markers => {
|
||||
@@ -1737,19 +1755,26 @@ function App() {
|
||||
)}
|
||||
|
||||
{menuPage === 'strategy' && (
|
||||
<StrategyPage theme={theme} activeIndicators={indicators} />
|
||||
formalLogin
|
||||
? <StrategyPage theme={theme} activeIndicators={indicators} />
|
||||
: <FormalLoginGate onLogin={requireFormalLogin} />
|
||||
)}
|
||||
|
||||
{menuPage === 'strategy-editor' && (
|
||||
<StrategyEditorPage theme={theme} />
|
||||
formalLogin
|
||||
? <StrategyEditorPage theme={theme} />
|
||||
: <FormalLoginGate onLogin={requireFormalLogin} />
|
||||
)}
|
||||
|
||||
{/* ── 백테스팅 이력 화면 ─────────────────────────────────────────── */}
|
||||
{menuPage === 'backtest' && (
|
||||
<BacktestHistoryPage theme={theme} />
|
||||
formalLogin
|
||||
? <BacktestHistoryPage theme={theme} />
|
||||
: <FormalLoginGate onLogin={requireFormalLogin} />
|
||||
)}
|
||||
|
||||
{menuPage === 'paper' && (
|
||||
formalLogin ? (
|
||||
<PaperTradingPage
|
||||
theme={theme}
|
||||
tickers={marketTickers}
|
||||
@@ -1759,6 +1784,7 @@ function App() {
|
||||
paperAutoTradeEnabled={paperAutoTradeEnabled}
|
||||
onPaperOrderFilled={handlePaperOrderFilled}
|
||||
onOpenSettings={() => {
|
||||
if (!formalLogin) { requireFormalLogin(); return; }
|
||||
setSettingsInitialCategory('paper');
|
||||
setMenuPage('settings');
|
||||
}}
|
||||
@@ -1767,9 +1793,13 @@ function App() {
|
||||
setMenuPage('chart');
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<FormalLoginGate onLogin={requireFormalLogin} title="투자관리" />
|
||||
)
|
||||
)}
|
||||
|
||||
{menuPage === 'virtual' && (
|
||||
formalLogin ? (
|
||||
<VirtualTradingPage
|
||||
theme={theme}
|
||||
tickers={marketTickers}
|
||||
@@ -1780,6 +1810,9 @@ function App() {
|
||||
onPaperAutoTradeEnabled={v => saveAppDef({ paperAutoTradeEnabled: v })}
|
||||
onPaperOrderFilled={handlePaperOrderFilled}
|
||||
/>
|
||||
) : (
|
||||
<FormalLoginGate onLogin={requireFormalLogin} title="가상매매" />
|
||||
)
|
||||
)}
|
||||
|
||||
{menuPage === 'trend-search' && (
|
||||
@@ -1802,6 +1835,7 @@ function App() {
|
||||
|
||||
{/* ── 설정 화면 ──────────────────────────────────────────────────── */}
|
||||
{menuPage === 'notifications' && canMenu('notifications') && (
|
||||
formalLogin ? (
|
||||
<TradeNotificationListPage
|
||||
theme={theme}
|
||||
tickers={marketTickers}
|
||||
@@ -1814,10 +1848,15 @@ function App() {
|
||||
setMenuPage('chart');
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<FormalLoginGate onLogin={requireFormalLogin} title="알림목록" />
|
||||
)
|
||||
)}
|
||||
|
||||
{menuPage === 'settings' && canMenu('settings') && (
|
||||
<SettingsPage
|
||||
isFormalLogin={formalLogin}
|
||||
onRequireFormalLogin={requireFormalLogin}
|
||||
theme={theme}
|
||||
menuPermissions={menuPermissions}
|
||||
magnetMode={magnetMode}
|
||||
@@ -2034,7 +2073,7 @@ function App() {
|
||||
backtestActive={btMatchesChart}
|
||||
backtestRunning={btRunning}
|
||||
backtestRunningId={undefined}
|
||||
onRunBacktest={menuPage === 'chart' && layoutDef.count === 1
|
||||
onRunBacktest={menuPage === 'chart' && layoutDef.count === 1 && formalLogin
|
||||
? async (opts) => {
|
||||
if (opts.strategyName) setBtStrategyName(opts.strategyName);
|
||||
if (useUpbit && (isLoading || bars.length === 0)) return;
|
||||
@@ -2066,16 +2105,25 @@ function App() {
|
||||
if (appDefaults.btAutoPopup) setShowBtResult(true);
|
||||
}
|
||||
: undefined}
|
||||
onOpenBtSettings={() => setShowBtSettings(true)}
|
||||
onOpenBtResults={() => setShowBtResult(true)}
|
||||
onOpenBtSettings={() => {
|
||||
if (!formalLogin) { requireFormalLogin(); return; }
|
||||
setShowBtSettings(true);
|
||||
}}
|
||||
onOpenBtResults={() => {
|
||||
if (!formalLogin) { requireFormalLogin(); return; }
|
||||
setShowBtResult(true);
|
||||
}}
|
||||
hasBtResult={btMatchesChart}
|
||||
onClearBtMarkers={() => {
|
||||
btMarkerPayloadRef.current = null;
|
||||
btClear();
|
||||
managerRef.current?.clearBacktestMarkers();
|
||||
}}
|
||||
onToggleLiveStrategy={() => setShowLivePanel(v => !v)}
|
||||
liveStrategyActive={showLivePanel || monitoredMarkets.length > 0}
|
||||
onToggleLiveStrategy={() => {
|
||||
if (!formalLogin) { requireFormalLogin(); return; }
|
||||
setShowLivePanel(v => !v);
|
||||
}}
|
||||
liveStrategyActive={formalLogin && (showLivePanel || monitoredMarkets.length > 0)}
|
||||
showChartQuote={useUpbit}
|
||||
chartLiveQuote={liveQuote}
|
||||
chartQuoteLoading={isLoading}
|
||||
@@ -2584,8 +2632,8 @@ function App() {
|
||||
onMarketSelect={handleTradeMarketSelect}
|
||||
availableKrw={paperCashBalance}
|
||||
availableCoinQty={paperCoinQty}
|
||||
paperTradingEnabled={paperTradingEnabled}
|
||||
paperAutoTradeEnabled={paperAutoTradeEnabled}
|
||||
paperTradingEnabled={formalLogin && paperTradingEnabled}
|
||||
paperAutoTradeEnabled={formalLogin && paperAutoTradeEnabled}
|
||||
onPaperOrderFilled={() => {
|
||||
refreshPaperAccount(symbol);
|
||||
handlePaperOrderFilled();
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import { FORMAL_LOGIN_REQUIRED_MSG } from '../utils/tradingAccess';
|
||||
|
||||
interface Props {
|
||||
onLogin: () => void;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
/** 게스트·비로그인 — 매매 관련 화면 대체 */
|
||||
export const FormalLoginGate: React.FC<Props> = ({
|
||||
onLogin,
|
||||
title = '정식 로그인이 필요합니다',
|
||||
}) => (
|
||||
<div className="formal-login-gate">
|
||||
<h2 className="formal-login-gate__title">{title}</h2>
|
||||
<p className="formal-login-gate__desc">{FORMAL_LOGIN_REQUIRED_MSG}</p>
|
||||
<button type="button" className="formal-login-gate__btn" onClick={onLogin}>
|
||||
로그인
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default FormalLoginGate;
|
||||
@@ -33,6 +33,7 @@ import {
|
||||
import TradeAlertPopupPreview from './TradeAlertPopupPreview';
|
||||
import TrendSearchSettingsPanel from './trendSearch/TrendSearchSettingsPanel';
|
||||
import type { TrendSearchAppSettings } from '../utils/trendSearchAppSettings';
|
||||
import { isTradingSettingsCategory } from '../utils/tradingAccess';
|
||||
import {
|
||||
CHART_LEGEND_SETTING_ITEMS,
|
||||
type ChartLegendVisibility,
|
||||
@@ -168,6 +169,9 @@ interface SettingsPageProps {
|
||||
onTrendSearchSettingsChange?: (s: TrendSearchAppSettings) => void;
|
||||
/** 설정 화면 진입 시 선택할 카테고리 (예: 모의투자 화면에서 링크) */
|
||||
initialCategory?: SettingsCategoryId;
|
||||
/** 정식 로그인 여부 (게스트는 매매·전략 설정 탭 차단) */
|
||||
isFormalLogin?: boolean;
|
||||
onRequireFormalLogin?: () => void;
|
||||
}
|
||||
|
||||
// ── 카테고리 정의 ────────────────────────────────────────────────────────────
|
||||
@@ -1743,6 +1747,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
|
||||
trendSearchSettings,
|
||||
onTrendSearchSettingsChange,
|
||||
initialCategory,
|
||||
isFormalLogin = true,
|
||||
onRequireFormalLogin,
|
||||
}) => {
|
||||
const categories = filterCategories(menuPermissions);
|
||||
const [active, setActive] = useState<CategoryId>(initialCategory ?? 'general');
|
||||
@@ -1757,10 +1763,14 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
|
||||
|
||||
useEffect(() => {
|
||||
if (!initialCategory) return;
|
||||
if (!isFormalLogin && isTradingSettingsCategory(initialCategory)) {
|
||||
onRequireFormalLogin?.();
|
||||
return;
|
||||
}
|
||||
if (categories.some(c => c.id === initialCategory)) {
|
||||
setActive(initialCategory);
|
||||
}
|
||||
}, [initialCategory, categories]);
|
||||
}, [initialCategory, categories, isFormalLogin, onRequireFormalLogin]);
|
||||
|
||||
useEffect(() => {
|
||||
if (active !== 'indicators') setIndicatorSaveUi(null);
|
||||
@@ -1948,7 +1958,13 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
|
||||
<button
|
||||
key={cat.id}
|
||||
className={`stg-sidebar-item ${active === cat.id ? 'stg-sidebar-item--active' : ''}`}
|
||||
onClick={() => setActive(cat.id)}
|
||||
onClick={() => {
|
||||
if (!isFormalLogin && isTradingSettingsCategory(cat.id)) {
|
||||
onRequireFormalLogin?.();
|
||||
return;
|
||||
}
|
||||
setActive(cat.id);
|
||||
}}
|
||||
>
|
||||
<span className="stg-sidebar-icon">{cat.icon}</span>
|
||||
<span className="stg-sidebar-label" style={{ fontSize: 13.5, fontWeight: 'inherit' }}>{cat.label}</span>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import { loginUser, type LoginResponse } from '../utils/backendApi';
|
||||
import SplashGradientBackdrop from './splash/SplashGradientBackdrop';
|
||||
import '../styles/splashScreen.css';
|
||||
|
||||
const DEFAULT_USERNAME = 'admin';
|
||||
@@ -36,8 +37,7 @@ const SplashScreen: React.FC<Props> = ({ onLoginSuccess, onGuest }) => {
|
||||
|
||||
return (
|
||||
<div className="splash">
|
||||
<div className="splash-photo-bg" aria-hidden />
|
||||
<div className="splash-photo-overlay" aria-hidden />
|
||||
<SplashGradientBackdrop />
|
||||
|
||||
<div className="splash-center">
|
||||
<div className="splash-glass">
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
/* GoldenChart splash — glassmorphism login + 차트 콜라주 배경 이미지 */
|
||||
/* GoldenChart splash — 프리미엄 흐림 그라데이션 + 글래스 로그인 */
|
||||
|
||||
.splash {
|
||||
position: fixed;
|
||||
@@ -7,13 +7,15 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #06080d;
|
||||
background: #05070c;
|
||||
color: #e8eaed;
|
||||
overflow: hidden;
|
||||
font-family: var(--font, 'Noto Sans KR', 'Inter', sans-serif);
|
||||
}
|
||||
|
||||
.splash-photo-bg {
|
||||
/* ── 배경 레이어 ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.splash-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
@@ -21,24 +23,271 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.splash-photo-bg::before {
|
||||
content: '';
|
||||
.splash-backdrop__base {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url('/splash-bg.png?v=3') center center / cover no-repeat;
|
||||
filter: saturate(1.06) brightness(0.94);
|
||||
background:
|
||||
linear-gradient(155deg, #06080f 0%, #0a0e18 38%, #070a12 68%, #05070c 100%);
|
||||
}
|
||||
|
||||
.splash-photo-overlay {
|
||||
.splash-backdrop__mesh {
|
||||
position: absolute;
|
||||
inset: -20%;
|
||||
opacity: 0.45;
|
||||
background:
|
||||
conic-gradient(
|
||||
from 38deg at 58% 42%,
|
||||
rgba(212, 175, 55, 0.12) 0deg,
|
||||
transparent 48deg,
|
||||
rgba(34, 197, 94, 0.07) 95deg,
|
||||
transparent 165deg,
|
||||
rgba(56, 189, 248, 0.05) 240deg,
|
||||
transparent 360deg
|
||||
);
|
||||
filter: blur(52px);
|
||||
}
|
||||
|
||||
.splash-backdrop__orbs {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(ellipse 108% 92% at 50% 50%, transparent 36%, rgba(2, 4, 8, 0.48) 100%),
|
||||
linear-gradient(to bottom, rgba(2, 4, 8, 0.28) 0%, rgba(2, 4, 8, 0.06) 44%, rgba(2, 4, 8, 0.3) 100%);
|
||||
}
|
||||
|
||||
.splash-backdrop__orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(72px);
|
||||
will-change: transform;
|
||||
animation: splash-orb-float 22s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.splash-backdrop__orb--gold {
|
||||
width: min(52vw, 480px);
|
||||
height: min(52vw, 480px);
|
||||
top: -6%;
|
||||
right: 2%;
|
||||
background: radial-gradient(circle, rgba(249, 226, 156, 0.32) 0%, rgba(212, 175, 55, 0.12) 45%, transparent 72%);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.splash-backdrop__orb--teal {
|
||||
width: min(44vw, 400px);
|
||||
height: min(44vw, 400px);
|
||||
top: 18%;
|
||||
right: -6%;
|
||||
background: radial-gradient(circle, rgba(34, 197, 94, 0.16) 0%, rgba(45, 212, 191, 0.06) 50%, transparent 70%);
|
||||
animation-delay: -8s;
|
||||
animation-duration: 24s;
|
||||
}
|
||||
|
||||
.splash-backdrop__orb--indigo {
|
||||
width: min(38vw, 340px);
|
||||
height: min(38vw, 340px);
|
||||
bottom: -10%;
|
||||
left: -8%;
|
||||
background: radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 68%);
|
||||
animation-delay: -14s;
|
||||
animation-duration: 26s;
|
||||
}
|
||||
|
||||
@keyframes splash-orb-float {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
33% {
|
||||
transform: translate(1.5%, -1%) scale(1.03);
|
||||
}
|
||||
66% {
|
||||
transform: translate(-1%, 1.5%) scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 중앙 → 우측 상단: 캔들·호가 실루엣 ───────────────────────────────────── */
|
||||
|
||||
.splash-backdrop__market-flow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.splash-backdrop__flow-glow {
|
||||
position: absolute;
|
||||
left: 42%;
|
||||
top: 38%;
|
||||
width: min(95vw, 920px);
|
||||
height: min(72vh, 640px);
|
||||
transform: translate(-18%, -22%);
|
||||
background: linear-gradient(
|
||||
128deg,
|
||||
rgba(34, 197, 94, 0.07) 0%,
|
||||
rgba(212, 175, 55, 0.1) 32%,
|
||||
rgba(56, 189, 248, 0.05) 58%,
|
||||
transparent 78%
|
||||
);
|
||||
filter: blur(56px);
|
||||
opacity: 0.9;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.splash-backdrop__flow-inner {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: min(128vw, 1680px);
|
||||
height: min(96vh, 920px);
|
||||
transform: translate(-42%, -48%);
|
||||
transform-origin: center center;
|
||||
pointer-events: none;
|
||||
/* 중앙(로그인 카드 부근)에서 우측 상단으로 갈수록 서서히 사라짐 */
|
||||
mask-image: linear-gradient(
|
||||
125deg,
|
||||
#000 0%,
|
||||
#000 14%,
|
||||
rgba(0, 0, 0, 0.62) 32%,
|
||||
rgba(0, 0, 0, 0.28) 48%,
|
||||
rgba(0, 0, 0, 0.08) 58%,
|
||||
transparent 72%
|
||||
);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
125deg,
|
||||
#000 0%,
|
||||
#000 14%,
|
||||
rgba(0, 0, 0, 0.62) 32%,
|
||||
rgba(0, 0, 0, 0.28) 48%,
|
||||
rgba(0, 0, 0, 0.08) 58%,
|
||||
transparent 72%
|
||||
);
|
||||
}
|
||||
|
||||
.splash-backdrop__chart-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.38;
|
||||
filter: blur(22px) saturate(0.72) brightness(0.78);
|
||||
}
|
||||
|
||||
.splash-backdrop__orderbook-layer {
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 6%;
|
||||
width: min(36vw, 340px);
|
||||
height: min(52vh, 480px);
|
||||
opacity: 0.32;
|
||||
filter: blur(14px) saturate(0.65);
|
||||
}
|
||||
|
||||
.splash-chart-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.splash-orderbook-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.splash-ob-mid {
|
||||
stroke: rgba(255, 255, 255, 0.08);
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 4 6;
|
||||
}
|
||||
|
||||
.splash-ob-ask-bar {
|
||||
fill: rgba(239, 68, 68, 0.35);
|
||||
}
|
||||
|
||||
.splash-ob-bid-bar {
|
||||
fill: rgba(34, 197, 94, 0.32);
|
||||
}
|
||||
|
||||
.splash-ob-ask-txt,
|
||||
.splash-ob-bid-txt {
|
||||
font-size: 9px;
|
||||
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
fill: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.splash-ob-spread {
|
||||
fill: rgba(212, 175, 55, 0.08);
|
||||
stroke: rgba(212, 175, 55, 0.15);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.splash-chart-grid {
|
||||
stroke: rgba(255, 255, 255, 0.04);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.splash-vol-bar {
|
||||
fill: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.splash-ichi--tenkan { stroke: rgba(250, 204, 21, 0.35); stroke-width: 1.2; fill: none; }
|
||||
.splash-ichi--kijun { stroke: rgba(96, 165, 250, 0.3); stroke-width: 1.2; fill: none; }
|
||||
.splash-ichi--senkou-a { stroke: rgba(34, 197, 94, 0.22); stroke-width: 1; fill: none; }
|
||||
.splash-ichi--senkou-b { stroke: rgba(239, 68, 68, 0.2); stroke-width: 1; fill: none; }
|
||||
|
||||
.splash-candle-wick {
|
||||
stroke: rgba(255, 255, 255, 0.2);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.splash-candle-up {
|
||||
fill: rgba(34, 197, 94, 0.42);
|
||||
}
|
||||
|
||||
.splash-candle-down {
|
||||
fill: rgba(239, 68, 68, 0.38);
|
||||
}
|
||||
|
||||
.splash-backdrop__grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.35;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
|
||||
background-size: 56px 56px;
|
||||
mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 85%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 85%);
|
||||
}
|
||||
|
||||
.splash-backdrop__grain {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.045;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-size: 180px 180px;
|
||||
}
|
||||
|
||||
.splash-backdrop__vignette {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 68% 58% at 50% 50%, transparent 0%, rgba(5, 7, 12, 0.42) 62%, rgba(2, 3, 6, 0.9) 100%),
|
||||
linear-gradient(128deg, transparent 0%, rgba(5, 7, 12, 0.15) 55%, rgba(5, 7, 12, 0.35) 100%),
|
||||
linear-gradient(180deg, rgba(5, 7, 12, 0.45) 0%, transparent 30%, transparent 70%, rgba(5, 7, 12, 0.5) 100%);
|
||||
}
|
||||
|
||||
.splash-backdrop__spotlight {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(
|
||||
ellipse 42% 38% at 50% 46%,
|
||||
rgba(255, 255, 255, 0.06) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.splash-backdrop__orb {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 로그인 카드 ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.splash-center {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@@ -54,13 +303,14 @@
|
||||
width: 100%;
|
||||
padding: 36px 32px 28px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(12, 14, 18, 0.55);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(10, 12, 18, 0.52);
|
||||
backdrop-filter: blur(24px) saturate(1.15);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.15);
|
||||
box-shadow:
|
||||
0 24px 64px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
0 0 0 1px rgba(212, 175, 55, 0.06) inset,
|
||||
0 28px 72px rgba(0, 0, 0, 0.55),
|
||||
0 8px 24px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.splash-brand {
|
||||
@@ -70,11 +320,11 @@
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.1;
|
||||
background: linear-gradient(180deg, #f9e29c 0%, #d4af37 42%, #b8860b 100%);
|
||||
background: linear-gradient(180deg, #fce9a8 0%, #e8c547 38%, #c9a227 72%, #a67c00 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
filter: drop-shadow(0 2px 12px rgba(212, 175, 55, 0.25));
|
||||
filter: drop-shadow(0 2px 16px rgba(212, 175, 55, 0.28));
|
||||
}
|
||||
|
||||
.splash-form {
|
||||
@@ -87,22 +337,23 @@
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 13px 14px;
|
||||
border-radius: 8px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
background: rgba(0, 0, 0, 0.38);
|
||||
color: #f3f4f6;
|
||||
font-size: 0.95rem;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.splash-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
color: rgba(255, 255, 255, 0.32);
|
||||
}
|
||||
|
||||
.splash-input:focus {
|
||||
outline: none;
|
||||
border-color: rgba(212, 175, 55, 0.45);
|
||||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
|
||||
border-color: rgba(212, 175, 55, 0.5);
|
||||
background: rgba(0, 0, 0, 0.48);
|
||||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
|
||||
}
|
||||
|
||||
.splash-input:disabled {
|
||||
@@ -121,19 +372,23 @@
|
||||
margin-top: 4px;
|
||||
padding: 13px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
color: #1a1408;
|
||||
background: linear-gradient(180deg, #f9e29c 0%, #d4af37 48%, #c9a227 100%);
|
||||
box-shadow: 0 4px 16px rgba(201, 162, 39, 0.35);
|
||||
background: linear-gradient(180deg, #fce9a8 0%, #e0c04a 42%, #c9a227 100%);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.25) inset,
|
||||
0 6px 22px rgba(201, 162, 39, 0.38);
|
||||
transition: transform 0.12s, filter 0.12s, box-shadow 0.12s;
|
||||
}
|
||||
|
||||
.splash-login-btn:hover:not(:disabled) {
|
||||
filter: brightness(1.05);
|
||||
box-shadow: 0 6px 20px rgba(201, 162, 39, 0.45);
|
||||
filter: brightness(1.06);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.3) inset,
|
||||
0 8px 28px rgba(201, 162, 39, 0.48);
|
||||
}
|
||||
|
||||
.splash-login-btn:active:not(:disabled) {
|
||||
@@ -149,14 +404,14 @@
|
||||
margin: 22px 0 0;
|
||||
text-align: center;
|
||||
font-size: 0.68rem;
|
||||
color: rgba(255, 255, 255, 0.32);
|
||||
color: rgba(255, 255, 255, 0.34);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.splash-guest-link {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.38);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 0.78rem;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
@@ -164,7 +419,7 @@
|
||||
}
|
||||
|
||||
.splash-guest-link:hover:not(:disabled) {
|
||||
color: rgba(249, 226, 156, 0.85);
|
||||
color: rgba(249, 226, 156, 0.9);
|
||||
}
|
||||
|
||||
.splash-guest-link:disabled {
|
||||
@@ -181,4 +436,19 @@
|
||||
font-size: 1.65rem;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.splash-backdrop__orb {
|
||||
filter: blur(56px);
|
||||
}
|
||||
.splash-backdrop__flow-inner {
|
||||
mask-image: radial-gradient(
|
||||
ellipse 90% 85% at 24% 56%,
|
||||
#000 0%,
|
||||
transparent 75%
|
||||
);
|
||||
-webkit-mask-image: radial-gradient(
|
||||
ellipse 90% 85% at 24% 56%,
|
||||
#000 0%,
|
||||
transparent 75%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import type { AuthSession } from './auth';
|
||||
|
||||
/** 정식 로그인(회원 세션) — 게스트 입장은 제외 */
|
||||
export function isFormalLogin(authUser: AuthSession | null, guestMode: boolean): boolean {
|
||||
return authUser != null && !guestMode;
|
||||
}
|
||||
|
||||
export const FORMAL_LOGIN_REQUIRED_MSG =
|
||||
'매매·모의투자·투자전략·자동매매 기능은 정식 로그인 후 이용할 수 있습니다.';
|
||||
|
||||
/** 매매·모의·전략·알림 관련 상단 메뉴 */
|
||||
export const TRADING_MENU_PAGES = new Set([
|
||||
'paper',
|
||||
'virtual',
|
||||
'notifications',
|
||||
'strategy',
|
||||
'strategy-editor',
|
||||
'backtest',
|
||||
]);
|
||||
|
||||
export function isTradingMenuPage(page: string): boolean {
|
||||
return TRADING_MENU_PAGES.has(page);
|
||||
}
|
||||
|
||||
export const TRADING_SETTINGS_CATEGORIES = new Set([
|
||||
'strategy',
|
||||
'paper',
|
||||
'virtual',
|
||||
'live',
|
||||
'backtest',
|
||||
]);
|
||||
|
||||
export function isTradingSettingsCategory(cat: string): boolean {
|
||||
return TRADING_SETTINGS_CATEGORIES.has(cat);
|
||||
}
|
||||
Reference in New Issue
Block a user