mirror of
https://github.com/ktds-dg0501/kt-event-marketing-fe.git
synced 2025-12-06 05:36:23 +00:00
develop : 환경 설정 초기 셋팅
This commit is contained in:
cherry2250
parent
01a77fe7a8
commit
e1fefc2dad
@ -1,16 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Typography,
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
Button,
|
||||
Fab,
|
||||
} from '@mui/material';
|
||||
import { Box, Container, Typography, Grid, Card, CardContent, Button, Fab } from '@mui/material';
|
||||
import {
|
||||
Add,
|
||||
Celebration,
|
||||
@ -22,7 +13,12 @@ import {
|
||||
CheckCircle,
|
||||
} from '@mui/icons-material';
|
||||
import Header from '@/shared/ui/Header';
|
||||
import { getGradientButtonStyle, responsiveText, cardStyles, colors } from '@/shared/lib/button-styles';
|
||||
import {
|
||||
getGradientButtonStyle,
|
||||
responsiveText,
|
||||
cardStyles,
|
||||
colors,
|
||||
} from '@/shared/lib/button-styles';
|
||||
|
||||
// Mock 사용자 데이터 (API 연동 전까지 임시 사용)
|
||||
const mockUser = {
|
||||
@ -64,9 +60,10 @@ export default function HomePage() {
|
||||
// KPI 계산
|
||||
const activeEvents = mockEvents.filter((e) => e.status === '진행중');
|
||||
const totalParticipants = mockEvents.reduce((sum, e) => sum + e.participants, 0);
|
||||
const avgROI = mockEvents.length > 0
|
||||
? Math.round(mockEvents.reduce((sum, e) => sum + e.roi, 0) / mockEvents.length)
|
||||
: 0;
|
||||
const avgROI =
|
||||
mockEvents.length > 0
|
||||
? Math.round(mockEvents.reduce((sum, e) => sum + e.roi, 0) / mockEvents.length)
|
||||
: 0;
|
||||
|
||||
const handleCreateEvent = () => {
|
||||
router.push('/events/create');
|
||||
@ -92,379 +89,439 @@ export default function HomePage() {
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" sx={{ pt: 5, pb: 4, px: { xs: 3, sm: 4, md: 5 } }}>
|
||||
{/* Welcome Section */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
...responsiveText.h2,
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
안녕하세요, {mockUser.name}님! 👋
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ ...responsiveText.body1 }}>
|
||||
이벤트 현황을 한눈에 확인하고 성과를 분석해보세요
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<Grid container spacing={4} sx={{ mb: 6 }}>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Card
|
||||
elevation={0}
|
||||
{/* Welcome Section */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
...responsiveText.h2,
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.2)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Celebration sx={{ fontSize: 32, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 1, color: 'rgba(255, 255, 255, 0.9)', fontWeight: 500, fontSize: '0.875rem' }}
|
||||
>
|
||||
진행 중인 이벤트
|
||||
</Typography>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
{activeEvents.length}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.mintLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.2)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Group sx={{ fontSize: 32, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 1, color: 'rgba(255, 255, 255, 0.9)', fontWeight: 500, fontSize: '0.875rem' }}
|
||||
>
|
||||
총 참여자
|
||||
</Typography>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
{totalParticipants.toLocaleString()}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.2)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<TrendingUp sx={{ fontSize: 32, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 1, color: 'rgba(255, 255, 255, 0.9)', fontWeight: 500, fontSize: '0.875rem' }}
|
||||
>
|
||||
평균 ROI
|
||||
</Typography>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
{avgROI}%
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 4 }}>
|
||||
빠른 시작
|
||||
</Typography>
|
||||
<Grid container spacing={4}>
|
||||
<Grid item xs={6} sm={6}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.clickable,
|
||||
}}
|
||||
onClick={handleCreateEvent}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: '20px',
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2.5,
|
||||
boxShadow: '0 4px 14px 0 rgba(167, 139, 250, 0.39)',
|
||||
}}
|
||||
>
|
||||
<Add sx={{ fontSize: 36, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
새 이벤트
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={6}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.clickable,
|
||||
}}
|
||||
onClick={handleViewAnalytics}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: '20px',
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.mint} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2.5,
|
||||
boxShadow: '0 4px 14px 0 rgba(96, 165, 250, 0.39)',
|
||||
}}
|
||||
>
|
||||
<Analytics sx={{ fontSize: 36, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
성과 분석
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Active Events */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3 }}>
|
||||
진행 중인 이벤트
|
||||
안녕하세요, {mockUser.name}님! 👋
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ ...responsiveText.body1 }}>
|
||||
이벤트 현황을 한눈에 확인하고 성과를 분석해보세요
|
||||
</Typography>
|
||||
<Button
|
||||
size="medium"
|
||||
endIcon={<span className="material-icons">chevron_right</span>}
|
||||
onClick={() => router.push('/events')}
|
||||
sx={{
|
||||
color: colors.purple,
|
||||
fontWeight: 600,
|
||||
'&:hover': { bgcolor: 'rgba(167, 139, 250, 0.08)' },
|
||||
}}
|
||||
>
|
||||
전체보기
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{activeEvents.length === 0 ? (
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 10 }}>
|
||||
<Box sx={{ color: colors.gray[300], mb: 3 }}>
|
||||
<span className="material-icons" style={{ fontSize: 72 }}>
|
||||
event_busy
|
||||
</span>
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ mb: 2, color: colors.gray[700] }}>
|
||||
진행 중인 이벤트가 없습니다
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ mb: 4, color: colors.gray[500] }}>
|
||||
새로운 이벤트를 만들어 고객과 소통해보세요
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Add />}
|
||||
onClick={handleCreateEvent}
|
||||
sx={{
|
||||
py: { xs: 1.5, sm: 1.75 },
|
||||
px: { xs: 3, sm: 4 },
|
||||
fontSize: { xs: 15, sm: 16 },
|
||||
...getGradientButtonStyle('primary'),
|
||||
}}
|
||||
>
|
||||
새 이벤트 만들기
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
{activeEvents.map((event) => (
|
||||
{/* KPI Cards */}
|
||||
<Grid container spacing={4} sx={{ mb: 6 }}>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.2)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Celebration sx={{ fontSize: 32, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 1,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
>
|
||||
진행 중인 이벤트
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}
|
||||
>
|
||||
{activeEvents.length}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.mintLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.2)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Group sx={{ fontSize: 32, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 1,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
>
|
||||
총 참여자
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}
|
||||
>
|
||||
{totalParticipants.toLocaleString()}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.2)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<TrendingUp sx={{ fontSize: 32, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 1,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
>
|
||||
평균 ROI
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}
|
||||
>
|
||||
{avgROI}%
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 4 }}>
|
||||
빠른 시작
|
||||
</Typography>
|
||||
<Grid container spacing={4}>
|
||||
<Grid item xs={6} sm={6}>
|
||||
<Card
|
||||
key={event.id}
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.clickable,
|
||||
}}
|
||||
onClick={() => handleEventClick(event.id)}
|
||||
onClick={handleCreateEvent}
|
||||
>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 4 } }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', mb: 3 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
{event.title}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
px: 2.5,
|
||||
py: 0.75,
|
||||
bgcolor: colors.mint,
|
||||
color: 'white',
|
||||
borderRadius: 2,
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{event.status}
|
||||
</Box>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: '20px',
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2.5,
|
||||
boxShadow: '0 4px 14px 0 rgba(167, 139, 250, 0.39)',
|
||||
}}
|
||||
>
|
||||
<Add sx={{ fontSize: 36, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="body2" sx={{ mb: 3, color: colors.gray[600], display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<span>📅</span>
|
||||
<span>{event.startDate} ~ {event.endDate}</span>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
새 이벤트
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 6 }}>
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}>
|
||||
참여자
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
{event.participants.toLocaleString()}
|
||||
<Typography component="span" variant="body2" sx={{ ml: 0.5, color: colors.gray[600] }}>
|
||||
명
|
||||
</Typography>
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}>
|
||||
ROI
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint }}>
|
||||
{event.roi}%
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 4 }}>
|
||||
최근 활동
|
||||
</Typography>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 4 } }}>
|
||||
{mockActivities.map((activity, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={6}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 3,
|
||||
pt: index > 0 ? 3.5 : 0,
|
||||
mt: index > 0 ? 3.5 : 0,
|
||||
borderTop: index > 0 ? 1 : 0,
|
||||
borderColor: colors.gray[200],
|
||||
...cardStyles.clickable,
|
||||
}}
|
||||
onClick={handleViewAnalytics}
|
||||
>
|
||||
<Box
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: '20px',
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.mint} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2.5,
|
||||
boxShadow: '0 4px 14px 0 rgba(96, 165, 250, 0.39)',
|
||||
}}
|
||||
>
|
||||
<Analytics sx={{ fontSize: 36, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
성과분석
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Active Events */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Box
|
||||
sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}
|
||||
>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3 }}>
|
||||
진행 중인 이벤트
|
||||
</Typography>
|
||||
<Button
|
||||
size="medium"
|
||||
endIcon={<span className="material-icons">chevron_right</span>}
|
||||
onClick={() => router.push('/events')}
|
||||
sx={{
|
||||
color: colors.purple,
|
||||
fontWeight: 600,
|
||||
'&:hover': { bgcolor: 'rgba(167, 139, 250, 0.08)' },
|
||||
}}
|
||||
>
|
||||
전체보기
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{activeEvents.length === 0 ? (
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 10 }}>
|
||||
<Box sx={{ color: colors.gray[300], mb: 3 }}>
|
||||
<span className="material-icons" style={{ fontSize: 72 }}>
|
||||
event_busy
|
||||
</span>
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ mb: 2, color: colors.gray[700] }}>
|
||||
진행 중인 이벤트가 없습니다
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ mb: 4, color: colors.gray[500] }}>
|
||||
새로운 이벤트를 만들어 고객과 소통해보세요
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Add />}
|
||||
onClick={handleCreateEvent}
|
||||
sx={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '14px',
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
py: { xs: 1.5, sm: 1.75 },
|
||||
px: { xs: 3, sm: 4 },
|
||||
fontSize: { xs: 15, sm: 16 },
|
||||
...getGradientButtonStyle('primary'),
|
||||
}}
|
||||
>
|
||||
<activity.icon sx={{ fontSize: 24, color: 'white' }} />
|
||||
</Box>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], mb: 0.5 }}>
|
||||
{activity.text}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[500] }}>
|
||||
{activity.time}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Box>
|
||||
</Container>
|
||||
새 이벤트 만들기
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
{activeEvents.map((event) => (
|
||||
<Card
|
||||
key={event.id}
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.clickable,
|
||||
}}
|
||||
onClick={() => handleEventClick(event.id)}
|
||||
>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 4 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'start',
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
{event.title}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
px: 2.5,
|
||||
py: 0.75,
|
||||
bgcolor: colors.mint,
|
||||
color: 'white',
|
||||
borderRadius: 2,
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{event.status}
|
||||
</Box>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 3,
|
||||
color: colors.gray[600],
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<span>📅</span>
|
||||
<span>
|
||||
{event.startDate} ~ {event.endDate}
|
||||
</span>
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 6 }}>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}
|
||||
>
|
||||
참여자
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{ fontWeight: 700, color: colors.gray[900] }}
|
||||
>
|
||||
{event.participants.toLocaleString()}
|
||||
<Typography
|
||||
component="span"
|
||||
variant="body2"
|
||||
sx={{ ml: 0.5, color: colors.gray[600] }}
|
||||
>
|
||||
명
|
||||
</Typography>
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}
|
||||
>
|
||||
ROI
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint }}>
|
||||
{event.roi}%
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Floating Action Button */}
|
||||
<Fab
|
||||
{/* Recent Activity */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 4 }}>
|
||||
최근 활동
|
||||
</Typography>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 4 } }}>
|
||||
{mockActivities.map((activity, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 3,
|
||||
pt: index > 0 ? 3.5 : 0,
|
||||
mt: index > 0 ? 3.5 : 0,
|
||||
borderTop: index > 0 ? 1 : 0,
|
||||
borderColor: colors.gray[200],
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '14px',
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<activity.icon sx={{ fontSize: 24, color: 'white' }} />
|
||||
</Box>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ fontWeight: 600, color: colors.gray[900], mb: 0.5 }}
|
||||
>
|
||||
{activity.text}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[500] }}>
|
||||
{activity.time}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
{/* Floating Action Button */}
|
||||
<Fab
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
bottom: { xs: 80, sm: 90 },
|
||||
@ -472,9 +529,11 @@ export default function HomePage() {
|
||||
width: { xs: 64, sm: 72 },
|
||||
height: { xs: 64, sm: 72 },
|
||||
...getGradientButtonStyle('primary'),
|
||||
boxShadow: '0 10px 25px -5px rgba(167, 139, 250, 0.5), 0 8px 10px -6px rgba(167, 139, 250, 0.5)',
|
||||
boxShadow:
|
||||
'0 10px 25px -5px rgba(167, 139, 250, 0.5), 0 8px 10px -6px rgba(167, 139, 250, 0.5)',
|
||||
'&:hover': {
|
||||
boxShadow: '0 20px 35px -5px rgba(167, 139, 250, 0.6), 0 12px 15px -6px rgba(167, 139, 250, 0.6)',
|
||||
boxShadow:
|
||||
'0 20px 35px -5px rgba(167, 139, 250, 0.6), 0 12px 15px -6px rgba(167, 139, 250, 0.6)',
|
||||
},
|
||||
}}
|
||||
onClick={handleCreateEvent}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user