mirror of
https://github.com/ktds-dg0501/kt-event-marketing-fe.git
synced 2025-12-06 08:16:23 +00:00
실시간 현황 카드 요소 중앙 정렬 (320px 최적화)
This commit is contained in:
cherry2250
parent
4ae7ea739a
commit
08777aa00d
@ -135,24 +135,24 @@ export default function AnalyticsPage() {
|
||||
minHeight: '100vh',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
<Container maxWidth="lg" sx={{ pt: { xs: 4, sm: 8 }, pb: { xs: 4, sm: 6 }, px: { xs: 3, sm: 6, md: 10 } }}>
|
||||
{/* Title with Real-time Indicator */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
mb: 10,
|
||||
mb: { xs: 4, sm: 10 },
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3 }}>
|
||||
📊 요약 (실시간)
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.5, sm: 1 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
width: { xs: 6, sm: 8 },
|
||||
height: { xs: 6, sm: 8 },
|
||||
borderRadius: '50%',
|
||||
bgcolor: colors.mint,
|
||||
animation: 'pulse 2s infinite',
|
||||
@ -169,7 +169,7 @@ export default function AnalyticsPage() {
|
||||
</Box>
|
||||
|
||||
{/* Summary KPI Cards */}
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
<Grid container spacing={{ xs: 2, sm: 6 }} sx={{ mb: { xs: 4, sm: 10 } }}>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
@ -179,26 +179,26 @@ export default function AnalyticsPage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 6 }, px: { xs: 2, sm: 4 } }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 2,
|
||||
mb: { xs: 1, sm: 2 },
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
fontSize: { xs: '0.75rem', sm: '1rem' },
|
||||
}}
|
||||
>
|
||||
참여자 수
|
||||
</Typography>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '1.5rem', sm: '2.5rem' } }}>
|
||||
{summary.participants}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: { xs: '0.6875rem', sm: '0.875rem' } }}
|
||||
>
|
||||
↑ {summary.participantsDelta}명 (오늘)
|
||||
↑ {summary.participantsDelta}명
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@ -212,27 +212,26 @@ export default function AnalyticsPage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 6 }, px: { xs: 2, sm: 4 } }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 2,
|
||||
mb: { xs: 1, sm: 2 },
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
fontSize: { xs: '0.75rem', sm: '1rem' },
|
||||
}}
|
||||
>
|
||||
총 비용
|
||||
</Typography>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '1.5rem', sm: '2.5rem' } }}>
|
||||
{Math.floor(summary.totalCost / 10000)}만
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: { xs: '0.6875rem', sm: '0.875rem' } }}
|
||||
>
|
||||
경품 {Math.floor(roiDetail.prizeCost / 10000)}만 + 채널{' '}
|
||||
{Math.floor(roiDetail.channelCost / 10000)}만
|
||||
경품+채널
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@ -246,27 +245,26 @@ export default function AnalyticsPage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 6 }, px: { xs: 2, sm: 4 } }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 2,
|
||||
mb: { xs: 1, sm: 2 },
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
fontSize: { xs: '0.75rem', sm: '1rem' },
|
||||
}}
|
||||
>
|
||||
예상 수익
|
||||
</Typography>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '1.5rem', sm: '2.5rem' } }}>
|
||||
{Math.floor(summary.expectedRevenue / 10000)}만
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: { xs: '0.6875rem', sm: '0.875rem' } }}
|
||||
>
|
||||
매출 {Math.floor(roiDetail.salesIncrease / 10000)}만 + LTV{' '}
|
||||
{Math.floor(roiDetail.newCustomerLTV / 10000)}만
|
||||
매출+LTV
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@ -280,26 +278,26 @@ export default function AnalyticsPage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 6 }, px: { xs: 2, sm: 4 } }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 2,
|
||||
mb: { xs: 1, sm: 2 },
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
fontSize: { xs: '0.75rem', sm: '1rem' },
|
||||
}}
|
||||
>
|
||||
투자대비수익률
|
||||
ROI
|
||||
</Typography>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '1.5rem', sm: '2.5rem' } }}>
|
||||
{summary.roi}%
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: { xs: '0.6875rem', sm: '0.875rem' } }}
|
||||
>
|
||||
목표 {summary.targetRoi}% 달성
|
||||
목표 {summary.targetRoi}%
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@ -307,16 +305,16 @@ export default function AnalyticsPage() {
|
||||
</Grid>
|
||||
|
||||
{/* Charts Grid */}
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
<Grid container spacing={{ xs: 3, sm: 6 }} sx={{ mb: { xs: 4, sm: 10 } }}>
|
||||
{/* Channel Performance */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<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 }}>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 6, md: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 }, mb: { xs: 3, sm: 6 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
width: { xs: 32, sm: 40 },
|
||||
height: { xs: 32, sm: 40 },
|
||||
borderRadius: '12px',
|
||||
background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.pinkLight} 100%)`,
|
||||
display: 'flex',
|
||||
@ -324,9 +322,9 @@ export default function AnalyticsPage() {
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<PieChartIcon sx={{ fontSize: 24, color: 'white' }} />
|
||||
<PieChartIcon sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], fontSize: { xs: '1rem', sm: '1.25rem' } }}>
|
||||
채널별 성과
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -335,9 +333,9 @@ export default function AnalyticsPage() {
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: 300,
|
||||
maxWidth: { xs: 200, sm: 300 },
|
||||
mx: 'auto',
|
||||
mb: 3,
|
||||
mb: { xs: 2, sm: 3 },
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@ -380,7 +378,7 @@ export default function AnalyticsPage() {
|
||||
</Box>
|
||||
|
||||
{/* Legend */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 0.75, sm: 1 } }}>
|
||||
{channelPerformance.map((item) => (
|
||||
<Box
|
||||
key={item.channel}
|
||||
@ -389,17 +387,17 @@ export default function AnalyticsPage() {
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 12,
|
||||
height: 12,
|
||||
width: { xs: 10, sm: 12 },
|
||||
height: { xs: 10, sm: 12 },
|
||||
borderRadius: '50%',
|
||||
bgcolor: item.color,
|
||||
}}
|
||||
/>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[700] }}>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
{item.channel}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
{item.percentage}% ({item.participants}명)
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -412,12 +410,12 @@ export default function AnalyticsPage() {
|
||||
{/* Time Trend */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<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 }}>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 6, md: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 }, mb: { xs: 3, sm: 6 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
width: { xs: 32, sm: 40 },
|
||||
height: { xs: 32, sm: 40 },
|
||||
borderRadius: '12px',
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
|
||||
display: 'flex',
|
||||
@ -425,9 +423,9 @@ export default function AnalyticsPage() {
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<ShowChartIcon sx={{ fontSize: 24, color: 'white' }} />
|
||||
<ShowChartIcon sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], fontSize: { xs: '1rem', sm: '1.25rem' } }}>
|
||||
시간대별 참여 추이
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -436,11 +434,11 @@ export default function AnalyticsPage() {
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
mb: 3,
|
||||
mb: { xs: 2, sm: 3 },
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
minHeight: 200,
|
||||
minHeight: { xs: 150, sm: 200 },
|
||||
}}
|
||||
>
|
||||
<Line
|
||||
@ -514,10 +512,10 @@ export default function AnalyticsPage() {
|
||||
|
||||
{/* Stats */}
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[600] }}>
|
||||
<Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[600], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
피크 시간: {timePerformance.peakTime} ({timePerformance.peakParticipants}명)
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
평균 시간당: {timePerformance.avgPerHour}명
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -527,16 +525,16 @@ export default function AnalyticsPage() {
|
||||
</Grid>
|
||||
|
||||
{/* ROI Detail & Participant Profile */}
|
||||
<Grid container spacing={6}>
|
||||
<Grid container spacing={{ xs: 3, sm: 6 }}>
|
||||
{/* ROI Detail */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<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 }}>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 6, md: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 }, mb: { xs: 3, sm: 6 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
width: { xs: 32, sm: 40 },
|
||||
height: { xs: 32, sm: 40 },
|
||||
borderRadius: '12px',
|
||||
background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
|
||||
display: 'flex',
|
||||
@ -544,32 +542,32 @@ export default function AnalyticsPage() {
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Payments sx={{ fontSize: 24, color: 'white' }} />
|
||||
<Payments sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
투자대비수익률 상세
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], fontSize: { xs: '1rem', sm: '1.25rem' } }}>
|
||||
ROI 상세
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 2, sm: 3 } }}>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.gray[900] }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: { xs: 1, sm: 1.5 }, color: colors.gray[900], fontSize: { xs: '0.9375rem', sm: '1rem' } }}>
|
||||
총 비용: {Math.floor(roiDetail.totalCost / 10000)}만원
|
||||
</Typography>
|
||||
<Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Box sx={{ pl: { xs: 1.5, sm: 2 }, display: 'flex', flexDirection: 'column', gap: { xs: 0.75, sm: 1 } }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
• 경품 비용
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
{Math.floor(roiDetail.prizeCost / 10000)}만원
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
• 채널 비용
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
{Math.floor(roiDetail.channelCost / 10000)}만원
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -577,23 +575,23 @@ export default function AnalyticsPage() {
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.gray[900] }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: { xs: 1, sm: 1.5 }, color: colors.gray[900], fontSize: { xs: '0.9375rem', sm: '1rem' } }}>
|
||||
예상 수익: {Math.floor(roiDetail.expectedRevenue / 10000)}만원
|
||||
</Typography>
|
||||
<Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Box sx={{ pl: { xs: 1.5, sm: 2 }, display: 'flex', flexDirection: 'column', gap: { xs: 0.75, sm: 1 } }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
• 매출 증가
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint, fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
{Math.floor(roiDetail.salesIncrease / 10000)}만원
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
• 신규 고객 LTV
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint, fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
{Math.floor(roiDetail.newCustomerLTV / 10000)}만원
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -601,26 +599,26 @@ export default function AnalyticsPage() {
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.mint }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: { xs: 1, sm: 1.5 }, color: colors.mint, fontSize: { xs: '0.9375rem', sm: '1rem' } }}>
|
||||
투자대비수익률
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
p: 2.5,
|
||||
p: { xs: 2, sm: 2.5 },
|
||||
bgcolor: colors.gray[100],
|
||||
borderRadius: 2,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[700] }}>
|
||||
<Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[700], fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
|
||||
(수익 - 비용) ÷ 비용 × 100
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ mb: 1.5, color: colors.gray[600] }}>
|
||||
<Typography variant="body2" sx={{ mb: { xs: 1, sm: 1.5 }, color: colors.gray[600], fontSize: { xs: '0.6875rem', sm: '0.875rem' } }}>
|
||||
({Math.floor(roiDetail.expectedRevenue / 10000)}만 -{' '}
|
||||
{Math.floor(roiDetail.totalCost / 10000)}만) ÷{' '}
|
||||
{Math.floor(roiDetail.totalCost / 10000)}만 × 100
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint, fontSize: { xs: '1.25rem', sm: '1.5rem' } }}>
|
||||
= {summary.roi}%
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -633,12 +631,12 @@ export default function AnalyticsPage() {
|
||||
{/* Participant Profile */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<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 }}>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 6, md: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 }, mb: { xs: 3, sm: 6 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
width: { xs: 32, sm: 40 },
|
||||
height: { xs: 32, sm: 40 },
|
||||
borderRadius: '12px',
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
display: 'flex',
|
||||
@ -646,29 +644,29 @@ export default function AnalyticsPage() {
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<People sx={{ fontSize: 24, color: 'white' }} />
|
||||
<People sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], fontSize: { xs: '1rem', sm: '1.25rem' } }}>
|
||||
참여자 프로필
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Age Distribution */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: 2, color: colors.gray[900] }}>
|
||||
<Box sx={{ mb: { xs: 3, sm: 4 } }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: { xs: 1.5, sm: 2 }, color: colors.gray[900], fontSize: { xs: '0.9375rem', sm: '1rem' } }}>
|
||||
연령별
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 1.25, sm: 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, color: colors.gray[700] }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1, sm: 1.5 } }}>
|
||||
<Typography variant="body2" sx={{ minWidth: { xs: 45, sm: 60 }, color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
{item.label}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
height: 28,
|
||||
height: { xs: 24, sm: 28 },
|
||||
bgcolor: colors.gray[200],
|
||||
borderRadius: 1.5,
|
||||
overflow: 'hidden',
|
||||
@ -682,12 +680,12 @@ export default function AnalyticsPage() {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
pr: 1.5,
|
||||
pr: { xs: 1, sm: 1.5 },
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'white', fontWeight: 600, fontSize: 12 }}
|
||||
sx={{ color: 'white', fontWeight: 600, fontSize: { xs: 10, sm: 12 } }}
|
||||
>
|
||||
{item.percentage}%
|
||||
</Typography>
|
||||
@ -701,20 +699,20 @@ export default function AnalyticsPage() {
|
||||
|
||||
{/* Gender Distribution */}
|
||||
<Box>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: 2, color: colors.gray[900] }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: { xs: 1.5, sm: 2 }, color: colors.gray[900], fontSize: { xs: '0.9375rem', sm: '1rem' } }}>
|
||||
성별
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 1.25, sm: 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, color: colors.gray[700] }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1, sm: 1.5 } }}>
|
||||
<Typography variant="body2" sx={{ minWidth: { xs: 45, sm: 60 }, color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
{item.label}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
height: 28,
|
||||
height: { xs: 24, sm: 28 },
|
||||
bgcolor: colors.gray[200],
|
||||
borderRadius: 1.5,
|
||||
overflow: 'hidden',
|
||||
@ -728,12 +726,12 @@ export default function AnalyticsPage() {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
pr: 1.5,
|
||||
pr: { xs: 1, sm: 1.5 },
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'white', fontWeight: 600, fontSize: 12 }}
|
||||
sx={{ color: 'white', fontWeight: 600, fontSize: { xs: 10, sm: 12 } }}
|
||||
>
|
||||
{item.percentage}%
|
||||
</Typography>
|
||||
|
||||
@ -254,12 +254,12 @@ export default function EventDetailPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: { xs: 5, sm: 10 } }}>
|
||||
<Container maxWidth="lg" sx={{ pt: { xs: 4, sm: 8 }, pb: { xs: 4, sm: 8 }, px: { xs: 3, sm: 6, md: 10 } }}>
|
||||
{/* Event Header */}
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 4 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, fontSize: '2rem' }}>
|
||||
<Box sx={{ mb: { xs: 4, sm: 8 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: { xs: 2, sm: 4 } }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, fontSize: { xs: '1.25rem', sm: '2rem' } }}>
|
||||
{event.title}
|
||||
</Typography>
|
||||
<IconButton onClick={handleMenuOpen}>
|
||||
@ -282,61 +282,62 @@ export default function EventDetailPage() {
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap', mb: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1, sm: 2 }, flexWrap: 'wrap', mb: { xs: 2, sm: 4 } }}>
|
||||
<Chip
|
||||
label={getStatusText(event.status)}
|
||||
color={getStatusColor(event.status) as any}
|
||||
size="medium"
|
||||
sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' }, height: { xs: 24, sm: 32 } }}
|
||||
/>
|
||||
{event.isAIRecommended && (
|
||||
<Chip label="AI 추천" size="medium" sx={{ bgcolor: colors.purpleLight, color: colors.purple }} />
|
||||
<Chip label="AI 추천" size="medium" sx={{ bgcolor: colors.purpleLight, color: colors.purple, fontSize: { xs: '0.75rem', sm: '0.875rem' }, height: { xs: 24, sm: 32 } }} />
|
||||
)}
|
||||
{event.isUrgent && (
|
||||
<Chip
|
||||
icon={<Warning />}
|
||||
icon={<Warning sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }} />}
|
||||
label="마감임박"
|
||||
size="medium"
|
||||
sx={{ bgcolor: '#FEF3C7', color: '#92400E' }}
|
||||
sx={{ bgcolor: '#FEF3C7', color: '#92400E', fontSize: { xs: '0.75rem', sm: '0.875rem' }, height: { xs: 24, sm: 32 } }}
|
||||
/>
|
||||
)}
|
||||
{event.isPopular && (
|
||||
<Chip
|
||||
icon={<LocalFireDepartment />}
|
||||
icon={<LocalFireDepartment sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }} />}
|
||||
label="인기"
|
||||
size="medium"
|
||||
sx={{ bgcolor: '#FEE2E2', color: '#991B1B' }}
|
||||
sx={{ bgcolor: '#FEE2E2', color: '#991B1B', fontSize: { xs: '0.75rem', sm: '0.875rem' }, height: { xs: 24, sm: 32 } }}
|
||||
/>
|
||||
)}
|
||||
{event.isHighROI && (
|
||||
<Chip
|
||||
icon={<Star />}
|
||||
icon={<Star sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }} />}
|
||||
label="높은 ROI"
|
||||
size="medium"
|
||||
sx={{ bgcolor: '#DCFCE7', color: '#166534' }}
|
||||
sx={{ bgcolor: '#DCFCE7', color: '#166534', fontSize: { xs: '0.75rem', sm: '0.875rem' }, height: { xs: 24, sm: 32 } }}
|
||||
/>
|
||||
)}
|
||||
{event.isNew && (
|
||||
<Chip
|
||||
icon={<NewReleases />}
|
||||
icon={<NewReleases sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }} />}
|
||||
label="신규"
|
||||
size="medium"
|
||||
sx={{ bgcolor: '#DBEAFE', color: '#1E40AF' }}
|
||||
sx={{ bgcolor: '#DBEAFE', color: '#1E40AF', fontSize: { xs: '0.75rem', sm: '0.875rem' }, height: { xs: 24, sm: 32 } }}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Typography variant="body1" color="text.secondary" sx={{ fontSize: '1rem', mb: 4 }}>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' }, mb: { xs: 2, sm: 4 } }}>
|
||||
📅 {event.startDate} ~ {event.endDate}
|
||||
</Typography>
|
||||
|
||||
{/* 진행률 바 (진행중인 이벤트만) */}
|
||||
{event.status === 'active' && (
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: { xs: 1, sm: 2 } }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
|
||||
이벤트 진행률
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
|
||||
{Math.round(calculateProgress(event))}%
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -344,7 +345,7 @@ export default function EventDetailPage() {
|
||||
variant="determinate"
|
||||
value={calculateProgress(event)}
|
||||
sx={{
|
||||
height: 10,
|
||||
height: { xs: 6, sm: 10 },
|
||||
borderRadius: 5,
|
||||
bgcolor: colors.gray[100],
|
||||
'& .MuiLinearProgress-bar': {
|
||||
@ -358,16 +359,16 @@ export default function EventDetailPage() {
|
||||
</Box>
|
||||
|
||||
{/* Real-time KPIs */}
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 6 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
|
||||
<Box sx={{ mb: { xs: 4, sm: 10 } }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, alignItems: { xs: 'flex-start', sm: 'center' }, justifyContent: 'space-between', gap: { xs: 1.5, sm: 0 }, mb: { xs: 2.5, sm: 6 } }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, fontSize: { xs: '1rem', sm: '1.5rem' } }}>
|
||||
실시간 현황
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, color: 'success.main' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.75, sm: 1.5 }, color: 'success.main' }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
width: { xs: 6, sm: 10 },
|
||||
height: { xs: 6, sm: 10 },
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'success.main',
|
||||
animation: 'pulse 2s infinite',
|
||||
@ -377,33 +378,42 @@ export default function EventDetailPage() {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, fontSize: { xs: '0.6875rem', sm: '0.875rem' } }}>
|
||||
실시간 업데이트
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={6}>
|
||||
<Grid container spacing={{ xs: 1.5, sm: 6 }}>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
borderRadius: { xs: 2, sm: 4 },
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Group sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
<CardContent sx={{
|
||||
textAlign: 'center',
|
||||
py: { xs: 2, sm: 6 },
|
||||
px: { xs: 1, sm: 4 },
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
}}>
|
||||
<Group sx={{ fontSize: { xs: 20, sm: 40 }, mb: { xs: 0.5, sm: 2 }, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: { xs: 0.5, sm: 2 }, color: 'rgba(255,255,255,0.9)', fontSize: { xs: '0.5625rem', sm: '0.75rem' } }}>
|
||||
참여자
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '0.9375rem', sm: '1.75rem' }, lineHeight: 1.2 }}>
|
||||
{event.participants}명
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.8)', mt: 1, display: 'block' }}>
|
||||
목표: {event.targetParticipants}명 (
|
||||
{Math.round((event.participants / event.targetParticipants) * 100)}%)
|
||||
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.8)', mt: { xs: 0.25, sm: 1 }, display: 'block', fontSize: { xs: '0.5rem', sm: '0.75rem' }, lineHeight: 1.3, minHeight: { xs: '1.3em', sm: 'auto' } }}>
|
||||
목표: {event.targetParticipants}명<br />
|
||||
({Math.round((event.participants / event.targetParticipants) * 100)}%)
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@ -412,19 +422,29 @@ export default function EventDetailPage() {
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
borderRadius: { xs: 2, sm: 4 },
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, #93C5FD 100%)`,
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Visibility sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
<CardContent sx={{
|
||||
textAlign: 'center',
|
||||
py: { xs: 2, sm: 6 },
|
||||
px: { xs: 1, sm: 4 },
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
}}>
|
||||
<Visibility sx={{ fontSize: { xs: 20, sm: 40 }, mb: { xs: 0.5, sm: 2 }, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: { xs: 0.5, sm: 2 }, color: 'rgba(255,255,255,0.9)', fontSize: { xs: '0.5625rem', sm: '0.75rem' } }}>
|
||||
조회수
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '0.9375rem', sm: '1.75rem' }, lineHeight: 1.2 }}>
|
||||
{event.views}
|
||||
</Typography>
|
||||
<Box sx={{ mt: { xs: 0.25, sm: 1 }, minHeight: { xs: '1.3em', sm: 0 } }} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
@ -432,19 +452,29 @@ export default function EventDetailPage() {
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
borderRadius: { xs: 2, sm: 4 },
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.mint} 0%, #6EE7B7 100%)`,
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<TrendingUp sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
<CardContent sx={{
|
||||
textAlign: 'center',
|
||||
py: { xs: 2, sm: 6 },
|
||||
px: { xs: 1, sm: 4 },
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
}}>
|
||||
<TrendingUp sx={{ fontSize: { xs: 20, sm: 40 }, mb: { xs: 0.5, sm: 2 }, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: { xs: 0.5, sm: 2 }, color: 'rgba(255,255,255,0.9)', fontSize: { xs: '0.5625rem', sm: '0.75rem' } }}>
|
||||
ROI
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '0.9375rem', sm: '1.75rem' }, lineHeight: 1.2 }}>
|
||||
{event.roi}%
|
||||
</Typography>
|
||||
<Box sx={{ mt: { xs: 0.25, sm: 1 }, minHeight: { xs: '1.3em', sm: 0 } }} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
@ -452,19 +482,29 @@ export default function EventDetailPage() {
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
borderRadius: { xs: 2, sm: 4 },
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.orange} 0%, #FCD34D 100%)`,
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<TrendingUp sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
<CardContent sx={{
|
||||
textAlign: 'center',
|
||||
py: { xs: 2, sm: 6 },
|
||||
px: { xs: 1, sm: 4 },
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
}}>
|
||||
<TrendingUp sx={{ fontSize: { xs: 20, sm: 40 }, mb: { xs: 0.5, sm: 2 }, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: { xs: 0.5, sm: 2 }, color: 'rgba(255,255,255,0.9)', fontSize: { xs: '0.5625rem', sm: '0.75rem' } }}>
|
||||
전환율
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '0.9375rem', sm: '1.75rem' }, lineHeight: 1.2 }}>
|
||||
{event.conversion}%
|
||||
</Typography>
|
||||
<Box sx={{ mt: { xs: 0.25, sm: 1 }, minHeight: { xs: '1.3em', sm: 0 } }} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
@ -472,18 +512,18 @@ export default function EventDetailPage() {
|
||||
</Box>
|
||||
|
||||
{/* Chart Section - 참여 추이 */}
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
|
||||
<Box sx={{ mb: { xs: 5, sm: 10 } }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: { xs: 3, sm: 6 }, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
|
||||
📈 참여 추이
|
||||
</Typography>
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<Box sx={{ display: 'flex', gap: 2, mb: 6 }}>
|
||||
<Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 6 } }}>
|
||||
<Box sx={{ display: 'flex', gap: { xs: 1, sm: 2 }, mb: { xs: 3, sm: 6 } }}>
|
||||
<Button
|
||||
size="medium"
|
||||
variant={chartPeriod === '7d' ? 'contained' : 'outlined'}
|
||||
onClick={() => setChartPeriod('7d')}
|
||||
sx={{ borderRadius: 2 }}
|
||||
sx={{ borderRadius: 2, fontSize: { xs: '0.75rem', sm: '0.875rem' }, py: { xs: 0.5, sm: 1 }, px: { xs: 1.5, sm: 2 } }}
|
||||
>
|
||||
7일
|
||||
</Button>
|
||||
@ -491,7 +531,7 @@ export default function EventDetailPage() {
|
||||
size="medium"
|
||||
variant={chartPeriod === '30d' ? 'contained' : 'outlined'}
|
||||
onClick={() => setChartPeriod('30d')}
|
||||
sx={{ borderRadius: 2 }}
|
||||
sx={{ borderRadius: 2, fontSize: { xs: '0.75rem', sm: '0.875rem' }, py: { xs: 0.5, sm: 1 }, px: { xs: 1.5, sm: 2 } }}
|
||||
>
|
||||
30일
|
||||
</Button>
|
||||
@ -499,13 +539,13 @@ export default function EventDetailPage() {
|
||||
size="medium"
|
||||
variant={chartPeriod === 'all' ? 'contained' : 'outlined'}
|
||||
onClick={() => setChartPeriod('all')}
|
||||
sx={{ borderRadius: 2 }}
|
||||
sx={{ borderRadius: 2, fontSize: { xs: '0.75rem', sm: '0.875rem' }, py: { xs: 0.5, sm: 1 }, px: { xs: 1.5, sm: 2 } }}
|
||||
>
|
||||
전체
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ height: 320 }}>
|
||||
<Box sx={{ height: { xs: 200, sm: 320 } }}>
|
||||
<Line
|
||||
data={generateParticipationTrendData(chartPeriod)}
|
||||
options={{
|
||||
@ -544,14 +584,14 @@ export default function EventDetailPage() {
|
||||
</Box>
|
||||
|
||||
{/* Chart Section - 채널별 성과 & ROI 추이 */}
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
<Grid container spacing={{ xs: 2, sm: 6 }} sx={{ mb: { xs: 5, sm: 10 } }}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: { xs: 3, sm: 6 }, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
|
||||
📊 채널별 참여자
|
||||
</Typography>
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<Box sx={{ height: 320 }}>
|
||||
<Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 6 } }}>
|
||||
<Box sx={{ height: { xs: 200, sm: 320 } }}>
|
||||
<Bar
|
||||
data={channelPerformanceData}
|
||||
options={{
|
||||
@ -589,12 +629,12 @@ export default function EventDetailPage() {
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: { xs: 3, sm: 6 }, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
|
||||
💰 ROI 추이
|
||||
</Typography>
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<Box sx={{ height: 320 }}>
|
||||
<Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 6 } }}>
|
||||
<Box sx={{ height: { xs: 200, sm: 320 } }}>
|
||||
<Line
|
||||
data={roiTrendData}
|
||||
options={{
|
||||
@ -634,62 +674,62 @@ export default function EventDetailPage() {
|
||||
</Grid>
|
||||
|
||||
{/* Event Details */}
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
|
||||
<Box sx={{ mb: { xs: 5, sm: 10 } }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: { xs: 3, sm: 6 }, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
|
||||
🎯 이벤트 정보
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, p: 4 }}>
|
||||
<CardGiftcard sx={{ fontSize: 28, color: colors.pink }} />
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 2, sm: 4 } }}>
|
||||
<Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: { xs: 1.5, sm: 3 }, p: { xs: 3, sm: 4 } }}>
|
||||
<CardGiftcard sx={{ fontSize: { xs: 20, sm: 28 }, color: colors.pink }} />
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: { xs: 0.5, sm: 1 }, fontSize: { xs: '0.625rem', sm: '0.75rem' } }}>
|
||||
경품
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1.125rem' } }}>
|
||||
{event.prize}
|
||||
</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, p: 4 }}>
|
||||
<Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: { xs: 1.5, sm: 3 }, p: { xs: 3, sm: 4 } }}>
|
||||
{getMethodIcon(event.method)}
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: { xs: 0.5, sm: 1 }, fontSize: { xs: '0.625rem', sm: '0.75rem' } }}>
|
||||
참여 방법
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1.125rem' } }}>
|
||||
{event.method}
|
||||
</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, p: 4 }}>
|
||||
<AttachMoney sx={{ fontSize: 28, color: colors.mint }} />
|
||||
<Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: { xs: 1.5, sm: 3 }, p: { xs: 3, sm: 4 } }}>
|
||||
<AttachMoney sx={{ fontSize: { xs: 20, sm: 28 }, color: colors.mint }} />
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: { xs: 0.5, sm: 1 }, fontSize: { xs: '0.625rem', sm: '0.75rem' } }}>
|
||||
예상 비용
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1.125rem' } }}>
|
||||
{event.cost.toLocaleString()}원
|
||||
</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, p: 4 }}>
|
||||
<Share sx={{ fontSize: 28, color: colors.blue }} />
|
||||
<Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: { xs: 1.5, sm: 3 }, p: { xs: 3, sm: 4 } }}>
|
||||
<Share sx={{ fontSize: { xs: 20, sm: 28 }, color: colors.blue }} />
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: { xs: 1, sm: 2 }, fontSize: { xs: '0.625rem', sm: '0.75rem' } }}>
|
||||
배포 채널
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: { xs: 1, sm: 2 } }}>
|
||||
{event.channels.map((channel) => (
|
||||
<Chip
|
||||
key={channel}
|
||||
@ -699,6 +739,8 @@ export default function EventDetailPage() {
|
||||
bgcolor: colors.purpleLight,
|
||||
color: colors.purple,
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' },
|
||||
height: { xs: 24, sm: 32 },
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
@ -710,17 +752,17 @@ export default function EventDetailPage() {
|
||||
</Box>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
|
||||
<Box sx={{ mb: { xs: 5, sm: 10 } }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: { xs: 3, sm: 6 }, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
|
||||
⚡ 빠른 작업
|
||||
</Typography>
|
||||
<Grid container spacing={4}>
|
||||
<Grid container spacing={{ xs: 2, sm: 4 }}>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 4,
|
||||
borderRadius: { xs: 3, sm: 4 },
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.2s',
|
||||
'&:hover': {
|
||||
@ -730,9 +772,9 @@ export default function EventDetailPage() {
|
||||
}}
|
||||
onClick={() => router.push(`/events/${eventId}/participants`)}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<People sx={{ fontSize: 40, mb: 2, color: colors.pink }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 5 } }}>
|
||||
<People sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 1, sm: 2 }, color: colors.pink }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
|
||||
참여자 목록
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -743,7 +785,7 @@ export default function EventDetailPage() {
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 4,
|
||||
borderRadius: { xs: 3, sm: 4 },
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.2s',
|
||||
'&:hover': {
|
||||
@ -752,9 +794,9 @@ export default function EventDetailPage() {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<Edit sx={{ fontSize: 40, mb: 2, color: colors.blue }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 5 } }}>
|
||||
<Edit sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 1, sm: 2 }, color: colors.blue }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
|
||||
이벤트 수정
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -765,7 +807,7 @@ export default function EventDetailPage() {
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 4,
|
||||
borderRadius: { xs: 3, sm: 4 },
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.2s',
|
||||
'&:hover': {
|
||||
@ -774,9 +816,9 @@ export default function EventDetailPage() {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<Share sx={{ fontSize: 40, mb: 2, color: colors.purple }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 5 } }}>
|
||||
<Share sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 1, sm: 2 }, color: colors.purple }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
|
||||
공유하기
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -787,7 +829,7 @@ export default function EventDetailPage() {
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 4,
|
||||
borderRadius: { xs: 3, sm: 4 },
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.2s',
|
||||
'&:hover': {
|
||||
@ -796,9 +838,9 @@ export default function EventDetailPage() {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<Download sx={{ fontSize: 40, mb: 2, color: colors.mint }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 5 } }}>
|
||||
<Download sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 1, sm: 2 }, color: colors.mint }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
|
||||
데이터 다운
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -808,32 +850,32 @@ export default function EventDetailPage() {
|
||||
</Box>
|
||||
|
||||
{/* Recent Participants */}
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 6 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
|
||||
<Box sx={{ mb: { xs: 5, sm: 10 } }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, alignItems: { xs: 'flex-start', sm: 'center' }, justifyContent: 'space-between', gap: { xs: 2, sm: 0 }, mb: { xs: 3, sm: 6 } }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
|
||||
👥 최근 참여자
|
||||
</Typography>
|
||||
<Button
|
||||
size="medium"
|
||||
endIcon={<span className="material-icons" style={{ fontSize: 18 }}>chevron_right</span>}
|
||||
endIcon={<Box component="span" className="material-icons" sx={{ fontSize: { xs: 14, sm: 18 } }}>chevron_right</Box>}
|
||||
onClick={() => router.push(`/events/${eventId}/participants`)}
|
||||
sx={{ color: colors.pink, fontWeight: 600 }}
|
||||
sx={{ color: colors.pink, fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}
|
||||
>
|
||||
전체보기
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 6 } }}>
|
||||
{recentParticipants.map((participant, index) => (
|
||||
<Box key={index}>
|
||||
{index > 0 && <Divider sx={{ my: 4 }} />}
|
||||
{index > 0 && <Divider sx={{ my: { xs: 2, sm: 4 } }} />}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1.5, sm: 3 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
width: { xs: 32, sm: 48 },
|
||||
height: { xs: 32, sm: 48 },
|
||||
borderRadius: '50%',
|
||||
bgcolor: colors.purpleLight,
|
||||
display: 'flex',
|
||||
@ -841,18 +883,18 @@ export default function EventDetailPage() {
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Person sx={{ color: colors.purple, fontSize: 24 }} />
|
||||
<Person sx={{ color: colors.purple, fontSize: { xs: 16, sm: 24 } }} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: 0.5 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: { xs: 0.25, sm: 0.5 }, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
|
||||
{participant.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
|
||||
{participant.phone}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
|
||||
{participant.time}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
@ -36,11 +36,7 @@ import {
|
||||
Star,
|
||||
} from '@mui/icons-material';
|
||||
import Header from '@/shared/ui/Header';
|
||||
import {
|
||||
cardStyles,
|
||||
colors,
|
||||
responsiveText,
|
||||
} from '@/shared/lib/button-styles';
|
||||
import { cardStyles, colors, responsiveText } from '@/shared/lib/button-styles';
|
||||
|
||||
// Mock 데이터
|
||||
const mockEvents = [
|
||||
@ -208,7 +204,7 @@ export default function EventsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const calculateProgress = (event: typeof mockEvents[0]) => {
|
||||
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();
|
||||
@ -237,9 +233,12 @@ export default function EventsPage() {
|
||||
minHeight: '100vh',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
<Container
|
||||
maxWidth="lg"
|
||||
sx={{ pt: { xs: 4, sm: 8 }, pb: { xs: 4, sm: 6 }, px: { xs: 3, sm: 6, md: 10 } }}
|
||||
>
|
||||
{/* Summary Statistics */}
|
||||
<Grid container spacing={4} sx={{ mb: 8 }}>
|
||||
<Grid container spacing={{ xs: 2, sm: 4 }} sx={{ mb: { xs: 4, sm: 8 } }}>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
@ -249,30 +248,37 @@ export default function EventsPage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<Event sx={{
|
||||
fontSize: 32,
|
||||
<CardContent
|
||||
sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
|
||||
>
|
||||
<Event
|
||||
sx={{
|
||||
fontSize: { xs: 24, sm: 32 },
|
||||
color: colors.gray[900],
|
||||
mb: 1,
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '1.75rem',
|
||||
fontSize: { xs: '1.25rem', sm: '1.75rem' },
|
||||
mb: 0.5,
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{stats.total}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: colors.gray[700],
|
||||
fontSize: '0.875rem',
|
||||
fontSize: { xs: '0.6875rem', sm: '0.875rem' },
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
전체 이벤트
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -287,30 +293,37 @@ export default function EventsPage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<LocalFireDepartment sx={{
|
||||
fontSize: 32,
|
||||
<CardContent
|
||||
sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
|
||||
>
|
||||
<LocalFireDepartment
|
||||
sx={{
|
||||
fontSize: { xs: 24, sm: 32 },
|
||||
color: colors.gray[900],
|
||||
mb: 1,
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '1.75rem',
|
||||
fontSize: { xs: '1.25rem', sm: '1.75rem' },
|
||||
mb: 0.5,
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{stats.active}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: colors.gray[700],
|
||||
fontSize: '0.875rem',
|
||||
fontSize: { xs: '0.6875rem', sm: '0.875rem' },
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
진행중
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -325,30 +338,37 @@ export default function EventsPage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<People sx={{
|
||||
fontSize: 32,
|
||||
<CardContent
|
||||
sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
|
||||
>
|
||||
<People
|
||||
sx={{
|
||||
fontSize: { xs: 24, sm: 32 },
|
||||
color: colors.gray[900],
|
||||
mb: 1,
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '1.75rem',
|
||||
fontSize: { xs: '1.25rem', sm: '1.75rem' },
|
||||
mb: 0.5,
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{stats.totalParticipants}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: colors.gray[700],
|
||||
fontSize: '0.875rem',
|
||||
fontSize: { xs: '0.6875rem', sm: '0.875rem' },
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
총 참여자
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -363,30 +383,37 @@ export default function EventsPage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<TrendingUp sx={{
|
||||
fontSize: 32,
|
||||
<CardContent
|
||||
sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
|
||||
>
|
||||
<TrendingUp
|
||||
sx={{
|
||||
fontSize: { xs: 24, sm: 32 },
|
||||
color: colors.gray[900],
|
||||
mb: 1,
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '1.75rem',
|
||||
fontSize: { xs: '1.25rem', sm: '1.75rem' },
|
||||
mb: 0.5,
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{stats.avgROI}%
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: colors.gray[700],
|
||||
fontSize: '0.875rem',
|
||||
fontSize: { xs: '0.6875rem', sm: '0.875rem' },
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
평균 ROI
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -395,7 +422,7 @@ export default function EventsPage() {
|
||||
</Grid>
|
||||
|
||||
{/* Search Section */}
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<Box sx={{ mb: { xs: 4, sm: 8 } }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="이벤트명 검색..."
|
||||
@ -404,7 +431,7 @@ export default function EventsPage() {
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Search sx={{ color: colors.gray[400] }} />
|
||||
<Search sx={{ color: colors.gray[400], fontSize: { xs: 20, sm: 24 } }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
@ -412,6 +439,7 @@ export default function EventsPage() {
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: 3,
|
||||
bgcolor: 'white',
|
||||
fontSize: { xs: '0.875rem', sm: '1rem' },
|
||||
'& fieldset': {
|
||||
borderColor: colors.gray[200],
|
||||
},
|
||||
@ -427,11 +455,10 @@ export default function EventsPage() {
|
||||
</Box>
|
||||
|
||||
{/* Filters */}
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
|
||||
<FilterList sx={{ color: colors.purple }} />
|
||||
<Box sx={{ mb: { xs: 4, sm: 8 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 4 }, flexWrap: 'wrap' }}>
|
||||
<FormControl sx={{ flex: 1, minWidth: 120 }}>
|
||||
<InputLabel>상태</InputLabel>
|
||||
<InputLabel sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>상태</InputLabel>
|
||||
<Select
|
||||
value={statusFilter}
|
||||
label="상태"
|
||||
@ -439,6 +466,7 @@ export default function EventsPage() {
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
bgcolor: 'white',
|
||||
fontSize: { xs: '0.875rem', sm: '1rem' },
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[200],
|
||||
},
|
||||
@ -450,14 +478,14 @@ export default function EventsPage() {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem value="all">전체</MenuItem>
|
||||
<MenuItem value="active">진행중</MenuItem>
|
||||
<MenuItem value="scheduled">예정</MenuItem>
|
||||
<MenuItem value="ended">종료</MenuItem>
|
||||
<MenuItem value="all" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>전체</MenuItem>
|
||||
<MenuItem value="active" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>진행중</MenuItem>
|
||||
<MenuItem value="scheduled" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>예정</MenuItem>
|
||||
<MenuItem value="ended" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>종료</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl sx={{ flex: 1, minWidth: 140 }}>
|
||||
<InputLabel>기간</InputLabel>
|
||||
<InputLabel sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>기간</InputLabel>
|
||||
<Select
|
||||
value={periodFilter}
|
||||
label="기간"
|
||||
@ -465,6 +493,7 @@ export default function EventsPage() {
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
bgcolor: 'white',
|
||||
fontSize: { xs: '0.875rem', sm: '1rem' },
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[200],
|
||||
},
|
||||
@ -476,23 +505,23 @@ export default function EventsPage() {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem value="1month">최근 1개월</MenuItem>
|
||||
<MenuItem value="3months">최근 3개월</MenuItem>
|
||||
<MenuItem value="6months">최근 6개월</MenuItem>
|
||||
<MenuItem value="1year">최근 1년</MenuItem>
|
||||
<MenuItem value="all">전체</MenuItem>
|
||||
<MenuItem value="1month" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 1개월</MenuItem>
|
||||
<MenuItem value="3months" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 3개월</MenuItem>
|
||||
<MenuItem value="6months" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 6개월</MenuItem>
|
||||
<MenuItem value="1year" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 1년</MenuItem>
|
||||
<MenuItem value="all" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>전체</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Sorting */}
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<Box sx={{ mb: { xs: 4, sm: 8 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" sx={{ ...responsiveText.body2, fontWeight: 600 }}>
|
||||
정렬
|
||||
</Typography>
|
||||
<FormControl sx={{ width: 160 }}>
|
||||
<FormControl sx={{ width: { xs: 140, sm: 160 } }}>
|
||||
<Select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as SortBy)}
|
||||
@ -500,6 +529,7 @@ export default function EventsPage() {
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
bgcolor: 'white',
|
||||
fontSize: { xs: '0.8125rem', sm: '0.875rem' },
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[200],
|
||||
},
|
||||
@ -511,16 +541,16 @@ export default function EventsPage() {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem value="latest">최신순</MenuItem>
|
||||
<MenuItem value="participants">참여자순</MenuItem>
|
||||
<MenuItem value="roi">투자대비수익률순</MenuItem>
|
||||
<MenuItem value="latest" sx={{ fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>최신순</MenuItem>
|
||||
<MenuItem value="participants" sx={{ fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>참여자순</MenuItem>
|
||||
<MenuItem value="roi" sx={{ fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>투자대비수익률순</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Event List */}
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Box sx={{ mb: { xs: 5, sm: 10 } }}>
|
||||
{pageEvents.length === 0 ? (
|
||||
<Card
|
||||
elevation={0}
|
||||
@ -528,22 +558,26 @@ export default function EventsPage() {
|
||||
...cardStyles.default,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 20 }}>
|
||||
<Box sx={{ color: colors.gray[300], mb: 3 }}>
|
||||
<span className="material-icons" style={{ fontSize: 72 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 10, sm: 20 } }}>
|
||||
<Box sx={{ color: colors.gray[300], mb: { xs: 2, sm: 3 } }}>
|
||||
<Box
|
||||
component="span"
|
||||
className="material-icons"
|
||||
sx={{ fontSize: { xs: 48, sm: 72 } }}
|
||||
>
|
||||
event_busy
|
||||
</span>
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ mb: 2, color: colors.gray[700] }}>
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ mb: { xs: 1, sm: 2 }, color: colors.gray[700], fontSize: { xs: '1rem', sm: '1.25rem' } }}>
|
||||
검색 결과가 없습니다
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[500] }}>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[500], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
|
||||
다른 검색 조건으로 다시 시도해보세요
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 3, sm: 6 } }}>
|
||||
{pageEvents.map((event) => (
|
||||
<Card
|
||||
key={event.id}
|
||||
@ -553,26 +587,31 @@ export default function EventsPage() {
|
||||
}}
|
||||
onClick={() => handleEventClick(event.id)}
|
||||
>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 6, md: 8 } }}>
|
||||
{/* Header with Badges */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Box sx={{ mb: { xs: 2, sm: 4 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'start',
|
||||
mb: 3,
|
||||
mb: { xs: 2, sm: 3 },
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
gap: { xs: 1.5, sm: 0 },
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], flex: 1 }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{ fontWeight: 700, color: colors.gray[900], flex: 1, fontSize: { xs: '1rem', sm: '1.25rem' } }}
|
||||
>
|
||||
{event.title}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
px: 2.5,
|
||||
py: 0.75,
|
||||
px: { xs: 2, sm: 2.5 },
|
||||
py: { xs: 0.5, sm: 0.75 },
|
||||
borderRadius: 2,
|
||||
fontSize: '0.875rem',
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' },
|
||||
fontWeight: 600,
|
||||
...getStatusStyle(event.status),
|
||||
}}
|
||||
@ -587,59 +626,63 @@ export default function EventsPage() {
|
||||
</Box>
|
||||
|
||||
{/* Status Badges */}
|
||||
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
|
||||
<Box sx={{ display: 'flex', gap: { xs: 1, sm: 1.5 }, flexWrap: 'wrap' }}>
|
||||
{event.isUrgent && (
|
||||
<Chip
|
||||
icon={<Warning sx={{ fontSize: 16 }} />}
|
||||
icon={<Warning sx={{ fontSize: { xs: 14, sm: 16 } }} />}
|
||||
label="마감임박"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#FEF3C7',
|
||||
color: '#92400E',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
fontSize: { xs: '0.6875rem', sm: '0.75rem' },
|
||||
height: { xs: 24, sm: 28 },
|
||||
'& .MuiChip-icon': { color: '#92400E' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{event.isPopular && (
|
||||
<Chip
|
||||
icon={<LocalFireDepartment sx={{ fontSize: 16 }} />}
|
||||
icon={<LocalFireDepartment sx={{ fontSize: { xs: 14, sm: 16 } }} />}
|
||||
label="인기"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#FEE2E2',
|
||||
color: '#991B1B',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
fontSize: { xs: '0.6875rem', sm: '0.75rem' },
|
||||
height: { xs: 24, sm: 28 },
|
||||
'& .MuiChip-icon': { color: '#991B1B' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{event.isHighROI && (
|
||||
<Chip
|
||||
icon={<Star sx={{ fontSize: 16 }} />}
|
||||
icon={<Star sx={{ fontSize: { xs: 14, sm: 16 } }} />}
|
||||
label="높은 ROI"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#DCFCE7',
|
||||
color: '#166534',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
fontSize: { xs: '0.6875rem', sm: '0.75rem' },
|
||||
height: { xs: 24, sm: 28 },
|
||||
'& .MuiChip-icon': { color: '#166534' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{event.isNew && (
|
||||
<Chip
|
||||
icon={<NewReleases sx={{ fontSize: 16 }} />}
|
||||
icon={<NewReleases sx={{ fontSize: { xs: 14, sm: 16 } }} />}
|
||||
label="신규"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#DBEAFE',
|
||||
color: '#1E40AF',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
fontSize: { xs: '0.6875rem', sm: '0.75rem' },
|
||||
height: { xs: 24, sm: 28 },
|
||||
'& .MuiChip-icon': { color: '#1E40AF' },
|
||||
}}
|
||||
/>
|
||||
@ -649,12 +692,25 @@ export default function EventsPage() {
|
||||
|
||||
{/* 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' }}>
|
||||
<Box sx={{ mb: { xs: 2, sm: 4 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: colors.gray[600], fontSize: { xs: '0.6875rem', sm: '0.75rem' } }}
|
||||
>
|
||||
이벤트 진행률
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ color: colors.gray[700], fontWeight: 600, fontSize: '0.75rem' }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: colors.gray[700], fontWeight: 600, fontSize: { xs: '0.6875rem', sm: '0.75rem' } }}
|
||||
>
|
||||
{Math.round(calculateProgress(event))}%
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -662,7 +718,7 @@ export default function EventsPage() {
|
||||
variant="determinate"
|
||||
value={calculateProgress(event)}
|
||||
sx={{
|
||||
height: 8,
|
||||
height: { xs: 6, sm: 8 },
|
||||
borderRadius: 4,
|
||||
bgcolor: colors.gray[200],
|
||||
'& .MuiLinearProgress-bar': {
|
||||
@ -675,19 +731,33 @@ export default function EventsPage() {
|
||||
)}
|
||||
|
||||
{/* Event Info and Stats Container */}
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-end',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
gap: { xs: 3, sm: 0 },
|
||||
}}
|
||||
>
|
||||
{/* Left: Event Info */}
|
||||
<Box>
|
||||
<Box sx={{ mb: 4, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box sx={{ width: { xs: '100%', sm: 'auto' } }}>
|
||||
<Box sx={{ mb: { xs: 2, sm: 4 }, display: 'flex', flexDirection: 'column', gap: { xs: 1.5, sm: 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' }}>
|
||||
<CardGiftcard sx={{ fontSize: { xs: 16, sm: 18 }, color: colors.pink }} />
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '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' }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}
|
||||
>
|
||||
{event.method}
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -700,7 +770,8 @@ export default function EventsPage() {
|
||||
color: colors.gray[600],
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
gap: { xs: 1.5, sm: 2 },
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' },
|
||||
}}
|
||||
>
|
||||
<span>📅</span>
|
||||
@ -711,38 +782,58 @@ export default function EventsPage() {
|
||||
</Box>
|
||||
|
||||
{/* Right: Stats */}
|
||||
<Box sx={{ display: 'flex', gap: 8, textAlign: 'right' }}>
|
||||
<Box sx={{ display: 'flex', gap: { xs: 4, sm: 8 }, textAlign: 'right', width: { xs: '100%', sm: 'auto' }, justifyContent: { xs: 'flex-start', sm: 'flex-end' } }}>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 1, color: colors.gray[600], fontWeight: 500 }}
|
||||
sx={{ mb: { xs: 0.5, sm: 1 }, color: colors.gray[600], fontWeight: 500, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
|
||||
>
|
||||
참여자
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.gray[900], mb: 0.5 }}>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{ fontWeight: 700, color: colors.gray[900], mb: 0.5, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}
|
||||
>
|
||||
{event.participants.toLocaleString()}
|
||||
<Typography
|
||||
component="span"
|
||||
variant="body2"
|
||||
sx={{ ml: 0.5, color: colors.gray[600] }}
|
||||
sx={{ ml: 0.5, color: colors.gray[600], fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
|
||||
>
|
||||
명
|
||||
</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
|
||||
variant="caption"
|
||||
sx={{ color: colors.gray[500], fontSize: { xs: '0.6875rem', sm: '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 }}
|
||||
sx={{ mb: { xs: 0.5, sm: 1 }, color: colors.gray[600], fontWeight: 500, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
|
||||
>
|
||||
ROI
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: event.roi >= 400 ? colors.mint : event.roi >= 200 ? colors.orange : colors.gray[500] }}>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
fontSize: { xs: '1.125rem', sm: '1.5rem' },
|
||||
color:
|
||||
event.roi >= 400
|
||||
? colors.mint
|
||||
: event.roi >= 200
|
||||
? colors.orange
|
||||
: colors.gray[500],
|
||||
}}
|
||||
>
|
||||
{event.roi}%
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
@ -88,14 +88,14 @@ export default function HomePage() {
|
||||
minHeight: '100vh',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
<Container maxWidth="lg" sx={{ pt: { xs: 4, sm: 8 }, pb: { xs: 4, sm: 6 }, px: { xs: 3, sm: 6, md: 10 } }}>
|
||||
{/* Welcome Section */}
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Box sx={{ mb: { xs: 5, sm: 10 } }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
...responsiveText.h2,
|
||||
mb: 4,
|
||||
mb: { xs: 2, sm: 4 },
|
||||
}}
|
||||
>
|
||||
안녕하세요, {mockUser.name}님! 👋
|
||||
@ -106,7 +106,7 @@ export default function HomePage() {
|
||||
</Box>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
<Grid container spacing={{ xs: 3, sm: 6 }} sx={{ mb: { xs: 5, sm: 10 } }}>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Card
|
||||
elevation={0}
|
||||
@ -116,22 +116,22 @@ export default function HomePage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 4, sm: 6 }, px: { xs: 2, sm: 4 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
width: { xs: 48, sm: 64 },
|
||||
height: { xs: 48, sm: 64 },
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'rgba(0, 0, 0, 0.05)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 3,
|
||||
mb: { xs: 2, sm: 3 },
|
||||
}}
|
||||
>
|
||||
<Celebration sx={{
|
||||
fontSize: 32,
|
||||
fontSize: { xs: 24, sm: 32 },
|
||||
color: colors.gray[900],
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
@ -139,10 +139,10 @@ export default function HomePage() {
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 1,
|
||||
mb: 0.5,
|
||||
color: colors.gray[700],
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' },
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}
|
||||
>
|
||||
@ -153,7 +153,7 @@ export default function HomePage() {
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '2.25rem',
|
||||
fontSize: { xs: '1.5rem', sm: '2.25rem' },
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
@ -171,22 +171,22 @@ export default function HomePage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 4, sm: 6 }, px: { xs: 2, sm: 4 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
width: { xs: 48, sm: 64 },
|
||||
height: { xs: 48, sm: 64 },
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'rgba(0, 0, 0, 0.05)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 3,
|
||||
mb: { xs: 2, sm: 3 },
|
||||
}}
|
||||
>
|
||||
<Group sx={{
|
||||
fontSize: 32,
|
||||
fontSize: { xs: 24, sm: 32 },
|
||||
color: colors.gray[900],
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
@ -194,10 +194,10 @@ export default function HomePage() {
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 1,
|
||||
mb: 0.5,
|
||||
color: colors.gray[700],
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' },
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}
|
||||
>
|
||||
@ -208,7 +208,7 @@ export default function HomePage() {
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '2.25rem',
|
||||
fontSize: { xs: '1.5rem', sm: '2.25rem' },
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
@ -226,22 +226,22 @@ export default function HomePage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 4, sm: 6 }, px: { xs: 2, sm: 4 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
width: { xs: 48, sm: 64 },
|
||||
height: { xs: 48, sm: 64 },
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'rgba(0, 0, 0, 0.05)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 3,
|
||||
mb: { xs: 2, sm: 3 },
|
||||
}}
|
||||
>
|
||||
<TrendingUp sx={{
|
||||
fontSize: 32,
|
||||
fontSize: { xs: 24, sm: 32 },
|
||||
color: colors.gray[900],
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
@ -249,10 +249,10 @@ export default function HomePage() {
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 1,
|
||||
mb: 0.5,
|
||||
color: colors.gray[700],
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' },
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}
|
||||
>
|
||||
@ -263,7 +263,7 @@ export default function HomePage() {
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '2.25rem',
|
||||
fontSize: { xs: '1.5rem', sm: '2.25rem' },
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
@ -275,11 +275,11 @@ export default function HomePage() {
|
||||
</Grid>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 6 }}>
|
||||
<Box sx={{ mb: { xs: 5, sm: 10 } }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: { xs: 3, sm: 6 } }}>
|
||||
빠른 시작
|
||||
</Typography>
|
||||
<Grid container spacing={6}>
|
||||
<Grid container spacing={{ xs: 3, sm: 6 }}>
|
||||
<Grid item xs={6} sm={6}>
|
||||
<Card
|
||||
elevation={0}
|
||||
@ -288,24 +288,24 @@ export default function HomePage() {
|
||||
}}
|
||||
onClick={handleCreateEvent}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 4, sm: 6 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: '20px',
|
||||
width: { xs: 56, sm: 72 },
|
||||
height: { xs: 56, sm: 72 },
|
||||
borderRadius: { xs: '16px', sm: '20px' },
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 3,
|
||||
mb: { xs: 2, sm: 3 },
|
||||
boxShadow: '0 4px 14px 0 rgba(167, 139, 250, 0.39)',
|
||||
}}
|
||||
>
|
||||
<Add sx={{ fontSize: 36, color: 'white' }} />
|
||||
<Add sx={{ fontSize: { xs: 28, sm: 36 }, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: '1.125rem' }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: { xs: '0.875rem', sm: '1.125rem' } }}>
|
||||
새 이벤트
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -319,24 +319,24 @@ export default function HomePage() {
|
||||
}}
|
||||
onClick={handleViewAnalytics}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: { xs: 4, sm: 6 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: '20px',
|
||||
width: { xs: 56, sm: 72 },
|
||||
height: { xs: 56, sm: 72 },
|
||||
borderRadius: { xs: '16px', sm: '20px' },
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.mint} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 3,
|
||||
mb: { xs: 2, sm: 3 },
|
||||
boxShadow: '0 4px 14px 0 rgba(96, 165, 250, 0.39)',
|
||||
}}
|
||||
>
|
||||
<Analytics sx={{ fontSize: 36, color: 'white' }} />
|
||||
<Analytics sx={{ fontSize: { xs: 28, sm: 36 }, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: '1.125rem' }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: { xs: '0.875rem', sm: '1.125rem' } }}>
|
||||
성과분석
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -346,20 +346,21 @@ export default function HomePage() {
|
||||
</Box>
|
||||
|
||||
{/* Active Events */}
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Box sx={{ mb: { xs: 5, sm: 10 } }}>
|
||||
<Box
|
||||
sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 6 }}
|
||||
sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: { xs: 3, sm: 6 } }}
|
||||
>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3 }}>
|
||||
진행 중인 이벤트
|
||||
</Typography>
|
||||
<Button
|
||||
size="medium"
|
||||
endIcon={<span className="material-icons">chevron_right</span>}
|
||||
size="small"
|
||||
endIcon={<span className="material-icons" style={{ fontSize: '18px' }}>chevron_right</span>}
|
||||
onClick={() => router.push('/events')}
|
||||
sx={{
|
||||
color: colors.purple,
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '0.8125rem', sm: '0.875rem' },
|
||||
'&:hover': { bgcolor: 'rgba(167, 139, 250, 0.08)' },
|
||||
}}
|
||||
>
|
||||
@ -402,7 +403,7 @@ export default function HomePage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 3, sm: 6 } }}>
|
||||
{activeEvents.map((event) => (
|
||||
<Card
|
||||
key={event.id}
|
||||
@ -412,27 +413,29 @@ export default function HomePage() {
|
||||
}}
|
||||
onClick={() => handleEventClick(event.id)}
|
||||
>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<CardContent sx={{ p: { xs: 4, sm: 6, md: 8 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'start',
|
||||
mb: 6,
|
||||
mb: { xs: 3, sm: 6 },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], fontSize: { xs: '1rem', sm: '1.25rem' } }}>
|
||||
{event.title}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
px: 2.5,
|
||||
px: { xs: 2, sm: 2.5 },
|
||||
py: 0.75,
|
||||
bgcolor: colors.mint,
|
||||
color: 'white',
|
||||
borderRadius: 2,
|
||||
fontSize: '0.875rem',
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' },
|
||||
fontWeight: 600,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{event.status}
|
||||
@ -441,11 +444,12 @@ export default function HomePage() {
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 6,
|
||||
mb: { xs: 3, sm: 6 },
|
||||
color: colors.gray[600],
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
gap: 1,
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' },
|
||||
}}
|
||||
>
|
||||
<span>📅</span>
|
||||
@ -453,23 +457,23 @@ export default function HomePage() {
|
||||
{event.startDate} ~ {event.endDate}
|
||||
</span>
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 12 }}>
|
||||
<Box sx={{ display: 'flex', gap: { xs: 6, sm: 12 } }}>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}
|
||||
sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
|
||||
>
|
||||
참여자
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{ fontWeight: 700, color: colors.gray[900] }}
|
||||
sx={{ fontWeight: 700, color: colors.gray[900], fontSize: { xs: '1.125rem', sm: '1.5rem' } }}
|
||||
>
|
||||
{event.participants.toLocaleString()}
|
||||
<Typography
|
||||
component="span"
|
||||
variant="body2"
|
||||
sx={{ ml: 0.5, color: colors.gray[600] }}
|
||||
sx={{ ml: 0.5, color: colors.gray[600], fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
|
||||
>
|
||||
명
|
||||
</Typography>
|
||||
@ -478,11 +482,11 @@ export default function HomePage() {
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}
|
||||
sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
|
||||
>
|
||||
ROI
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
|
||||
{event.roi}%
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -495,8 +499,8 @@ export default function HomePage() {
|
||||
</Box>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 6 }}>
|
||||
<Box sx={{ mb: { xs: 5, sm: 10 } }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: { xs: 3, sm: 6 } }}>
|
||||
최근 활동
|
||||
</Typography>
|
||||
<Card
|
||||
@ -505,24 +509,24 @@ export default function HomePage() {
|
||||
...cardStyles.default,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<CardContent sx={{ p: { xs: 4, sm: 6, md: 8 } }}>
|
||||
{mockActivities.map((activity, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 4,
|
||||
pt: index > 0 ? 6 : 0,
|
||||
mt: index > 0 ? 6 : 0,
|
||||
gap: { xs: 2, sm: 4 },
|
||||
pt: index > 0 ? { xs: 3, sm: 6 } : 0,
|
||||
mt: index > 0 ? { xs: 3, sm: 6 } : 0,
|
||||
borderTop: index > 0 ? 1 : 0,
|
||||
borderColor: colors.gray[200],
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '14px',
|
||||
width: { xs: 40, sm: 48 },
|
||||
height: { xs: 40, sm: 48 },
|
||||
borderRadius: { xs: '12px', sm: '14px' },
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@ -530,16 +534,16 @@ export default function HomePage() {
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<activity.icon sx={{ fontSize: 24, color: 'white' }} />
|
||||
<activity.icon sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
|
||||
</Box>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ fontWeight: 600, color: colors.gray[900], mb: 0.5 }}
|
||||
sx={{ fontWeight: 600, color: colors.gray[900], mb: 0.5, fontSize: { xs: '0.8125rem', sm: '1rem' } }}
|
||||
>
|
||||
{activity.text}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[500] }}>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[500], fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
|
||||
{activity.time}
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -554,10 +558,10 @@ export default function HomePage() {
|
||||
<Fab
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
bottom: { xs: 80, sm: 90 },
|
||||
right: { xs: 20, sm: 32 },
|
||||
width: { xs: 64, sm: 72 },
|
||||
height: { xs: 64, sm: 72 },
|
||||
bottom: { xs: 72, sm: 90 },
|
||||
right: { xs: 16, sm: 32 },
|
||||
width: { xs: 56, sm: 72 },
|
||||
height: { xs: 56, sm: 72 },
|
||||
...getGradientButtonStyle('primary'),
|
||||
boxShadow:
|
||||
'0 10px 25px -5px rgba(167, 139, 250, 0.5), 0 8px 10px -6px rgba(167, 139, 250, 0.5)',
|
||||
@ -568,7 +572,7 @@ export default function HomePage() {
|
||||
}}
|
||||
onClick={handleCreateEvent}
|
||||
>
|
||||
<Add sx={{ color: 'white', fontSize: { xs: 28, sm: 32 } }} />
|
||||
<Add sx={{ color: 'white', fontSize: { xs: 24, sm: 32 } }} />
|
||||
</Fab>
|
||||
</Box>
|
||||
</>
|
||||
|
||||
@ -118,39 +118,57 @@ export const containerStyles = {
|
||||
},
|
||||
};
|
||||
|
||||
// 공통 반응형 텍스트 스타일
|
||||
// 공통 반응형 텍스트 스타일 (모바일 최적화)
|
||||
export const responsiveText = {
|
||||
h1: {
|
||||
fontSize: { xs: '1.875rem', sm: '2.25rem', md: '3rem' },
|
||||
fontSize: { xs: '1.5rem', sm: '2.25rem', md: '3rem' }, // 모바일 30px → 24px
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
letterSpacing: '-0.025em',
|
||||
},
|
||||
h2: {
|
||||
fontSize: { xs: '1.5rem', sm: '1.875rem', md: '2.25rem' },
|
||||
fontSize: { xs: '1.25rem', sm: '1.875rem', md: '2.25rem' }, // 모바일 24px → 20px
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
letterSpacing: '-0.025em',
|
||||
},
|
||||
h3: {
|
||||
fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.875rem' },
|
||||
fontSize: { xs: '1.125rem', sm: '1.5rem', md: '1.875rem' }, // 모바일 20px → 18px
|
||||
fontWeight: 600,
|
||||
color: colors.gray[900],
|
||||
letterSpacing: '-0.025em',
|
||||
},
|
||||
h4: {
|
||||
fontSize: { xs: '1.125rem', sm: '1.25rem', md: '1.5rem' },
|
||||
fontSize: { xs: '1rem', sm: '1.25rem', md: '1.5rem' }, // 모바일 18px → 16px
|
||||
fontWeight: 600,
|
||||
color: colors.gray[800],
|
||||
},
|
||||
body1: {
|
||||
fontSize: { xs: '0.875rem', sm: '1rem' },
|
||||
fontSize: { xs: '0.8125rem', sm: '1rem' }, // 모바일 14px → 13px
|
||||
color: colors.gray[700],
|
||||
lineHeight: 1.6,
|
||||
},
|
||||
body2: {
|
||||
fontSize: { xs: '0.8125rem', sm: '0.875rem' },
|
||||
color: colors.gray[600],
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
body2: {
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' }, // 모바일 13px → 12px
|
||||
color: colors.gray[600],
|
||||
lineHeight: 1.4,
|
||||
},
|
||||
};
|
||||
|
||||
// 모바일 최적화 간격 (px 단위, MUI sx에서 사용)
|
||||
export const spacing = {
|
||||
mobile: {
|
||||
xs: 2, // 8px
|
||||
sm: 3, // 12px
|
||||
md: 4, // 16px
|
||||
lg: 5, // 20px
|
||||
xl: 6, // 24px
|
||||
},
|
||||
desktop: {
|
||||
xs: 4, // 16px
|
||||
sm: 6, // 24px
|
||||
md: 8, // 32px
|
||||
lg: 10, // 40px
|
||||
xl: 12, // 48px
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user