gahusb
95d8a5e52c
- bakery: 이모지 → SVG 빵/셰프 일러스트, 고객 리뷰 섹션, 시즌 스페셜 섹션, 재료 태그 추가 - portfolio: 수상내역 마퀴 배너, 서비스 섹션, 프로젝트 카테고리 필터+호버 오버레이, 클라이언트 후기 추가 - dashboard: SVG 라인 차트, KPI 스파크라인, 알림 패널, 도넛 차트, 사용자 아바타 테이블 개선 - game: 챔피언 선택 섹션, 시즌 패스 진행 바, 최근 매치 히스토리, 파티클 배경, 티어 SVG 배지 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
437 lines
27 KiB
TypeScript
437 lines
27 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useState } from 'react';
|
|
|
|
const kpis = [
|
|
{ label: '월 활성 사용자', value: '124,832', change: '+12.4%', up: true, color: '#3b82f6', sparkline: [40, 55, 45, 70, 60, 85, 100] },
|
|
{ label: '월 매출', value: '₩284M', change: '+8.7%', up: true, color: '#10b981', sparkline: [50, 60, 55, 75, 80, 78, 100] },
|
|
{ label: '전환율', value: '3.62%', change: '-0.3%', up: false, color: '#f59e0b', sparkline: [90, 80, 85, 75, 70, 72, 68] },
|
|
{ label: '고객 만족도', value: '4.8', change: '+0.2', up: true, color: '#8b5cf6', sparkline: [70, 72, 74, 76, 78, 80, 85] },
|
|
];
|
|
|
|
const lineData = [
|
|
{ month: 'Jan', revenue: 65, users: 48 },
|
|
{ month: 'Feb', revenue: 78, users: 55 },
|
|
{ month: 'Mar', revenue: 72, users: 52 },
|
|
{ month: 'Apr', revenue: 89, users: 64 },
|
|
{ month: 'May', revenue: 95, users: 71 },
|
|
{ month: 'Jun', revenue: 82, users: 66 },
|
|
{ month: 'Jul', revenue: 110, users: 88 },
|
|
{ month: 'Aug', revenue: 128, users: 100 },
|
|
];
|
|
|
|
const activities = [
|
|
{ user: 'lee@company.com', action: '프리미엄 플랜 구독', time: '2분 전', status: 'success', avatar: 'L' },
|
|
{ user: 'park@startup.io', action: 'API 한도 초과 경고', time: '14분 전', status: 'warning', avatar: 'P' },
|
|
{ user: 'kim@corp.kr', action: '팀 멤버 5명 초대', time: '31분 전', status: 'info', avatar: 'K' },
|
|
{ user: 'choi@brand.com', action: '결제 실패 (카드 만료)', time: '1시간 전', status: 'error', avatar: 'C' },
|
|
{ user: 'jung@agency.co', action: '새 워크스페이스 생성', time: '2시간 전', status: 'success', avatar: 'J' },
|
|
];
|
|
|
|
const menus = [
|
|
{ id: 'overview', label: 'Overview', dot: '#3b82f6' },
|
|
{ id: 'analytics', label: 'Analytics', dot: '#10b981' },
|
|
{ id: 'users', label: 'Users', dot: null },
|
|
{ id: 'revenue', label: 'Revenue', dot: null },
|
|
{ id: 'reports', label: 'Reports', dot: null },
|
|
{ id: 'settings', label: 'Settings', dot: null },
|
|
];
|
|
|
|
const channels = [
|
|
{ label: 'Organic Search', val: 78, color: '#3b82f6' },
|
|
{ label: 'Direct', val: 55, color: '#10b981' },
|
|
{ label: 'Social Media', val: 42, color: '#a855f7' },
|
|
{ label: 'Email', val: 34, color: '#f59e0b' },
|
|
{ label: 'Referral', val: 20, color: '#ec4899' },
|
|
];
|
|
|
|
const alerts = [
|
|
{ type: 'error', msg: 'API 응답 지연 (p99 > 2s)', time: '5분 전' },
|
|
{ type: 'warning', msg: '스토리지 사용량 85% 초과', time: '32분 전' },
|
|
{ type: 'success', msg: '일일 백업 완료', time: '1시간 전' },
|
|
];
|
|
|
|
const statusColor: Record<string, string> = { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' };
|
|
|
|
function SparkLine({ data, color }: { data: number[]; color: string }) {
|
|
const max = Math.max(...data);
|
|
const min = Math.min(...data);
|
|
const h = 28;
|
|
const w = 72;
|
|
const step = w / (data.length - 1);
|
|
const pts = data.map((v, i) => {
|
|
const x = i * step;
|
|
const y = h - ((v - min) / (max - min || 1)) * h;
|
|
return `${x},${y}`;
|
|
}).join(' ');
|
|
return (
|
|
<svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
|
|
<polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" opacity="0.7" />
|
|
<polyline points={`${pts} ${w},${h} 0,${h}`} fill={color} fillOpacity="0.08" stroke="none" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function LineChart({ data }: { data: typeof lineData }) {
|
|
const chartH = 130;
|
|
const chartW = 440;
|
|
const padL = 32;
|
|
const padB = 24;
|
|
const innerW = chartW - padL;
|
|
const innerH = chartH - padB;
|
|
const maxRev = Math.max(...data.map(d => d.revenue));
|
|
|
|
const revPts = data.map((d, i) => {
|
|
const x = padL + (i / (data.length - 1)) * innerW;
|
|
const y = (1 - d.revenue / maxRev) * innerH;
|
|
return `${x},${y}`;
|
|
}).join(' ');
|
|
|
|
const usrPts = data.map((d, i) => {
|
|
const x = padL + (i / (data.length - 1)) * innerW;
|
|
const y = (1 - d.users / maxRev) * innerH;
|
|
return `${x},${y}`;
|
|
}).join(' ');
|
|
|
|
return (
|
|
<svg width="100%" viewBox={`0 0 ${chartW} ${chartH}`} preserveAspectRatio="xMidYMid meet">
|
|
{/* Grid lines */}
|
|
{[0, 0.25, 0.5, 0.75, 1].map((t, i) => (
|
|
<g key={i}>
|
|
<line x1={padL} y1={t * innerH} x2={chartW} y2={t * innerH} stroke="rgba(255,255,255,0.04)" strokeWidth="1" />
|
|
<text x={padL - 4} y={t * innerH + 4} textAnchor="end" fontSize="8" fill="#1e3a5f">
|
|
{Math.round(maxRev * (1 - t))}
|
|
</text>
|
|
</g>
|
|
))}
|
|
{/* Area fills */}
|
|
<defs>
|
|
<linearGradient id="grad-rev" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="#3b82f6" stopOpacity="0.25" />
|
|
<stop offset="100%" stopColor="#3b82f6" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient id="grad-usr" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="#10b981" stopOpacity="0.2" />
|
|
<stop offset="100%" stopColor="#10b981" stopOpacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
<polyline points={`${revPts} ${chartW},${innerH} ${padL},${innerH}`} fill="url(#grad-rev)" stroke="none" />
|
|
<polyline points={`${usrPts} ${chartW},${innerH} ${padL},${innerH}`} fill="url(#grad-usr)" stroke="none" />
|
|
{/* Lines */}
|
|
<polyline points={revPts} fill="none" stroke="#3b82f6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
<polyline points={usrPts} fill="none" stroke="#10b981" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 2" />
|
|
{/* Dots at last point */}
|
|
{[{ pts: revPts, color: '#3b82f6' }, { pts: usrPts, color: '#10b981' }].map(({ pts: p, color }) => {
|
|
const last = p.split(' ').pop()!;
|
|
const [lx, ly] = last.split(',').map(Number);
|
|
return <circle key={color} cx={lx} cy={ly} r="3.5" fill={color} stroke="#0f172a" strokeWidth="2" />;
|
|
})}
|
|
{/* X axis labels */}
|
|
{data.map((d, i) => (
|
|
<text key={i} x={padL + (i / (data.length - 1)) * innerW} y={innerH + 16} textAnchor="middle" fontSize="8" fill="#334155">{d.month}</text>
|
|
))}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export default function DashboardSample() {
|
|
const [activeMenu, setActiveMenu] = useState('overview');
|
|
const [alertsVisible, setAlertsVisible] = useState(true);
|
|
|
|
return (
|
|
<div style={{ background: '#0a0f1e', minHeight: '100vh', color: 'white' }}>
|
|
<style>{`
|
|
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
|
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
|
.dash-menu-item:hover { background: rgba(255,255,255,0.05) !important; }
|
|
.dash-menu-item { transition: background 0.15s; }
|
|
.dash-kpi:hover { border-color: rgba(255,255,255,0.1) !important; transform: translateY(-2px); }
|
|
.dash-kpi { transition: border-color 0.2s, transform 0.2s; cursor: default; }
|
|
.dash-row:hover { background: rgba(255,255,255,0.03) !important; }
|
|
.dash-row { transition: background 0.15s; }
|
|
.quick-action:hover { background: rgba(59,130,246,0.12) !important; border-color: rgba(59,130,246,0.3) !important; }
|
|
.quick-action { transition: background 0.2s, border-color 0.2s; cursor: pointer; }
|
|
`}</style>
|
|
|
|
{/* Back Banner */}
|
|
<div style={{ background: 'linear-gradient(135deg, #1e1b4b, #312e81)', padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12, position: 'relative', zIndex: 200 }}>
|
|
<Link href="/services/website" style={{ color: '#a5b4fc', fontSize: 13, textDecoration: 'none', fontFamily: 'DM Sans, sans-serif' }}>
|
|
← 홈페이지 제작 서비스로 돌아가기
|
|
</Link>
|
|
<span style={{ color: '#4c1d95' }}>|</span>
|
|
<span style={{ color: '#38bdf8', fontSize: 12, fontFamily: 'DM Mono, monospace', fontWeight: 500 }}>
|
|
SAMPLE · 관리자 대시보드
|
|
</span>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', height: 'calc(100vh - 40px)' }}>
|
|
{/* Sidebar */}
|
|
<aside style={{ width: 220, background: '#060b18', borderRight: '1px solid rgba(255,255,255,0.05)', display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
|
|
{/* Logo */}
|
|
<div style={{ padding: '18px 18px 14px', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
|
<div style={{ width: 34, height: 34, borderRadius: 9, background: 'linear-gradient(135deg, #3b82f6, #06b6d4)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
{/* DF logo SVG */}
|
|
<svg width="16" height="14" viewBox="0 0 16 14" fill="none">
|
|
<rect x="0" y="0" width="7" height="6" rx="1" fill="white" opacity="0.9" />
|
|
<rect x="0" y="8" width="7" height="6" rx="1" fill="white" opacity="0.6" />
|
|
<rect x="9" y="0" width="7" height="14" rx="1" fill="white" opacity="0.4" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>DataFlow</div>
|
|
<div style={{ fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace' }}>v2.4.1 · PRO</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<div style={{ padding: '12px 10px 8px' }}>
|
|
<div style={{ fontSize: 9, color: '#1e3a5f', fontFamily: 'DM Mono, monospace', letterSpacing: '0.15em', padding: '4px 10px 6px', textTransform: 'uppercase' }}>QUICK ACTIONS</div>
|
|
<div style={{ display: 'flex', gap: 6, padding: '0 2px' }}>
|
|
{[
|
|
{ label: 'Export', color: '#3b82f6' },
|
|
{ label: 'Invite', color: '#10b981' },
|
|
{ label: 'Alert', color: '#f59e0b' },
|
|
].map(a => (
|
|
<button key={a.label} className="quick-action" style={{ flex: 1, padding: '6px 4px', borderRadius: 6, border: '1px solid rgba(255,255,255,0.05)', background: 'transparent', color: a.color, fontSize: 10, fontFamily: 'DM Mono, monospace', fontWeight: 500 }}>
|
|
{a.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nav */}
|
|
<nav style={{ flex: 1, padding: '4px 10px', overflowY: 'auto' }}>
|
|
<div style={{ fontSize: 9, color: '#1e3a5f', fontFamily: 'DM Mono, monospace', letterSpacing: '0.15em', padding: '8px 10px 4px', textTransform: 'uppercase' }}>MAIN</div>
|
|
{menus.map((m) => (
|
|
<button key={m.id} className="dash-menu-item" onClick={() => setActiveMenu(m.id)} style={{
|
|
width: '100%', textAlign: 'left', padding: '9px 12px', borderRadius: 8, border: 'none', cursor: 'pointer',
|
|
display: 'flex', alignItems: 'center', gap: 10, marginBottom: 2,
|
|
background: activeMenu === m.id ? 'rgba(59,130,246,0.15)' : 'transparent',
|
|
color: activeMenu === m.id ? '#60a5fa' : '#475569',
|
|
}}>
|
|
{/* Menu icon SVG */}
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
|
|
<rect x="1" y="1" width="5" height="5" rx="1.5" fill={activeMenu === m.id ? '#60a5fa' : '#1e3a5f'} />
|
|
<rect x="8" y="1" width="5" height="5" rx="1.5" fill={activeMenu === m.id ? '#60a5fa' : '#1e3a5f'} opacity="0.6" />
|
|
<rect x="1" y="8" width="5" height="5" rx="1.5" fill={activeMenu === m.id ? '#60a5fa' : '#1e3a5f'} opacity="0.6" />
|
|
<rect x="8" y="8" width="5" height="5" rx="1.5" fill={activeMenu === m.id ? '#60a5fa' : '#1e3a5f'} opacity="0.4" />
|
|
</svg>
|
|
<span style={{ fontSize: 13, fontWeight: activeMenu === m.id ? 600 : 400, fontFamily: 'DM Sans, sans-serif', flex: 1 }}>
|
|
{m.label}
|
|
</span>
|
|
{m.dot && <div style={{ width: 4, height: 4, borderRadius: '50%', background: m.dot, animation: 'pulse-dot 2s infinite' }} />}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
{/* User */}
|
|
<div style={{ padding: '12px 14px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
|
<div style={{ width: 32, height: 32, borderRadius: '50%', background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700 }}>A</div>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ fontSize: 12, fontWeight: 600, color: '#e2e8f0', fontFamily: 'DM Sans, sans-serif', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Admin</div>
|
|
<div style={{ fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace' }}>Super Admin</div>
|
|
</div>
|
|
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '#10b981', flexShrink: 0 }} />
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main */}
|
|
<main style={{ flex: 1, overflowY: 'auto', animation: 'fadeIn 0.4s ease' }}>
|
|
{/* Top bar */}
|
|
<div style={{ padding: '14px 24px', borderBottom: '1px solid rgba(255,255,255,0.05)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#080d1a', position: 'sticky', top: 0, zIndex: 10 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
|
<div style={{ position: 'relative' }}>
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)' }}>
|
|
<circle cx="7" cy="7" r="5" stroke="#334155" strokeWidth="1.5" />
|
|
<line x1="11" y1="11" x2="14" y2="14" stroke="#334155" strokeWidth="1.5" strokeLinecap="round" />
|
|
</svg>
|
|
<input placeholder="검색..." style={{ background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)', color: '#94a3b8', padding: '7px 12px 7px 32px', borderRadius: 8, fontSize: 12, fontFamily: 'DM Sans, sans-serif', outline: 'none', width: 180 }} />
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
|
|
<select style={{ background: '#0f172a', border: '1px solid rgba(255,255,255,0.07)', color: '#94a3b8', padding: '7px 12px', borderRadius: 8, fontSize: 12, fontFamily: 'DM Sans, sans-serif', cursor: 'pointer' }}>
|
|
<option>최근 30일</option>
|
|
</select>
|
|
{/* Alert bell */}
|
|
<button onClick={() => setAlertsVisible(!alertsVisible)} style={{ position: 'relative', background: '#0f172a', border: '1px solid rgba(255,255,255,0.07)', padding: '7px 10px', borderRadius: 8, cursor: 'pointer', display: 'flex' }}>
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
|
<path d="M7 1.5C4.5 1.5 3 3.2 3 5.5v3L1.5 10.5h11L11 8.5v-3C11 3.2 9.5 1.5 7 1.5z" stroke="#94a3b8" strokeWidth="1.2" fill="none" />
|
|
<path d="M5.5 10.5a1.5 1.5 0 003 0" stroke="#94a3b8" strokeWidth="1.2" />
|
|
</svg>
|
|
<div style={{ position: 'absolute', top: 5, right: 5, width: 7, height: 7, borderRadius: '50%', background: '#ef4444', border: '1.5px solid #080d1a' }} />
|
|
</button>
|
|
<button style={{ background: '#3b82f6', border: 'none', color: 'white', padding: '7px 16px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'DM Sans, sans-serif' }}>
|
|
리포트 내보내기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ padding: '20px 24px' }}>
|
|
{/* Alerts panel */}
|
|
{alertsVisible && (
|
|
<div style={{ marginBottom: 20, padding: '14px 18px', borderRadius: 12, background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
|
|
<div style={{ fontSize: 13, fontWeight: 600, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>시스템 알림</div>
|
|
<button onClick={() => setAlertsVisible(false)} style={{ background: 'none', border: 'none', color: '#334155', fontSize: 11, cursor: 'pointer', fontFamily: 'DM Sans, sans-serif' }}>닫기</button>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 12 }}>
|
|
{alerts.map((a, i) => (
|
|
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderRadius: 8, background: statusColor[a.type] + '10', border: `1px solid ${statusColor[a.type]}25`, flex: 1 }}>
|
|
<div style={{ width: 6, height: 6, borderRadius: '50%', background: statusColor[a.type], flexShrink: 0 }} />
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ fontSize: 12, color: '#e2e8f0', fontFamily: 'DM Sans, sans-serif', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.msg}</div>
|
|
<div style={{ fontSize: 10, color: '#334155', fontFamily: 'DM Mono, monospace' }}>{a.time}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Page header */}
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
|
<div>
|
|
<h1 style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 22, fontWeight: 700, color: 'white', marginBottom: 2 }}>Overview</h1>
|
|
<div style={{ fontSize: 12, color: '#334155', fontFamily: 'DM Mono, monospace' }}>2024.08.14 · 오전 10:32 업데이트</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* KPI Cards */}
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 18 }}>
|
|
{kpis.map((kpi) => (
|
|
<div key={kpi.label} className="dash-kpi" style={{ padding: '16px 18px', borderRadius: 14, background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
|
|
<div style={{ fontSize: 11, color: '#475569', fontFamily: 'DM Sans, sans-serif', fontWeight: 500, maxWidth: 80 }}>{kpi.label}</div>
|
|
<SparkLine data={kpi.sparkline} color={kpi.color} />
|
|
</div>
|
|
<div style={{ fontSize: 24, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif', marginBottom: 6 }}>{kpi.value}</div>
|
|
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 3, background: kpi.up ? 'rgba(16,185,129,0.12)' : 'rgba(239,68,68,0.12)', borderRadius: 6, padding: '2px 7px', fontSize: 11, fontWeight: 700, color: kpi.up ? '#10b981' : '#ef4444', fontFamily: 'DM Mono, monospace' }}>
|
|
{kpi.up ? '↑' : '↓'} {kpi.change}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Charts row */}
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 14, marginBottom: 18 }}>
|
|
{/* Line Chart */}
|
|
<div style={{ padding: '20px 22px', borderRadius: 14, background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
|
|
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>월별 매출 & 사용자 추이</div>
|
|
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
|
|
<div style={{ width: 20, height: 2, background: '#3b82f6', borderRadius: 2 }} />
|
|
<span style={{ fontSize: 10, color: '#475569', fontFamily: 'DM Mono, monospace' }}>매출</span>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
|
|
<div style={{ width: 20, height: 2, background: '#10b981', borderRadius: 2, backgroundImage: 'repeating-linear-gradient(90deg, #10b981 0, #10b981 4px, transparent 4px, transparent 6px)' }} />
|
|
<span style={{ fontSize: 10, color: '#475569', fontFamily: 'DM Mono, monospace' }}>사용자</span>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 6 }}>
|
|
{['1M', '3M', '6M', '1Y'].map((p) => (
|
|
<button key={p} style={{ background: p === '6M' ? '#1e3a5f' : 'transparent', border: 'none', color: p === '6M' ? '#60a5fa' : '#334155', padding: '3px 7px', borderRadius: 5, fontSize: 10, cursor: 'pointer', fontFamily: 'DM Mono, monospace' }}>{p}</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<LineChart data={lineData} />
|
|
</div>
|
|
|
|
{/* Channel Progress */}
|
|
<div style={{ padding: '20px 22px', borderRadius: 14, background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)' }}>
|
|
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif', marginBottom: 18 }}>채널별 전환율</div>
|
|
{channels.map((p) => (
|
|
<div key={p.label} style={{ marginBottom: 13 }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
|
|
<span style={{ fontSize: 12, color: '#94a3b8', fontFamily: 'DM Sans, sans-serif' }}>{p.label}</span>
|
|
<span style={{ fontSize: 11, color: p.color, fontFamily: 'DM Mono, monospace', fontWeight: 500 }}>{p.val}%</span>
|
|
</div>
|
|
<div style={{ height: 4, background: '#1e293b', borderRadius: 2, overflow: 'hidden', position: 'relative' }}>
|
|
<div style={{ height: '100%', borderRadius: 2, background: `linear-gradient(90deg, ${p.color}90, ${p.color})`, width: `${p.val}%` }} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
{/* Donut summary */}
|
|
<div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 14 }}>
|
|
<svg width="52" height="52" viewBox="0 0 52 52">
|
|
{(() => {
|
|
const total = channels.reduce((s, c) => s + c.val, 0);
|
|
let offset = 0;
|
|
const r = 20;
|
|
const circ = 2 * Math.PI * r;
|
|
return channels.map((c) => {
|
|
const dash = (c.val / total) * circ;
|
|
const el = (
|
|
<circle key={c.label} cx="26" cy="26" r={r} fill="none" stroke={c.color} strokeWidth="8"
|
|
strokeDasharray={`${dash} ${circ - dash}`}
|
|
strokeDashoffset={-offset}
|
|
transform="rotate(-90 26 26)"
|
|
style={{ transition: 'stroke-dasharray 0.5s' }} />
|
|
);
|
|
offset += dash;
|
|
return el;
|
|
});
|
|
})()}
|
|
<circle cx="26" cy="26" r="12" fill="#0f172a" />
|
|
<text x="26" y="29" textAnchor="middle" fontSize="8" fill="#60a5fa" fontWeight="700">ALL</text>
|
|
</svg>
|
|
<div style={{ fontSize: 11, color: '#475569', fontFamily: 'DM Sans, sans-serif', lineHeight: 1.6 }}>
|
|
Organic 채널이<br />
|
|
<span style={{ color: '#3b82f6', fontWeight: 700 }}>최고 전환율 78%</span><br />
|
|
달성 중
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Activity Table */}
|
|
<div style={{ borderRadius: 14, background: '#0f172a', border: '1px solid rgba(255,255,255,0.06)', overflow: 'hidden' }}>
|
|
<div style={{ padding: '14px 18px', borderBottom: '1px solid rgba(255,255,255,0.05)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: 'DM Sans, sans-serif' }}>최근 활동</div>
|
|
<button style={{ background: 'none', border: '1px solid rgba(255,255,255,0.08)', color: '#475569', padding: '5px 12px', borderRadius: 6, fontSize: 11, cursor: 'pointer', fontFamily: 'DM Sans, sans-serif' }}>전체 보기</button>
|
|
</div>
|
|
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
|
<thead>
|
|
<tr style={{ borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
|
|
{['사용자', '활동', '시간', '상태'].map((h) => (
|
|
<th key={h} style={{ padding: '9px 18px', textAlign: 'left', fontSize: 9, color: '#334155', fontFamily: 'DM Mono, monospace', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500 }}>{h}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{activities.map((a, i) => (
|
|
<tr key={i} className="dash-row" style={{ borderBottom: '1px solid rgba(255,255,255,0.025)' }}>
|
|
<td style={{ padding: '11px 18px' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<div style={{ width: 26, height: 26, borderRadius: '50%', background: `hsl(${i * 60}, 60%, 40%)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700, flexShrink: 0 }}>{a.avatar}</div>
|
|
<span style={{ fontFamily: 'DM Mono, monospace', fontSize: 11, color: '#60a5fa' }}>{a.user}</span>
|
|
</div>
|
|
</td>
|
|
<td style={{ padding: '11px 18px', fontFamily: 'DM Sans, sans-serif', fontSize: 13, color: '#94a3b8' }}>{a.action}</td>
|
|
<td style={{ padding: '11px 18px', fontFamily: 'DM Mono, monospace', fontSize: 11, color: '#334155' }}>{a.time}</td>
|
|
<td style={{ padding: '11px 18px' }}>
|
|
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: statusColor[a.status] + '12', borderRadius: 6, padding: '3px 8px' }}>
|
|
<div style={{ width: 5, height: 5, borderRadius: '50%', background: statusColor[a.status] }} />
|
|
<span style={{ fontSize: 10, color: statusColor[a.status], fontFamily: 'DM Mono, monospace', fontWeight: 500 }}>
|
|
{a.status === 'success' ? 'OK' : a.status === 'warning' ? 'WARN' : a.status === 'error' ? 'ERR' : 'INFO'}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|