shared-dg05-dodari/kt-event-marketing-fe
7
0
Fork 0
mirror of https://github.com/ktds-dg0501/kt-event-marketing-fe.git synced 2025-12-06 08:16:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3 from ktds-dg0501/feature/design

Browse Source 
Feature/design
This commit is contained in:
Cherry Kim 2025-10-28 09:46:48 +09:00 committed by GitHub
commit a90fd81c46
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 1084 additions and 877 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
src/app/(main)/analytics/page.tsx
View File

@ -135,24 +135,24 @@ export default function AnalyticsPage() {
minHeight: '100vh', 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 */} {/* Title with Real-time Indicator */}
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
mb: 10, mb: { xs: 4, sm: 10 },
}} }}
> >
<Typography variant="h5" sx={{ ...responsiveText.h3 }}> <Typography variant="h5" sx={{ ...responsiveText.h3 }}>
📊 요약 (실시간) 📊 요약 (실시간)
</Typography> </Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.5, sm: 1 } }}>
<Box <Box
sx={{ sx={{
width: 8, width: { xs: 6, sm: 8 },
height: 8, height: { xs: 6, sm: 8 },
borderRadius: '50%', borderRadius: '50%',
bgcolor: colors.mint, bgcolor: colors.mint,
animation: 'pulse 2s infinite', animation: 'pulse 2s infinite',
@ -169,7 +169,7 @@ export default function AnalyticsPage() {
</Box> </Box>
{/* Summary KPI Cards */} {/* 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}> <Grid item xs={6} md={3}>
<Card <Card
elevation={0} elevation={0}
@ -179,26 +179,26 @@ export default function AnalyticsPage() {
borderColor: 'transparent', 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 <Typography
variant="body2" variant="body2"
sx={{ sx={{
mb: 2, mb: { xs: 1, sm: 2 },
color: 'rgba(255, 255, 255, 0.9)', color: 'rgba(255, 255, 255, 0.9)',
fontWeight: 500, fontWeight: 500,
fontSize: '1rem', fontSize: { xs: '0.75rem', sm: '1rem' },
}} }}
> >
참여자 수 참여자 수
</Typography> </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} {summary.participants}
</Typography> </Typography>
<Typography <Typography
variant="caption" 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> </Typography>
</CardContent> </CardContent>
</Card> </Card>
@ -212,27 +212,26 @@ export default function AnalyticsPage() {
borderColor: 'transparent', 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 <Typography
variant="body2" variant="body2"
sx={{ sx={{
mb: 2, mb: { xs: 1, sm: 2 },
color: 'rgba(255, 255, 255, 0.9)', color: 'rgba(255, 255, 255, 0.9)',
fontWeight: 500, fontWeight: 500,
fontSize: '1rem', fontSize: { xs: '0.75rem', sm: '1rem' },
}} }}
> >
총 비용 총 비용
</Typography> </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)}만 {Math.floor(summary.totalCost / 10000)}만
</Typography> </Typography>
<Typography <Typography
variant="caption" 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> </Typography>
</CardContent> </CardContent>
</Card> </Card>
@ -246,27 +245,26 @@ export default function AnalyticsPage() {
borderColor: 'transparent', 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 <Typography
variant="body2" variant="body2"
sx={{ sx={{
mb: 2, mb: { xs: 1, sm: 2 },
color: 'rgba(255, 255, 255, 0.9)', color: 'rgba(255, 255, 255, 0.9)',
fontWeight: 500, fontWeight: 500,
fontSize: '1rem', fontSize: { xs: '0.75rem', sm: '1rem' },
}} }}
> >
예상 수익 예상 수익
</Typography> </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)}만 {Math.floor(summary.expectedRevenue / 10000)}만
</Typography> </Typography>
<Typography <Typography
variant="caption" 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{' '} 매출+LTV
{Math.floor(roiDetail.newCustomerLTV / 10000)}만
</Typography> </Typography>
</CardContent> </CardContent>
</Card> </Card>
@ -280,26 +278,26 @@ export default function AnalyticsPage() {
borderColor: 'transparent', 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 <Typography
variant="body2" variant="body2"
sx={{ sx={{
mb: 2, mb: { xs: 1, sm: 2 },
color: 'rgba(255, 255, 255, 0.9)', color: 'rgba(255, 255, 255, 0.9)',
fontWeight: 500, fontWeight: 500,
fontSize: '1rem', fontSize: { xs: '0.75rem', sm: '1rem' },
}} }}
> >
투자대비수익률 ROI
</Typography> </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}% {summary.roi}%
</Typography> </Typography>
<Typography <Typography
variant="caption" 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> </Typography>
</CardContent> </CardContent>
</Card> </Card>
@ -307,16 +305,16 @@ export default function AnalyticsPage() {
</Grid> </Grid>
{/* Charts 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 */} {/* Channel Performance */}
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}> <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
<CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}> <CardContent sx={{ p: { xs: 3, sm: 6, md: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 }, mb: { xs: 3, sm: 6 } }}>
<Box <Box
sx={{ sx={{
width: 40, width: { xs: 32, sm: 40 },
height: 40, height: { xs: 32, sm: 40 },
borderRadius: '12px', borderRadius: '12px',
background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.pinkLight} 100%)`, background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.pinkLight} 100%)`,
display: 'flex', display: 'flex',
@ -324,9 +322,9 @@ export default function AnalyticsPage() {
justifyContent: 'center', justifyContent: 'center',
}} }}
> >
<PieChartIcon sx={{ fontSize: 24, color: 'white' }} /> <PieChartIcon sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
</Box> </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> </Typography>
</Box> </Box>
@ -335,9 +333,9 @@ export default function AnalyticsPage() {
<Box <Box
sx={{ sx={{
width: '100%', width: '100%',
maxWidth: 300, maxWidth: { xs: 200, sm: 300 },
mx: 'auto', mx: 'auto',
mb: 3, mb: { xs: 2, sm: 3 },
flex: 1, flex: 1,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@ -380,7 +378,7 @@ export default function AnalyticsPage() {
</Box> </Box>
{/* Legend */} {/* Legend */}
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}> <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 0.75, sm: 1 } }}>
{channelPerformance.map((item) => ( {channelPerformance.map((item) => (
<Box <Box
key={item.channel} key={item.channel}
@ -389,17 +387,17 @@ export default function AnalyticsPage() {
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Box <Box
sx={{ sx={{
width: 12, width: { xs: 10, sm: 12 },
height: 12, height: { xs: 10, sm: 12 },
borderRadius: '50%', borderRadius: '50%',
bgcolor: item.color, 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} {item.channel}
</Typography> </Typography>
</Box> </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}명) {item.percentage}% ({item.participants}명)
</Typography> </Typography>
</Box> </Box>
@ -412,12 +410,12 @@ export default function AnalyticsPage() {
{/* Time Trend */} {/* Time Trend */}
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}> <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
<CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}> <CardContent sx={{ p: { xs: 3, sm: 6, md: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 }, mb: { xs: 3, sm: 6 } }}>
<Box <Box
sx={{ sx={{
width: 40, width: { xs: 32, sm: 40 },
height: 40, height: { xs: 32, sm: 40 },
borderRadius: '12px', borderRadius: '12px',
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`, background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
display: 'flex', display: 'flex',
@ -425,9 +423,9 @@ export default function AnalyticsPage() {
justifyContent: 'center', justifyContent: 'center',
}} }}
> >
<ShowChartIcon sx={{ fontSize: 24, color: 'white' }} /> <ShowChartIcon sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
</Box> </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> </Typography>
</Box> </Box>
@ -436,11 +434,11 @@ export default function AnalyticsPage() {
<Box <Box
sx={{ sx={{
width: '100%', width: '100%',
mb: 3, mb: { xs: 2, sm: 3 },
flex: 1, flex: 1,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
minHeight: 200, minHeight: { xs: 150, sm: 200 },
}} }}
> >
<Line <Line
@ -514,10 +512,10 @@ export default function AnalyticsPage() {
{/* Stats */} {/* Stats */}
<Box> <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}명) 피크 시간: {timePerformance.peakTime} ({timePerformance.peakParticipants}명)
</Typography> </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}명 평균 시간당: {timePerformance.avgPerHour}명
</Typography> </Typography>
</Box> </Box>
@ -527,16 +525,16 @@ export default function AnalyticsPage() {
</Grid> </Grid>
{/* ROI Detail & Participant Profile */} {/* ROI Detail & Participant Profile */}
<Grid container spacing={6}> <Grid container spacing={{ xs: 3, sm: 6 }}>
{/* ROI Detail */} {/* ROI Detail */}
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}> <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
<CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}> <CardContent sx={{ p: { xs: 3, sm: 6, md: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 }, mb: { xs: 3, sm: 6 } }}>
<Box <Box
sx={{ sx={{
width: 40, width: { xs: 32, sm: 40 },
height: 40, height: { xs: 32, sm: 40 },
borderRadius: '12px', borderRadius: '12px',
background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`, background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
display: 'flex', display: 'flex',
@ -544,32 +542,32 @@ export default function AnalyticsPage() {
justifyContent: 'center', justifyContent: 'center',
}} }}
> >
<Payments sx={{ fontSize: 24, color: 'white' }} /> <Payments sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
</Box> </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> </Typography>
</Box> </Box>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 2, sm: 3 } }}>
<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.totalCost / 10000)}만원 총 비용: {Math.floor(roiDetail.totalCost / 10000)}만원
</Typography> </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' }}> <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>
<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)}만원 {Math.floor(roiDetail.prizeCost / 10000)}만원
</Typography> </Typography>
</Box> </Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}> <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>
<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)}만원 {Math.floor(roiDetail.channelCost / 10000)}만원
</Typography> </Typography>
</Box> </Box>
@ -577,23 +575,23 @@ export default function AnalyticsPage() {
</Box> </Box>
<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)}만원 예상 수익: {Math.floor(roiDetail.expectedRevenue / 10000)}만원
</Typography> </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' }}> <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>
<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)}만원 {Math.floor(roiDetail.salesIncrease / 10000)}만원
</Typography> </Typography>
</Box> </Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}> <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 • 신규 고객 LTV
</Typography> </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)}만원 {Math.floor(roiDetail.newCustomerLTV / 10000)}만원
</Typography> </Typography>
</Box> </Box>
@ -601,26 +599,26 @@ export default function AnalyticsPage() {
</Box> </Box>
<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> </Typography>
<Box <Box
sx={{ sx={{
p: 2.5, p: { xs: 2, sm: 2.5 },
bgcolor: colors.gray[100], bgcolor: colors.gray[100],
borderRadius: 2, borderRadius: 2,
textAlign: 'center', 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 (수익 - 비용) ÷ 비용 × 100
</Typography> </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.expectedRevenue / 10000)}만 -{' '}
{Math.floor(roiDetail.totalCost / 10000)}만) ÷{' '} {Math.floor(roiDetail.totalCost / 10000)}만) ÷{' '}
{Math.floor(roiDetail.totalCost / 10000)}만 × 100 {Math.floor(roiDetail.totalCost / 10000)}만 × 100
</Typography> </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}% = {summary.roi}%
</Typography> </Typography>
</Box> </Box>
@ -633,12 +631,12 @@ export default function AnalyticsPage() {
{/* Participant Profile */} {/* Participant Profile */}
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}> <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
<CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}> <CardContent sx={{ p: { xs: 3, sm: 6, md: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 }, mb: { xs: 3, sm: 6 } }}>
<Box <Box
sx={{ sx={{
width: 40, width: { xs: 32, sm: 40 },
height: 40, height: { xs: 32, sm: 40 },
borderRadius: '12px', borderRadius: '12px',
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`, background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
display: 'flex', display: 'flex',
@ -646,29 +644,29 @@ export default function AnalyticsPage() {
justifyContent: 'center', justifyContent: 'center',
}} }}
> >
<People sx={{ fontSize: 24, color: 'white' }} /> <People sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
</Box> </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> </Typography>
</Box> </Box>
{/* Age Distribution */} {/* Age Distribution */}
<Box sx={{ mb: 4 }}> <Box sx={{ mb: { xs: 3, sm: 4 } }}>
<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> </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) => ( {participantProfile.age.map((item) => (
<Box key={item.label}> <Box key={item.label}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1, sm: 1.5 } }}>
<Typography variant="body2" sx={{ minWidth: 60, color: colors.gray[700] }}> <Typography variant="body2" sx={{ minWidth: { xs: 45, sm: 60 }, color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
{item.label} {item.label}
</Typography> </Typography>
<Box <Box
sx={{ sx={{
flex: 1, flex: 1,
height: 28, height: { xs: 24, sm: 28 },
bgcolor: colors.gray[200], bgcolor: colors.gray[200],
borderRadius: 1.5, borderRadius: 1.5,
overflow: 'hidden', overflow: 'hidden',
@ -682,12 +680,12 @@ export default function AnalyticsPage() {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-end', justifyContent: 'flex-end',
pr: 1.5, pr: { xs: 1, sm: 1.5 },
}} }}
> >
<Typography <Typography
variant="caption" variant="caption"
sx={{ color: 'white', fontWeight: 600, fontSize: 12 }} sx={{ color: 'white', fontWeight: 600, fontSize: { xs: 10, sm: 12 } }}
> >
{item.percentage}% {item.percentage}%
</Typography> </Typography>
@ -701,20 +699,20 @@ export default function AnalyticsPage() {
{/* Gender Distribution */} {/* Gender Distribution */}
<Box> <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> </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) => ( {participantProfile.gender.map((item) => (
<Box key={item.label}> <Box key={item.label}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1, sm: 1.5 } }}>
<Typography variant="body2" sx={{ minWidth: 60, color: colors.gray[700] }}> <Typography variant="body2" sx={{ minWidth: { xs: 45, sm: 60 }, color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
{item.label} {item.label}
</Typography> </Typography>
<Box <Box
sx={{ sx={{
flex: 1, flex: 1,
height: 28, height: { xs: 24, sm: 28 },
bgcolor: colors.gray[200], bgcolor: colors.gray[200],
borderRadius: 1.5, borderRadius: 1.5,
overflow: 'hidden', overflow: 'hidden',
@ -728,12 +726,12 @@ export default function AnalyticsPage() {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-end', justifyContent: 'flex-end',
pr: 1.5, pr: { xs: 1, sm: 1.5 },
}} }}
> >
<Typography <Typography
variant="caption" variant="caption"
sx={{ color: 'white', fontWeight: 600, fontSize: 12 }} sx={{ color: 'white', fontWeight: 600, fontSize: { xs: 10, sm: 12 } }}
> >
{item.percentage}% {item.percentage}%
</Typography> </Typography>

45
src/app/(main)/events/[eventId]/draw/page.tsx
View File

@ -604,28 +604,55 @@ export default function DrawPage() {
fullWidth fullWidth
PaperProps={{ PaperProps={{
sx: { sx: {
bgcolor: 'rgba(0, 0, 0, 0.9)', bgcolor: 'background.paper',
color: 'white',
borderRadius: 4, borderRadius: 4,
}, },
}} }}
> >
<DialogContent sx={{ textAlign: 'center', py: 16 }}> <DialogContent sx={{ textAlign: 'center', py: 16 }}>
{/* 그라데이션 스피너 */}
<Box
sx={{
width: 100,
height: 100,
margin: '0 auto 48px',
borderRadius: '50%',
background: `conic-gradient(from 0deg, ${colors.purple}, ${colors.pink}, ${colors.blue}, ${colors.purple})`,
animation: 'spin 1.5s linear infinite',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
'@keyframes spin': {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
},
'&::before': {
content: '""',
position: 'absolute',
width: 75,
height: 75,
borderRadius: '50%',
backgroundColor: 'background.paper',
},
}}
>
<Casino <Casino
sx={{ sx={{
fontSize: 100, fontSize: 50,
mb: 6, color: colors.purple,
animation: 'spin 0.5s infinite', zIndex: 1,
'@keyframes spin': { animation: 'pulse 1.5s ease-in-out infinite',
'0%, 100%': { transform: 'rotate(0deg)' }, '@keyframes pulse': {
'50%': { transform: 'rotate(180deg)' }, '0%, 100%': { opacity: 1, transform: 'scale(1)' },
'50%': { opacity: 0.7, transform: 'scale(0.95)' },
}, },
}} }}
/> />
</Box>
<Typography variant="h4" sx={{ fontWeight: 700, mb: 2, fontSize: '2rem' }}> <Typography variant="h4" sx={{ fontWeight: 700, mb: 2, fontSize: '2rem' }}>
{animationText} {animationText}
</Typography> </Typography>
<Typography variant="body1" sx={{ color: 'rgba(255,255,255,0.7)', fontSize: '1.125rem' }}> <Typography variant="body1" color="text.secondary" sx={{ fontSize: '1.125rem' }}>
{animationSubtext} {animationSubtext}
</Typography> </Typography>
</DialogContent> </DialogContent>

292
src/app/(main)/events/[eventId]/page.tsx
View File

@ -254,12 +254,12 @@ export default function EventDetailPage() {
}; };
return ( return (
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}> <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: { xs: 5, sm: 10 } }}>
<Container maxWidth="lg" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 8, md: 10 } }}> <Container maxWidth="lg" sx={{ pt: { xs: 4, sm: 8 }, pb: { xs: 4, sm: 8 }, px: { xs: 3, sm: 6, md: 10 } }}>
{/* Event Header */} {/* Event Header */}
<Box sx={{ mb: 8 }}> <Box sx={{ mb: { xs: 4, sm: 8 } }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 4 }}> <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: { xs: 2, sm: 4 } }}>
<Typography variant="h4" sx={{ fontWeight: 700, fontSize: '2rem' }}> <Typography variant="h4" sx={{ fontWeight: 700, fontSize: { xs: '1.25rem', sm: '2rem' } }}>
{event.title} {event.title}
</Typography> </Typography>
<IconButton onClick={handleMenuOpen}> <IconButton onClick={handleMenuOpen}>
@ -282,61 +282,62 @@ export default function EventDetailPage() {
</Menu> </Menu>
</Box> </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 <Chip
label={getStatusText(event.status)} label={getStatusText(event.status)}
color={getStatusColor(event.status) as any} color={getStatusColor(event.status) as any}
size="medium" size="medium"
sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' }, height: { xs: 24, sm: 32 } }}
/> />
{event.isAIRecommended && ( {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 && ( {event.isUrgent && (
<Chip <Chip
icon={<Warning />} icon={<Warning sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }} />}
label="마감임박" label="마감임박"
size="medium" 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 && ( {event.isPopular && (
<Chip <Chip
icon={<LocalFireDepartment />} icon={<LocalFireDepartment sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }} />}
label="인기" label="인기"
size="medium" 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 && ( {event.isHighROI && (
<Chip <Chip
icon={<Star />} icon={<Star sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }} />}
label="높은 ROI" label="높은 ROI"
size="medium" 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 && ( {event.isNew && (
<Chip <Chip
icon={<NewReleases />} icon={<NewReleases sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }} />}
label="신규" label="신규"
size="medium" 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> </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} 📅 {event.startDate} ~ {event.endDate}
</Typography> </Typography>
{/* 진행률 바 (진행중인 이벤트만) */} {/* 진행률 바 (진행중인 이벤트만) */}
{event.status === 'active' && ( {event.status === 'active' && (
<Box> <Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}> <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: { xs: 1, sm: 2 } }}>
<Typography variant="body2" sx={{ fontWeight: 600 }}> <Typography variant="body2" sx={{ fontWeight: 600, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
이벤트 진행률 이벤트 진행률
</Typography> </Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }}> <Typography variant="body2" sx={{ fontWeight: 600, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
{Math.round(calculateProgress(event))}% {Math.round(calculateProgress(event))}%
</Typography> </Typography>
</Box> </Box>
@ -344,7 +345,7 @@ export default function EventDetailPage() {
variant="determinate" variant="determinate"
value={calculateProgress(event)} value={calculateProgress(event)}
sx={{ sx={{
height: 10, height: { xs: 6, sm: 10 },
borderRadius: 5, borderRadius: 5,
bgcolor: colors.gray[100], bgcolor: colors.gray[100],
'& .MuiLinearProgress-bar': { '& .MuiLinearProgress-bar': {
@ -358,16 +359,16 @@ export default function EventDetailPage() {
</Box> </Box>
{/* Real-time KPIs */} {/* Real-time KPIs */}
<Box sx={{ mb: 10 }}> <Box sx={{ mb: { xs: 4, sm: 10 } }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 6 }}> <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: '1.5rem' }}> <Typography variant="h5" sx={{ fontWeight: 700, fontSize: { xs: '1rem', sm: '1.5rem' } }}>
실시간 현황 실시간 현황
</Typography> </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 <Box
sx={{ sx={{
width: 10, width: { xs: 6, sm: 10 },
height: 10, height: { xs: 6, sm: 10 },
borderRadius: '50%', borderRadius: '50%',
bgcolor: 'success.main', bgcolor: 'success.main',
animation: 'pulse 2s infinite', 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> </Typography>
</Box> </Box>
</Box> </Box>
<Grid container spacing={6}> <Grid container spacing={{ xs: 1.5, sm: 6 }}>
<Grid item xs={6} md={3}> <Grid item xs={6} md={3}>
<Card <Card
elevation={0} elevation={0}
sx={{ sx={{
borderRadius: 4, borderRadius: { xs: 2, sm: 4 },
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`, background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
height: '100%',
}} }}
> >
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}> <CardContent sx={{
<Group sx={{ fontSize: 40, mb: 2, color: 'white' }} /> textAlign: 'center',
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}> 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>
<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}명 {event.participants}명
</Typography> </Typography>
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.8)', mt: 1, display: 'block' }}> <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}명 ( 목표: {event.targetParticipants}명<br />
{Math.round((event.participants / event.targetParticipants) * 100)}%) ({Math.round((event.participants / event.targetParticipants) * 100)}%)
</Typography> </Typography>
</CardContent> </CardContent>
</Card> </Card>
@ -412,19 +422,29 @@ export default function EventDetailPage() {
<Card <Card
elevation={0} elevation={0}
sx={{ sx={{
borderRadius: 4, borderRadius: { xs: 2, sm: 4 },
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
background: `linear-gradient(135deg, ${colors.blue} 0%, #93C5FD 100%)`, background: `linear-gradient(135deg, ${colors.blue} 0%, #93C5FD 100%)`,
height: '100%',
}} }}
> >
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}> <CardContent sx={{
<Visibility sx={{ fontSize: 40, mb: 2, color: 'white' }} /> textAlign: 'center',
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}> 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>
<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} {event.views}
</Typography> </Typography>
<Box sx={{ mt: { xs: 0.25, sm: 1 }, minHeight: { xs: '1.3em', sm: 0 } }} />
</CardContent> </CardContent>
</Card> </Card>
</Grid> </Grid>
@ -432,19 +452,29 @@ export default function EventDetailPage() {
<Card <Card
elevation={0} elevation={0}
sx={{ sx={{
borderRadius: 4, borderRadius: { xs: 2, sm: 4 },
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
background: `linear-gradient(135deg, ${colors.mint} 0%, #6EE7B7 100%)`, background: `linear-gradient(135deg, ${colors.mint} 0%, #6EE7B7 100%)`,
height: '100%',
}} }}
> >
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}> <CardContent sx={{
<TrendingUp sx={{ fontSize: 40, mb: 2, color: 'white' }} /> textAlign: 'center',
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}> 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 ROI
</Typography> </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}% {event.roi}%
</Typography> </Typography>
<Box sx={{ mt: { xs: 0.25, sm: 1 }, minHeight: { xs: '1.3em', sm: 0 } }} />
</CardContent> </CardContent>
</Card> </Card>
</Grid> </Grid>
@ -452,19 +482,29 @@ export default function EventDetailPage() {
<Card <Card
elevation={0} elevation={0}
sx={{ sx={{
borderRadius: 4, borderRadius: { xs: 2, sm: 4 },
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
background: `linear-gradient(135deg, ${colors.orange} 0%, #FCD34D 100%)`, background: `linear-gradient(135deg, ${colors.orange} 0%, #FCD34D 100%)`,
height: '100%',
}} }}
> >
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}> <CardContent sx={{
<TrendingUp sx={{ fontSize: 40, mb: 2, color: 'white' }} /> textAlign: 'center',
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}> 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>
<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}% {event.conversion}%
</Typography> </Typography>
<Box sx={{ mt: { xs: 0.25, sm: 1 }, minHeight: { xs: '1.3em', sm: 0 } }} />
</CardContent> </CardContent>
</Card> </Card>
</Grid> </Grid>
@ -472,18 +512,18 @@ export default function EventDetailPage() {
</Box> </Box>
{/* Chart Section - 참여 추이 */} {/* Chart Section - 참여 추이 */}
<Box sx={{ mb: 10 }}> <Box sx={{ mb: { xs: 5, sm: 10 } }}>
<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> </Typography>
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}> <Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
<CardContent sx={{ p: 6 }}> <CardContent sx={{ p: { xs: 3, sm: 6 } }}>
<Box sx={{ display: 'flex', gap: 2, mb: 6 }}> <Box sx={{ display: 'flex', gap: { xs: 1, sm: 2 }, mb: { xs: 3, sm: 6 } }}>
<Button <Button
size="medium" size="medium"
variant={chartPeriod === '7d' ? 'contained' : 'outlined'} variant={chartPeriod === '7d' ? 'contained' : 'outlined'}
onClick={() => setChartPeriod('7d')} 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일 7일
</Button> </Button>
@ -491,7 +531,7 @@ export default function EventDetailPage() {
size="medium" size="medium"
variant={chartPeriod === '30d' ? 'contained' : 'outlined'} variant={chartPeriod === '30d' ? 'contained' : 'outlined'}
onClick={() => setChartPeriod('30d')} 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일 30일
</Button> </Button>
@ -499,13 +539,13 @@ export default function EventDetailPage() {
size="medium" size="medium"
variant={chartPeriod === 'all' ? 'contained' : 'outlined'} variant={chartPeriod === 'all' ? 'contained' : 'outlined'}
onClick={() => setChartPeriod('all')} 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> </Button>
</Box> </Box>
<Box sx={{ height: 320 }}> <Box sx={{ height: { xs: 200, sm: 320 } }}>
<Line <Line
data={generateParticipationTrendData(chartPeriod)} data={generateParticipationTrendData(chartPeriod)}
options={{ options={{
@ -544,14 +584,14 @@ export default function EventDetailPage() {
</Box> </Box>
{/* Chart Section - 채널별 성과 & ROI 추이 */} {/* 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}> <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> </Typography>
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}> <Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
<CardContent sx={{ p: 6 }}> <CardContent sx={{ p: { xs: 3, sm: 6 } }}>
<Box sx={{ height: 320 }}> <Box sx={{ height: { xs: 200, sm: 320 } }}>
<Bar <Bar
data={channelPerformanceData} data={channelPerformanceData}
options={{ options={{
@ -589,12 +629,12 @@ export default function EventDetailPage() {
</Grid> </Grid>
<Grid item xs={12} md={6}> <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 추이 💰 ROI 추이
</Typography> </Typography>
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}> <Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
<CardContent sx={{ p: 6 }}> <CardContent sx={{ p: { xs: 3, sm: 6 } }}>
<Box sx={{ height: 320 }}> <Box sx={{ height: { xs: 200, sm: 320 } }}>
<Line <Line
data={roiTrendData} data={roiTrendData}
options={{ options={{
@ -634,62 +674,62 @@ export default function EventDetailPage() {
</Grid> </Grid>
{/* Event Details */} {/* Event Details */}
<Box sx={{ mb: 10 }}> <Box sx={{ mb: { xs: 5, sm: 10 } }}>
<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> </Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}> <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 2, sm: 4 } }}>
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}> <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: 3, p: 4 }}> <CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: { xs: 1.5, sm: 3 }, p: { xs: 3, sm: 4 } }}>
<CardGiftcard sx={{ fontSize: 28, color: colors.pink }} /> <CardGiftcard sx={{ fontSize: { xs: 20, sm: 28 }, color: colors.pink }} />
<Box sx={{ flex: 1 }}> <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>
<Typography variant="h6" sx={{ fontWeight: 600 }}> <Typography variant="h6" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1.125rem' } }}>
{event.prize} {event.prize}
</Typography> </Typography>
</Box> </Box>
</CardContent> </CardContent>
</Card> </Card>
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}> <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: 3, p: 4 }}> <CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: { xs: 1.5, sm: 3 }, p: { xs: 3, sm: 4 } }}>
{getMethodIcon(event.method)} {getMethodIcon(event.method)}
<Box sx={{ flex: 1 }}> <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>
<Typography variant="h6" sx={{ fontWeight: 600 }}> <Typography variant="h6" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1.125rem' } }}>
{event.method} {event.method}
</Typography> </Typography>
</Box> </Box>
</CardContent> </CardContent>
</Card> </Card>
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}> <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: 3, p: 4 }}> <CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: { xs: 1.5, sm: 3 }, p: { xs: 3, sm: 4 } }}>
<AttachMoney sx={{ fontSize: 28, color: colors.mint }} /> <AttachMoney sx={{ fontSize: { xs: 20, sm: 28 }, color: colors.mint }} />
<Box sx={{ flex: 1 }}> <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>
<Typography variant="h6" sx={{ fontWeight: 600 }}> <Typography variant="h6" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1.125rem' } }}>
{event.cost.toLocaleString()}원 {event.cost.toLocaleString()}원
</Typography> </Typography>
</Box> </Box>
</CardContent> </CardContent>
</Card> </Card>
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}> <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: 3, p: 4 }}> <CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: { xs: 1.5, sm: 3 }, p: { xs: 3, sm: 4 } }}>
<Share sx={{ fontSize: 28, color: colors.blue }} /> <Share sx={{ fontSize: { xs: 20, sm: 28 }, color: colors.blue }} />
<Box sx={{ flex: 1 }}> <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> </Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}> <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: { xs: 1, sm: 2 } }}>
{event.channels.map((channel) => ( {event.channels.map((channel) => (
<Chip <Chip
key={channel} key={channel}
@ -699,6 +739,8 @@ export default function EventDetailPage() {
bgcolor: colors.purpleLight, bgcolor: colors.purpleLight,
color: colors.purple, color: colors.purple,
fontWeight: 600, fontWeight: 600,
fontSize: { xs: '0.75rem', sm: '0.875rem' },
height: { xs: 24, sm: 32 },
}} }}
/> />
))} ))}
@ -710,17 +752,17 @@ export default function EventDetailPage() {
</Box> </Box>
{/* Quick Actions */} {/* Quick Actions */}
<Box sx={{ mb: 10 }}> <Box sx={{ mb: { xs: 5, sm: 10 } }}>
<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> </Typography>
<Grid container spacing={4}> <Grid container spacing={{ xs: 2, sm: 4 }}>
<Grid item xs={6} md={3}> <Grid item xs={6} md={3}>
<Card <Card
elevation={0} elevation={0}
sx={{ sx={{
cursor: 'pointer', cursor: 'pointer',
borderRadius: 4, borderRadius: { xs: 3, sm: 4 },
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
transition: 'all 0.2s', transition: 'all 0.2s',
'&:hover': { '&:hover': {
@ -730,9 +772,9 @@ export default function EventDetailPage() {
}} }}
onClick={() => router.push(`/events/${eventId}/participants`)} onClick={() => router.push(`/events/${eventId}/participants`)}
> >
<CardContent sx={{ textAlign: 'center', py: 5 }}> <CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 5 } }}>
<People sx={{ fontSize: 40, mb: 2, color: colors.pink }} /> <People sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 1, sm: 2 }, color: colors.pink }} />
<Typography variant="body1" sx={{ fontWeight: 600 }}> <Typography variant="body1" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
참여자 목록 참여자 목록
</Typography> </Typography>
</CardContent> </CardContent>
@ -743,7 +785,7 @@ export default function EventDetailPage() {
elevation={0} elevation={0}
sx={{ sx={{
cursor: 'pointer', cursor: 'pointer',
borderRadius: 4, borderRadius: { xs: 3, sm: 4 },
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
transition: 'all 0.2s', transition: 'all 0.2s',
'&:hover': { '&:hover': {
@ -752,9 +794,9 @@ export default function EventDetailPage() {
}, },
}} }}
> >
<CardContent sx={{ textAlign: 'center', py: 5 }}> <CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 5 } }}>
<Edit sx={{ fontSize: 40, mb: 2, color: colors.blue }} /> <Edit sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 1, sm: 2 }, color: colors.blue }} />
<Typography variant="body1" sx={{ fontWeight: 600 }}> <Typography variant="body1" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
이벤트 수정 이벤트 수정
</Typography> </Typography>
</CardContent> </CardContent>
@ -765,7 +807,7 @@ export default function EventDetailPage() {
elevation={0} elevation={0}
sx={{ sx={{
cursor: 'pointer', cursor: 'pointer',
borderRadius: 4, borderRadius: { xs: 3, sm: 4 },
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
transition: 'all 0.2s', transition: 'all 0.2s',
'&:hover': { '&:hover': {
@ -774,9 +816,9 @@ export default function EventDetailPage() {
}, },
}} }}
> >
<CardContent sx={{ textAlign: 'center', py: 5 }}> <CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 5 } }}>
<Share sx={{ fontSize: 40, mb: 2, color: colors.purple }} /> <Share sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 1, sm: 2 }, color: colors.purple }} />
<Typography variant="body1" sx={{ fontWeight: 600 }}> <Typography variant="body1" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
공유하기 공유하기
</Typography> </Typography>
</CardContent> </CardContent>
@ -787,7 +829,7 @@ export default function EventDetailPage() {
elevation={0} elevation={0}
sx={{ sx={{
cursor: 'pointer', cursor: 'pointer',
borderRadius: 4, borderRadius: { xs: 3, sm: 4 },
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
transition: 'all 0.2s', transition: 'all 0.2s',
'&:hover': { '&:hover': {
@ -796,9 +838,9 @@ export default function EventDetailPage() {
}, },
}} }}
> >
<CardContent sx={{ textAlign: 'center', py: 5 }}> <CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 5 } }}>
<Download sx={{ fontSize: 40, mb: 2, color: colors.mint }} /> <Download sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 1, sm: 2 }, color: colors.mint }} />
<Typography variant="body1" sx={{ fontWeight: 600 }}> <Typography variant="body1" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
데이터 다운 데이터 다운
</Typography> </Typography>
</CardContent> </CardContent>
@ -808,32 +850,32 @@ export default function EventDetailPage() {
</Box> </Box>
{/* Recent Participants */} {/* Recent Participants */}
<Box sx={{ mb: 10 }}> <Box sx={{ mb: { xs: 5, sm: 10 } }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 6 }}> <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: '1.5rem' }}> <Typography variant="h5" sx={{ fontWeight: 700, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
👥 최근 참여자 👥 최근 참여자
</Typography> </Typography>
<Button <Button
size="medium" 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`)} 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> </Button>
</Box> </Box>
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}> <Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
<CardContent sx={{ p: 6 }}> <CardContent sx={{ p: { xs: 3, sm: 6 } }}>
{recentParticipants.map((participant, index) => ( {recentParticipants.map((participant, index) => (
<Box key={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', justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1.5, sm: 3 } }}>
<Box <Box
sx={{ sx={{
width: 48, width: { xs: 32, sm: 48 },
height: 48, height: { xs: 32, sm: 48 },
borderRadius: '50%', borderRadius: '50%',
bgcolor: colors.purpleLight, bgcolor: colors.purpleLight,
display: 'flex', display: 'flex',
@ -841,18 +883,18 @@ export default function EventDetailPage() {
justifyContent: 'center', justifyContent: 'center',
}} }}
> >
<Person sx={{ color: colors.purple, fontSize: 24 }} /> <Person sx={{ color: colors.purple, fontSize: { xs: 16, sm: 24 } }} />
</Box> </Box>
<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} {participant.name}
</Typography> </Typography>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
{participant.phone} {participant.phone}
</Typography> </Typography>
</Box> </Box>
</Box> </Box>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
{participant.time} {participant.time}
</Typography> </Typography>
</Box> </Box>

37
src/app/(main)/events/create/steps/ContentPreviewStep.tsx
View File

@ -122,18 +122,45 @@ export default function ContentPreviewStep({
</Box> </Box>
<Box sx={{ textAlign: 'center', mt: 15, mb: 15 }}> <Box sx={{ textAlign: 'center', mt: 15, mb: 15 }}>
<Psychology {/* 그라데이션 스피너 */}
<Box
sx={{ sx={{
fontSize: 80, width: 80,
color: colors.purple, height: 80,
mb: 4, margin: '0 auto 32px',
animation: 'spin 2s linear infinite', borderRadius: '50%',
background: `conic-gradient(from 0deg, ${colors.purple}, ${colors.pink}, ${colors.blue}, ${colors.purple})`,
animation: 'spin 1.5s linear infinite',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
'@keyframes spin': { '@keyframes spin': {
'0%': { transform: 'rotate(0deg)' }, '0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' }, '100%': { transform: 'rotate(360deg)' },
}, },
'&::before': {
content: '""',
position: 'absolute',
width: 60,
height: 60,
borderRadius: '50%',
backgroundColor: 'background.default',
},
}}
>
<Psychology
sx={{
fontSize: 40,
color: colors.purple,
zIndex: 1,
animation: 'pulse 1.5s ease-in-out infinite',
'@keyframes pulse': {
'0%, 100%': { opacity: 1, transform: 'scale(1)' },
'50%': { opacity: 0.7, transform: 'scale(0.95)' },
},
}} }}
/> />
</Box>
<Typography variant="h5" sx={{ fontWeight: 700, mb: 3, fontSize: '1.5rem' }}> <Typography variant="h5" sx={{ fontWeight: 700, mb: 3, fontSize: '1.5rem' }}>
AI 이미지 생성 중 AI 이미지 생성 중
</Typography> </Typography>

301
src/app/(main)/events/page.tsx
View File

@ -36,11 +36,7 @@ import {
Star, Star,
} from '@mui/icons-material'; } from '@mui/icons-material';
import Header from '@/shared/ui/Header'; import Header from '@/shared/ui/Header';
import { import { cardStyles, colors, responsiveText } from '@/shared/lib/button-styles';
cardStyles,
colors,
responsiveText,
} from '@/shared/lib/button-styles';
// Mock 데이터 // Mock 데이터
const mockEvents = [ 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; if (event.status !== 'active') return 0;
const total = new Date(event.endDate).getTime() - new Date(event.startDate).getTime(); const total = new Date(event.endDate).getTime() - new Date(event.startDate).getTime();
const elapsed = Date.now() - new Date(event.startDate).getTime(); const elapsed = Date.now() - new Date(event.startDate).getTime();
@ -237,9 +233,12 @@ export default function EventsPage() {
minHeight: '100vh', 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 */} {/* 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}> <Grid item xs={6} sm={3}>
<Card <Card
elevation={0} elevation={0}
@ -249,30 +248,37 @@ export default function EventsPage() {
borderColor: 'transparent', borderColor: 'transparent',
}} }}
> >
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}> <CardContent
<Event sx={{ sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
fontSize: 32, >
<Event
sx={{
fontSize: { xs: 24, sm: 32 },
color: colors.gray[900], color: colors.gray[900],
mb: 1, mb: 1,
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))', filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
}} /> }}
/>
<Typography <Typography
variant="h4" variant="h4"
sx={{ sx={{
fontWeight: 700, fontWeight: 700,
color: colors.gray[900], color: colors.gray[900],
fontSize: '1.75rem', fontSize: { xs: '1.25rem', sm: '1.75rem' },
mb: 0.5, mb: 0.5,
textShadow: '0px 2px 4px rgba(0,0,0,0.15)', textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
}} }}
> >
{stats.total} {stats.total}
</Typography> </Typography>
<Typography variant="body2" sx={{ <Typography
variant="body2"
sx={{
color: colors.gray[700], color: colors.gray[700],
fontSize: '0.875rem', fontSize: { xs: '0.6875rem', sm: '0.875rem' },
textShadow: '0px 1px 2px rgba(0,0,0,0.1)', textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
}}> }}
>
전체 이벤트 전체 이벤트
</Typography> </Typography>
</CardContent> </CardContent>
@ -287,30 +293,37 @@ export default function EventsPage() {
borderColor: 'transparent', borderColor: 'transparent',
}} }}
> >
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}> <CardContent
<LocalFireDepartment sx={{ sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
fontSize: 32, >
<LocalFireDepartment
sx={{
fontSize: { xs: 24, sm: 32 },
color: colors.gray[900], color: colors.gray[900],
mb: 1, mb: 1,
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))', filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
}} /> }}
/>
<Typography <Typography
variant="h4" variant="h4"
sx={{ sx={{
fontWeight: 700, fontWeight: 700,
color: colors.gray[900], color: colors.gray[900],
fontSize: '1.75rem', fontSize: { xs: '1.25rem', sm: '1.75rem' },
mb: 0.5, mb: 0.5,
textShadow: '0px 2px 4px rgba(0,0,0,0.15)', textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
}} }}
> >
{stats.active} {stats.active}
</Typography> </Typography>
<Typography variant="body2" sx={{ <Typography
variant="body2"
sx={{
color: colors.gray[700], color: colors.gray[700],
fontSize: '0.875rem', fontSize: { xs: '0.6875rem', sm: '0.875rem' },
textShadow: '0px 1px 2px rgba(0,0,0,0.1)', textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
}}> }}
>
진행중 진행중
</Typography> </Typography>
</CardContent> </CardContent>
@ -325,30 +338,37 @@ export default function EventsPage() {
borderColor: 'transparent', borderColor: 'transparent',
}} }}
> >
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}> <CardContent
<People sx={{ sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
fontSize: 32, >
<People
sx={{
fontSize: { xs: 24, sm: 32 },
color: colors.gray[900], color: colors.gray[900],
mb: 1, mb: 1,
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))', filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
}} /> }}
/>
<Typography <Typography
variant="h4" variant="h4"
sx={{ sx={{
fontWeight: 700, fontWeight: 700,
color: colors.gray[900], color: colors.gray[900],
fontSize: '1.75rem', fontSize: { xs: '1.25rem', sm: '1.75rem' },
mb: 0.5, mb: 0.5,
textShadow: '0px 2px 4px rgba(0,0,0,0.15)', textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
}} }}
> >
{stats.totalParticipants} {stats.totalParticipants}
</Typography> </Typography>
<Typography variant="body2" sx={{ <Typography
variant="body2"
sx={{
color: colors.gray[700], color: colors.gray[700],
fontSize: '0.875rem', fontSize: { xs: '0.6875rem', sm: '0.875rem' },
textShadow: '0px 1px 2px rgba(0,0,0,0.1)', textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
}}> }}
>
총 참여자 총 참여자
</Typography> </Typography>
</CardContent> </CardContent>
@ -363,30 +383,37 @@ export default function EventsPage() {
borderColor: 'transparent', borderColor: 'transparent',
}} }}
> >
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}> <CardContent
<TrendingUp sx={{ sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
fontSize: 32, >
<TrendingUp
sx={{
fontSize: { xs: 24, sm: 32 },
color: colors.gray[900], color: colors.gray[900],
mb: 1, mb: 1,
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))', filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
}} /> }}
/>
<Typography <Typography
variant="h4" variant="h4"
sx={{ sx={{
fontWeight: 700, fontWeight: 700,
color: colors.gray[900], color: colors.gray[900],
fontSize: '1.75rem', fontSize: { xs: '1.25rem', sm: '1.75rem' },
mb: 0.5, mb: 0.5,
textShadow: '0px 2px 4px rgba(0,0,0,0.15)', textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
}} }}
> >
{stats.avgROI}% {stats.avgROI}%
</Typography> </Typography>
<Typography variant="body2" sx={{ <Typography
variant="body2"
sx={{
color: colors.gray[700], color: colors.gray[700],
fontSize: '0.875rem', fontSize: { xs: '0.6875rem', sm: '0.875rem' },
textShadow: '0px 1px 2px rgba(0,0,0,0.1)', textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
}}> }}
>
평균 ROI 평균 ROI
</Typography> </Typography>
</CardContent> </CardContent>
@ -395,7 +422,7 @@ export default function EventsPage() {
</Grid> </Grid>
{/* Search Section */} {/* Search Section */}
<Box sx={{ mb: 8 }}> <Box sx={{ mb: { xs: 4, sm: 8 } }}>
<TextField <TextField
fullWidth fullWidth
placeholder="이벤트명 검색..." placeholder="이벤트명 검색..."
@ -404,7 +431,7 @@ export default function EventsPage() {
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<Search sx={{ color: colors.gray[400] }} /> <Search sx={{ color: colors.gray[400], fontSize: { xs: 20, sm: 24 } }} />
</InputAdornment> </InputAdornment>
), ),
}} }}
@ -412,6 +439,7 @@ export default function EventsPage() {
'& .MuiOutlinedInput-root': { '& .MuiOutlinedInput-root': {
borderRadius: 3, borderRadius: 3,
bgcolor: 'white', bgcolor: 'white',
fontSize: { xs: '0.875rem', sm: '1rem' },
'& fieldset': { '& fieldset': {
borderColor: colors.gray[200], borderColor: colors.gray[200],
}, },
@ -427,11 +455,10 @@ export default function EventsPage() {
</Box> </Box>
{/* Filters */} {/* Filters */}
<Box sx={{ mb: 8 }}> <Box sx={{ mb: { xs: 4, sm: 8 } }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 4 }, flexWrap: 'wrap' }}>
<FilterList sx={{ color: colors.purple }} />
<FormControl sx={{ flex: 1, minWidth: 120 }}> <FormControl sx={{ flex: 1, minWidth: 120 }}>
<InputLabel>상태</InputLabel> <InputLabel sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>상태</InputLabel>
<Select <Select
value={statusFilter} value={statusFilter}
label="상태" label="상태"
@ -439,6 +466,7 @@ export default function EventsPage() {
sx={{ sx={{
borderRadius: 2, borderRadius: 2,
bgcolor: 'white', bgcolor: 'white',
fontSize: { xs: '0.875rem', sm: '1rem' },
'& .MuiOutlinedInput-notchedOutline': { '& .MuiOutlinedInput-notchedOutline': {
borderColor: colors.gray[200], borderColor: colors.gray[200],
}, },
@ -450,14 +478,14 @@ export default function EventsPage() {
}, },
}} }}
> >
<MenuItem value="all">전체</MenuItem> <MenuItem value="all" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>전체</MenuItem>
<MenuItem value="active">진행중</MenuItem> <MenuItem value="active" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>진행중</MenuItem>
<MenuItem value="scheduled">예정</MenuItem> <MenuItem value="scheduled" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>예정</MenuItem>
<MenuItem value="ended">종료</MenuItem> <MenuItem value="ended" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>종료</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
<FormControl sx={{ flex: 1, minWidth: 140 }}> <FormControl sx={{ flex: 1, minWidth: 140 }}>
<InputLabel>기간</InputLabel> <InputLabel sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>기간</InputLabel>
<Select <Select
value={periodFilter} value={periodFilter}
label="기간" label="기간"
@ -465,6 +493,7 @@ export default function EventsPage() {
sx={{ sx={{
borderRadius: 2, borderRadius: 2,
bgcolor: 'white', bgcolor: 'white',
fontSize: { xs: '0.875rem', sm: '1rem' },
'& .MuiOutlinedInput-notchedOutline': { '& .MuiOutlinedInput-notchedOutline': {
borderColor: colors.gray[200], borderColor: colors.gray[200],
}, },
@ -476,23 +505,23 @@ export default function EventsPage() {
}, },
}} }}
> >
<MenuItem value="1month">최근 1개월</MenuItem> <MenuItem value="1month" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 1개월</MenuItem>
<MenuItem value="3months">최근 3개월</MenuItem> <MenuItem value="3months" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 3개월</MenuItem>
<MenuItem value="6months">최근 6개월</MenuItem> <MenuItem value="6months" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 6개월</MenuItem>
<MenuItem value="1year">최근 1년</MenuItem> <MenuItem value="1year" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 1년</MenuItem>
<MenuItem value="all">전체</MenuItem> <MenuItem value="all" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>전체</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</Box> </Box>
</Box> </Box>
{/* Sorting */} {/* Sorting */}
<Box sx={{ mb: 8 }}> <Box sx={{ mb: { xs: 4, sm: 8 } }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Typography variant="body2" sx={{ ...responsiveText.body2, fontWeight: 600 }}> <Typography variant="body2" sx={{ ...responsiveText.body2, fontWeight: 600 }}>
정렬 정렬
</Typography> </Typography>
<FormControl sx={{ width: 160 }}> <FormControl sx={{ width: { xs: 140, sm: 160 } }}>
<Select <Select
value={sortBy} value={sortBy}
onChange={(e) => setSortBy(e.target.value as SortBy)} onChange={(e) => setSortBy(e.target.value as SortBy)}
@ -500,6 +529,7 @@ export default function EventsPage() {
sx={{ sx={{
borderRadius: 2, borderRadius: 2,
bgcolor: 'white', bgcolor: 'white',
fontSize: { xs: '0.8125rem', sm: '0.875rem' },
'& .MuiOutlinedInput-notchedOutline': { '& .MuiOutlinedInput-notchedOutline': {
borderColor: colors.gray[200], borderColor: colors.gray[200],
}, },
@ -511,16 +541,16 @@ export default function EventsPage() {
}, },
}} }}
> >
<MenuItem value="latest">최신순</MenuItem> <MenuItem value="latest" sx={{ fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>최신순</MenuItem>
<MenuItem value="participants">참여자순</MenuItem> <MenuItem value="participants" sx={{ fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>참여자순</MenuItem>
<MenuItem value="roi">투자대비수익률순</MenuItem> <MenuItem value="roi" sx={{ fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>투자대비수익률순</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</Box> </Box>
</Box> </Box>
{/* Event List */} {/* Event List */}
<Box sx={{ mb: 10 }}> <Box sx={{ mb: { xs: 5, sm: 10 } }}>
{pageEvents.length === 0 ? ( {pageEvents.length === 0 ? (
<Card <Card
elevation={0} elevation={0}
@ -528,22 +558,26 @@ export default function EventsPage() {
...cardStyles.default, ...cardStyles.default,
}} }}
> >
<CardContent sx={{ textAlign: 'center', py: 20 }}> <CardContent sx={{ textAlign: 'center', py: { xs: 10, sm: 20 } }}>
<Box sx={{ color: colors.gray[300], mb: 3 }}> <Box sx={{ color: colors.gray[300], mb: { xs: 2, sm: 3 } }}>
<span className="material-icons" style={{ fontSize: 72 }}> <Box
component="span"
className="material-icons"
sx={{ fontSize: { xs: 48, sm: 72 } }}
>
event_busy event_busy
</span>
</Box> </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>
<Typography variant="body2" sx={{ color: colors.gray[500] }}> <Typography variant="body2" sx={{ color: colors.gray[500], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
다른 검색 조건으로 다시 시도해보세요 다른 검색 조건으로 다시 시도해보세요
</Typography> </Typography>
</CardContent> </CardContent>
</Card> </Card>
) : ( ) : (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 6 }}> <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 3, sm: 6 } }}>
{pageEvents.map((event) => ( {pageEvents.map((event) => (
<Card <Card
key={event.id} key={event.id}
@ -553,26 +587,31 @@ export default function EventsPage() {
}} }}
onClick={() => handleEventClick(event.id)} onClick={() => handleEventClick(event.id)}
> >
<CardContent sx={{ p: { xs: 6, sm: 8 } }}> <CardContent sx={{ p: { xs: 3, sm: 6, md: 8 } }}>
{/* Header with Badges */} {/* Header with Badges */}
<Box sx={{ mb: 4 }}> <Box sx={{ mb: { xs: 2, sm: 4 } }}>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'start', 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} {event.title}
</Typography> </Typography>
<Box <Box
sx={{ sx={{
px: 2.5, px: { xs: 2, sm: 2.5 },
py: 0.75, py: { xs: 0.5, sm: 0.75 },
borderRadius: 2, borderRadius: 2,
fontSize: '0.875rem', fontSize: { xs: '0.75rem', sm: '0.875rem' },
fontWeight: 600, fontWeight: 600,
...getStatusStyle(event.status), ...getStatusStyle(event.status),
}} }}
@ -587,59 +626,63 @@ export default function EventsPage() {
</Box> </Box>
{/* Status Badges */} {/* 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 && ( {event.isUrgent && (
<Chip <Chip
icon={<Warning sx={{ fontSize: 16 }} />} icon={<Warning sx={{ fontSize: { xs: 14, sm: 16 } }} />}
label="마감임박" label="마감임박"
size="small" size="small"
sx={{ sx={{
bgcolor: '#FEF3C7', bgcolor: '#FEF3C7',
color: '#92400E', color: '#92400E',
fontWeight: 600, fontWeight: 600,
fontSize: '0.75rem', fontSize: { xs: '0.6875rem', sm: '0.75rem' },
height: { xs: 24, sm: 28 },
'& .MuiChip-icon': { color: '#92400E' }, '& .MuiChip-icon': { color: '#92400E' },
}} }}
/> />
)} )}
{event.isPopular && ( {event.isPopular && (
<Chip <Chip
icon={<LocalFireDepartment sx={{ fontSize: 16 }} />} icon={<LocalFireDepartment sx={{ fontSize: { xs: 14, sm: 16 } }} />}
label="인기" label="인기"
size="small" size="small"
sx={{ sx={{
bgcolor: '#FEE2E2', bgcolor: '#FEE2E2',
color: '#991B1B', color: '#991B1B',
fontWeight: 600, fontWeight: 600,
fontSize: '0.75rem', fontSize: { xs: '0.6875rem', sm: '0.75rem' },
height: { xs: 24, sm: 28 },
'& .MuiChip-icon': { color: '#991B1B' }, '& .MuiChip-icon': { color: '#991B1B' },
}} }}
/> />
)} )}
{event.isHighROI && ( {event.isHighROI && (
<Chip <Chip
icon={<Star sx={{ fontSize: 16 }} />} icon={<Star sx={{ fontSize: { xs: 14, sm: 16 } }} />}
label="높은 ROI" label="높은 ROI"
size="small" size="small"
sx={{ sx={{
bgcolor: '#DCFCE7', bgcolor: '#DCFCE7',
color: '#166534', color: '#166534',
fontWeight: 600, fontWeight: 600,
fontSize: '0.75rem', fontSize: { xs: '0.6875rem', sm: '0.75rem' },
height: { xs: 24, sm: 28 },
'& .MuiChip-icon': { color: '#166534' }, '& .MuiChip-icon': { color: '#166534' },
}} }}
/> />
)} )}
{event.isNew && ( {event.isNew && (
<Chip <Chip
icon={<NewReleases sx={{ fontSize: 16 }} />} icon={<NewReleases sx={{ fontSize: { xs: 14, sm: 16 } }} />}
label="신규" label="신규"
size="small" size="small"
sx={{ sx={{
bgcolor: '#DBEAFE', bgcolor: '#DBEAFE',
color: '#1E40AF', color: '#1E40AF',
fontWeight: 600, fontWeight: 600,
fontSize: '0.75rem', fontSize: { xs: '0.6875rem', sm: '0.75rem' },
height: { xs: 24, sm: 28 },
'& .MuiChip-icon': { color: '#1E40AF' }, '& .MuiChip-icon': { color: '#1E40AF' },
}} }}
/> />
@ -649,12 +692,25 @@ export default function EventsPage() {
{/* Progress Bar for Active Events */} {/* Progress Bar for Active Events */}
{event.status === 'active' && ( {event.status === 'active' && (
<Box sx={{ mb: 4 }}> <Box sx={{ mb: { xs: 2, sm: 4 } }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}> <Box
<Typography variant="caption" sx={{ color: colors.gray[600], fontSize: '0.75rem' }}> 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>
<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))}% {Math.round(calculateProgress(event))}%
</Typography> </Typography>
</Box> </Box>
@ -662,7 +718,7 @@ export default function EventsPage() {
variant="determinate" variant="determinate"
value={calculateProgress(event)} value={calculateProgress(event)}
sx={{ sx={{
height: 8, height: { xs: 6, sm: 8 },
borderRadius: 4, borderRadius: 4,
bgcolor: colors.gray[200], bgcolor: colors.gray[200],
'& .MuiLinearProgress-bar': { '& .MuiLinearProgress-bar': {
@ -675,19 +731,33 @@ export default function EventsPage() {
)} )}
{/* Event Info and Stats Container */} {/* 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 */} {/* Left: Event Info */}
<Box> <Box sx={{ width: { xs: '100%', sm: 'auto' } }}>
<Box sx={{ mb: 4, display: 'flex', flexDirection: 'column', gap: 2 }}> <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 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<CardGiftcard sx={{ fontSize: 18, color: colors.pink }} /> <CardGiftcard sx={{ fontSize: { xs: 16, sm: 18 }, color: colors.pink }} />
<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.prize} {event.prize}
</Typography> </Typography>
</Box> </Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{getMethodIcon(event.method)} {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} {event.method}
</Typography> </Typography>
</Box> </Box>
@ -700,7 +770,8 @@ export default function EventsPage() {
color: colors.gray[600], color: colors.gray[600],
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 2, gap: { xs: 1.5, sm: 2 },
fontSize: { xs: '0.75rem', sm: '0.875rem' },
}} }}
> >
<span>📅</span> <span>📅</span>
@ -711,38 +782,58 @@ export default function EventsPage() {
</Box> </Box>
{/* Right: Stats */} {/* 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> <Box>
<Typography <Typography
variant="body2" 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>
<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()} {event.participants.toLocaleString()}
<Typography <Typography
component="span" component="span"
variant="body2" 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>
</Typography> </Typography>
{event.targetParticipants > 0 && ( {event.targetParticipants > 0 && (
<Typography variant="caption" sx={{ color: colors.gray[500], fontSize: '0.75rem' }}> <Typography
목표: {event.targetParticipants}명 ({Math.round((event.participants / event.targetParticipants) * 100)}%) variant="caption"
sx={{ color: colors.gray[500], fontSize: { xs: '0.6875rem', sm: '0.75rem' } }}
>
목표: {event.targetParticipants}명 (
{Math.round((event.participants / event.targetParticipants) * 100)}
%)
</Typography> </Typography>
)} )}
</Box> </Box>
<Box> <Box>
<Typography <Typography
variant="body2" 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 ROI
</Typography> </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}% {event.roi}%
</Typography> </Typography>
</Box> </Box>

166
src/app/(main)/page.tsx
View File

@ -88,14 +88,14 @@ export default function HomePage() {
minHeight: '100vh', 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 */} {/* Welcome Section */}
<Box sx={{ mb: 10 }}> <Box sx={{ mb: { xs: 5, sm: 10 } }}>
<Typography <Typography
variant="h3" variant="h3"
sx={{ sx={{
...responsiveText.h2, ...responsiveText.h2,
mb: 4, mb: { xs: 2, sm: 4 },
}} }}
> >
안녕하세요, {mockUser.name}님! 👋 안녕하세요, {mockUser.name}님! 👋
@ -106,7 +106,7 @@ export default function HomePage() {
</Box> </Box>
{/* KPI Cards */} {/* 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}> <Grid item xs={12} sm={4}>
<Card <Card
elevation={0} elevation={0}
@ -116,22 +116,22 @@ export default function HomePage() {
borderColor: 'transparent', 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 <Box
sx={{ sx={{
width: 64, width: { xs: 48, sm: 64 },
height: 64, height: { xs: 48, sm: 64 },
borderRadius: '50%', borderRadius: '50%',
bgcolor: 'rgba(0, 0, 0, 0.05)', bgcolor: 'rgba(0, 0, 0, 0.05)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
margin: '0 auto', margin: '0 auto',
mb: 3, mb: { xs: 2, sm: 3 },
}} }}
> >
<Celebration sx={{ <Celebration sx={{
fontSize: 32, fontSize: { xs: 24, sm: 32 },
color: colors.gray[900], color: colors.gray[900],
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))', filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
}} /> }} />
@ -139,10 +139,10 @@ export default function HomePage() {
<Typography <Typography
variant="body2" variant="body2"
sx={{ sx={{
mb: 1, mb: 0.5,
color: colors.gray[700], color: colors.gray[700],
fontWeight: 500, fontWeight: 500,
fontSize: '0.875rem', fontSize: { xs: '0.75rem', sm: '0.875rem' },
textShadow: '0px 1px 2px rgba(0,0,0,0.1)', textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
}} }}
> >
@ -153,7 +153,7 @@ export default function HomePage() {
sx={{ sx={{
fontWeight: 700, fontWeight: 700,
color: colors.gray[900], color: colors.gray[900],
fontSize: '2.25rem', fontSize: { xs: '1.5rem', sm: '2.25rem' },
textShadow: '0px 2px 4px rgba(0,0,0,0.15)', textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
}} }}
> >
@ -171,22 +171,22 @@ export default function HomePage() {
borderColor: 'transparent', 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 <Box
sx={{ sx={{
width: 64, width: { xs: 48, sm: 64 },
height: 64, height: { xs: 48, sm: 64 },
borderRadius: '50%', borderRadius: '50%',
bgcolor: 'rgba(0, 0, 0, 0.05)', bgcolor: 'rgba(0, 0, 0, 0.05)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
margin: '0 auto', margin: '0 auto',
mb: 3, mb: { xs: 2, sm: 3 },
}} }}
> >
<Group sx={{ <Group sx={{
fontSize: 32, fontSize: { xs: 24, sm: 32 },
color: colors.gray[900], color: colors.gray[900],
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))', filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
}} /> }} />
@ -194,10 +194,10 @@ export default function HomePage() {
<Typography <Typography
variant="body2" variant="body2"
sx={{ sx={{
mb: 1, mb: 0.5,
color: colors.gray[700], color: colors.gray[700],
fontWeight: 500, fontWeight: 500,
fontSize: '0.875rem', fontSize: { xs: '0.75rem', sm: '0.875rem' },
textShadow: '0px 1px 2px rgba(0,0,0,0.1)', textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
}} }}
> >
@ -208,7 +208,7 @@ export default function HomePage() {
sx={{ sx={{
fontWeight: 700, fontWeight: 700,
color: colors.gray[900], color: colors.gray[900],
fontSize: '2.25rem', fontSize: { xs: '1.5rem', sm: '2.25rem' },
textShadow: '0px 2px 4px rgba(0,0,0,0.15)', textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
}} }}
> >
@ -226,22 +226,22 @@ export default function HomePage() {
borderColor: 'transparent', 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 <Box
sx={{ sx={{
width: 64, width: { xs: 48, sm: 64 },
height: 64, height: { xs: 48, sm: 64 },
borderRadius: '50%', borderRadius: '50%',
bgcolor: 'rgba(0, 0, 0, 0.05)', bgcolor: 'rgba(0, 0, 0, 0.05)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
margin: '0 auto', margin: '0 auto',
mb: 3, mb: { xs: 2, sm: 3 },
}} }}
> >
<TrendingUp sx={{ <TrendingUp sx={{
fontSize: 32, fontSize: { xs: 24, sm: 32 },
color: colors.gray[900], color: colors.gray[900],
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))', filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
}} /> }} />
@ -249,10 +249,10 @@ export default function HomePage() {
<Typography <Typography
variant="body2" variant="body2"
sx={{ sx={{
mb: 1, mb: 0.5,
color: colors.gray[700], color: colors.gray[700],
fontWeight: 500, fontWeight: 500,
fontSize: '0.875rem', fontSize: { xs: '0.75rem', sm: '0.875rem' },
textShadow: '0px 1px 2px rgba(0,0,0,0.1)', textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
}} }}
> >
@ -263,7 +263,7 @@ export default function HomePage() {
sx={{ sx={{
fontWeight: 700, fontWeight: 700,
color: colors.gray[900], color: colors.gray[900],
fontSize: '2.25rem', fontSize: { xs: '1.5rem', sm: '2.25rem' },
textShadow: '0px 2px 4px rgba(0,0,0,0.15)', textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
}} }}
> >
@ -275,11 +275,11 @@ export default function HomePage() {
</Grid> </Grid>
{/* Quick Actions */} {/* Quick Actions */}
<Box sx={{ mb: 10 }}> <Box sx={{ mb: { xs: 5, sm: 10 } }}>
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 6 }}> <Typography variant="h5" sx={{ ...responsiveText.h3, mb: { xs: 3, sm: 6 } }}>
빠른 시작 빠른 시작
</Typography> </Typography>
<Grid container spacing={6}> <Grid container spacing={{ xs: 3, sm: 6 }}>
<Grid item xs={6} sm={6}> <Grid item xs={6} sm={6}>
<Card <Card
elevation={0} elevation={0}
@ -288,24 +288,24 @@ export default function HomePage() {
}} }}
onClick={handleCreateEvent} onClick={handleCreateEvent}
> >
<CardContent sx={{ textAlign: 'center', py: 6 }}> <CardContent sx={{ textAlign: 'center', py: { xs: 4, sm: 6 } }}>
<Box <Box
sx={{ sx={{
width: 72, width: { xs: 56, sm: 72 },
height: 72, height: { xs: 56, sm: 72 },
borderRadius: '20px', borderRadius: { xs: '16px', sm: '20px' },
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`, background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
margin: '0 auto', margin: '0 auto',
mb: 3, mb: { xs: 2, sm: 3 },
boxShadow: '0 4px 14px 0 rgba(167, 139, 250, 0.39)', 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> </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> </Typography>
</CardContent> </CardContent>
@ -319,24 +319,24 @@ export default function HomePage() {
}} }}
onClick={handleViewAnalytics} onClick={handleViewAnalytics}
> >
<CardContent sx={{ textAlign: 'center', py: 6 }}> <CardContent sx={{ textAlign: 'center', py: { xs: 4, sm: 6 } }}>
<Box <Box
sx={{ sx={{
width: 72, width: { xs: 56, sm: 72 },
height: 72, height: { xs: 56, sm: 72 },
borderRadius: '20px', borderRadius: { xs: '16px', sm: '20px' },
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.mint} 100%)`, background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.mint} 100%)`,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
margin: '0 auto', margin: '0 auto',
mb: 3, mb: { xs: 2, sm: 3 },
boxShadow: '0 4px 14px 0 rgba(96, 165, 250, 0.39)', 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> </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> </Typography>
</CardContent> </CardContent>
@ -346,20 +346,21 @@ export default function HomePage() {
</Box> </Box>
{/* Active Events */} {/* Active Events */}
<Box sx={{ mb: 10 }}> <Box sx={{ mb: { xs: 5, sm: 10 } }}>
<Box <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 variant="h5" sx={{ ...responsiveText.h3 }}>
진행 중인 이벤트 진행 중인 이벤트
</Typography> </Typography>
<Button <Button
size="medium" size="small"
endIcon={<span className="material-icons">chevron_right</span>} endIcon={<span className="material-icons" style={{ fontSize: '18px' }}>chevron_right</span>}
onClick={() => router.push('/events')} onClick={() => router.push('/events')}
sx={{ sx={{
color: colors.purple, color: colors.purple,
fontWeight: 600, fontWeight: 600,
fontSize: { xs: '0.8125rem', sm: '0.875rem' },
'&:hover': { bgcolor: 'rgba(167, 139, 250, 0.08)' }, '&:hover': { bgcolor: 'rgba(167, 139, 250, 0.08)' },
}} }}
> >
@ -402,7 +403,7 @@ export default function HomePage() {
</CardContent> </CardContent>
</Card> </Card>
) : ( ) : (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 6 }}> <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 3, sm: 6 } }}>
{activeEvents.map((event) => ( {activeEvents.map((event) => (
<Card <Card
key={event.id} key={event.id}
@ -412,27 +413,29 @@ export default function HomePage() {
}} }}
onClick={() => handleEventClick(event.id)} onClick={() => handleEventClick(event.id)}
> >
<CardContent sx={{ p: { xs: 6, sm: 8 } }}> <CardContent sx={{ p: { xs: 4, sm: 6, md: 8 } }}>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'start', 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} {event.title}
</Typography> </Typography>
<Box <Box
sx={{ sx={{
px: 2.5, px: { xs: 2, sm: 2.5 },
py: 0.75, py: 0.75,
bgcolor: colors.mint, bgcolor: colors.mint,
color: 'white', color: 'white',
borderRadius: 2, borderRadius: 2,
fontSize: '0.875rem', fontSize: { xs: '0.75rem', sm: '0.875rem' },
fontWeight: 600, fontWeight: 600,
flexShrink: 0,
}} }}
> >
{event.status} {event.status}
@ -441,11 +444,12 @@ export default function HomePage() {
<Typography <Typography
variant="body2" variant="body2"
sx={{ sx={{
mb: 6, mb: { xs: 3, sm: 6 },
color: colors.gray[600], color: colors.gray[600],
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 2, gap: 1,
fontSize: { xs: '0.75rem', sm: '0.875rem' },
}} }}
> >
<span>📅</span> <span>📅</span>
@ -453,23 +457,23 @@ export default function HomePage() {
{event.startDate} ~ {event.endDate} {event.startDate} ~ {event.endDate}
</span> </span>
</Typography> </Typography>
<Box sx={{ display: 'flex', gap: 12 }}> <Box sx={{ display: 'flex', gap: { xs: 6, sm: 12 } }}>
<Box> <Box>
<Typography <Typography
variant="body2" 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>
<Typography <Typography
variant="h5" 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()} {event.participants.toLocaleString()}
<Typography <Typography
component="span" component="span"
variant="body2" 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>
@ -478,11 +482,11 @@ export default function HomePage() {
<Box> <Box>
<Typography <Typography
variant="body2" 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 ROI
</Typography> </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}% {event.roi}%
</Typography> </Typography>
</Box> </Box>
@ -495,8 +499,8 @@ export default function HomePage() {
</Box> </Box>
{/* Recent Activity */} {/* Recent Activity */}
<Box sx={{ mb: 10 }}> <Box sx={{ mb: { xs: 5, sm: 10 } }}>
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 6 }}> <Typography variant="h5" sx={{ ...responsiveText.h3, mb: { xs: 3, sm: 6 } }}>
최근 활동 최근 활동
</Typography> </Typography>
<Card <Card
@ -505,24 +509,24 @@ export default function HomePage() {
...cardStyles.default, ...cardStyles.default,
}} }}
> >
<CardContent sx={{ p: { xs: 6, sm: 8 } }}> <CardContent sx={{ p: { xs: 4, sm: 6, md: 8 } }}>
{mockActivities.map((activity, index) => ( {mockActivities.map((activity, index) => (
<Box <Box
key={index} key={index}
sx={{ sx={{
display: 'flex', display: 'flex',
gap: 4, gap: { xs: 2, sm: 4 },
pt: index > 0 ? 6 : 0, pt: index > 0 ? { xs: 3, sm: 6 } : 0,
mt: index > 0 ? 6 : 0, mt: index > 0 ? { xs: 3, sm: 6 } : 0,
borderTop: index > 0 ? 1 : 0, borderTop: index > 0 ? 1 : 0,
borderColor: colors.gray[200], borderColor: colors.gray[200],
}} }}
> >
<Box <Box
sx={{ sx={{
width: 48, width: { xs: 40, sm: 48 },
height: 48, height: { xs: 40, sm: 48 },
borderRadius: '14px', borderRadius: { xs: '12px', sm: '14px' },
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`, background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@ -530,16 +534,16 @@ export default function HomePage() {
flexShrink: 0, flexShrink: 0,
}} }}
> >
<activity.icon sx={{ fontSize: 24, color: 'white' }} /> <activity.icon sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
</Box> </Box>
<Box sx={{ flex: 1 }}> <Box sx={{ flex: 1, minWidth: 0 }}>
<Typography <Typography
variant="body1" 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} {activity.text}
</Typography> </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} {activity.time}
</Typography> </Typography>
</Box> </Box>
@ -554,10 +558,10 @@ export default function HomePage() {
<Fab <Fab
sx={{ sx={{
position: 'fixed', position: 'fixed',
bottom: { xs: 80, sm: 90 }, bottom: { xs: 72, sm: 90 },
right: { xs: 20, sm: 32 }, right: { xs: 16, sm: 32 },
width: { xs: 64, sm: 72 }, width: { xs: 56, sm: 72 },
height: { xs: 64, sm: 72 }, height: { xs: 56, sm: 72 },
...getGradientButtonStyle('primary'), ...getGradientButtonStyle('primary'),
boxShadow: boxShadow:
'0 10px 25px -5px rgba(167, 139, 250, 0.5), 0 8px 10px -6px rgba(167, 139, 250, 0.5)', '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} onClick={handleCreateEvent}
> >
<Add sx={{ color: 'white', fontSize: { xs: 28, sm: 32 } }} /> <Add sx={{ color: 'white', fontSize: { xs: 24, sm: 32 } }} />
</Fab> </Fab>
</Box> </Box>
</> </>

40
src/shared/lib/button-styles.ts
View File

@ -118,39 +118,57 @@ export const containerStyles = {
}, },
}; };
// 공통 반응형 텍스트 스타일 // 공통 반응형 텍스트 스타일 (모바일 최적화)
export const responsiveText = { export const responsiveText = {
h1: { h1: {
fontSize: { xs: '1.875rem', sm: '2.25rem', md: '3rem' }, fontSize: { xs: '1.5rem', sm: '2.25rem', md: '3rem' }, // 모바일 30px → 24px
fontWeight: 700, fontWeight: 700,
color: colors.gray[900], color: colors.gray[900],
letterSpacing: '-0.025em', letterSpacing: '-0.025em',
}, },
h2: { 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, fontWeight: 700,
color: colors.gray[900], color: colors.gray[900],
letterSpacing: '-0.025em', letterSpacing: '-0.025em',
}, },
h3: { 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, fontWeight: 600,
color: colors.gray[900], color: colors.gray[900],
letterSpacing: '-0.025em', letterSpacing: '-0.025em',
}, },
h4: { h4: {
fontSize: { xs: '1.125rem', sm: '1.25rem', md: '1.5rem' }, fontSize: { xs: '1rem', sm: '1.25rem', md: '1.5rem' }, // 모바일 18px → 16px
fontWeight: 600, fontWeight: 600,
color: colors.gray[800], color: colors.gray[800],
}, },
body1: { body1: {
fontSize: { xs: '0.875rem', sm: '1rem' }, fontSize: { xs: '0.8125rem', sm: '1rem' }, // 모바일 14px → 13px
color: colors.gray[700], color: colors.gray[700],
lineHeight: 1.6,
},
body2: {
fontSize: { xs: '0.8125rem', sm: '0.875rem' },
color: colors.gray[600],
lineHeight: 1.5, 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
},
}; };