caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

봇 관리 UI 개선

Browse source 
- 카드 그리드 레이아웃으로 변경
- 통계 분리: 총 추가 / 마지막 추가 / 업데이트 간격
- DB에 last_added_count 컬럼 추가
- 업데이트 시간을 봇 이름 아래에 표시
- 마지막 추가된 개수 초록색 강조
This commit is contained in:
caadiq 2026-01-06 11:42:47 +09:00
parent 89cd2d7965
commit 217746af3e
4 changed files with 110 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
backend/services/youtube-bot.js
View file

@ -433,14 +433,15 @@ export async function syncNewVideos(botId) {
} }
} }
// 봇 상태 업데이트 // 봇 상태 업데이트 (전체 추가 수 + 마지막 추가 수)
await pool.query( await pool.query(
`UPDATE bots SET `UPDATE bots SET
last_check_at = DATE_ADD(NOW(), INTERVAL 9 HOUR), last_check_at = DATE_ADD(NOW(), INTERVAL 9 HOUR),
schedules_added = schedules_added + ?, schedules_added = schedules_added + ?,
last_added_count = ?,
error_message = NULL error_message = NULL
WHERE id = ?`, WHERE id = ?`,
[addedCount, botId] [addedCount, addedCount, botId]
); );
return { addedCount, total: videos.length }; return { addedCount, total: videos.length };
@ -536,14 +537,15 @@ export async function syncAllVideos(botId) {
} }
} }
// 봇 상태 업데이트 // 봇 상태 업데이트 (전체 추가 수 + 마지막 추가 수)
await pool.query( await pool.query(
`UPDATE bots SET `UPDATE bots SET
last_check_at = DATE_ADD(NOW(), INTERVAL 9 HOUR), last_check_at = DATE_ADD(NOW(), INTERVAL 9 HOUR),
schedules_added = schedules_added + ?, schedules_added = schedules_added + ?,
last_added_count = ?,
error_message = NULL error_message = NULL
WHERE id = ?`, WHERE id = ?`,
[addedCount, botId] [addedCount, addedCount, botId]
); );
return { addedCount, total: videos.length }; return { addedCount, total: videos.length };

8
frontend/src/pages/pc/admin/AdminSchedule.jsx
View file

@ -163,8 +163,16 @@ function AdminSchedule() {
// 카테고리 로드 // 카테고리 로드
fetchCategories(); fetchCategories();
// sessionStorage에서 토스트 메시지 확인 (일정 추가/수정 완료 시)
const savedToast = sessionStorage.getItem('scheduleToast');
if (savedToast) {
setToast(JSON.parse(savedToast));
sessionStorage.removeItem('scheduleToast');
}
}, [navigate]); }, [navigate]);
// 월이 변경될 때마다 일정 로드 // 월이 변경될 때마다 일정 로드
useEffect(() => { useEffect(() => {
fetchSchedules(); fetchSchedules();

83
frontend/src/pages/pc/admin/AdminScheduleBots.jsx
View file

@ -280,82 +280,87 @@ function AdminScheduleBots() {
<p className="text-sm mt-1">위의 버튼을 클릭하여 봇을 추가하세요</p> <p className="text-sm mt-1">위의 버튼을 클릭하여 봇을 추가하세요</p>
</div> </div>
) : ( ) : (
<div className="divide-y divide-gray-100"> <div className="p-6 grid grid-cols-1 lg:grid-cols-2 gap-4">
{bots.map((bot, index) => { {bots.map((bot, index) => {
const statusInfo = getStatusInfo(bot.status); const statusInfo = getStatusInfo(bot.status);
return ( return (
<motion.div <motion.div
key={bot.id} key={bot.id}
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, scale: 1 }}
transition={{ delay: index * 0.05 }} transition={{ delay: index * 0.05 }}
className="p-6 hover:bg-gray-50 transition-colors" className="relative bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-md transition-all"
> >
<div className="flex items-start gap-4"> {/* 상단 헤더 */}
{/* 아이콘 */} <div className="flex items-center justify-between p-4 border-b border-gray-100">
<div className={`w-12 h-12 rounded-xl ${statusInfo.bg} flex items-center justify-center flex-shrink-0`}> <div className="flex items-center gap-3">
<Youtube size={24} className="text-red-500" /> <div className="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center">
<Youtube size={20} className="text-red-500" />
</div> </div>
<div>
{/* 정보 */}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-1">
<h3 className="font-bold text-gray-900">{bot.name}</h3> <h3 className="font-bold text-gray-900">{bot.name}</h3>
<span className={`flex items-center gap-1 text-xs font-medium ${statusInfo.color}`}> <p className="text-xs text-gray-400">
{bot.last_check_at ? `${formatTime(bot.last_check_at)}에 업데이트됨` : '아직 업데이트 없음'}
</p>
</div>
</div>
<span className={`flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full ${statusInfo.bg} ${statusInfo.color}`}>
<span className={`w-1.5 h-1.5 rounded-full ${statusInfo.dot} ${bot.status === 'running' ? 'animate-pulse' : ''}`}></span> <span className={`w-1.5 h-1.5 rounded-full ${statusInfo.dot} ${bot.status === 'running' ? 'animate-pulse' : ''}`}></span>
{statusInfo.text} {statusInfo.text}
</span> </span>
<span className="px-2 py-0.5 text-xs font-medium bg-red-50 text-red-600 rounded-full">
YouTube
</span>
</div> </div>
<p className="text-sm text-gray-500 mb-3">
채널: {bot.channel_name || bot.channel_id} | {formatInterval(bot.check_interval)} 간격
</p>
{/* 메타 정보 */} {/* 통계 정보 */}
<div className="flex items-center gap-6 text-xs text-gray-400"> <div className="grid grid-cols-3 divide-x divide-gray-100 bg-gray-50/50">
<span className="flex items-center gap-1"> <div className="p-3 text-center">
<Clock size={12} /> <div className="text-lg font-bold text-gray-900">{bot.schedules_added}</div>
마지막 체크: {formatTime(bot.last_check_at)} <div className="text-xs text-gray-400">총 추가</div>
</span>
<span className="flex items-center gap-1">
<Calendar size={12} />
추가된 일정: {bot.schedules_added}개
</span>
</div> </div>
<div className="p-3 text-center">
<div className={`text-lg font-bold ${bot.last_added_count > 0 ? 'text-green-500' : 'text-gray-400'}`}>
+{bot.last_added_count || 0}
</div>
<div className="text-xs text-gray-400">마지막</div>
</div>
<div className="p-3 text-center">
<div className="text-lg font-bold text-gray-900">{formatInterval(bot.check_interval)}</div>
<div className="text-xs text-gray-400">업데이트 간격</div>
</div>
</div>
{/* 오류 메시지 */} {/* 오류 메시지 */}
{bot.status === 'error' && bot.error_message && ( {bot.status === 'error' && bot.error_message && (
<div className="mt-3 px-3 py-2 bg-red-50 text-red-600 text-xs rounded-lg"> <div className="px-4 py-2 bg-red-50 text-red-600 text-xs border-t border-red-100">
⚠️ {bot.error_message} ⚠️ {bot.error_message}
</div> </div>
)} )}
</div>
{/* 액션 버튼 */} {/* 액션 버튼 */}
<div className="flex items-center gap-2 flex-shrink-0"> <div className="p-4 border-t border-gray-100">
<div className="flex gap-2">
<button <button
onClick={() => syncAllVideos(bot.id)} onClick={() => syncAllVideos(bot.id)}
disabled={syncing === bot.id} disabled={syncing === bot.id}
className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg font-medium transition-colors hover:bg-blue-600 disabled:opacity-50" className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-blue-500 text-white rounded-lg font-medium transition-colors hover:bg-blue-600 disabled:opacity-50"
> >
{syncing === bot.id ? ( {syncing === bot.id ? (
<> <>
<RefreshCw size={16} className="animate-spin" /> <RefreshCw size={16} className="animate-spin" />
동기화 중... <span>동기화 중...</span>
</> </>
) : ( ) : (
<> <>
<Download size={16} /> <Download size={16} />
전체 동기화 <span>전체 동기화</span>
</> </>
)} )}
</button> </button>
<button <button
onClick={() => toggleBot(bot.id, bot.status, bot.name)} onClick={() => toggleBot(bot.id, bot.status, bot.name)}
className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-colors ${ className={`flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium transition-colors ${
bot.status === 'running' bot.status === 'running'
? 'bg-gray-100 text-gray-600 hover:bg-gray-200' ? 'bg-gray-100 text-gray-600 hover:bg-gray-200'
: 'bg-green-500 text-white hover:bg-green-600' : 'bg-green-500 text-white hover:bg-green-600'
@ -364,22 +369,24 @@ function AdminScheduleBots() {
{bot.status === 'running' ? ( {bot.status === 'running' ? (
<> <>
<Square size={16} /> <Square size={16} />
정지 <span>정지</span>
</> </>
) : ( ) : (
<> <>
<Play size={16} /> <Play size={16} />
시작 <span>시작</span>
</> </>
)} )}
</button> </button>
</div> </div>
</div> </div>
</motion.div> </motion.div>
); );
})} })}
</div> </div>
)} )}
</div> </div>
</main> </main>
</div> </div>

9
frontend/src/pages/pc/admin/AdminScheduleForm.jsx
View file

@ -1031,8 +1031,13 @@ function AdminScheduleForm() {
throw new Error(error.error || (isEditMode ? '일정 수정에 실패했습니다.' : '일정 생성에 실패했습니다.')); throw new Error(error.error || (isEditMode ? '일정 수정에 실패했습니다.' : '일정 생성에 실패했습니다.'));
} }
setToast({ type: 'success', message: isEditMode ? '일정이 수정되었습니다.' : '일정이 추가되었습니다.' }); // 성공 메시지를 sessionStorage에 저장하고 목록 페이지로 이동
setTimeout(() => navigate('/admin/schedule'), 1500); sessionStorage.setItem('scheduleToast', JSON.stringify({
type: 'success',
message: isEditMode ? '일정이 수정되었습니다.' : '일정이 추가되었습니다.'
}));
navigate('/admin/schedule');
} catch (error) { } catch (error) {
console.error('일정 저장 오류:', error); console.error('일정 저장 오류:', error);
setToast({ type: 'error', message: error.message || '일정 저장 중 오류가 발생했습니다.' }); setToast({ type: 'error', message: error.message || '일정 저장 중 오류가 발생했습니다.' });