mirror of
https://github.com/ktds-dg0501/kt-event-marketing-fe.git
synced 2025-12-06 05:36:23 +00:00
UI 개선: 간격 확대, 차트 색상 변경, 이벤트 목록 기능 추가
- 전체 간격(spacing) 2배 증가 및 컨테이너 패딩 확대 - 기본 폰트 크기 14px→16px 증가 - 채널별 성과 차트 색상을 조화로운 색상으로 변경 (#F472B6, #60A5FA, #FB923C) - 이벤트 목록 페이지에 통계 요약 카드 추가 (전체/진행중/참여자/평균ROI) - 진행중인 이벤트에 진행률 바 추가 - 이벤트 상태 배지 추가 (마감임박/인기/높은ROI/신규) - 상품 및 참여방법에 아이콘 추가 - 이벤트 카드 레이아웃 개선: 참여자/ROI 정보를 오른쪽 하단으로 재배치 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
cherry2250
parent
e1fefc2dad
commit
e8ea659c0b
25
package-lock.json
generated
25
package-lock.json
generated
@ -18,11 +18,11 @@
|
||||
"@use-funnel/browser": "^0.0.12",
|
||||
"@use-funnel/next": "^0.0.12",
|
||||
"axios": "^1.7.7",
|
||||
"chart.js": "^4.4.6",
|
||||
"chart.js": "^4.5.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"next": "^14.2.15",
|
||||
"react": "^18.3.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-chartjs-2": "^5.3.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.53.0",
|
||||
"zod": "^3.23.8",
|
||||
@ -30,6 +30,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.48.0",
|
||||
"@types/chart.js": "^2.9.41",
|
||||
"@types/node": "^22.7.5",
|
||||
"@types/react": "^18.3.11",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
@ -1215,6 +1216,16 @@
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/chart.js": {
|
||||
"version": "2.9.41",
|
||||
"resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.41.tgz",
|
||||
"integrity": "sha512-3dvkDvueckY83UyUXtJMalYoH6faOLkWQoaTlJgB4Djde3oORmNP0Jw85HtzTuXyliUHcdp704s0mZFQKio/KQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"moment": "^2.10.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/json5": {
|
||||
"version": "0.0.29",
|
||||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
@ -4684,6 +4695,16 @@
|
||||
"node": ">=16 || 14 >=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/moment": {
|
||||
"version": "2.30.1",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
|
||||
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
|
||||
@ -20,11 +20,11 @@
|
||||
"@use-funnel/browser": "^0.0.12",
|
||||
"@use-funnel/next": "^0.0.12",
|
||||
"axios": "^1.7.7",
|
||||
"chart.js": "^4.4.6",
|
||||
"chart.js": "^4.5.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"next": "^14.2.15",
|
||||
"react": "^18.3.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-chartjs-2": "^5.3.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.53.0",
|
||||
"zod": "^3.23.8",
|
||||
@ -32,6 +32,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.48.0",
|
||||
"@types/chart.js": "^2.9.41",
|
||||
"@types/node": "^22.7.5",
|
||||
"@types/react": "^18.3.11",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
|
||||
@ -10,12 +10,41 @@ import {
|
||||
Grid,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
PieChart,
|
||||
ShowChart,
|
||||
PieChart as PieChartIcon,
|
||||
ShowChart as ShowChartIcon,
|
||||
Payments,
|
||||
People,
|
||||
} from '@mui/icons-material';
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
ArcElement,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from 'chart.js';
|
||||
import { Pie, Line } from 'react-chartjs-2';
|
||||
import Header from '@/shared/ui/Header';
|
||||
import {
|
||||
cardStyles,
|
||||
colors,
|
||||
responsiveText,
|
||||
} from '@/shared/lib/button-styles';
|
||||
|
||||
// Chart.js 등록
|
||||
ChartJS.register(
|
||||
ArcElement,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
);
|
||||
|
||||
// Mock 데이터
|
||||
const mockAnalyticsData = {
|
||||
@ -28,9 +57,9 @@ const mockAnalyticsData = {
|
||||
targetRoi: 300,
|
||||
},
|
||||
channelPerformance: [
|
||||
{ channel: '우리동네TV', participants: 58, percentage: 45, color: '#E31E24' },
|
||||
{ channel: '링고비즈', participants: 38, percentage: 30, color: '#0066FF' },
|
||||
{ channel: 'SNS', participants: 32, percentage: 25, color: '#FFB800' },
|
||||
{ channel: '우리동네TV', participants: 58, percentage: 45, color: '#F472B6' },
|
||||
{ channel: '링고비즈', participants: 38, percentage: 30, color: '#60A5FA' },
|
||||
{ channel: 'SNS', participants: 32, percentage: 25, color: '#FB923C' },
|
||||
],
|
||||
timePerformance: {
|
||||
peakTime: '오후 2-4시',
|
||||
@ -98,18 +127,25 @@ export default function AnalyticsPage() {
|
||||
return (
|
||||
<>
|
||||
<Header title="성과 분석" showBack={true} showMenu={false} showProfile={true} />
|
||||
<Box sx={{ pt: { xs: 7, sm: 8 }, minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
pt: { xs: 7, sm: 8 },
|
||||
pb: 10,
|
||||
bgcolor: colors.gray[50],
|
||||
minHeight: '100vh',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
{/* Title with Real-time Indicator */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
mb: 4,
|
||||
mb: 10,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3 }}>
|
||||
📊 요약 (실시간)
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
@ -118,7 +154,7 @@ export default function AnalyticsPage() {
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'success.main',
|
||||
bgcolor: colors.mint,
|
||||
animation: 'pulse 2s infinite',
|
||||
'@keyframes pulse': {
|
||||
'0%, 100%': { opacity: 1 },
|
||||
@ -126,39 +162,75 @@ export default function AnalyticsPage() {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="caption" sx={{ ...responsiveText.body2 }}>
|
||||
{updateText}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Summary KPI Cards */}
|
||||
<Grid container spacing={3} sx={{ mb: 5 }}>
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3, px: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 2,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
참여자 수
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, my: 1 }}>
|
||||
{summary.participants}명
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
{summary.participants}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="success.main" sx={{ fontWeight: 600 }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
|
||||
>
|
||||
↑ {summary.participantsDelta}명 (오늘)
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3, px: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 2,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
총 비용
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, my: 1 }}>
|
||||
{Math.floor(summary.totalCost / 10000)}만원
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
{Math.floor(summary.totalCost / 10000)}만
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
|
||||
>
|
||||
경품 {Math.floor(roiDetail.prizeCost / 10000)}만 + 채널{' '}
|
||||
{Math.floor(roiDetail.channelCost / 10000)}만
|
||||
</Typography>
|
||||
@ -166,31 +238,67 @@ export default function AnalyticsPage() {
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3, px: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.mintLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 2,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
예상 수익
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, my: 1, color: 'success.main' }}>
|
||||
{Math.floor(summary.expectedRevenue / 10000)}만원
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
{Math.floor(summary.expectedRevenue / 10000)}만
|
||||
</Typography>
|
||||
<Typography variant="caption" color="success.main" sx={{ fontWeight: 600 }}>
|
||||
매출증가 {Math.floor(roiDetail.salesIncrease / 10000)}만 + LTV{' '}
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
|
||||
>
|
||||
매출 {Math.floor(roiDetail.salesIncrease / 10000)}만 + LTV{' '}
|
||||
{Math.floor(roiDetail.newCustomerLTV / 10000)}만
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3, px: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 2,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
투자대비수익률
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, my: 1, color: 'success.main' }}>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
{summary.roi}%
|
||||
</Typography>
|
||||
<Typography variant="caption" color="success.main" sx={{ fontWeight: 600 }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
|
||||
>
|
||||
목표 {summary.targetRoi}% 달성
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -199,39 +307,76 @@ export default function AnalyticsPage() {
|
||||
</Grid>
|
||||
|
||||
{/* Charts Grid */}
|
||||
<Grid container spacing={4} sx={{ mb: 5 }}>
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
{/* Channel Performance */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||
<PieChart color="error" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '12px',
|
||||
background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.pinkLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<PieChartIcon sx={{ fontSize: 24, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
채널별 성과
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Chart Placeholder */}
|
||||
{/* Pie Chart */}
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
aspectRatio: '1 / 1',
|
||||
bgcolor: 'grey.100',
|
||||
borderRadius: 3,
|
||||
maxWidth: 300,
|
||||
mx: 'auto',
|
||||
mb: 3,
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
p: 4,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 64, color: '#bdbdbd' }}>
|
||||
donut_large
|
||||
</span>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
|
||||
파이 차트
|
||||
</Typography>
|
||||
<Pie
|
||||
data={{
|
||||
labels: channelPerformance.map((item) => item.channel),
|
||||
datasets: [
|
||||
{
|
||||
data: channelPerformance.map((item) => item.participants),
|
||||
backgroundColor: channelPerformance.map((item) => item.color),
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function (context) {
|
||||
const label = context.label || '';
|
||||
const value = context.parsed || 0;
|
||||
const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0);
|
||||
const percentage = ((value / total) * 100).toFixed(1);
|
||||
return `${label}: ${value}명 (${percentage}%)`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Legend */}
|
||||
@ -250,9 +395,11 @@ export default function AnalyticsPage() {
|
||||
bgcolor: item.color,
|
||||
}}
|
||||
/>
|
||||
<Typography variant="body2">{item.channel}</Typography>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[700] }}>
|
||||
{item.channel}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
{item.percentage}% ({item.participants}명)
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -264,44 +411,113 @@ export default function AnalyticsPage() {
|
||||
|
||||
{/* Time Trend */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||
<ShowChart color="error" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '12px',
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<ShowChartIcon sx={{ fontSize: 24, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
시간대별 참여 추이
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Chart Placeholder */}
|
||||
{/* Line Chart */}
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
aspectRatio: '16 / 9',
|
||||
bgcolor: 'grey.100',
|
||||
borderRadius: 3,
|
||||
mb: 3,
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
p: 4,
|
||||
mb: 3,
|
||||
minHeight: 200,
|
||||
}}
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 64, color: '#bdbdbd' }}>
|
||||
trending_up
|
||||
</span>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
|
||||
라인 차트
|
||||
</Typography>
|
||||
<Line
|
||||
data={{
|
||||
labels: [
|
||||
'00시',
|
||||
'03시',
|
||||
'06시',
|
||||
'09시',
|
||||
'12시',
|
||||
'15시',
|
||||
'18시',
|
||||
'21시',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: '참여자 수',
|
||||
data: [3, 2, 5, 12, 28, 35, 22, 15],
|
||||
borderColor: colors.blue,
|
||||
backgroundColor: `${colors.blue}33`,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointBackgroundColor: colors.blue,
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: colors.gray[900],
|
||||
padding: 12,
|
||||
displayColors: false,
|
||||
callbacks: {
|
||||
label: function (context) {
|
||||
return `${context.parsed.y}명`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
color: colors.gray[600],
|
||||
},
|
||||
grid: {
|
||||
color: colors.gray[200],
|
||||
},
|
||||
},
|
||||
x: {
|
||||
ticks: {
|
||||
color: colors.gray[600],
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Stats */}
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
|
||||
<Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[600] }}>
|
||||
피크 시간: {timePerformance.peakTime} ({timePerformance.peakParticipants}명)
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
평균 시간당: {timePerformance.avgPerHour}명
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -311,37 +527,49 @@ export default function AnalyticsPage() {
|
||||
</Grid>
|
||||
|
||||
{/* ROI Detail & Participant Profile */}
|
||||
<Grid container spacing={4} sx={{ mb: 5 }}>
|
||||
<Grid container spacing={6}>
|
||||
{/* ROI Detail */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||
<Payments color="error" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '12px',
|
||||
background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Payments sx={{ fontSize: 24, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
투자대비수익률 상세
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.gray[900] }}>
|
||||
총 비용: {Math.floor(roiDetail.totalCost / 10000)}만원
|
||||
</Typography>
|
||||
<Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
<Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
• 경품 비용
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
{Math.floor(roiDetail.prizeCost / 10000)}만원
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
• 채널 비용
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
{Math.floor(roiDetail.channelCost / 10000)}만원
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -349,23 +577,23 @@ export default function AnalyticsPage() {
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.gray[900] }}>
|
||||
예상 수익: {Math.floor(roiDetail.expectedRevenue / 10000)}만원
|
||||
</Typography>
|
||||
<Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
<Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
• 매출 증가
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: 'success.main' }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint }}>
|
||||
{Math.floor(roiDetail.salesIncrease / 10000)}만원
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
• 신규 고객 LTV
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: 'success.main' }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint }}>
|
||||
{Math.floor(roiDetail.newCustomerLTV / 10000)}만원
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -373,26 +601,26 @@ export default function AnalyticsPage() {
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1, color: 'success.main' }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.mint }}>
|
||||
투자대비수익률
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
bgcolor: 'grey.100',
|
||||
p: 2.5,
|
||||
bgcolor: colors.gray[100],
|
||||
borderRadius: 2,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ mb: 0.5 }}>
|
||||
<Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[700] }}>
|
||||
(수익 - 비용) ÷ 비용 × 100
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ mb: 1 }}>
|
||||
<Typography variant="body2" sx={{ mb: 1.5, color: colors.gray[600] }}>
|
||||
({Math.floor(roiDetail.expectedRevenue / 10000)}만 -{' '}
|
||||
{Math.floor(roiDetail.totalCost / 10000)}만) ÷{' '}
|
||||
{Math.floor(roiDetail.totalCost / 10000)}만 × 100
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: 'success.main' }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint }}>
|
||||
= {summary.roi}%
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -404,33 +632,45 @@ export default function AnalyticsPage() {
|
||||
|
||||
{/* Participant Profile */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||
<People color="error" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '12px',
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<People sx={{ fontSize: 24, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
참여자 프로필
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Age Distribution */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: 2 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: 2, color: colors.gray[900] }}>
|
||||
연령별
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
||||
{participantProfile.age.map((item) => (
|
||||
<Box key={item.label}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<Typography variant="body2" sx={{ minWidth: 60 }}>
|
||||
<Typography variant="body2" sx={{ minWidth: 60, color: colors.gray[700] }}>
|
||||
{item.label}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
height: 24,
|
||||
bgcolor: 'grey.200',
|
||||
borderRadius: 1,
|
||||
height: 28,
|
||||
bgcolor: colors.gray[200],
|
||||
borderRadius: 1.5,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
@ -438,11 +678,11 @@ export default function AnalyticsPage() {
|
||||
sx={{
|
||||
width: `${item.percentage}%`,
|
||||
height: '100%',
|
||||
bgcolor: 'info.main',
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
pr: 1,
|
||||
pr: 1.5,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
@ -461,22 +701,22 @@ export default function AnalyticsPage() {
|
||||
|
||||
{/* Gender Distribution */}
|
||||
<Box>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: 2 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: 2, color: colors.gray[900] }}>
|
||||
성별
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
||||
{participantProfile.gender.map((item) => (
|
||||
<Box key={item.label}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<Typography variant="body2" sx={{ minWidth: 60 }}>
|
||||
<Typography variant="body2" sx={{ minWidth: 60, color: colors.gray[700] }}>
|
||||
{item.label}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
height: 24,
|
||||
bgcolor: 'grey.200',
|
||||
borderRadius: 1,
|
||||
height: 28,
|
||||
bgcolor: colors.gray[200],
|
||||
borderRadius: 1.5,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
@ -484,11 +724,11 @@ export default function AnalyticsPage() {
|
||||
sx={{
|
||||
width: `${item.percentage}%`,
|
||||
height: '100%',
|
||||
bgcolor: 'error.main',
|
||||
background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.pinkLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
pr: 1,
|
||||
pr: 1.5,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
|
||||
@ -13,13 +13,34 @@ import {
|
||||
Card,
|
||||
CardContent,
|
||||
Typography,
|
||||
Chip,
|
||||
InputAdornment,
|
||||
Pagination,
|
||||
Grid,
|
||||
LinearProgress,
|
||||
Chip,
|
||||
} from '@mui/material';
|
||||
import { Search, FilterList } from '@mui/icons-material';
|
||||
import {
|
||||
Search,
|
||||
FilterList,
|
||||
Event,
|
||||
TrendingUp,
|
||||
People,
|
||||
CardGiftcard,
|
||||
Phone,
|
||||
Share,
|
||||
ShoppingCart,
|
||||
Email,
|
||||
LocalFireDepartment,
|
||||
NewReleases,
|
||||
Warning,
|
||||
Star,
|
||||
} from '@mui/icons-material';
|
||||
import Header from '@/shared/ui/Header';
|
||||
import {
|
||||
cardStyles,
|
||||
colors,
|
||||
responsiveText,
|
||||
} from '@/shared/lib/button-styles';
|
||||
|
||||
// Mock 데이터
|
||||
const mockEvents = [
|
||||
@ -29,11 +50,16 @@ const mockEvents = [
|
||||
status: 'active' as const,
|
||||
daysLeft: 5,
|
||||
participants: 128,
|
||||
targetParticipants: 200,
|
||||
roi: 450,
|
||||
startDate: '2025-11-01',
|
||||
endDate: '2025-11-15',
|
||||
prize: '커피 쿠폰',
|
||||
method: '전화번호 입력',
|
||||
isUrgent: true,
|
||||
isPopular: false,
|
||||
isHighROI: true,
|
||||
isNew: false,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
@ -41,11 +67,16 @@ const mockEvents = [
|
||||
status: 'active' as const,
|
||||
daysLeft: 12,
|
||||
participants: 56,
|
||||
targetParticipants: 100,
|
||||
roi: 320,
|
||||
startDate: '2025-11-05',
|
||||
endDate: '2025-11-20',
|
||||
prize: '할인 쿠폰',
|
||||
method: 'SNS 팔로우',
|
||||
isUrgent: false,
|
||||
isPopular: false,
|
||||
isHighROI: false,
|
||||
isNew: false,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
@ -53,11 +84,16 @@ const mockEvents = [
|
||||
status: 'ended' as const,
|
||||
daysLeft: 0,
|
||||
participants: 234,
|
||||
targetParticipants: 150,
|
||||
roi: 580,
|
||||
startDate: '2025-10-15',
|
||||
endDate: '2025-10-31',
|
||||
prize: '상품권',
|
||||
method: '구매 인증',
|
||||
isUrgent: false,
|
||||
isPopular: true,
|
||||
isHighROI: true,
|
||||
isNew: false,
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
@ -65,11 +101,16 @@ const mockEvents = [
|
||||
status: 'scheduled' as const,
|
||||
daysLeft: 30,
|
||||
participants: 0,
|
||||
targetParticipants: 300,
|
||||
roi: 0,
|
||||
startDate: '2025-12-01',
|
||||
endDate: '2025-12-15',
|
||||
prize: '체험권',
|
||||
method: '이메일 등록',
|
||||
isUrgent: false,
|
||||
isPopular: false,
|
||||
isHighROI: false,
|
||||
isNew: true,
|
||||
},
|
||||
];
|
||||
|
||||
@ -114,16 +155,28 @@ export default function EventsPage() {
|
||||
router.push(`/events/${eventId}`);
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
const getStatusStyle = (status: string) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
return 'success';
|
||||
return {
|
||||
bgcolor: colors.mint,
|
||||
color: 'white',
|
||||
};
|
||||
case 'scheduled':
|
||||
return 'info';
|
||||
return {
|
||||
bgcolor: colors.blue,
|
||||
color: 'white',
|
||||
};
|
||||
case 'ended':
|
||||
return 'default';
|
||||
return {
|
||||
bgcolor: colors.gray[300],
|
||||
color: colors.gray[700],
|
||||
};
|
||||
default:
|
||||
return 'default';
|
||||
return {
|
||||
bgcolor: colors.gray[200],
|
||||
color: colors.gray[600],
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -140,13 +193,149 @@ export default function EventsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const getMethodIcon = (method: string) => {
|
||||
switch (method) {
|
||||
case '전화번호 입력':
|
||||
return <Phone sx={{ fontSize: 18 }} />;
|
||||
case 'SNS 팔로우':
|
||||
return <Share sx={{ fontSize: 18 }} />;
|
||||
case '구매 인증':
|
||||
return <ShoppingCart sx={{ fontSize: 18 }} />;
|
||||
case '이메일 등록':
|
||||
return <Email sx={{ fontSize: 18 }} />;
|
||||
default:
|
||||
return <Event sx={{ fontSize: 18 }} />;
|
||||
}
|
||||
};
|
||||
|
||||
const calculateProgress = (event: typeof mockEvents[0]) => {
|
||||
if (event.status !== 'active') return 0;
|
||||
const total = new Date(event.endDate).getTime() - new Date(event.startDate).getTime();
|
||||
const elapsed = Date.now() - new Date(event.startDate).getTime();
|
||||
return Math.min(Math.max((elapsed / total) * 100, 0), 100);
|
||||
};
|
||||
|
||||
// 통계 계산
|
||||
const stats = {
|
||||
total: mockEvents.length,
|
||||
active: mockEvents.filter((e) => e.status === 'active').length,
|
||||
totalParticipants: mockEvents.reduce((sum, e) => sum + e.participants, 0),
|
||||
avgROI: Math.round(
|
||||
mockEvents.filter((e) => e.roi > 0).reduce((sum, e) => sum + e.roi, 0) /
|
||||
mockEvents.filter((e) => e.roi > 0).length
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header title="이벤트 목록" showBack={true} showMenu={false} showProfile={true} />
|
||||
<Box sx={{ pt: { xs: 7, sm: 8 }, minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
pt: { xs: 7, sm: 8 },
|
||||
pb: 10,
|
||||
bgcolor: colors.gray[50],
|
||||
minHeight: '100vh',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
{/* Summary Statistics */}
|
||||
<Grid container spacing={4} sx={{ mb: 8 }}>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<Event sx={{ fontSize: 32, color: 'white', mb: 1 }} />
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem', mb: 0.5 }}
|
||||
>
|
||||
{stats.total}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem' }}>
|
||||
전체 이벤트
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.mintLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<LocalFireDepartment sx={{ fontSize: 32, color: 'white', mb: 1 }} />
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem', mb: 0.5 }}
|
||||
>
|
||||
{stats.active}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem' }}>
|
||||
진행중
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<People sx={{ fontSize: 32, color: 'white', mb: 1 }} />
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem', mb: 0.5 }}
|
||||
>
|
||||
{stats.totalParticipants}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem' }}>
|
||||
총 참여자
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<TrendingUp sx={{ fontSize: 32, color: 'white', mb: 1 }} />
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem', mb: 0.5 }}
|
||||
>
|
||||
{stats.avgROI}%
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem' }}>
|
||||
평균 ROI
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Search Section */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="이벤트명 검색..."
|
||||
@ -155,28 +344,51 @@ export default function EventsPage() {
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Search />
|
||||
<Search sx={{ color: colors.gray[400] }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: 2,
|
||||
borderRadius: 3,
|
||||
bgcolor: 'white',
|
||||
'& fieldset': {
|
||||
borderColor: colors.gray[200],
|
||||
},
|
||||
'&:hover fieldset': {
|
||||
borderColor: colors.gray[300],
|
||||
},
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: colors.purple,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Filters */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
|
||||
<FilterList color="error" />
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
|
||||
<FilterList sx={{ color: colors.purple }} />
|
||||
<FormControl sx={{ flex: 1, minWidth: 120 }}>
|
||||
<InputLabel>상태</InputLabel>
|
||||
<Select
|
||||
value={statusFilter}
|
||||
label="상태"
|
||||
onChange={(e) => setStatusFilter(e.target.value as EventStatus)}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
bgcolor: 'white',
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[200],
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[300],
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.purple,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem value="all">전체</MenuItem>
|
||||
<MenuItem value="active">진행중</MenuItem>
|
||||
@ -190,6 +402,19 @@ export default function EventsPage() {
|
||||
value={periodFilter}
|
||||
label="기간"
|
||||
onChange={(e) => setPeriodFilter(e.target.value as Period)}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
bgcolor: 'white',
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[200],
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[300],
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.purple,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem value="1month">최근 1개월</MenuItem>
|
||||
<MenuItem value="3months">최근 3개월</MenuItem>
|
||||
@ -202,16 +427,29 @@ export default function EventsPage() {
|
||||
</Box>
|
||||
|
||||
{/* Sorting */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
정렬:
|
||||
<Typography variant="body2" sx={{ ...responsiveText.body2, fontWeight: 600 }}>
|
||||
정렬
|
||||
</Typography>
|
||||
<FormControl sx={{ width: 160 }}>
|
||||
<Select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as SortBy)}
|
||||
size="small"
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
bgcolor: 'white',
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[200],
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[300],
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.purple,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem value="latest">최신순</MenuItem>
|
||||
<MenuItem value="participants">참여자순</MenuItem>
|
||||
@ -222,89 +460,234 @@ export default function EventsPage() {
|
||||
</Box>
|
||||
|
||||
{/* Event List */}
|
||||
<Box sx={{ mb: 5 }}>
|
||||
<Box sx={{ mb: 10 }}>
|
||||
{pageEvents.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 8 }}>
|
||||
<span className="material-icons" style={{ fontSize: 64, color: '#bdbdbd' }}>
|
||||
event_busy
|
||||
</span>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mt: 2 }}>
|
||||
검색 결과가 없습니다
|
||||
</Typography>
|
||||
</Box>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 20 }}>
|
||||
<Box sx={{ color: colors.gray[300], mb: 3 }}>
|
||||
<span className="material-icons" style={{ fontSize: 72 }}>
|
||||
event_busy
|
||||
</span>
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ mb: 2, color: colors.gray[700] }}>
|
||||
검색 결과가 없습니다
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[500] }}>
|
||||
다른 검색 조건으로 다시 시도해보세요
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
{pageEvents.map((event) => (
|
||||
<Card
|
||||
key={event.id}
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 3,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
transition: 'all 0.2s ease',
|
||||
'&:hover': {
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
transform: 'translateY(-2px)',
|
||||
},
|
||||
...cardStyles.clickable,
|
||||
}}
|
||||
onClick={() => handleEventClick(event.id)}
|
||||
>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
{/* Header */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'space-between',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, flex: 1 }}>
|
||||
{event.title}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={`${getStatusText(event.status)}${
|
||||
event.status === 'active'
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
{/* Header with Badges */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'start',
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], flex: 1 }}>
|
||||
{event.title}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
px: 2.5,
|
||||
py: 0.75,
|
||||
borderRadius: 2,
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 600,
|
||||
...getStatusStyle(event.status),
|
||||
}}
|
||||
>
|
||||
{getStatusText(event.status)}
|
||||
{event.status === 'active'
|
||||
? ` | D-${event.daysLeft}`
|
||||
: event.status === 'scheduled'
|
||||
? ` | D+${event.daysLeft}`
|
||||
: ''
|
||||
}`}
|
||||
color={getStatusColor(event.status) as any}
|
||||
size="small"
|
||||
sx={{ fontWeight: 600 }}
|
||||
/>
|
||||
: ''}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Status Badges */}
|
||||
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
|
||||
{event.isUrgent && (
|
||||
<Chip
|
||||
icon={<Warning sx={{ fontSize: 16 }} />}
|
||||
label="마감임박"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#FEF3C7',
|
||||
color: '#92400E',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
'& .MuiChip-icon': { color: '#92400E' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{event.isPopular && (
|
||||
<Chip
|
||||
icon={<LocalFireDepartment sx={{ fontSize: 16 }} />}
|
||||
label="인기"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#FEE2E2',
|
||||
color: '#991B1B',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
'& .MuiChip-icon': { color: '#991B1B' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{event.isHighROI && (
|
||||
<Chip
|
||||
icon={<Star sx={{ fontSize: 16 }} />}
|
||||
label="높은 ROI"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#DCFCE7',
|
||||
color: '#166534',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
'& .MuiChip-icon': { color: '#166534' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{event.isNew && (
|
||||
<Chip
|
||||
icon={<NewReleases sx={{ fontSize: 16 }} />}
|
||||
label="신규"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#DBEAFE',
|
||||
color: '#1E40AF',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
'& .MuiChip-icon': { color: '#1E40AF' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Stats */}
|
||||
<Grid container spacing={2} sx={{ mb: 2 }}>
|
||||
<Grid item xs={6}>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
참여
|
||||
{/* Progress Bar for Active Events */}
|
||||
{event.status === 'active' && (
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
|
||||
<Typography variant="caption" sx={{ color: colors.gray[600], fontSize: '0.75rem' }}>
|
||||
이벤트 진행률
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
{event.participants}명
|
||||
<Typography variant="caption" sx={{ color: colors.gray[700], fontWeight: 600, fontSize: '0.75rem' }}>
|
||||
{Math.round(calculateProgress(event))}%
|
||||
</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={calculateProgress(event)}
|
||||
sx={{
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
bgcolor: colors.gray[200],
|
||||
'& .MuiLinearProgress-bar': {
|
||||
borderRadius: 4,
|
||||
background: `linear-gradient(90deg, ${colors.mint} 0%, ${colors.blue} 100%)`,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Event Info and Stats Container */}
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
|
||||
{/* Left: Event Info */}
|
||||
<Box>
|
||||
<Box sx={{ mb: 4, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<CardGiftcard sx={{ fontSize: 18, color: colors.pink }} />
|
||||
<Typography variant="body2" sx={{ color: colors.gray[700], fontSize: '0.875rem' }}>
|
||||
{event.prize}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{getMethodIcon(event.method)}
|
||||
<Typography variant="body2" sx={{ color: colors.gray[700], fontSize: '0.875rem' }}>
|
||||
{event.method}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Date */}
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: colors.gray[600],
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<span>📅</span>
|
||||
<span>
|
||||
{event.startDate} ~ {event.endDate}
|
||||
</span>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Right: Stats */}
|
||||
<Box sx={{ display: 'flex', gap: 8, textAlign: 'right' }}>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
투자대비수익률
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 1, color: colors.gray[600], fontWeight: 500 }}
|
||||
>
|
||||
참여자
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: 'error.main' }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.gray[900], mb: 0.5 }}>
|
||||
{event.participants.toLocaleString()}
|
||||
<Typography
|
||||
component="span"
|
||||
variant="body2"
|
||||
sx={{ ml: 0.5, color: colors.gray[600] }}
|
||||
>
|
||||
명
|
||||
</Typography>
|
||||
</Typography>
|
||||
{event.targetParticipants > 0 && (
|
||||
<Typography variant="caption" sx={{ color: colors.gray[500], fontSize: '0.75rem' }}>
|
||||
목표: {event.targetParticipants}명 ({Math.round((event.participants / event.targetParticipants) * 100)}%)
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 1, color: colors.gray[600], fontWeight: 500 }}
|
||||
>
|
||||
ROI
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: event.roi >= 400 ? colors.mint : event.roi >= 200 ? colors.orange : colors.gray[500] }}>
|
||||
{event.roi}%
|
||||
</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Date */}
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{event.startDate} ~ {event.endDate}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
@ -314,13 +697,28 @@ export default function EventsPage() {
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', mb: 5 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<Pagination
|
||||
count={totalPages}
|
||||
page={currentPage}
|
||||
onChange={(_, page) => setCurrentPage(page)}
|
||||
color="primary"
|
||||
size="large"
|
||||
sx={{
|
||||
'& .MuiPaginationItem-root': {
|
||||
color: colors.gray[700],
|
||||
fontWeight: 600,
|
||||
'&.Mui-selected': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
|
||||
color: 'white',
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purpleLight} 0%, ${colors.blueLight} 100%)`,
|
||||
},
|
||||
},
|
||||
'&:hover': {
|
||||
bgcolor: colors.gray[100],
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@ -88,14 +88,14 @@ export default function HomePage() {
|
||||
minHeight: '100vh',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" sx={{ pt: 5, pb: 4, px: { xs: 3, sm: 4, md: 5 } }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
{/* Welcome Section */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
...responsiveText.h2,
|
||||
mb: 2,
|
||||
mb: 4,
|
||||
}}
|
||||
>
|
||||
안녕하세요, {mockUser.name}님! 👋
|
||||
@ -106,7 +106,7 @@ export default function HomePage() {
|
||||
</Box>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<Grid container spacing={4} sx={{ mb: 6 }}>
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Card
|
||||
elevation={0}
|
||||
@ -116,7 +116,7 @@ export default function HomePage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
@ -127,7 +127,7 @@ export default function HomePage() {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Celebration sx={{ fontSize: 32, color: 'white' }} />
|
||||
@ -145,7 +145,7 @@ export default function HomePage() {
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.25rem' }}
|
||||
>
|
||||
{activeEvents.length}
|
||||
</Typography>
|
||||
@ -161,7 +161,7 @@ export default function HomePage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
@ -172,7 +172,7 @@ export default function HomePage() {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Group sx={{ fontSize: 32, color: 'white' }} />
|
||||
@ -190,7 +190,7 @@ export default function HomePage() {
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.25rem' }}
|
||||
>
|
||||
{totalParticipants.toLocaleString()}
|
||||
</Typography>
|
||||
@ -206,7 +206,7 @@ export default function HomePage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
@ -217,7 +217,7 @@ export default function HomePage() {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<TrendingUp sx={{ fontSize: 32, color: 'white' }} />
|
||||
@ -235,7 +235,7 @@ export default function HomePage() {
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.25rem' }}
|
||||
>
|
||||
{avgROI}%
|
||||
</Typography>
|
||||
@ -245,11 +245,11 @@ export default function HomePage() {
|
||||
</Grid>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 4 }}>
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 6 }}>
|
||||
빠른 시작
|
||||
</Typography>
|
||||
<Grid container spacing={4}>
|
||||
<Grid container spacing={6}>
|
||||
<Grid item xs={6} sm={6}>
|
||||
<Card
|
||||
elevation={0}
|
||||
@ -258,7 +258,7 @@ export default function HomePage() {
|
||||
}}
|
||||
onClick={handleCreateEvent}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 72,
|
||||
@ -269,13 +269,13 @@ export default function HomePage() {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2.5,
|
||||
mb: 3,
|
||||
boxShadow: '0 4px 14px 0 rgba(167, 139, 250, 0.39)',
|
||||
}}
|
||||
>
|
||||
<Add sx={{ fontSize: 36, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: '1.125rem' }}>
|
||||
새 이벤트
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -289,7 +289,7 @@ export default function HomePage() {
|
||||
}}
|
||||
onClick={handleViewAnalytics}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 72,
|
||||
@ -300,13 +300,13 @@ export default function HomePage() {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2.5,
|
||||
mb: 3,
|
||||
boxShadow: '0 4px 14px 0 rgba(96, 165, 250, 0.39)',
|
||||
}}
|
||||
>
|
||||
<Analytics sx={{ fontSize: 36, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: '1.125rem' }}>
|
||||
성과분석
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -316,9 +316,9 @@ export default function HomePage() {
|
||||
</Box>
|
||||
|
||||
{/* Active Events */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Box
|
||||
sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}
|
||||
sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 6 }}
|
||||
>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3 }}>
|
||||
진행 중인 이벤트
|
||||
@ -372,7 +372,7 @@ export default function HomePage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
{activeEvents.map((event) => (
|
||||
<Card
|
||||
key={event.id}
|
||||
@ -382,13 +382,13 @@ export default function HomePage() {
|
||||
}}
|
||||
onClick={() => handleEventClick(event.id)}
|
||||
>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 4 } }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'start',
|
||||
mb: 3,
|
||||
mb: 6,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
@ -411,11 +411,11 @@ export default function HomePage() {
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 3,
|
||||
mb: 6,
|
||||
color: colors.gray[600],
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<span>📅</span>
|
||||
@ -423,7 +423,7 @@ export default function HomePage() {
|
||||
{event.startDate} ~ {event.endDate}
|
||||
</span>
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 6 }}>
|
||||
<Box sx={{ display: 'flex', gap: 12 }}>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
@ -465,8 +465,8 @@ export default function HomePage() {
|
||||
</Box>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 4 }}>
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 6 }}>
|
||||
최근 활동
|
||||
</Typography>
|
||||
<Card
|
||||
@ -475,15 +475,15 @@ export default function HomePage() {
|
||||
...cardStyles.default,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 4 } }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
{mockActivities.map((activity, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 3,
|
||||
pt: index > 0 ? 3.5 : 0,
|
||||
mt: index > 0 ? 3.5 : 0,
|
||||
gap: 4,
|
||||
pt: index > 0 ? 6 : 0,
|
||||
mt: index > 0 ? 6 : 0,
|
||||
borderTop: index > 0 ? 1 : 0,
|
||||
borderColor: colors.gray[200],
|
||||
}}
|
||||
|
||||
@ -24,13 +24,13 @@
|
||||
--color-error: #D32F2F;
|
||||
--color-info: #0288D1;
|
||||
|
||||
/* Spacing (4px Grid) */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-s: 8px;
|
||||
--spacing-m: 16px;
|
||||
--spacing-l: 24px;
|
||||
--spacing-xl: 32px;
|
||||
--spacing-2xl: 48px;
|
||||
/* Spacing (4px Grid) - Doubled values */
|
||||
--spacing-xs: 8px;
|
||||
--spacing-s: 16px;
|
||||
--spacing-m: 32px;
|
||||
--spacing-l: 48px;
|
||||
--spacing-xl: 64px;
|
||||
--spacing-2xl: 96px;
|
||||
|
||||
/* Border Radius */
|
||||
--border-radius-sm: 4px;
|
||||
@ -73,8 +73,8 @@ body {
|
||||
padding: 0;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
"Roboto", "Helvetica Neue", system-ui, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-gray-900);
|
||||
background-color: var(--color-gray-50);
|
||||
min-height: 100%;
|
||||
@ -149,18 +149,18 @@ button {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
padding: 0 40px;
|
||||
padding: 0 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
padding: 0 80px;
|
||||
padding: 0 120px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user