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