diff --git a/frontend/src/pages/pc/admin/AdminScheduleBots.jsx b/frontend/src/pages/pc/admin/AdminScheduleBots.jsx index 7b59e56..813a093 100644 --- a/frontend/src/pages/pc/admin/AdminScheduleBots.jsx +++ b/frontend/src/pages/pc/admin/AdminScheduleBots.jsx @@ -1,7 +1,8 @@ import { useState, useEffect } from 'react'; import { useNavigate, Link } from 'react-router-dom'; +import { useQuery, useQueryClient } from '@tanstack/react-query'; import { motion, AnimatePresence } from 'framer-motion'; -import { +import { Home, ChevronRight, Bot, Play, Square, Youtube, Calendar, Clock, CheckCircle, XCircle, RefreshCw, Download } from 'lucide-react'; @@ -44,46 +45,42 @@ const MeilisearchIcon = ({ size = 20 }) => ( function AdminScheduleBots() { const navigate = useNavigate(); + const queryClient = useQueryClient(); const { user, isAuthenticated } = useAdminAuth(); const { toast, setToast } = useToast(); - 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); // 할당량 경고 상태 - useEffect(() => { - if (isAuthenticated) { - fetchBots(); - fetchQuotaWarning(); - } - }, [isAuthenticated]); - // 봇 목록 조회 - const fetchBots = async () => { - setLoading(true); - try { - const data = await botsApi.getBots(); - setBots(data); - } catch (error) { - console.error('봇 목록 조회 오류:', error); - setToast({ type: 'error', message: '봇 목록을 불러올 수 없습니다.' }); - } finally { - setLoading(false); - } - }; + const { data: bots = [], isLoading: loading, isError, refetch: fetchBots } = useQuery({ + queryKey: ['admin', 'bots'], + queryFn: botsApi.getBots, + enabled: isAuthenticated, + staleTime: 30000, + }); // 할당량 경고 상태 조회 - const fetchQuotaWarning = async () => { - try { - const data = await botsApi.getQuotaWarning(); - if (data.active) { - setQuotaWarning(data); - } - } catch (error) { - console.error('할당량 경고 조회 오류:', error); + const { data: quotaData } = useQuery({ + queryKey: ['admin', 'bots', 'quota'], + queryFn: botsApi.getQuotaWarning, + enabled: isAuthenticated, + staleTime: 60000, + }); + + // 에러 처리 + useEffect(() => { + if (isError) { + setToast({ type: 'error', message: '봇 목록을 불러올 수 없습니다.' }); } - }; + }, [isError, setToast]); + + // 할당량 경고 상태 업데이트 + useEffect(() => { + if (quotaData?.active) { + setQuotaWarning(quotaData); + } + }, [quotaData]); // 할당량 경고 해제 const handleDismissQuotaWarning = async () => { @@ -99,21 +96,23 @@ function AdminScheduleBots() { const toggleBot = async (botId, currentStatus, botName) => { try { const action = currentStatus === 'running' ? 'stop' : 'start'; - + if (action === 'start') { await botsApi.startBot(botId); } else { await botsApi.stopBot(botId); } - - // 로컬 상태만 업데이트 (전체 목록 새로고침 대신) - setBots(prev => prev.map(bot => - bot.id === botId - ? { ...bot, status: action === 'start' ? 'running' : 'stopped' } - : bot - )); - setToast({ - type: 'success', + + // 캐시 업데이트 (전체 목록 새로고침 대신) + queryClient.setQueryData(['admin', 'bots'], (prev) => + prev?.map(bot => + bot.id === botId + ? { ...bot, status: action === 'start' ? 'running' : 'stopped' } + : bot + ) + ); + setToast({ + type: 'success', message: action === 'start' ? `${botName} 봇이 시작되었습니다.` : `${botName} 봇이 정지되었습니다.` }); } catch (error) {