feat: 게임 배포 관리 UI를 파일 직접 업로드 방식으로 전환
All checks were successful
Client CI/CD / deploy (push) Successful in 12s
All checks were successful
Client CI/CD / deploy (push) Successful in 12s
- zip 파일 업로드 → XHR progress bar로 진행률 표시 - 업로드 후 버전·파일명·크기·해시 자동 표시 - 현재 배포 중인 빌드 정보 상단에 표시 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -187,6 +187,78 @@
|
||||
background: rgba(229, 115, 115, 0.08);
|
||||
}
|
||||
|
||||
/* File input */
|
||||
.admin-input-file {
|
||||
padding: 8px 0;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-input-file:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Field hint */
|
||||
.admin-field-hint {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Upload progress */
|
||||
.admin-upload-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.admin-upload-bar {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: #BACDB0;
|
||||
border-radius: 3px;
|
||||
transition: width 0.2s;
|
||||
}
|
||||
|
||||
.admin-upload-pct {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
min-width: 36px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Current build info */
|
||||
.admin-current-build {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
background: rgba(186, 205, 176, 0.05);
|
||||
border: 1px solid rgba(186, 205, 176, 0.12);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.admin-meta-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.admin-meta-item {
|
||||
font-size: 0.78rem;
|
||||
color: rgba(186, 205, 176, 0.8);
|
||||
background: rgba(186, 205, 176, 0.08);
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(186, 205, 176, 0.15);
|
||||
}
|
||||
|
||||
.admin-meta-hash {
|
||||
font-family: monospace;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* Role badge */
|
||||
.admin-role-badge {
|
||||
font-size: 0.7rem;
|
||||
|
||||
@@ -1,69 +1,112 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getDownloadInfo } from '../../api/download';
|
||||
import { apiFetch } from '../../api/client';
|
||||
import './AdminCommon.css';
|
||||
|
||||
const BASE = import.meta.env.VITE_API_BASE_URL || '';
|
||||
|
||||
export default function DownloadAdmin() {
|
||||
const [form, setForm] = useState({ url: '', version: '', fileName: '', fileSize: '', fileHash: '' });
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saved, setSaved] = useState(false);
|
||||
const [file, setFile] = useState(null);
|
||||
const [info, setInfo] = useState(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
getDownloadInfo()
|
||||
.then((data) => setForm({
|
||||
url: data.url,
|
||||
version: data.version,
|
||||
fileName: data.fileName,
|
||||
fileSize: data.fileSize,
|
||||
fileHash: data.fileHash ?? '',
|
||||
}))
|
||||
.catch(() => {});
|
||||
getDownloadInfo().then(setInfo).catch(() => {});
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
const handleFileChange = (e) => {
|
||||
setFile(e.target.files[0] || null);
|
||||
setError('');
|
||||
try {
|
||||
await apiFetch('/api/download/info', {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
setSaved(true);
|
||||
setTimeout(() => setSaved(false), 2000);
|
||||
} catch (err) {
|
||||
setError(err.message || '저장에 실패했습니다.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
setProgress(0);
|
||||
};
|
||||
|
||||
const field = (label, key, placeholder) => (
|
||||
<div className="admin-field">
|
||||
<label className="admin-label">{label}</label>
|
||||
<input
|
||||
className="admin-input"
|
||||
placeholder={placeholder}
|
||||
value={form[key]}
|
||||
onChange={(e) => setForm({ ...form, [key]: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const handleUpload = (e) => {
|
||||
e.preventDefault();
|
||||
if (!file) return;
|
||||
|
||||
const token = localStorage.getItem('token');
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.upload.onprogress = (event) => {
|
||||
if (event.lengthComputable) {
|
||||
setProgress(Math.round((event.loaded / event.total) * 100));
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onload = () => {
|
||||
setUploading(false);
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
setInfo(JSON.parse(xhr.responseText));
|
||||
setFile(null);
|
||||
setProgress(0);
|
||||
} else {
|
||||
const res = JSON.parse(xhr.responseText || '{}');
|
||||
setError(res.error || '업로드에 실패했습니다.');
|
||||
setProgress(0);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = () => {
|
||||
setUploading(false);
|
||||
setError('네트워크 오류가 발생했습니다.');
|
||||
setProgress(0);
|
||||
};
|
||||
|
||||
xhr.open('POST', `${BASE}/api/download/upload?filename=${encodeURIComponent(file.name)}`);
|
||||
xhr.setRequestHeader('Authorization', `Bearer ${token}`);
|
||||
setUploading(true);
|
||||
setError('');
|
||||
xhr.send(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="admin-section">
|
||||
<h2 className="admin-section-title">다운로드 정보 관리</h2>
|
||||
<form className="admin-form" onSubmit={handleSubmit}>
|
||||
{field('다운로드 URL', 'url', 'https://...')}
|
||||
{field('버전', 'version', 'v1.0.0')}
|
||||
{field('파일명', 'fileName', 'A301_Launcher.zip')}
|
||||
{field('파일 크기', 'fileSize', '1.2 GB')}
|
||||
{field('A301.exe SHA256 해시', 'fileHash', 'sha256 해시값 (certutil -hashfile A301.exe SHA256)')}
|
||||
<h2 className="admin-section-title">게임 배포 관리</h2>
|
||||
|
||||
{info && (
|
||||
<div className="admin-current-build">
|
||||
<span className="admin-label">현재 배포 중</span>
|
||||
<div className="admin-meta-row">
|
||||
{info.version && <span className="admin-meta-item">{info.version}</span>}
|
||||
{info.fileName && <span className="admin-meta-item">{info.fileName}</span>}
|
||||
{info.fileSize && <span className="admin-meta-item">{info.fileSize}</span>}
|
||||
{info.fileHash && (
|
||||
<span className="admin-meta-item admin-meta-hash" title={info.fileHash}>
|
||||
SHA256: {info.fileHash.slice(0, 12)}...
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form className="admin-form" onSubmit={handleUpload}>
|
||||
<div className="admin-field">
|
||||
<label className="admin-label">새 배포 파일 (zip)</label>
|
||||
<input
|
||||
type="file"
|
||||
accept=".zip"
|
||||
className="admin-input-file"
|
||||
onChange={handleFileChange}
|
||||
disabled={uploading}
|
||||
/>
|
||||
<span className="admin-field-hint">
|
||||
A301.exe가 포함된 zip 파일을 선택하세요. 버전·파일명·크기·해시가 자동으로 추출됩니다.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{uploading && (
|
||||
<div className="admin-upload-progress">
|
||||
<div className="admin-upload-bar" style={{ width: `${progress}%` }} />
|
||||
<span className="admin-upload-pct">{progress}%</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="admin-error">{error}</p>}
|
||||
|
||||
<div className="admin-form-actions">
|
||||
<button className="btn-admin-primary" type="submit" disabled={loading}>
|
||||
{saved ? '저장됨 ✓' : '저장'}
|
||||
<button className="btn-admin-primary" type="submit" disabled={uploading || !file}>
|
||||
{uploading ? `업로드 중... (${progress}%)` : '업로드'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user