fix: 봇 관리 페이지 애니메이션 최적화
- 시작/중지 시 로컬 상태만 업데이트하여 전체 목록 새로고침 방지 - isInitialLoad 상태로 첫 로드 시에만 애니메이션 실행 - 새로고침 버튼 클릭 시에도 애니메이션 실행
This commit is contained in:
parent
330eb46ff4
commit
8db0a574ab
1 changed files with 11 additions and 4 deletions
|
|
@ -14,6 +14,7 @@ function AdminScheduleBots() {
|
||||||
const [toast, setToast] = useState(null);
|
const [toast, setToast] = useState(null);
|
||||||
const [bots, setBots] = useState([]);
|
const [bots, setBots] = useState([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [isInitialLoad, setIsInitialLoad] = useState(true); // 첫 로드 여부 (애니메이션용)
|
||||||
const [syncing, setSyncing] = useState(null); // 동기화 중인 봇 ID
|
const [syncing, setSyncing] = useState(null); // 동기화 중인 봇 ID
|
||||||
const [quotaWarning, setQuotaWarning] = useState(null); // 할당량 경고 상태
|
const [quotaWarning, setQuotaWarning] = useState(null); // 할당량 경고 상태
|
||||||
|
|
||||||
|
|
@ -110,11 +111,16 @@ function AdminScheduleBots() {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
|
// 로컬 상태만 업데이트 (전체 목록 새로고침 대신)
|
||||||
|
setBots(prev => prev.map(bot =>
|
||||||
|
bot.id === botId
|
||||||
|
? { ...bot, status: action === 'start' ? 'running' : 'stopped' }
|
||||||
|
: bot
|
||||||
|
));
|
||||||
setToast({
|
setToast({
|
||||||
type: 'success',
|
type: 'success',
|
||||||
message: action === 'start' ? `${botName} 봇이 시작되었습니다.` : `${botName} 봇이 정지되었습니다.`
|
message: action === 'start' ? `${botName} 봇이 시작되었습니다.` : `${botName} 봇이 정지되었습니다.`
|
||||||
});
|
});
|
||||||
fetchBots(); // 목록 새로고침
|
|
||||||
} else {
|
} else {
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
setToast({ type: 'error', message: data.error || '작업 실패' });
|
setToast({ type: 'error', message: data.error || '작업 실패' });
|
||||||
|
|
@ -328,7 +334,7 @@ function AdminScheduleBots() {
|
||||||
<h2 className="font-bold text-gray-900">봇 목록</h2>
|
<h2 className="font-bold text-gray-900">봇 목록</h2>
|
||||||
<Tooltip text="새로고침">
|
<Tooltip text="새로고침">
|
||||||
<button
|
<button
|
||||||
onClick={fetchBots}
|
onClick={() => { setIsInitialLoad(true); fetchBots(); }}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
className="p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-500 hover:text-gray-700 disabled:opacity-50"
|
className="p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-500 hover:text-gray-700 disabled:opacity-50"
|
||||||
>
|
>
|
||||||
|
|
@ -356,9 +362,10 @@ function AdminScheduleBots() {
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={bot.id}
|
key={bot.id}
|
||||||
initial={{ opacity: 0, scale: 0.95 }}
|
initial={isInitialLoad ? { opacity: 0, scale: 0.95 } : false}
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
transition={{ delay: index * 0.05 }}
|
transition={isInitialLoad ? { delay: index * 0.05 } : { duration: 0.15 }}
|
||||||
|
onAnimationComplete={() => isInitialLoad && index === bots.length - 1 && setIsInitialLoad(false)}
|
||||||
className="relative bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-md transition-all"
|
className="relative bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-md transition-all"
|
||||||
>
|
>
|
||||||
{/* 상단 헤더 */}
|
{/* 상단 헤더 */}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue