From de3cb91191a78fce8a5de4110eb436bd7a042d32 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Fri, 6 Feb 2026 18:16:12 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B4=87=20=ED=85=8C=EC=9D=B4=EB=B8=94?=
 =?UTF-8?q?=20=EC=95=A1=EC=85=98=20=EB=B2=84=ED=8A=BC=20=EC=99=84=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/components/pc/admin/bot/BotCard.jsx   | 77 ++++++++++++-------
 .../pages/pc/admin/schedules/ScheduleBots.jsx |  1 +
 2 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/pc/admin/bot/BotCard.jsx b/frontend/src/components/pc/admin/bot/BotCard.jsx
index f7ad509..e5f62fe 100644
--- a/frontend/src/components/pc/admin/bot/BotCard.jsx
+++ b/frontend/src/components/pc/admin/bot/BotCard.jsx
@@ -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>
diff --git a/frontend/src/pages/pc/admin/schedules/ScheduleBots.jsx b/frontend/src/pages/pc/admin/schedules/ScheduleBots.jsx
index 66be3cb..975fbf7 100644
--- a/frontend/src/pages/pc/admin/schedules/ScheduleBots.jsx
+++ b/frontend/src/pages/pc/admin/schedules/ScheduleBots.jsx
@@ -398,6 +398,7 @@ function ScheduleBots() {
                           onSync={handleSyncAllVideos}
                           onToggle={toggleBot}
                           onEdit={(bot) => {/* TODO: 봇 수정 모달 */}}
+                          onDelete={(bot) => {/* TODO: 봇 삭제 확인 */}}
                           onAnimationComplete={() =>
                             isInitialLoad && index === sectionBots.length - 1 && setIsInitialLoad(false)
                           }