feat: 봇 테이블 액션 버튼 완성
- 삭제 버튼 추가 (YouTube만) - 버튼 순서: 전체 동기화 → 시작/정지 → 수정 → 삭제 - 모든 버튼에 Tooltip 적용 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
0c9dd44c2b
commit
de3cb91191
2 changed files with 49 additions and 29 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -398,6 +398,7 @@ function ScheduleBots() {
|
|||
onSync={handleSyncAllVideos}
|
||||
onToggle={toggleBot}
|
||||
onEdit={(bot) => {/* TODO: 봇 수정 모달 */}}
|
||||
onDelete={(bot) => {/* TODO: 봇 삭제 확인 */}}
|
||||
onAnimationComplete={() =>
|
||||
isInitialLoad && index === sectionBots.length - 1 && setIsInitialLoad(false)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue