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