caadiq/minecraft-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: 로그 파일 체크박스 스타일 개선, 레이아웃 밀림 방지

Browse source 
- 체크박스를 커스텀 버튼으로 변경 (녹색 체크 아이콘)
- 삭제 버튼 항상 표시하여 선택 시 밀림 방지
- 컨트롤 영역 고정 높이 (h-8)
This commit is contained in:
caadiq 2025-12-27 16:31:40 +09:00
parent e13f608d88
commit afdb6bbee2
1 changed files with 29 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
frontend/src/pages/Admin.jsx
View file

@ -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">