refactor: 서버 관리 UI 개선 - 상단 카드 + 시작/종료 통합
- 선택된 서버가 상단 카드에 표시 - 시작/종료 버튼 하나로 통합 - 서버 선택 시 바로 카드에 반영 - localStorage에 선택 저장 (새로고침 후에도 유지) - 실행 중이면 서버 변경 버튼으로 문구 변경
This commit is contained in:
parent
2c15101ad8
commit
2a62dc6739
1 changed files with 89 additions and 70 deletions
|
|
@ -110,7 +110,10 @@ export default function Admin({ isMobile = false }) {
|
|||
|
||||
// 서버 관리 상태
|
||||
const [isServerListExpanded, setIsServerListExpanded] = useState(false); // 서버 목록 펼침 상태
|
||||
const [selectedServer, setSelectedServer] = useState(null); // 선택된 서버 경로
|
||||
const [selectedServer, setSelectedServerState] = useState(() => {
|
||||
// localStorage에서 선택된 서버 복원
|
||||
return localStorage.getItem('selectedMinecraftServer') || null;
|
||||
});
|
||||
const [servers, setServers] = useState([]); // 서버 목록 (API에서 가져옴)
|
||||
const [serverLoading, setServerLoading] = useState(false); // 서버 시작/종료 로딩
|
||||
const [serverDialog, setServerDialog] = useState({ show: false, action: null, server: null }); // 시작/종료 확인 다이얼로그
|
||||
|
|
@ -860,6 +863,16 @@ export default function Admin({ isMobile = false }) {
|
|||
}
|
||||
}, []); // 의존성 없음 - 마운트 시에만 실행
|
||||
|
||||
// 선택된 서버 설정 (localStorage에도 저장)
|
||||
const setSelectedServer = (serverPath) => {
|
||||
setSelectedServerState(serverPath);
|
||||
if (serverPath) {
|
||||
localStorage.setItem('selectedMinecraftServer', serverPath);
|
||||
} else {
|
||||
localStorage.removeItem('selectedMinecraftServer');
|
||||
}
|
||||
};
|
||||
|
||||
// 서버 목록 fetch
|
||||
const fetchServers = async () => {
|
||||
try {
|
||||
|
|
@ -1581,11 +1594,14 @@ export default function Admin({ isMobile = false }) {
|
|||
{/* 서버 관리 */}
|
||||
{(() => {
|
||||
const runningServer = servers.find(s => s.running);
|
||||
const otherServers = servers.filter(s => !s.running);
|
||||
const selectedServerData = servers.find(s => s.path === selectedServer);
|
||||
// 실행 중인 서버가 있으면 그것을, 없으면 선택된 서버를 표시
|
||||
const displayServer = runningServer || selectedServerData;
|
||||
const isRunning = !!runningServer;
|
||||
|
||||
return (
|
||||
<div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-4">
|
||||
{/* 헤더 - 실행 중인 서버 표시 */}
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-white font-medium flex items-center gap-2">
|
||||
🖥️ 서버 관리
|
||||
|
|
@ -1593,62 +1609,87 @@ export default function Admin({ isMobile = false }) {
|
|||
<Loader2 size={14} className="animate-spin text-zinc-500" />
|
||||
)}
|
||||
</h3>
|
||||
{runningServer && (
|
||||
{isRunning && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<span className="text-emerald-400 text-xs font-medium">{runningServer.id}</span>
|
||||
<span className="text-emerald-400 text-xs font-medium">실행 중</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 실행 중인 서버가 있으면 상태 카드 표시 */}
|
||||
{runningServer && (
|
||||
<div className="bg-emerald-500/10 border border-emerald-500/30 rounded-xl p-3 mb-3">
|
||||
{/* 선택된/실행 중인 서버 카드 */}
|
||||
{displayServer ? (
|
||||
<div className={`rounded-xl p-3 mb-3 ${
|
||||
isRunning
|
||||
? 'bg-emerald-500/10 border border-emerald-500/30'
|
||||
: 'bg-zinc-800/50 border border-zinc-700'
|
||||
}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-emerald-500/20 rounded-lg flex items-center justify-center">
|
||||
<div className="w-3 h-3 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
|
||||
isRunning ? 'bg-emerald-500/20' : 'bg-zinc-700'
|
||||
}`}>
|
||||
{isRunning ? (
|
||||
<div className="w-3 h-3 rounded-full bg-emerald-500 animate-pulse" />
|
||||
) : (
|
||||
<div className="w-3 h-3 rounded-full bg-zinc-500" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white text-sm font-medium">{runningServer.id}</p>
|
||||
<p className="text-white text-sm font-medium">{displayServer.id}</p>
|
||||
<p className="text-zinc-400 text-xs">
|
||||
<span className={runningServer.loader === 'NeoForge' || runningServer.loader === 'Neoforge' ? 'text-orange-400' : 'text-blue-400'}>
|
||||
{runningServer.loader}
|
||||
<span className={displayServer.loader === 'NeoForge' || displayServer.loader === 'Neoforge' ? 'text-orange-400' : 'text-blue-400'}>
|
||||
{displayServer.loader}
|
||||
</span>
|
||||
<span className="mx-1">•</span>
|
||||
{runningServer.path.split('/')[1]}
|
||||
{displayServer.path.split('/')[1]}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="px-4 py-2 text-xs font-medium rounded-lg bg-red-600/20 text-red-400 hover:bg-red-600/30 transition-colors disabled:opacity-50"
|
||||
className={`px-4 py-2 text-xs font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2 ${
|
||||
isRunning
|
||||
? 'bg-red-600/20 text-red-400 hover:bg-red-600/30'
|
||||
: 'bg-emerald-600 text-white hover:bg-emerald-500'
|
||||
}`}
|
||||
disabled={serverLoading}
|
||||
onClick={() => setServerDialog({ show: true, action: 'stop', server: runningServer })}
|
||||
onClick={() => setServerDialog({
|
||||
show: true,
|
||||
action: isRunning ? 'stop' : 'start',
|
||||
server: displayServer
|
||||
})}
|
||||
>
|
||||
종료
|
||||
{serverLoading ? (
|
||||
<Loader2 size={12} className="animate-spin" />
|
||||
) : null}
|
||||
{isRunning ? '종료' : '시작'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-zinc-800/30 border border-zinc-700 rounded-xl p-3 mb-3">
|
||||
<p className="text-zinc-500 text-sm text-center">서버를 선택해주세요</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 서버 선택 (접힘/펼침) - 실행 중이면 비활성화 */}
|
||||
<div className={`border border-zinc-800 rounded-xl overflow-hidden ${runningServer ? 'opacity-50' : ''}`}>
|
||||
<div className={`border border-zinc-800 rounded-xl overflow-hidden ${isRunning ? 'opacity-50' : ''}`}>
|
||||
<button
|
||||
onClick={() => !runningServer && setIsServerListExpanded(!isServerListExpanded)}
|
||||
disabled={!!runningServer}
|
||||
onClick={() => !isRunning && setIsServerListExpanded(!isServerListExpanded)}
|
||||
disabled={isRunning}
|
||||
className="w-full flex items-center justify-between p-3 bg-zinc-800/50 hover:bg-zinc-800 transition-colors disabled:cursor-not-allowed"
|
||||
>
|
||||
<span className="text-zinc-300 text-sm">
|
||||
{runningServer ? '서버 실행 중에는 선택 불가' : '서버 선택'}
|
||||
{isRunning ? '서버 실행 중에는 변경 불가' : '서버 변경'}
|
||||
</span>
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={`text-zinc-400 transition-transform ${isServerListExpanded && !runningServer ? 'rotate-180' : ''}`}
|
||||
className={`text-zinc-400 transition-transform ${isServerListExpanded && !isRunning ? 'rotate-180' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isServerListExpanded && !runningServer && (
|
||||
{isServerListExpanded && !isRunning && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
|
|
@ -1656,67 +1697,45 @@ export default function Admin({ isMobile = false }) {
|
|||
className="overflow-hidden"
|
||||
>
|
||||
<div className="p-2 space-y-1 max-h-[200px] overflow-y-auto custom-scrollbar">
|
||||
{otherServers.length === 0 ? (
|
||||
{servers.length === 0 ? (
|
||||
<p className="text-zinc-500 text-sm text-center py-2">서버가 없습니다</p>
|
||||
) : (
|
||||
otherServers.map((server) => (
|
||||
servers.map((server) => (
|
||||
<button
|
||||
key={server.path}
|
||||
onClick={() => setSelectedServer(server.path)}
|
||||
className={`w-full flex items-center justify-between p-3 rounded-lg transition-colors ${
|
||||
onClick={() => {
|
||||
setSelectedServer(server.path);
|
||||
setIsServerListExpanded(false);
|
||||
}}
|
||||
className={`w-full flex items-center gap-3 p-3 rounded-lg transition-colors ${
|
||||
selectedServer === server.path
|
||||
? 'bg-zinc-700 border border-zinc-600'
|
||||
: 'bg-zinc-800/30 hover:bg-zinc-800/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
|
||||
selectedServer === server.path
|
||||
? 'border-emerald-500'
|
||||
: 'border-zinc-600'
|
||||
}`}>
|
||||
{selectedServer === server.path && (
|
||||
<div className="w-2 h-2 rounded-full bg-emerald-500" />
|
||||
)}
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-white text-sm">{server.id}</p>
|
||||
<p className="text-zinc-500 text-xs">
|
||||
<span className={server.loader === 'NeoForge' || server.loader === 'Neoforge' ? 'text-orange-400' : 'text-blue-400'}>
|
||||
{server.loader}
|
||||
</span>
|
||||
<span className="mx-1">•</span>
|
||||
{server.path.split('/')[1]}
|
||||
</p>
|
||||
</div>
|
||||
<div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
|
||||
selectedServer === server.path
|
||||
? 'border-emerald-500'
|
||||
: 'border-zinc-600'
|
||||
}`}>
|
||||
{selectedServer === server.path && (
|
||||
<div className="w-2 h-2 rounded-full bg-emerald-500" />
|
||||
)}
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-white text-sm">{server.id}</p>
|
||||
<p className="text-zinc-500 text-xs">
|
||||
<span className={server.loader === 'NeoForge' || server.loader === 'Neoforge' ? 'text-orange-400' : 'text-blue-400'}>
|
||||
{server.loader}
|
||||
</span>
|
||||
<span className="mx-1">•</span>
|
||||
{server.path.split('/')[1]}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 시작 버튼 */}
|
||||
{selectedServer && (
|
||||
<div className="p-2 pt-0">
|
||||
<button
|
||||
className="w-full py-2.5 bg-emerald-600 hover:bg-emerald-500 disabled:bg-zinc-700 text-white text-sm font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
|
||||
disabled={serverLoading}
|
||||
onClick={() => {
|
||||
const server = servers.find(s => s.path === selectedServer);
|
||||
if (server) {
|
||||
setServerDialog({ show: true, action: 'start', server });
|
||||
}
|
||||
}}
|
||||
>
|
||||
{serverLoading ? (
|
||||
<>
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
처리 중...
|
||||
</>
|
||||
) : '선택한 서버 시작'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue