fix: 봇 관리 페이지 애니메이션 최적화

- 시작/중지 시 로컬 상태만 업데이트하여 전체 목록 새로고침 방지
- isInitialLoad 상태로 첫 로드 시에만 애니메이션 실행
- 새로고침 버튼 클릭 시에도 애니메이션 실행
This commit is contained in:
caadiq 2026-01-09 20:31:47 +09:00
parent 330eb46ff4
commit 8db0a574ab

View file

@ -14,6 +14,7 @@ function AdminScheduleBots() {
const [toast, setToast] = useState(null);
const [bots, setBots] = useState([]);
const [loading, setLoading] = useState(true);
const [isInitialLoad, setIsInitialLoad] = useState(true); // ()
const [syncing, setSyncing] = useState(null); // ID
const [quotaWarning, setQuotaWarning] = useState(null); //
@ -110,11 +111,16 @@ function AdminScheduleBots() {
});
if (response.ok) {
// ( )
setBots(prev => prev.map(bot =>
bot.id === botId
? { ...bot, status: action === 'start' ? 'running' : 'stopped' }
: bot
));
setToast({
type: 'success',
message: action === 'start' ? `${botName} 봇이 시작되었습니다.` : `${botName} 봇이 정지되었습니다.`
});
fetchBots(); //
} else {
const data = await response.json();
setToast({ type: 'error', message: data.error || '작업 실패' });
@ -328,7 +334,7 @@ function AdminScheduleBots() {
<h2 className="font-bold text-gray-900"> 목록</h2>
<Tooltip text="새로고침">
<button
onClick={fetchBots}
onClick={() => { setIsInitialLoad(true); fetchBots(); }}
disabled={loading}
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 (
<motion.div
key={bot.id}
initial={{ opacity: 0, scale: 0.95 }}
initial={isInitialLoad ? { opacity: 0, scale: 0.95 } : false}
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"
>
{/* 상단 헤더 */}