feat: 봇 테이블 액션 버튼 완성

- 삭제 버튼 추가 (YouTube만)
- 버튼 순서: 전체 동기화 → 시작/정지 → 수정 → 삭제
- 모든 버튼에 Tooltip 적용

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-02-06 18:16:12 +09:00
parent 0c9dd44c2b
commit de3cb91191
2 changed files with 49 additions and 29 deletions

View file

@ -3,7 +3,8 @@
*/
import { memo } from 'react';
import { motion } from 'framer-motion';
import { Play, Square, RefreshCw, RotateCcw, Pencil } from 'lucide-react';
import { Play, Square, RefreshCw, RotateCcw, Pencil, Trash2 } from 'lucide-react';
import { Tooltip } from '@/components/common';
// X
export const XIcon = ({ size = 20, fill = 'currentColor' }) => (
@ -206,6 +207,7 @@ export const BotTableRow = memo(function BotTableRow({
onSync,
onToggle,
onEdit,
onDelete,
onAnimationComplete,
formatTime,
formatInterval,
@ -241,38 +243,55 @@ export const BotTableRow = memo(function BotTableRow({
</td>
<td className="px-4 py-3">
<div className="flex items-center gap-1">
<button
onClick={() => onSync(bot.id)}
disabled={syncing === bot.id}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors disabled:opacity-50"
title="전체 동기화"
>
{syncing === bot.id ? (
<RefreshCw size={16} className="animate-spin" />
) : (
<RotateCcw size={16} />
)}
</button>
{bot.type === 'youtube' && onEdit && (
{/* 전체 동기화 */}
<Tooltip text="전체 동기화">
<button
onClick={() => onEdit(bot)}
className="p-1.5 text-gray-400 hover:text-amber-600 hover:bg-amber-50 rounded transition-colors"
title="수정"
onClick={() => onSync(bot.id)}
disabled={syncing === bot.id}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors disabled:opacity-50"
>
<Pencil size={16} />
{syncing === bot.id ? (
<RefreshCw size={16} className="animate-spin" />
) : (
<RotateCcw size={16} />
)}
</button>
</Tooltip>
{/* 시작/정지 */}
<Tooltip text={bot.status === 'running' ? '정지' : '시작'}>
<button
onClick={() => onToggle(bot.id, bot.status, bot.name)}
className={`p-1.5 rounded transition-colors ${
bot.status === 'running'
? 'text-gray-400 hover:text-orange-600 hover:bg-orange-50'
: 'text-gray-400 hover:text-green-600 hover:bg-green-50'
}`}
>
{bot.status === 'running' ? <Square size={16} /> : <Play size={16} />}
</button>
</Tooltip>
{/* 수정 (YouTube만) */}
{bot.type === 'youtube' && onEdit && (
<Tooltip text="수정">
<button
onClick={() => onEdit(bot)}
className="p-1.5 text-gray-400 hover:text-amber-600 hover:bg-amber-50 rounded transition-colors"
>
<Pencil size={16} />
</button>
</Tooltip>
)}
{/* 삭제 (YouTube만) */}
{bot.type === 'youtube' && onDelete && (
<Tooltip text="삭제">
<button
onClick={() => onDelete(bot)}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
>
<Trash2 size={16} />
</button>
</Tooltip>
)}
<button
onClick={() => onToggle(bot.id, bot.status, bot.name)}
className={`p-1.5 rounded transition-colors ${
bot.status === 'running'
? 'text-gray-400 hover:text-red-600 hover:bg-red-50'
: 'text-gray-400 hover:text-green-600 hover:bg-green-50'
}`}
title={bot.status === 'running' ? '정지' : '시작'}
>
{bot.status === 'running' ? <Square size={16} /> : <Play size={16} />}
</button>
</div>
</td>
</motion.tr>

View file

@ -398,6 +398,7 @@ function ScheduleBots() {
onSync={handleSyncAllVideos}
onToggle={toggleBot}
onEdit={(bot) => {/* TODO: 봇 수정 모달 */}}
onDelete={(bot) => {/* TODO: 봇 삭제 확인 */}}
onAnimationComplete={() =>
isInitialLoad && index === sectionBots.length - 1 && setIsInitialLoad(false)
}