64 lines
2.8 KiB
TypeScript
64 lines
2.8 KiB
TypeScript
import { motion } from 'motion/react';
|
|
import { CHANNELS } from '../constants/performance';
|
|
|
|
function MetricCell({ label, value, delta }: { label: string; value: string; delta: string }) {
|
|
const isPositive = delta.startsWith('+');
|
|
const isNew = delta === 'NEW' || delta === '-';
|
|
return (
|
|
<div className="text-center">
|
|
<p className="text-xs text-slate-400 mb-1">{label}</p>
|
|
<p className="text-sm font-semibold text-[#0A1128]">{value}</p>
|
|
<p className={`text-xs font-medium ${
|
|
isNew ? 'text-slate-400' : isPositive ? 'text-[#4A3A7C]' : 'text-[#7C3A4B]'
|
|
}`}>{delta}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ChannelPerformanceSection() {
|
|
return (
|
|
<section className="py-10 px-6">
|
|
<div className="max-w-6xl mx-auto">
|
|
<h3 className="font-serif font-bold text-xl text-[#0A1128] mb-4">채널별 성과</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{CHANNELS.map((ch, i) => {
|
|
const Icon = ch.icon;
|
|
return (
|
|
<motion.div
|
|
key={ch.id}
|
|
className="bg-white rounded-2xl border border-slate-100 shadow-[3px_4px_12px_rgba(0,0,0,0.06)] p-5"
|
|
initial={{ opacity: 0, y: 15 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.3, delay: i * 0.08 }}
|
|
>
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: ch.bgColor }}>
|
|
<Icon size={20} style={{ color: ch.brandColor }} />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="text-sm font-semibold text-[#0A1128]">{ch.name}</h4>
|
|
<p className="text-xs text-slate-400">{ch.posts}개 콘텐츠</p>
|
|
</div>
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold ${
|
|
ch.score >= 70 ? 'bg-[#F3F0FF] text-[#4A3A7C]' :
|
|
ch.score >= 40 ? 'bg-[#FFF6ED] text-[#7C5C3A]' :
|
|
ch.score > 0 ? 'bg-[#FFF0F0] text-[#7C3A4B]' :
|
|
'bg-slate-50 text-slate-400'
|
|
}`}>
|
|
{ch.score || '-'}
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<MetricCell label="팔로워" value={ch.followers} delta={ch.followersDelta} />
|
|
<MetricCell label="조회수" value={ch.views} delta={ch.viewsDelta} />
|
|
<MetricCell label="참여율" value={ch.engagement} delta={ch.engagementDelta} />
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|