From afdb6bbee2899fcd28fa066917b4e09fa529589b Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sat, 27 Dec 2025 16:31:40 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A1=9C=EA=B7=B8=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EA=B0=9C=EC=84=A0,=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EB=B0=80=EB=A6=BC=20=EB=B0=A9=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 체크박스를 커스텀 버튼으로 변경 (녹색 체크 아이콘)
- 삭제 버튼 항상 표시하여 선택 시 밀림 방지
- 컨트롤 영역 고정 높이 (h-8)
---
 frontend/src/pages/Admin.jsx | 54 +++++++++++++++++++-----------------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/frontend/src/pages/Admin.jsx b/frontend/src/pages/Admin.jsx
index 4af3f42..92cdd20 100644
--- a/frontend/src/pages/Admin.jsx
+++ b/frontend/src/pages/Admin.jsx
@@ -1587,31 +1587,32 @@ export default function Admin({ isMobile = false }) {
                   </div>
                 </div>
                 
-                {/* 일괄 삭제 컨트롤 */}
+                {/* 일괄 삭제 컨트롤 - 항상 표시하여 레이아웃 밀림 방지 */}
                 {logFiles.length > 0 && (
-                  <div className="flex items-center justify-between mb-2">
-                    <div className="flex items-center gap-2">
+                  <div className="flex items-center justify-between mb-2 h-8">
+                    <div className="flex items-center gap-3">
                       <button
                         onClick={toggleSelectAllLogs}
                         className="text-xs text-zinc-400 hover:text-white transition-colors"
                       >
                         {selectedLogFiles.size === logFiles.length ? '전체 해제' : '전체 선택'}
                       </button>
-                      {selectedLogFiles.size > 0 && (
-                        <span className="text-xs text-zinc-500">
-                          {selectedLogFiles.size}개 선택됨
-                        </span>
-                      )}
+                      <span className={`text-xs transition-opacity ${selectedLogFiles.size > 0 ? 'text-zinc-500' : 'text-transparent'}`}>
+                        {selectedLogFiles.size > 0 ? `${selectedLogFiles.size}개 선택됨` : '-'}
+                      </span>
                     </div>
-                    {selectedLogFiles.size > 0 && (
-                      <button
-                        onClick={deleteSelectedLogs}
-                        className="flex items-center gap-1 px-2 py-1 text-xs bg-red-600/20 text-red-400 hover:bg-red-600/30 rounded-lg transition-colors"
-                      >
-                        <Trash2 size={12} />
-                        선택 삭제 ({selectedLogFiles.size})
-                      </button>
-                    )}
+                    <button
+                      onClick={deleteSelectedLogs}
+                      disabled={selectedLogFiles.size === 0}
+                      className={`flex items-center gap-1 px-2 py-1 text-xs rounded-lg transition-all ${
+                        selectedLogFiles.size > 0 
+                          ? 'bg-red-600/20 text-red-400 hover:bg-red-600/30' 
+                          : 'bg-zinc-800/50 text-zinc-600 cursor-not-allowed'
+                      }`}
+                    >
+                      <Trash2 size={12} />
+                      선택 삭제 ({selectedLogFiles.size})
+                    </button>
                   </div>
                 )}
                 
@@ -1627,14 +1628,17 @@ export default function Admin({ isMobile = false }) {
                         }`}
                         onClick={() => viewLogContent(file)}
                       >
-                        <div className="flex items-center gap-2 flex-1 min-w-0">
-                          <input
-                            type="checkbox"
-                            checked={selectedLogFiles.has(file.id)}
-                            onChange={(e) => toggleLogFileSelect(file.id, e)}
-                            onClick={(e) => e.stopPropagation()}
-                            className="w-4 h-4 rounded border-zinc-600 bg-zinc-700 text-emerald-500 focus:ring-emerald-500 focus:ring-offset-0"
-                          />
+                        <div className="flex items-center gap-3 flex-1 min-w-0">
+                          <button
+                            onClick={(e) => toggleLogFileSelect(file.id, e)}
+                            className={`w-5 h-5 flex-shrink-0 rounded border-2 flex items-center justify-center transition-all ${
+                              selectedLogFiles.has(file.id) 
+                                ? 'bg-emerald-500 border-emerald-500' 
+                                : 'bg-transparent border-zinc-600 hover:border-zinc-400'
+                            }`}
+                          >
+                            {selectedLogFiles.has(file.id) && <Check size={12} className="text-white" />}
+                          </button>
                           <div className="flex-1 min-w-0">
                             <p className="text-white text-sm truncate group-hover:text-mc-green transition-colors">{file.fileName}</p>
                             <p className="text-xs text-zinc-500">