feat: 게임 시작/다운로드 버튼 통합
All checks were successful
Client CI/CD / deploy (push) Successful in 11s

- 단일 "게임 시작" 버튼으로 통합
- 런처 설치 시 게임 실행, 미설치 시 자동 다운로드 (blur 감지)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-24 22:48:47 +09:00
parent 4ec4f9a0a3
commit e496de7e56
2 changed files with 33 additions and 40 deletions

View File

@@ -19,45 +19,29 @@
margin: 0 0 28px; margin: 0 0 28px;
} }
.btn-download { .btn-play {
display: inline-block; display: inline-block;
padding: 16px 48px; padding: 18px 64px;
background: #BACDB0; background: #BACDB0;
color: #2E2C2F; color: #2E2C2F;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 1.1rem; font-size: 1.2rem;
font-weight: 700; font-weight: 700;
text-decoration: none;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s, transform 0.15s; transition: opacity 0.2s, transform 0.15s;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.btn-download:hover { .btn-play:hover {
opacity: 0.9; opacity: 0.9;
transform: translateY(-1px); transform: translateY(-1px);
} }
.btn-launch { .btn-play:disabled {
display: inline-block; opacity: 0.6;
padding: 16px 48px; cursor: not-allowed;
background: transparent; transform: none;
color: #BACDB0;
border: 2px solid #BACDB0;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.15s;
letter-spacing: 0.05em;
margin-left: 16px;
}
.btn-launch:hover {
background: #BACDB0;
color: #2E2C2F;
transform: translateY(-1px);
} }
.launch-hint { .launch-hint {

View File

@@ -7,6 +7,7 @@ import './DownloadSection.css';
export default function DownloadSection() { export default function DownloadSection() {
const [info, setInfo] = useState(null); const [info, setInfo] = useState(null);
const [ready, setReady] = useState(false); const [ready, setReady] = useState(false);
const [launching, setLaunching] = useState(false);
const { user } = useAuth(); const { user } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -16,19 +17,30 @@ export default function DownloadSection() {
.catch(() => setReady(true)); .catch(() => setReady(true));
}, []); }, []);
const handleDownload = (e) => { const handlePlay = () => {
if (!user) {
e.preventDefault();
navigate('/login');
}
};
const handleLaunch = () => {
if (!user) { if (!user) {
navigate('/login'); navigate('/login');
return; return;
} }
setLaunching(true);
let launched = false;
const onBlur = () => { launched = true; };
window.addEventListener('blur', onBlur);
window.location.href = 'a301://launch?token=' + user.token; window.location.href = 'a301://launch?token=' + user.token;
setTimeout(() => {
window.removeEventListener('blur', onBlur);
setLaunching(false);
if (!launched && info?.url) {
// 런처 미설치 → 자동 다운로드
const a = document.createElement('a');
a.href = info.url;
a.download = '';
a.click();
}
}, 2000);
}; };
if (!ready) return null; if (!ready) return null;
@@ -36,20 +48,17 @@ export default function DownloadSection() {
return ( return (
<section className="download-section"> <section className="download-section">
<div className="download-content"> <div className="download-content">
<h2 className="download-title">게임 런처 다운로드</h2> <h2 className="download-title">A301</h2>
{info ? ( {info ? (
<> <>
<p className="download-meta"> <p className="download-meta">
{info.fileName} &middot; {info.fileSize} &middot; {info.version} {info.version} &middot; {info.fileSize}
</p> </p>
<a href={info.url} download onClick={handleDownload} className="btn-download"> <button onClick={handlePlay} className="btn-play" disabled={launching}>
{user ? '다운로드' : '로그인 후 다운로드'} {launching ? '실행 중...' : '게임 시작'}
</a>
<button onClick={handleLaunch} className="btn-launch">
게임 시작
</button> </button>
<p className="launch-hint"> <p className="launch-hint">
게임 시작이 되나요? 먼저 다운로드 launcher.exe install을 실행해주세요. 처음 설치하는 경우 자동으로 다운로드됩니다
</p> </p>
</> </>
) : ( ) : (