모의투자, 백테스팅 레이아웃 수정
This commit is contained in:
Macbook
@@ -1,11 +1,14 @@
|
||||
/**
|
||||
* 서비스 진입 스플래시 — 로그인 또는 게스트 모드로 메인 화면 진입
|
||||
* 서비스 진입 스플래시 — 글래스모피즘 로그인
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import { loginUser, type LoginResponse } from '../utils/backendApi';
|
||||
import SplashChartBackground from './splash/SplashChartBackground';
|
||||
import '../styles/splashScreen.css';
|
||||
|
||||
const DEFAULT_USERNAME = 'admin';
|
||||
const DEFAULT_PASSWORD = 'admin';
|
||||
const APP_VERSION = '1.0.3';
|
||||
|
||||
interface Props {
|
||||
onLoginSuccess: (res: LoginResponse) => void;
|
||||
@@ -35,118 +38,50 @@ const SplashScreen: React.FC<Props> = ({ onLoginSuccess, onGuest }) => {
|
||||
return (
|
||||
<div className="splash">
|
||||
<div className="splash-bg" aria-hidden />
|
||||
<div className="splash-chart-deco" aria-hidden>
|
||||
<svg className="splash-chart-svg" viewBox="0 0 400 120" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="splashLineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#2196f3" stopOpacity="0.2" />
|
||||
<stop offset="50%" stopColor="#42a5f5" stopOpacity="1" />
|
||||
<stop offset="100%" stopColor="#ffd54f" stopOpacity="0.8" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
className="splash-line"
|
||||
d="M0,90 L40,70 L80,75 L120,45 L160,55 L200,25 L240,40 L280,15 L320,30 L360,10 L400,20"
|
||||
fill="none"
|
||||
stroke="url(#splashLineGrad)"
|
||||
strokeWidth="2.5"
|
||||
/>
|
||||
<path
|
||||
className="splash-area"
|
||||
d="M0,90 L40,70 L80,75 L120,45 L160,55 L200,25 L240,40 L280,15 L320,30 L360,10 L400,20 L400,120 L0,120 Z"
|
||||
fill="url(#splashLineGrad)"
|
||||
opacity="0.12"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div className="splash-chart-layer" aria-hidden>
|
||||
<SplashChartBackground />
|
||||
</div>
|
||||
<div className="splash-chart-fade" aria-hidden />
|
||||
|
||||
<div className="splash-inner">
|
||||
<header className="splash-brand">
|
||||
<div className="splash-logo">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
|
||||
<rect width="48" height="48" rx="10" fill="#2196f3" />
|
||||
<polyline
|
||||
points="8,32 16,22 24,26 32,14 40,18"
|
||||
stroke="white"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="splash-title">GoldenChart</h1>
|
||||
<p className="splash-tagline">
|
||||
암호화폐 실시간 차트 · 투자전략 · 백테스팅 · 모의투자
|
||||
</p>
|
||||
</header>
|
||||
<div className="splash-center">
|
||||
<div className="splash-glass">
|
||||
<h1 className="splash-brand">GoldenChart</h1>
|
||||
|
||||
<ul className="splash-features">
|
||||
<li><span className="splash-feat-icon">📈</span> 업비트 연동 실시간 캔들·호가</li>
|
||||
<li><span className="splash-feat-icon">⚙️</span> 커스텀 전략 & 백테스트</li>
|
||||
<li><span className="splash-feat-icon">🔔</span> 매매 시그널 알림</li>
|
||||
<li><span className="splash-feat-icon">🛡️</span> 역할별 메뉴·기능 권한 (관리자 설정)</li>
|
||||
</ul>
|
||||
|
||||
<div className="splash-card">
|
||||
<h2 className="splash-card-title">시작하기</h2>
|
||||
<p className="splash-card-desc">
|
||||
로그인하면 계정 설정이 기기 간 공유됩니다. 게스트 모드는 제한된 메뉴로 바로 체험할 수 있습니다.
|
||||
</p>
|
||||
<form className="splash-form" onSubmit={submitLogin}>
|
||||
<div className="splash-form-row">
|
||||
<label className="splash-field">
|
||||
<span>아이디</span>
|
||||
<input
|
||||
type="text"
|
||||
autoComplete="username"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
disabled={loading}
|
||||
placeholder="admin"
|
||||
/>
|
||||
</label>
|
||||
<label className="splash-field">
|
||||
<span>비밀번호</span>
|
||||
<input
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
className="splash-field--visible"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
disabled={loading}
|
||||
placeholder="••••••"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
className="splash-input"
|
||||
type="text"
|
||||
autoComplete="username"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
disabled={loading}
|
||||
placeholder="ID"
|
||||
/>
|
||||
<input
|
||||
className="splash-input"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
disabled={loading}
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
{error && <p className="splash-error">{error}</p>}
|
||||
<div className="splash-actions">
|
||||
<button
|
||||
type="submit"
|
||||
className="splash-btn splash-btn--primary"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? '로그인 중…' : '로그인'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="splash-btn splash-btn--guest"
|
||||
onClick={onGuest}
|
||||
disabled={loading}
|
||||
>
|
||||
게스트 모드
|
||||
</button>
|
||||
</div>
|
||||
<button type="submit" className="splash-login-btn" disabled={loading}>
|
||||
{loading ? '로그인 중…' : '로그인'}
|
||||
</button>
|
||||
</form>
|
||||
<p className="splash-footnote">
|
||||
기본 관리자: <code>admin</code> / <code>admin</code> · 권한은 설정 → 관리자 설정에서 변경
|
||||
|
||||
<p className="splash-version">
|
||||
버전: {APP_VERSION} | Core Engine: Ta4j & Spring Boot
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer className="splash-footer">
|
||||
<span>GoldenChart Trading Platform</span>
|
||||
</footer>
|
||||
<button type="button" className="splash-guest-link" onClick={onGuest} disabled={loading}>
|
||||
게스트로 체험하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user