caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: BotCard 구분 개선

Browse source 
- 테두리 및 그림자 강화
- 통계 영역 배경색 추가로 구분감 향상

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-02-06 18:01:49 +09:00
parent b3357e0663
commit dbfee503d5
1 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/components/pc/admin/bot/BotCard.jsx
View file

@ -99,7 +99,7 @@ const BotCard = memo(function BotCard({
animate={{ opacity: 1, y: 0 }}
transition={isInitialLoad ? { delay: index * 0.05, duration: 0.2 } : { duration: 0.15 }}
onAnimationComplete={onAnimationComplete}
className="group relative bg-white rounded-xl border border-gray-100 overflow-hidden hover:border-gray-200 hover:shadow-sm transition-all"
className="group relative bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden hover:shadow-md transition-all"
>
{/* 상단: 이름 + 상태 */}
<div className="p-4">
@ -121,22 +121,22 @@ const BotCard = memo(function BotCard({
</div>
{/* 통계 */}
<div className="flex items-center gap-4 text-sm">
<div className="flex items-center gap-1.5">
<span className="text-gray-400">추가</span>
<span className="font-semibold text-gray-900">{bot.schedules_added || 0}</span>
<div className="flex items-center gap-3 mt-3 p-2.5 bg-gray-50 rounded-lg text-sm">
<div className="flex-1 text-center">
<div className="font-semibold text-gray-900">{bot.schedules_added || 0}</div>
<div className="text-xs text-gray-400">총 추가</div>
</div>
<div className="w-px h-3 bg-gray-200" />
<div className="flex items-center gap-1.5">
<span className="text-gray-400">최근</span>
<span className={`font-semibold ${bot.last_added_count > 0 ? 'text-green-600' : 'text-gray-400'}`}>
<div className="w-px h-8 bg-gray-200" />
<div className="flex-1 text-center">
<div className={`font-semibold ${bot.last_added_count > 0 ? 'text-green-600' : 'text-gray-400'}`}>
+{bot.last_added_count || 0}
</span>
</div>
<div className="text-xs text-gray-400">최근</div>
</div>
<div className="w-px h-3 bg-gray-200" />
<div className="flex items-center gap-1.5">
<span className="text-gray-400">간격</span>
<span className="font-semibold text-gray-900">{formatInterval(bot.check_interval)}</span>
<div className="w-px h-8 bg-gray-200" />
<div className="flex-1 text-center">
<div className="font-semibold text-gray-900">{formatInterval(bot.check_interval)}</div>
<div className="text-xs text-gray-400">간격</div>
</div>
</div>
</div>