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 { memo } from 'react';
import { motion } from 'framer-motion'; 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 // X
export const XIcon = ({ size = 20, fill = 'currentColor' }) => ( export const XIcon = ({ size = 20, fill = 'currentColor' }) => (
@ -206,6 +207,7 @@ export const BotTableRow = memo(function BotTableRow({
onSync, onSync,
onToggle, onToggle,
onEdit, onEdit,
onDelete,
onAnimationComplete, onAnimationComplete,
formatTime, formatTime,
formatInterval, formatInterval,
@ -241,38 +243,55 @@ export const BotTableRow = memo(function BotTableRow({
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<button {/* 전체 동기화 */}
onClick={() => onSync(bot.id)} <Tooltip text="전체 동기화">
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 && (
<button <button
onClick={() => onEdit(bot)} onClick={() => onSync(bot.id)}
className="p-1.5 text-gray-400 hover:text-amber-600 hover:bg-amber-50 rounded transition-colors" disabled={syncing === bot.id}
title="수정" 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> </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> </div>
</td> </td>
</motion.tr> </motion.tr>

View file

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