mirror of
https://github.com/ktds-dg0501/kt-event-marketing-fe.git
synced 2025-12-06 08:16:23 +00:00
Cherry Kim
GitHub
commit
d589fd97a2
25
package-lock.json
generated
25
package-lock.json
generated
@ -18,11 +18,11 @@
|
||||
"@use-funnel/browser": "^0.0.12",
|
||||
"@use-funnel/next": "^0.0.12",
|
||||
"axios": "^1.7.7",
|
||||
"chart.js": "^4.4.6",
|
||||
"chart.js": "^4.5.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"next": "^14.2.15",
|
||||
"react": "^18.3.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-chartjs-2": "^5.3.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.53.0",
|
||||
"zod": "^3.23.8",
|
||||
@ -30,6 +30,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.48.0",
|
||||
"@types/chart.js": "^2.9.41",
|
||||
"@types/node": "^22.7.5",
|
||||
"@types/react": "^18.3.11",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
@ -1215,6 +1216,16 @@
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/chart.js": {
|
||||
"version": "2.9.41",
|
||||
"resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.41.tgz",
|
||||
"integrity": "sha512-3dvkDvueckY83UyUXtJMalYoH6faOLkWQoaTlJgB4Djde3oORmNP0Jw85HtzTuXyliUHcdp704s0mZFQKio/KQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"moment": "^2.10.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/json5": {
|
||||
"version": "0.0.29",
|
||||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
@ -4684,6 +4695,16 @@
|
||||
"node": ">=16 || 14 >=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/moment": {
|
||||
"version": "2.30.1",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
|
||||
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
|
||||
@ -20,11 +20,11 @@
|
||||
"@use-funnel/browser": "^0.0.12",
|
||||
"@use-funnel/next": "^0.0.12",
|
||||
"axios": "^1.7.7",
|
||||
"chart.js": "^4.4.6",
|
||||
"chart.js": "^4.5.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"next": "^14.2.15",
|
||||
"react": "^18.3.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-chartjs-2": "^5.3.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.53.0",
|
||||
"zod": "^3.23.8",
|
||||
@ -32,6 +32,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.48.0",
|
||||
"@types/chart.js": "^2.9.41",
|
||||
"@types/node": "^22.7.5",
|
||||
"@types/react": "^18.3.11",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
|
||||
@ -10,12 +10,41 @@ import {
|
||||
Grid,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
PieChart,
|
||||
ShowChart,
|
||||
PieChart as PieChartIcon,
|
||||
ShowChart as ShowChartIcon,
|
||||
Payments,
|
||||
People,
|
||||
} from '@mui/icons-material';
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
ArcElement,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from 'chart.js';
|
||||
import { Pie, Line } from 'react-chartjs-2';
|
||||
import Header from '@/shared/ui/Header';
|
||||
import {
|
||||
cardStyles,
|
||||
colors,
|
||||
responsiveText,
|
||||
} from '@/shared/lib/button-styles';
|
||||
|
||||
// Chart.js 등록
|
||||
ChartJS.register(
|
||||
ArcElement,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
);
|
||||
|
||||
// Mock 데이터
|
||||
const mockAnalyticsData = {
|
||||
@ -28,9 +57,9 @@ const mockAnalyticsData = {
|
||||
targetRoi: 300,
|
||||
},
|
||||
channelPerformance: [
|
||||
{ channel: '우리동네TV', participants: 58, percentage: 45, color: '#E31E24' },
|
||||
{ channel: '링고비즈', participants: 38, percentage: 30, color: '#0066FF' },
|
||||
{ channel: 'SNS', participants: 32, percentage: 25, color: '#FFB800' },
|
||||
{ channel: '우리동네TV', participants: 58, percentage: 45, color: '#F472B6' },
|
||||
{ channel: '링고비즈', participants: 38, percentage: 30, color: '#60A5FA' },
|
||||
{ channel: 'SNS', participants: 32, percentage: 25, color: '#FB923C' },
|
||||
],
|
||||
timePerformance: {
|
||||
peakTime: '오후 2-4시',
|
||||
@ -98,18 +127,25 @@ export default function AnalyticsPage() {
|
||||
return (
|
||||
<>
|
||||
<Header title="성과 분석" showBack={true} showMenu={false} showProfile={true} />
|
||||
<Box sx={{ pt: { xs: 7, sm: 8 }, minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
pt: { xs: 7, sm: 8 },
|
||||
pb: 10,
|
||||
bgcolor: colors.gray[50],
|
||||
minHeight: '100vh',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
{/* Title with Real-time Indicator */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
mb: 4,
|
||||
mb: 10,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3 }}>
|
||||
📊 요약 (실시간)
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
@ -118,7 +154,7 @@ export default function AnalyticsPage() {
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'success.main',
|
||||
bgcolor: colors.mint,
|
||||
animation: 'pulse 2s infinite',
|
||||
'@keyframes pulse': {
|
||||
'0%, 100%': { opacity: 1 },
|
||||
@ -126,39 +162,75 @@ export default function AnalyticsPage() {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="caption" sx={{ ...responsiveText.body2 }}>
|
||||
{updateText}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Summary KPI Cards */}
|
||||
<Grid container spacing={3} sx={{ mb: 5 }}>
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3, px: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 2,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
참여자 수
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, my: 1 }}>
|
||||
{summary.participants}명
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
{summary.participants}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="success.main" sx={{ fontWeight: 600 }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
|
||||
>
|
||||
↑ {summary.participantsDelta}명 (오늘)
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3, px: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 2,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
총 비용
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, my: 1 }}>
|
||||
{Math.floor(summary.totalCost / 10000)}만원
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
{Math.floor(summary.totalCost / 10000)}만
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
|
||||
>
|
||||
경품 {Math.floor(roiDetail.prizeCost / 10000)}만 + 채널{' '}
|
||||
{Math.floor(roiDetail.channelCost / 10000)}만
|
||||
</Typography>
|
||||
@ -166,31 +238,67 @@ export default function AnalyticsPage() {
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3, px: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.mintLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 2,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
예상 수익
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, my: 1, color: 'success.main' }}>
|
||||
{Math.floor(summary.expectedRevenue / 10000)}만원
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
{Math.floor(summary.expectedRevenue / 10000)}만
|
||||
</Typography>
|
||||
<Typography variant="caption" color="success.main" sx={{ fontWeight: 600 }}>
|
||||
매출증가 {Math.floor(roiDetail.salesIncrease / 10000)}만 + LTV{' '}
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
|
||||
>
|
||||
매출 {Math.floor(roiDetail.salesIncrease / 10000)}만 + LTV{' '}
|
||||
{Math.floor(roiDetail.newCustomerLTV / 10000)}만
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3, px: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 2,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
투자대비수익률
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, my: 1, color: 'success.main' }}>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
{summary.roi}%
|
||||
</Typography>
|
||||
<Typography variant="caption" color="success.main" sx={{ fontWeight: 600 }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
|
||||
>
|
||||
목표 {summary.targetRoi}% 달성
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -199,39 +307,76 @@ export default function AnalyticsPage() {
|
||||
</Grid>
|
||||
|
||||
{/* Charts Grid */}
|
||||
<Grid container spacing={4} sx={{ mb: 5 }}>
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
{/* Channel Performance */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||
<PieChart color="error" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '12px',
|
||||
background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.pinkLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<PieChartIcon sx={{ fontSize: 24, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
채널별 성과
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Chart Placeholder */}
|
||||
{/* Pie Chart */}
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
aspectRatio: '1 / 1',
|
||||
bgcolor: 'grey.100',
|
||||
borderRadius: 3,
|
||||
maxWidth: 300,
|
||||
mx: 'auto',
|
||||
mb: 3,
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
p: 4,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 64, color: '#bdbdbd' }}>
|
||||
donut_large
|
||||
</span>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
|
||||
파이 차트
|
||||
</Typography>
|
||||
<Pie
|
||||
data={{
|
||||
labels: channelPerformance.map((item) => item.channel),
|
||||
datasets: [
|
||||
{
|
||||
data: channelPerformance.map((item) => item.participants),
|
||||
backgroundColor: channelPerformance.map((item) => item.color),
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function (context) {
|
||||
const label = context.label || '';
|
||||
const value = context.parsed || 0;
|
||||
const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0);
|
||||
const percentage = ((value / total) * 100).toFixed(1);
|
||||
return `${label}: ${value}명 (${percentage}%)`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Legend */}
|
||||
@ -250,9 +395,11 @@ export default function AnalyticsPage() {
|
||||
bgcolor: item.color,
|
||||
}}
|
||||
/>
|
||||
<Typography variant="body2">{item.channel}</Typography>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[700] }}>
|
||||
{item.channel}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
{item.percentage}% ({item.participants}명)
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -264,44 +411,113 @@ export default function AnalyticsPage() {
|
||||
|
||||
{/* Time Trend */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||
<ShowChart color="error" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '12px',
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<ShowChartIcon sx={{ fontSize: 24, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
시간대별 참여 추이
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Chart Placeholder */}
|
||||
{/* Line Chart */}
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
aspectRatio: '16 / 9',
|
||||
bgcolor: 'grey.100',
|
||||
borderRadius: 3,
|
||||
mb: 3,
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
p: 4,
|
||||
mb: 3,
|
||||
minHeight: 200,
|
||||
}}
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 64, color: '#bdbdbd' }}>
|
||||
trending_up
|
||||
</span>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
|
||||
라인 차트
|
||||
</Typography>
|
||||
<Line
|
||||
data={{
|
||||
labels: [
|
||||
'00시',
|
||||
'03시',
|
||||
'06시',
|
||||
'09시',
|
||||
'12시',
|
||||
'15시',
|
||||
'18시',
|
||||
'21시',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: '참여자 수',
|
||||
data: [3, 2, 5, 12, 28, 35, 22, 15],
|
||||
borderColor: colors.blue,
|
||||
backgroundColor: `${colors.blue}33`,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointBackgroundColor: colors.blue,
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: colors.gray[900],
|
||||
padding: 12,
|
||||
displayColors: false,
|
||||
callbacks: {
|
||||
label: function (context) {
|
||||
return `${context.parsed.y}명`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
color: colors.gray[600],
|
||||
},
|
||||
grid: {
|
||||
color: colors.gray[200],
|
||||
},
|
||||
},
|
||||
x: {
|
||||
ticks: {
|
||||
color: colors.gray[600],
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Stats */}
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
|
||||
<Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[600] }}>
|
||||
피크 시간: {timePerformance.peakTime} ({timePerformance.peakParticipants}명)
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
평균 시간당: {timePerformance.avgPerHour}명
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -311,37 +527,49 @@ export default function AnalyticsPage() {
|
||||
</Grid>
|
||||
|
||||
{/* ROI Detail & Participant Profile */}
|
||||
<Grid container spacing={4} sx={{ mb: 5 }}>
|
||||
<Grid container spacing={6}>
|
||||
{/* ROI Detail */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||
<Payments color="error" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '12px',
|
||||
background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Payments sx={{ fontSize: 24, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
투자대비수익률 상세
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.gray[900] }}>
|
||||
총 비용: {Math.floor(roiDetail.totalCost / 10000)}만원
|
||||
</Typography>
|
||||
<Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
<Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
• 경품 비용
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
{Math.floor(roiDetail.prizeCost / 10000)}만원
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
• 채널 비용
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
{Math.floor(roiDetail.channelCost / 10000)}만원
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -349,23 +577,23 @@ export default function AnalyticsPage() {
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.gray[900] }}>
|
||||
예상 수익: {Math.floor(roiDetail.expectedRevenue / 10000)}만원
|
||||
</Typography>
|
||||
<Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
<Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
• 매출 증가
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: 'success.main' }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint }}>
|
||||
{Math.floor(roiDetail.salesIncrease / 10000)}만원
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" sx={{ color: colors.gray[600] }}>
|
||||
• 신규 고객 LTV
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: 'success.main' }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint }}>
|
||||
{Math.floor(roiDetail.newCustomerLTV / 10000)}만원
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -373,26 +601,26 @@ export default function AnalyticsPage() {
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1, color: 'success.main' }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.mint }}>
|
||||
투자대비수익률
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
bgcolor: 'grey.100',
|
||||
p: 2.5,
|
||||
bgcolor: colors.gray[100],
|
||||
borderRadius: 2,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ mb: 0.5 }}>
|
||||
<Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[700] }}>
|
||||
(수익 - 비용) ÷ 비용 × 100
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ mb: 1 }}>
|
||||
<Typography variant="body2" sx={{ mb: 1.5, color: colors.gray[600] }}>
|
||||
({Math.floor(roiDetail.expectedRevenue / 10000)}만 -{' '}
|
||||
{Math.floor(roiDetail.totalCost / 10000)}만) ÷{' '}
|
||||
{Math.floor(roiDetail.totalCost / 10000)}만 × 100
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: 'success.main' }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint }}>
|
||||
= {summary.roi}%
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -404,33 +632,45 @@ export default function AnalyticsPage() {
|
||||
|
||||
{/* Participant Profile */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||
<People color="error" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '12px',
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<People sx={{ fontSize: 24, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
참여자 프로필
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Age Distribution */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: 2 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: 2, color: colors.gray[900] }}>
|
||||
연령별
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
||||
{participantProfile.age.map((item) => (
|
||||
<Box key={item.label}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<Typography variant="body2" sx={{ minWidth: 60 }}>
|
||||
<Typography variant="body2" sx={{ minWidth: 60, color: colors.gray[700] }}>
|
||||
{item.label}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
height: 24,
|
||||
bgcolor: 'grey.200',
|
||||
borderRadius: 1,
|
||||
height: 28,
|
||||
bgcolor: colors.gray[200],
|
||||
borderRadius: 1.5,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
@ -438,11 +678,11 @@ export default function AnalyticsPage() {
|
||||
sx={{
|
||||
width: `${item.percentage}%`,
|
||||
height: '100%',
|
||||
bgcolor: 'info.main',
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
pr: 1,
|
||||
pr: 1.5,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
@ -461,22 +701,22 @@ export default function AnalyticsPage() {
|
||||
|
||||
{/* Gender Distribution */}
|
||||
<Box>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: 2 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: 2, color: colors.gray[900] }}>
|
||||
성별
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
||||
{participantProfile.gender.map((item) => (
|
||||
<Box key={item.label}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<Typography variant="body2" sx={{ minWidth: 60 }}>
|
||||
<Typography variant="body2" sx={{ minWidth: 60, color: colors.gray[700] }}>
|
||||
{item.label}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
height: 24,
|
||||
bgcolor: 'grey.200',
|
||||
borderRadius: 1,
|
||||
height: 28,
|
||||
bgcolor: colors.gray[200],
|
||||
borderRadius: 1.5,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
@ -484,11 +724,11 @@ export default function AnalyticsPage() {
|
||||
sx={{
|
||||
width: `${item.percentage}%`,
|
||||
height: '100%',
|
||||
bgcolor: 'error.main',
|
||||
background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.pinkLight} 100%)`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
pr: 1,
|
||||
pr: 1.5,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
|
||||
@ -29,8 +29,27 @@ import {
|
||||
Add,
|
||||
Remove,
|
||||
Info,
|
||||
People,
|
||||
} from '@mui/icons-material';
|
||||
|
||||
// 디자인 시스템 색상
|
||||
const colors = {
|
||||
pink: '#F472B6',
|
||||
purple: '#C084FC',
|
||||
purpleLight: '#E9D5FF',
|
||||
blue: '#60A5FA',
|
||||
mint: '#34D399',
|
||||
orange: '#FB923C',
|
||||
yellow: '#FBBF24',
|
||||
gray: {
|
||||
900: '#1A1A1A',
|
||||
700: '#4A4A4A',
|
||||
500: '#9E9E9E',
|
||||
300: '#D9D9D9',
|
||||
100: '#F5F5F5',
|
||||
},
|
||||
};
|
||||
|
||||
// Mock 데이터
|
||||
const mockEventData = {
|
||||
name: '신규고객 유치 이벤트',
|
||||
@ -163,55 +182,77 @@ export default function DrawPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 4 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
{/* Setup View (Before Drawing) */}
|
||||
{!showResults && (
|
||||
<>
|
||||
{/* Event Info */}
|
||||
<Card sx={{ mb: 3, borderRadius: 3 }}>
|
||||
<CardContent>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
|
||||
<EventNote color="error" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
이벤트 정보
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
이벤트명
|
||||
</Typography>
|
||||
<Typography variant="body1">{mockEventData.name}</Typography>
|
||||
</Box>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
총 참여자
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
{mockEventData.totalParticipants}명
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
추첨 상태
|
||||
</Typography>
|
||||
<Typography variant="body1">추첨 전</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Page Header */}
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, fontSize: '2rem', mb: 2 }}>
|
||||
🎲 당첨자 추첨
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
참여자 중에서 공정하게 당첨자를 선정하세요
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Event Info Summary Cards */}
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
<Grid item xs={6} md={6}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<EventNote sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
이벤트명
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: 'white' }}>
|
||||
{mockEventData.name}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={6}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, #93C5FD 100%)`,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<People sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
총 참여자
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
|
||||
{mockEventData.totalParticipants}명
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Drawing Settings */}
|
||||
<Card sx={{ mb: 3, borderRadius: 3 }}>
|
||||
<CardContent>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||
<Tune color="error" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Card elevation={0} sx={{ mb: 10, borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 6 }}>
|
||||
<Tune sx={{ fontSize: 32, color: colors.pink }} />
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
|
||||
추첨 설정
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="body2" sx={{ mb: 2 }}>
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Typography variant="h6" sx={{ mb: 4, fontWeight: 600 }}>
|
||||
당첨 인원
|
||||
</Typography>
|
||||
<Box
|
||||
@ -219,33 +260,44 @@ export default function DrawPage() {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 2,
|
||||
gap: 4,
|
||||
p: 4,
|
||||
bgcolor: colors.gray[100],
|
||||
borderRadius: 3,
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
onClick={handleDecrease}
|
||||
sx={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
width: 60,
|
||||
height: 60,
|
||||
border: '2px solid',
|
||||
borderColor: colors.purple,
|
||||
color: colors.purple,
|
||||
'&:hover': {
|
||||
bgcolor: colors.purpleLight,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Remove />
|
||||
<Remove sx={{ fontSize: 28 }} />
|
||||
</IconButton>
|
||||
<Typography variant="h3" sx={{ fontWeight: 600, width: 80, textAlign: 'center' }}>
|
||||
<Typography variant="h2" sx={{ fontWeight: 700, width: 120, textAlign: 'center', color: colors.purple }}>
|
||||
{winnerCount}
|
||||
</Typography>
|
||||
<IconButton
|
||||
onClick={handleIncrease}
|
||||
sx={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
width: 60,
|
||||
height: 60,
|
||||
border: '2px solid',
|
||||
borderColor: colors.purple,
|
||||
color: colors.purple,
|
||||
'&:hover': {
|
||||
bgcolor: colors.purpleLight,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Add />
|
||||
<Add sx={{ fontSize: 28 }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
@ -255,21 +307,42 @@ export default function DrawPage() {
|
||||
<Checkbox
|
||||
checked={storeBonus}
|
||||
onChange={(e) => setStoreBonus(e.target.checked)}
|
||||
sx={{
|
||||
color: colors.purple,
|
||||
'&.Mui-checked': {
|
||||
color: colors.purple,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="매장 방문 고객 가산점 (가중치: 1.5배)"
|
||||
sx={{ mb: 3 }}
|
||||
label={
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
매장 방문 고객 가산점 (가중치: 1.5배)
|
||||
</Typography>
|
||||
}
|
||||
sx={{ mb: 6 }}
|
||||
/>
|
||||
|
||||
<Box sx={{ bgcolor: 'background.default', p: 2, borderRadius: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 1 }}>
|
||||
<Info sx={{ fontSize: 16 }} color="action" />
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: colors.purpleLight,
|
||||
p: 4,
|
||||
borderRadius: 3,
|
||||
border: `1px solid ${colors.purple}40`,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 3 }}>
|
||||
<Info sx={{ fontSize: 24, color: colors.purple }} />
|
||||
<Typography variant="h6" sx={{ fontWeight: 600, color: colors.purple }}>
|
||||
추첨 방식
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="body2">• 난수 기반 무작위 추첨</Typography>
|
||||
<Typography variant="body2">• 모든 추첨 과정은 자동 기록됩니다</Typography>
|
||||
<Typography variant="body1" sx={{ mb: 2, color: colors.gray[700] }}>
|
||||
• 난수 기반 무작위 추첨
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ color: colors.gray[700] }}>
|
||||
• 모든 추첨 과정은 자동 기록됩니다
|
||||
</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@ -279,45 +352,75 @@ export default function DrawPage() {
|
||||
fullWidth
|
||||
variant="contained"
|
||||
size="large"
|
||||
startIcon={<Casino />}
|
||||
startIcon={<Casino sx={{ fontSize: 28 }} />}
|
||||
onClick={handleStartDrawing}
|
||||
sx={{ mb: 3, py: 1.5, borderRadius: 2, fontWeight: 700, fontSize: '1rem' }}
|
||||
sx={{
|
||||
mb: 10,
|
||||
py: 3,
|
||||
borderRadius: 4,
|
||||
fontWeight: 700,
|
||||
fontSize: '1.25rem',
|
||||
background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.purple} 100%)`,
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.purple} 100%)`,
|
||||
boxShadow: '0 6px 16px rgba(0, 0, 0, 0.2)',
|
||||
transform: 'translateY(-2px)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
추첨 시작
|
||||
</Button>
|
||||
|
||||
{/* Drawing History */}
|
||||
<Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2 }}>
|
||||
📜 추첨 이력 (최근 3건)
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
|
||||
📜 추첨 이력
|
||||
</Typography>
|
||||
{mockDrawingHistory.length === 0 ? (
|
||||
<Card sx={{ borderRadius: 3 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4 }}>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 8 }}>
|
||||
<ListIcon sx={{ fontSize: 64, color: colors.gray[300], mb: 2 }} />
|
||||
<Typography variant="h6" color="text.secondary">
|
||||
추첨 이력이 없습니다
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
{mockDrawingHistory.slice(0, 3).map((history, index) => (
|
||||
<Card key={index} sx={{ borderRadius: 2 }}>
|
||||
<CardContent>
|
||||
<Card
|
||||
key={index}
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 5 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Box>
|
||||
<Typography variant="body1" sx={{ mb: 0.5 }}>
|
||||
<Typography variant="h6" sx={{ mb: 2, fontWeight: 700 }}>
|
||||
{history.date} {history.isRedraw && '(재추첨)'}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
당첨자 {history.winnerCount}명
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
variant="text"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
size="medium"
|
||||
onClick={() => handleHistoryDetail(history)}
|
||||
startIcon={<ListIcon />}
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
borderColor: colors.purple,
|
||||
color: colors.purple,
|
||||
'&:hover': {
|
||||
borderColor: colors.purple,
|
||||
bgcolor: colors.purpleLight,
|
||||
},
|
||||
}}
|
||||
>
|
||||
상세보기
|
||||
</Button>
|
||||
@ -335,51 +438,59 @@ export default function DrawPage() {
|
||||
{showResults && (
|
||||
<>
|
||||
{/* Results Header */}
|
||||
<Box sx={{ textAlign: 'center', mb: 4 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
<Box sx={{ textAlign: 'center', mb: 10 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, mb: 4, fontSize: '2rem' }}>
|
||||
🎉 추첨 완료!
|
||||
</Typography>
|
||||
<Typography variant="h6">
|
||||
<Typography variant="h6" sx={{ fontSize: '1.25rem' }}>
|
||||
총 {mockEventData.totalParticipants}명 중 {winnerCount}명 당첨
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Winner List */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2 }}>
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
|
||||
🏆 당첨자 목록
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
{winners.map((winner, index) => {
|
||||
const rank = index + 1;
|
||||
return (
|
||||
<Card key={winner.id} sx={{ borderRadius: 3 }}>
|
||||
<CardContent>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<Card
|
||||
key={winner.id}
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: '50%',
|
||||
background: getRankClass(rank),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'white',
|
||||
fontWeight: 600,
|
||||
fontSize: 18,
|
||||
fontWeight: 700,
|
||||
fontSize: 20,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{rank}위
|
||||
</Box>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
|
||||
응모번호: #{winner.id}
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2, fontSize: '1.25rem' }}>
|
||||
{winner.name} ({winner.phone})
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
|
||||
참여: {winner.channel}{' '}
|
||||
{winner.hasBonus && storeBonus && '🌟'}
|
||||
</Typography>
|
||||
@ -391,14 +502,18 @@ export default function DrawPage() {
|
||||
})}
|
||||
</Box>
|
||||
{storeBonus && (
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', textAlign: 'center', mt: 2 }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
sx={{ display: 'block', textAlign: 'center', mt: 6, fontSize: '0.875rem' }}
|
||||
>
|
||||
🌟 매장 방문 고객 가산점 적용
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<Grid container spacing={2} sx={{ mb: 2 }}>
|
||||
<Grid container spacing={4} sx={{ mb: 4 }}>
|
||||
<Grid item xs={6}>
|
||||
<Button
|
||||
fullWidth
|
||||
@ -406,7 +521,16 @@ export default function DrawPage() {
|
||||
size="large"
|
||||
startIcon={<Download />}
|
||||
onClick={handleDownload}
|
||||
sx={{ borderRadius: 2 }}
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
py: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
borderWidth: 2,
|
||||
'&:hover': {
|
||||
borderWidth: 2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
엑셀다운로드
|
||||
</Button>
|
||||
@ -418,7 +542,16 @@ export default function DrawPage() {
|
||||
size="large"
|
||||
startIcon={<Refresh />}
|
||||
onClick={() => setRedrawDialogOpen(true)}
|
||||
sx={{ borderRadius: 2 }}
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
py: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
borderWidth: 2,
|
||||
'&:hover': {
|
||||
borderWidth: 2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
재추첨
|
||||
</Button>
|
||||
@ -431,7 +564,18 @@ export default function DrawPage() {
|
||||
size="large"
|
||||
startIcon={<Notifications />}
|
||||
onClick={() => setNotifyDialogOpen(true)}
|
||||
sx={{ mb: 2, py: 1.5, borderRadius: 2, fontWeight: 700, fontSize: '1rem' }}
|
||||
sx={{
|
||||
mb: 4,
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontWeight: 700,
|
||||
fontSize: '1rem',
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
}}
|
||||
>
|
||||
당첨자에게 알림 전송
|
||||
</Button>
|
||||
@ -441,7 +585,12 @@ export default function DrawPage() {
|
||||
variant="text"
|
||||
size="large"
|
||||
onClick={handleBackToEvents}
|
||||
sx={{ borderRadius: 2 }}
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
py: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
이벤트 목록으로
|
||||
</Button>
|
||||
@ -457,14 +606,15 @@ export default function DrawPage() {
|
||||
sx: {
|
||||
bgcolor: 'rgba(0, 0, 0, 0.9)',
|
||||
color: 'white',
|
||||
borderRadius: 4,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DialogContent sx={{ textAlign: 'center', py: 8 }}>
|
||||
<DialogContent sx={{ textAlign: 'center', py: 16 }}>
|
||||
<Casino
|
||||
sx={{
|
||||
fontSize: 80,
|
||||
mb: 3,
|
||||
fontSize: 100,
|
||||
mb: 6,
|
||||
animation: 'spin 0.5s infinite',
|
||||
'@keyframes spin': {
|
||||
'0%, 100%': { transform: 'rotate(0deg)' },
|
||||
@ -472,95 +622,228 @@ export default function DrawPage() {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, mb: 2, fontSize: '2rem' }}>
|
||||
{animationText}
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ color: 'rgba(255,255,255,0.7)' }}>
|
||||
<Typography variant="body1" sx={{ color: 'rgba(255,255,255,0.7)', fontSize: '1.125rem' }}>
|
||||
{animationSubtext}
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Confirm Dialog */}
|
||||
<Dialog open={confirmDialogOpen} onClose={() => setConfirmDialogOpen(false)} maxWidth="xs" fullWidth>
|
||||
<DialogTitle>추첨 확인</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography variant="body1" sx={{ textAlign: 'center' }}>
|
||||
<Dialog
|
||||
open={confirmDialogOpen}
|
||||
onClose={() => setConfirmDialogOpen(false)}
|
||||
maxWidth="xs"
|
||||
fullWidth
|
||||
PaperProps={{ sx: { borderRadius: 4 } }}
|
||||
>
|
||||
<DialogTitle sx={{ pt: 6, px: 6, pb: 4, fontSize: '1.5rem', fontWeight: 700 }}>
|
||||
추첨 확인
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ px: 6, pb: 4 }}>
|
||||
<Typography variant="body1" sx={{ textAlign: 'center', fontSize: '1.125rem' }}>
|
||||
총 {mockEventData.totalParticipants}명 중 {winnerCount}명을 추첨하시겠습니까?
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setConfirmDialogOpen(false)}>취소</Button>
|
||||
<Button onClick={executeDrawing} variant="contained">
|
||||
<DialogActions sx={{ px: 6, pb: 6, pt: 4, gap: 2 }}>
|
||||
<Button
|
||||
onClick={() => setConfirmDialogOpen(false)}
|
||||
sx={{
|
||||
flex: 1,
|
||||
py: 2,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
onClick={executeDrawing}
|
||||
variant="contained"
|
||||
sx={{
|
||||
flex: 1,
|
||||
py: 2,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
}}
|
||||
>
|
||||
확인
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* Redraw Dialog */}
|
||||
<Dialog open={redrawDialogOpen} onClose={() => setRedrawDialogOpen(false)} maxWidth="xs" fullWidth>
|
||||
<DialogTitle>재추첨 확인</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography variant="body1" sx={{ mb: 2, textAlign: 'center' }}>
|
||||
<Dialog
|
||||
open={redrawDialogOpen}
|
||||
onClose={() => setRedrawDialogOpen(false)}
|
||||
maxWidth="xs"
|
||||
fullWidth
|
||||
PaperProps={{ sx: { borderRadius: 4 } }}
|
||||
>
|
||||
<DialogTitle sx={{ pt: 6, px: 6, pb: 4, fontSize: '1.5rem', fontWeight: 700 }}>
|
||||
재추첨 확인
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ px: 6, pb: 4 }}>
|
||||
<Typography variant="body1" sx={{ mb: 4, textAlign: 'center', fontSize: '1.125rem' }}>
|
||||
재추첨 시 현재 당첨자 정보가 변경됩니다.
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ mb: 2, textAlign: 'center' }}>
|
||||
<Typography variant="body1" sx={{ mb: 4, textAlign: 'center', fontSize: '1.125rem' }}>
|
||||
계속하시겠습니까?
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', textAlign: 'center' }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
sx={{ display: 'block', textAlign: 'center', fontSize: '0.875rem' }}
|
||||
>
|
||||
이전 추첨 이력은 보관됩니다
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setRedrawDialogOpen(false)}>취소</Button>
|
||||
<Button onClick={handleRedraw} variant="contained">
|
||||
<DialogActions sx={{ px: 6, pb: 6, pt: 4, gap: 2 }}>
|
||||
<Button
|
||||
onClick={() => setRedrawDialogOpen(false)}
|
||||
sx={{
|
||||
flex: 1,
|
||||
py: 2,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleRedraw}
|
||||
variant="contained"
|
||||
sx={{
|
||||
flex: 1,
|
||||
py: 2,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
}}
|
||||
>
|
||||
재추첨
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* Notify Dialog */}
|
||||
<Dialog open={notifyDialogOpen} onClose={() => setNotifyDialogOpen(false)} maxWidth="xs" fullWidth>
|
||||
<DialogTitle>알림 전송</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography variant="body1" sx={{ mb: 2, textAlign: 'center' }}>
|
||||
<Dialog
|
||||
open={notifyDialogOpen}
|
||||
onClose={() => setNotifyDialogOpen(false)}
|
||||
maxWidth="xs"
|
||||
fullWidth
|
||||
PaperProps={{ sx: { borderRadius: 4 } }}
|
||||
>
|
||||
<DialogTitle sx={{ pt: 6, px: 6, pb: 4, fontSize: '1.5rem', fontWeight: 700 }}>
|
||||
알림 전송
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ px: 6, pb: 4 }}>
|
||||
<Typography variant="body1" sx={{ mb: 4, textAlign: 'center', fontSize: '1.125rem' }}>
|
||||
{winnerCount}명의 당첨자에게 SMS 알림을 전송하시겠습니까?
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', textAlign: 'center' }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
sx={{ display: 'block', textAlign: 'center', fontSize: '0.875rem' }}
|
||||
>
|
||||
예상 비용: {winnerCount * 100}원 (100원/건)
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setNotifyDialogOpen(false)}>취소</Button>
|
||||
<Button onClick={handleNotify} variant="contained">
|
||||
<DialogActions sx={{ px: 6, pb: 6, pt: 4, gap: 2 }}>
|
||||
<Button
|
||||
onClick={() => setNotifyDialogOpen(false)}
|
||||
sx={{
|
||||
flex: 1,
|
||||
py: 2,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleNotify}
|
||||
variant="contained"
|
||||
sx={{
|
||||
flex: 1,
|
||||
py: 2,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
}}
|
||||
>
|
||||
전송
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* History Detail Dialog */}
|
||||
<Dialog open={historyDetailOpen} onClose={() => setHistoryDetailOpen(false)} maxWidth="xs" fullWidth>
|
||||
<DialogTitle>추첨 이력 상세</DialogTitle>
|
||||
<DialogContent>
|
||||
<Dialog
|
||||
open={historyDetailOpen}
|
||||
onClose={() => setHistoryDetailOpen(false)}
|
||||
maxWidth="xs"
|
||||
fullWidth
|
||||
PaperProps={{ sx: { borderRadius: 4 } }}
|
||||
>
|
||||
<DialogTitle sx={{ pt: 6, px: 6, pb: 4, fontSize: '1.5rem', fontWeight: 700 }}>
|
||||
추첨 이력 상세
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ px: 6, pb: 4 }}>
|
||||
{selectedHistory && (
|
||||
<Box sx={{ p: 2 }}>
|
||||
<Typography variant="body1" sx={{ mb: 1 }}>
|
||||
<Box sx={{ p: 4 }}>
|
||||
<Typography variant="body1" sx={{ mb: 3, fontSize: '1.125rem' }}>
|
||||
추첨 일시: {selectedHistory.date}
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ mb: 1 }}>
|
||||
<Typography variant="body1" sx={{ mb: 3, fontSize: '1.125rem' }}>
|
||||
당첨 인원: {selectedHistory.winnerCount}명
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ mb: 2 }}>
|
||||
<Typography variant="body1" sx={{ mb: 4, fontSize: '1.125rem' }}>
|
||||
재추첨 여부: {selectedHistory.isRedraw ? '예' : '아니오'}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.875rem' }}>
|
||||
※ 당첨자 정보는 개인정보 보호를 위해 마스킹 처리됩니다
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setHistoryDetailOpen(false)} variant="contained">
|
||||
<DialogActions sx={{ px: 6, pb: 6, pt: 4 }}>
|
||||
<Button
|
||||
onClick={() => setHistoryDetailOpen(false)}
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
py: 2,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
}}
|
||||
>
|
||||
확인
|
||||
</Button>
|
||||
</DialogActions>
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
Menu,
|
||||
MenuItem,
|
||||
Divider,
|
||||
LinearProgress,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
MoreVert,
|
||||
@ -23,13 +24,63 @@ import {
|
||||
TrendingUp,
|
||||
Share,
|
||||
CardGiftcard,
|
||||
HowToReg,
|
||||
AttachMoney,
|
||||
People,
|
||||
Edit,
|
||||
Download,
|
||||
Person,
|
||||
Phone,
|
||||
Email,
|
||||
ShoppingCart,
|
||||
Warning,
|
||||
LocalFireDepartment,
|
||||
Star,
|
||||
NewReleases,
|
||||
} from '@mui/icons-material';
|
||||
import { Line, Bar } from 'react-chartjs-2';
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
BarElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler,
|
||||
} from 'chart.js';
|
||||
|
||||
// Chart.js 등록
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
BarElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler
|
||||
);
|
||||
|
||||
// 디자인 시스템 색상
|
||||
const colors = {
|
||||
pink: '#F472B6',
|
||||
purple: '#C084FC',
|
||||
purpleLight: '#E9D5FF',
|
||||
blue: '#60A5FA',
|
||||
mint: '#34D399',
|
||||
orange: '#FB923C',
|
||||
yellow: '#FBBF24',
|
||||
gray: {
|
||||
900: '#1A1A1A',
|
||||
700: '#4A4A4A',
|
||||
500: '#9E9E9E',
|
||||
300: '#D9D9D9',
|
||||
100: '#F5F5F5',
|
||||
},
|
||||
};
|
||||
|
||||
// Mock 데이터
|
||||
const mockEventData = {
|
||||
@ -41,12 +92,17 @@ const mockEventData = {
|
||||
prize: '커피 쿠폰',
|
||||
method: 'SNS 팔로우',
|
||||
cost: 250000,
|
||||
channels: ['홈페이지', '카카오톡', 'Instagram'],
|
||||
channels: ['우리동네TV', '링고비즈', 'SNS'],
|
||||
participants: 128,
|
||||
views: 456,
|
||||
roi: 450,
|
||||
conversion: 28,
|
||||
targetParticipants: 200,
|
||||
isAIRecommended: true,
|
||||
isUrgent: false,
|
||||
isPopular: true,
|
||||
isHighROI: true,
|
||||
isNew: false,
|
||||
};
|
||||
|
||||
const recentParticipants = [
|
||||
@ -57,6 +113,86 @@ const recentParticipants = [
|
||||
{ name: '정*희', phone: '010-****-7890', time: '2시간 전' },
|
||||
];
|
||||
|
||||
// 차트 데이터 생성 함수
|
||||
const generateParticipationTrendData = (period: '7d' | '30d' | 'all') => {
|
||||
const labels =
|
||||
period === '7d'
|
||||
? ['1/20', '1/21', '1/22', '1/23', '1/24', '1/25', '1/26']
|
||||
: period === '30d'
|
||||
? Array.from({ length: 30 }, (_, i) => `1/${i + 1}`)
|
||||
: Array.from({ length: 31 }, (_, i) => `1/${i + 1}`);
|
||||
|
||||
const data =
|
||||
period === '7d'
|
||||
? [12, 19, 15, 25, 22, 30, 28]
|
||||
: period === '30d'
|
||||
? Array.from({ length: 30 }, () => Math.floor(Math.random() * 30) + 10)
|
||||
: Array.from({ length: 31 }, () => Math.floor(Math.random() * 30) + 10);
|
||||
|
||||
return {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: '일별 참여자',
|
||||
data,
|
||||
borderColor: colors.blue,
|
||||
backgroundColor: `${colors.blue}40`,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
const channelPerformanceData = {
|
||||
labels: ['우리동네TV', '링고비즈', 'SNS'],
|
||||
datasets: [
|
||||
{
|
||||
label: '참여자 수',
|
||||
data: [58, 38, 32],
|
||||
backgroundColor: [colors.pink, colors.blue, colors.orange],
|
||||
borderRadius: 8,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const roiTrendData = {
|
||||
labels: ['1주차', '2주차', '3주차', '4주차'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'ROI (%)',
|
||||
data: [150, 280, 380, 450],
|
||||
borderColor: colors.mint,
|
||||
backgroundColor: `${colors.mint}40`,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 헬퍼 함수
|
||||
const getMethodIcon = (method: string) => {
|
||||
switch (method) {
|
||||
case '전화번호 입력':
|
||||
return <Phone sx={{ fontSize: 18 }} />;
|
||||
case 'SNS 팔로우':
|
||||
return <Share sx={{ fontSize: 18 }} />;
|
||||
case '구매 인증':
|
||||
return <ShoppingCart sx={{ fontSize: 18 }} />;
|
||||
case '이메일 등록':
|
||||
return <Email sx={{ fontSize: 18 }} />;
|
||||
default:
|
||||
return <Share sx={{ fontSize: 18 }} />;
|
||||
}
|
||||
};
|
||||
|
||||
const calculateProgress = (event: typeof mockEventData) => {
|
||||
if (event.status !== 'active') return 0;
|
||||
const total = new Date(event.endDate).getTime() - new Date(event.startDate).getTime();
|
||||
const elapsed = Date.now() - new Date(event.startDate).getTime();
|
||||
return Math.min(Math.max((elapsed / total) * 100, 0), 100);
|
||||
};
|
||||
|
||||
export default function EventDetailPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
@ -119,11 +255,11 @@ export default function EventDetailPage() {
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
{/* Event Header */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700 }}>
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 4 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, fontSize: '2rem' }}>
|
||||
{event.title}
|
||||
</Typography>
|
||||
<IconButton onClick={handleMenuOpen}>
|
||||
@ -131,13 +267,13 @@ export default function EventDetailPage() {
|
||||
</IconButton>
|
||||
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
|
||||
<MenuItem onClick={handleMenuClose}>
|
||||
<Edit sx={{ mr: 1 }} /> 이벤트 수정
|
||||
<Edit sx={{ mr: 2 }} /> 이벤트 수정
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleMenuClose}>
|
||||
<Share sx={{ mr: 1 }} /> 공유하기
|
||||
<Share sx={{ mr: 2 }} /> 공유하기
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleMenuClose}>
|
||||
<Download sx={{ mr: 1 }} /> 데이터 다운로드
|
||||
<Download sx={{ mr: 2 }} /> 데이터 다운로드
|
||||
</MenuItem>
|
||||
<Divider />
|
||||
<MenuItem onClick={handleMenuClose} sx={{ color: 'error.main' }}>
|
||||
@ -146,35 +282,99 @@ export default function EventDetailPage() {
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
|
||||
<Chip label={getStatusText(event.status)} color={getStatusColor(event.status) as any} size="small" />
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap', mb: 4 }}>
|
||||
<Chip
|
||||
label={getStatusText(event.status)}
|
||||
color={getStatusColor(event.status) as any}
|
||||
size="medium"
|
||||
/>
|
||||
{event.isAIRecommended && (
|
||||
<Chip label="AI 추천" size="medium" sx={{ bgcolor: colors.purpleLight, color: colors.purple }} />
|
||||
)}
|
||||
{event.isUrgent && (
|
||||
<Chip
|
||||
label="AI 추천"
|
||||
size="small"
|
||||
sx={{ bgcolor: 'rgba(0, 102, 255, 0.1)', color: 'info.main' }}
|
||||
icon={<Warning />}
|
||||
label="마감임박"
|
||||
size="medium"
|
||||
sx={{ bgcolor: '#FEF3C7', color: '#92400E' }}
|
||||
/>
|
||||
)}
|
||||
{event.isPopular && (
|
||||
<Chip
|
||||
icon={<LocalFireDepartment />}
|
||||
label="인기"
|
||||
size="medium"
|
||||
sx={{ bgcolor: '#FEE2E2', color: '#991B1B' }}
|
||||
/>
|
||||
)}
|
||||
{event.isHighROI && (
|
||||
<Chip
|
||||
icon={<Star />}
|
||||
label="높은 ROI"
|
||||
size="medium"
|
||||
sx={{ bgcolor: '#DCFCE7', color: '#166534' }}
|
||||
/>
|
||||
)}
|
||||
{event.isNew && (
|
||||
<Chip
|
||||
icon={<NewReleases />}
|
||||
label="신규"
|
||||
size="medium"
|
||||
sx={{ bgcolor: '#DBEAFE', color: '#1E40AF' }}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
{event.startDate} ~ {event.endDate}
|
||||
<Typography variant="body1" color="text.secondary" sx={{ fontSize: '1rem', mb: 4 }}>
|
||||
📅 {event.startDate} ~ {event.endDate}
|
||||
</Typography>
|
||||
|
||||
{/* 진행률 바 (진행중인 이벤트만) */}
|
||||
{event.status === 'active' && (
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
이벤트 진행률
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
{Math.round(calculateProgress(event))}%
|
||||
</Typography>
|
||||
</Box>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={calculateProgress(event)}
|
||||
sx={{
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
bgcolor: colors.gray[100],
|
||||
'& .MuiLinearProgress-bar': {
|
||||
background: `linear-gradient(90deg, ${colors.mint} 0%, ${colors.blue} 100%)`,
|
||||
borderRadius: 5,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Real-time KPIs */}
|
||||
<Box sx={{ mb: 5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 6 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
|
||||
실시간 현황
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'success.main' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, color: 'success.main' }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'success.main',
|
||||
animation: 'pulse 2s infinite',
|
||||
'@keyframes pulse': {
|
||||
'0%, 100%': { opacity: 1 },
|
||||
'50%': { opacity: 0.5 },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
@ -183,56 +383,86 @@ export default function EventDetailPage() {
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid container spacing={6}>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3 }}>
|
||||
<Group color="primary" sx={{ fontSize: 32, mb: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Group sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
참여자
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
|
||||
{event.participants}명
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.8)', mt: 1, display: 'block' }}>
|
||||
목표: {event.targetParticipants}명 (
|
||||
{Math.round((event.participants / event.targetParticipants) * 100)}%)
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3 }}>
|
||||
<Visibility color="info" sx={{ fontSize: 32, mb: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, #93C5FD 100%)`,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Visibility sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
조회수
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
|
||||
{event.views}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3 }}>
|
||||
<TrendingUp color="success" sx={{ fontSize: 32, mb: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.mint} 0%, #6EE7B7 100%)`,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<TrendingUp sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
ROI
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: 'success.main' }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
|
||||
{event.roi}%
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3 }}>
|
||||
<span className="material-icons" style={{ fontSize: 32, marginBottom: 8, color: '#1976d2' }}>
|
||||
conversion_path
|
||||
</span>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.orange} 0%, #FCD34D 100%)`,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<TrendingUp sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
전환율
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
|
||||
{event.conversion}%
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -241,112 +471,236 @@ export default function EventDetailPage() {
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Chart Section */}
|
||||
<Box sx={{ mb: 5 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 3 }}>
|
||||
참여 추이
|
||||
{/* Chart Section - 참여 추이 */}
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
|
||||
📈 참여 추이
|
||||
</Typography>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', gap: 1, mb: 3 }}>
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<Box sx={{ display: 'flex', gap: 2, mb: 6 }}>
|
||||
<Button
|
||||
size="small"
|
||||
size="medium"
|
||||
variant={chartPeriod === '7d' ? 'contained' : 'outlined'}
|
||||
onClick={() => setChartPeriod('7d')}
|
||||
sx={{ borderRadius: 2 }}
|
||||
>
|
||||
7일
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
size="medium"
|
||||
variant={chartPeriod === '30d' ? 'contained' : 'outlined'}
|
||||
onClick={() => setChartPeriod('30d')}
|
||||
sx={{ borderRadius: 2 }}
|
||||
>
|
||||
30일
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
size="medium"
|
||||
variant={chartPeriod === 'all' ? 'contained' : 'outlined'}
|
||||
onClick={() => setChartPeriod('all')}
|
||||
sx={{ borderRadius: 2 }}
|
||||
>
|
||||
전체
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
height: 200,
|
||||
bgcolor: 'grey.100',
|
||||
borderRadius: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 48, color: '#9e9e9e' }}>
|
||||
show_chart
|
||||
</span>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
|
||||
참여자 추이 차트
|
||||
</Typography>
|
||||
<Box sx={{ height: 320 }}>
|
||||
<Line
|
||||
data={generateParticipationTrendData(chartPeriod)}
|
||||
options={{
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'top' as const,
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
padding: 12,
|
||||
titleFont: { size: 14, weight: 'bold' },
|
||||
bodyFont: { size: 13 },
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(0, 0, 0, 0.05)',
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Chart Section - 채널별 성과 & ROI 추이 */}
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
|
||||
📊 채널별 참여자
|
||||
</Typography>
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<Box sx={{ height: 320 }}>
|
||||
<Bar
|
||||
data={channelPerformanceData}
|
||||
options={{
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
padding: 12,
|
||||
titleFont: { size: 14, weight: 'bold' },
|
||||
bodyFont: { size: 13 },
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(0, 0, 0, 0.05)',
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
|
||||
💰 ROI 추이
|
||||
</Typography>
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<Box sx={{ height: 320 }}>
|
||||
<Line
|
||||
data={roiTrendData}
|
||||
options={{
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'top' as const,
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
padding: 12,
|
||||
titleFont: { size: 14, weight: 'bold' },
|
||||
bodyFont: { size: 13 },
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(0, 0, 0, 0.05)',
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Event Details */}
|
||||
<Box sx={{ mb: 5 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 3 }}>
|
||||
이벤트 정보
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
|
||||
🎯 이벤트 정보
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<CardGiftcard color="error" />
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 0.5 }}>
|
||||
경품
|
||||
</Typography>
|
||||
<Typography variant="body1">{event.prize}</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<HowToReg color="error" />
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 0.5 }}>
|
||||
참여 방법
|
||||
</Typography>
|
||||
<Typography variant="body1">{event.method}</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<AttachMoney color="error" />
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 0.5 }}>
|
||||
예상 비용
|
||||
</Typography>
|
||||
<Typography variant="body1">{event.cost.toLocaleString()}원</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<Share color="error" />
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, p: 4 }}>
|
||||
<CardGiftcard sx={{ fontSize: 28, color: colors.pink }} />
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1 }}>
|
||||
경품
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||||
{event.prize}
|
||||
</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, p: 4 }}>
|
||||
{getMethodIcon(event.method)}
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1 }}>
|
||||
참여 방법
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||||
{event.method}
|
||||
</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, p: 4 }}>
|
||||
<AttachMoney sx={{ fontSize: 28, color: colors.mint }} />
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1 }}>
|
||||
예상 비용
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||||
{event.cost.toLocaleString()}원
|
||||
</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, p: 4 }}>
|
||||
<Share sx={{ fontSize: 28, color: colors.blue }} />
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 2 }}>
|
||||
배포 채널
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
|
||||
{event.channels.map((channel) => (
|
||||
<Chip key={channel} label={channel} size="small" color="success" />
|
||||
<Chip
|
||||
key={channel}
|
||||
label={channel}
|
||||
size="medium"
|
||||
sx={{
|
||||
bgcolor: colors.purpleLight,
|
||||
color: colors.purple,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
@ -356,29 +710,31 @@ export default function EventDetailPage() {
|
||||
</Box>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Box sx={{ mb: 5 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 3 }}>
|
||||
빠른 작업
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
|
||||
⚡ 빠른 작업
|
||||
</Typography>
|
||||
<Grid container spacing={2}>
|
||||
<Grid container spacing={4}>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 3,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.2s',
|
||||
'&:hover': {
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
transform: 'translateY(-2px)',
|
||||
transform: 'translateY(-4px)',
|
||||
},
|
||||
}}
|
||||
onClick={() => router.push(`/events/${eventId}/participants`)}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3 }}>
|
||||
<People color="error" sx={{ fontSize: 32, mb: 1 }} />
|
||||
<Typography variant="body2">참여자 목록</Typography>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<People sx={{ fontSize: 40, mb: 2, color: colors.pink }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
참여자 목록
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
@ -387,18 +743,20 @@ export default function EventDetailPage() {
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 3,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.2s',
|
||||
'&:hover': {
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
transform: 'translateY(-2px)',
|
||||
transform: 'translateY(-4px)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3 }}>
|
||||
<Edit color="info" sx={{ fontSize: 32, mb: 1 }} />
|
||||
<Typography variant="body2">이벤트 수정</Typography>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<Edit sx={{ fontSize: 40, mb: 2, color: colors.blue }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
이벤트 수정
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
@ -407,18 +765,20 @@ export default function EventDetailPage() {
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 3,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.2s',
|
||||
'&:hover': {
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
transform: 'translateY(-2px)',
|
||||
transform: 'translateY(-4px)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3 }}>
|
||||
<Share sx={{ fontSize: 32, mb: 1, color: 'text.secondary' }} />
|
||||
<Typography variant="body2">공유하기</Typography>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<Share sx={{ fontSize: 40, mb: 2, color: colors.purple }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
공유하기
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
@ -427,18 +787,20 @@ export default function EventDetailPage() {
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 3,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.2s',
|
||||
'&:hover': {
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
transform: 'translateY(-2px)',
|
||||
transform: 'translateY(-4px)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 3 }}>
|
||||
<Download sx={{ fontSize: 32, mb: 1, color: 'text.secondary' }} />
|
||||
<Typography variant="body2">데이터 다운</Typography>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<Download sx={{ fontSize: 40, mb: 2, color: colors.mint }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
데이터 다운
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
@ -446,51 +808,51 @@ export default function EventDetailPage() {
|
||||
</Box>
|
||||
|
||||
{/* Recent Participants */}
|
||||
<Box sx={{ mb: 5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
최근 참여자
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 6 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
|
||||
👥 최근 참여자
|
||||
</Typography>
|
||||
<Button
|
||||
size="small"
|
||||
endIcon={<span className="material-icons" style={{ fontSize: 16 }}>chevron_right</span>}
|
||||
size="medium"
|
||||
endIcon={<span className="material-icons" style={{ fontSize: 18 }}>chevron_right</span>}
|
||||
onClick={() => router.push(`/events/${eventId}/participants`)}
|
||||
sx={{ color: 'error.main', fontWeight: 600 }}
|
||||
sx={{ color: colors.pink, fontWeight: 600 }}
|
||||
>
|
||||
전체보기
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Card elevation={0} sx={{ borderRadius: 3, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
{recentParticipants.map((participant, index) => (
|
||||
<Box key={index}>
|
||||
{index > 0 && <Divider sx={{ my: 2 }} />}
|
||||
{index > 0 && <Divider sx={{ my: 4 }} />}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'grey.200',
|
||||
bgcolor: colors.purpleLight,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Person sx={{ color: 'text.secondary' }} />
|
||||
<Person sx={{ color: colors.purple, fontSize: 24 }} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, mb: 0.5 }}>
|
||||
{participant.name}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{participant.phone}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{participant.time}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
@ -21,14 +21,37 @@ import {
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Grid,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Search,
|
||||
FilterList,
|
||||
Casino,
|
||||
Download,
|
||||
People,
|
||||
TrendingUp,
|
||||
Person,
|
||||
AccessTime,
|
||||
} from '@mui/icons-material';
|
||||
|
||||
// 디자인 시스템 색상
|
||||
const colors = {
|
||||
pink: '#F472B6',
|
||||
purple: '#C084FC',
|
||||
purpleLight: '#E9D5FF',
|
||||
blue: '#60A5FA',
|
||||
mint: '#34D399',
|
||||
orange: '#FB923C',
|
||||
yellow: '#FBBF24',
|
||||
gray: {
|
||||
900: '#1A1A1A',
|
||||
700: '#4A4A4A',
|
||||
500: '#9E9E9E',
|
||||
300: '#D9D9D9',
|
||||
100: '#F5F5F5',
|
||||
},
|
||||
};
|
||||
|
||||
// Mock 데이터
|
||||
const mockParticipants = [
|
||||
{
|
||||
@ -150,11 +173,117 @@ export default function ParticipantsPage() {
|
||||
alert('엑셀 다운로드 기능은 추후 구현됩니다');
|
||||
};
|
||||
|
||||
// 통계 계산
|
||||
const stats = {
|
||||
total: mockParticipants.length,
|
||||
waiting: mockParticipants.filter((p) => p.status === 'waiting').length,
|
||||
winner: mockParticipants.filter((p) => p.status === 'winner').length,
|
||||
channelDistribution: {
|
||||
uriTV: mockParticipants.filter((p) => p.channelType === 'uriTV').length,
|
||||
ringoBiz: mockParticipants.filter((p) => p.channelType === 'ringoBiz').length,
|
||||
sns: mockParticipants.filter((p) => p.channelType === 'sns').length,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
{/* Page Header */}
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, fontSize: '2rem', mb: 2 }}>
|
||||
👥 참여자 목록
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
이벤트에 참여한 사용자들의 정보를 확인하고 관리하세요
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Statistics Cards */}
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<People sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
전체 참여자
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
|
||||
{stats.total}명
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.yellow} 0%, #FCD34D 100%)`,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<AccessTime sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
대기중
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
|
||||
{stats.waiting}명
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.mint} 0%, #6EE7B7 100%)`,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<TrendingUp sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
당첨자
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
|
||||
{stats.winner}명
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, #93C5FD 100%)`,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Casino sx={{ fontSize: 40, mb: 2, color: 'white' }} />
|
||||
<Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
|
||||
당첨률
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
|
||||
{stats.total > 0 ? Math.round((stats.winner / stats.total) * 100) : 0}%
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Search Section */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="이름 또는 전화번호 검색..."
|
||||
@ -169,22 +298,24 @@ export default function ParticipantsPage() {
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: 2,
|
||||
borderRadius: 3,
|
||||
bgcolor: 'white',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Filters */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
|
||||
<FilterList color="error" />
|
||||
<FormControl sx={{ flex: 1, minWidth: 140 }}>
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, flexWrap: 'wrap' }}>
|
||||
<FilterList sx={{ fontSize: 28, color: colors.pink }} />
|
||||
<FormControl sx={{ flex: 1, minWidth: 160 }}>
|
||||
<InputLabel>참여 경로</InputLabel>
|
||||
<Select
|
||||
value={channelFilter}
|
||||
label="참여 경로"
|
||||
onChange={(e) => setChannelFilter(e.target.value as ChannelType)}
|
||||
sx={{ borderRadius: 2 }}
|
||||
>
|
||||
<MenuItem value="all">전체 경로</MenuItem>
|
||||
<MenuItem value="uriTV">우리동네TV</MenuItem>
|
||||
@ -192,12 +323,13 @@ export default function ParticipantsPage() {
|
||||
<MenuItem value="sns">SNS</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl sx={{ flex: 1, minWidth: 120 }}>
|
||||
<FormControl sx={{ flex: 1, minWidth: 140 }}>
|
||||
<InputLabel>상태</InputLabel>
|
||||
<Select
|
||||
value={statusFilter}
|
||||
label="상태"
|
||||
onChange={(e) => setStatusFilter(e.target.value as StatusType)}
|
||||
sx={{ borderRadius: 2 }}
|
||||
>
|
||||
<MenuItem value="all">전체</MenuItem>
|
||||
<MenuItem value="waiting">당첨 대기</MenuItem>
|
||||
@ -209,77 +341,122 @@ export default function ParticipantsPage() {
|
||||
</Box>
|
||||
|
||||
{/* Total Count & Drawing Button */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 2 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
총 <span style={{ color: '#e91e63' }}>{filteredParticipants.length}</span>명 참여
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 4 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
|
||||
총 <span style={{ color: colors.pink }}>{filteredParticipants.length}</span>명 참여
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Casino />}
|
||||
onClick={handleDrawClick}
|
||||
sx={{ borderRadius: 2 }}
|
||||
>
|
||||
당첨자 추첨
|
||||
</Button>
|
||||
<Box sx={{ display: 'flex', gap: 3 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<Download />}
|
||||
onClick={handleDownloadClick}
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
px: 4,
|
||||
py: 1.5,
|
||||
borderColor: colors.blue,
|
||||
color: colors.blue,
|
||||
'&:hover': {
|
||||
borderColor: colors.blue,
|
||||
bgcolor: `${colors.blue}10`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Casino />}
|
||||
onClick={handleDrawClick}
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
px: 4,
|
||||
py: 1.5,
|
||||
background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.purple} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.purple} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
}}
|
||||
>
|
||||
당첨자 추첨
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Participant List */}
|
||||
<Box sx={{ mb: 5 }}>
|
||||
<Box sx={{ mb: 10 }}>
|
||||
{pageParticipants.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 8 }}>
|
||||
<span className="material-icons" style={{ fontSize: 64, color: '#bdbdbd' }}>
|
||||
people_outline
|
||||
</span>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mt: 2 }}>
|
||||
<Box sx={{ textAlign: 'center', py: 16 }}>
|
||||
<Person sx={{ fontSize: 80, color: colors.gray[300], mb: 3 }} />
|
||||
<Typography variant="h6" color="text.secondary" sx={{ fontWeight: 600 }}>
|
||||
검색 결과가 없습니다
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
|
||||
다른 검색어나 필터를 사용해보세요
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
{pageParticipants.map((participant) => (
|
||||
<Card
|
||||
key={participant.id}
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 3,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.2s ease',
|
||||
'&:hover': {
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
transform: 'translateY(-2px)',
|
||||
transform: 'translateY(-4px)',
|
||||
},
|
||||
}}
|
||||
onClick={() => handleParticipantClick(participant)}
|
||||
>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<CardContent sx={{ p: 5 }}>
|
||||
{/* Header */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'space-between',
|
||||
mb: 2,
|
||||
mb: 4,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mb: 0.5 }}>
|
||||
#{participant.id}
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>
|
||||
{participant.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{participant.phone}
|
||||
</Typography>
|
||||
<Box sx={{ flex: 1, display: 'flex', alignItems: 'center', gap: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: '50%',
|
||||
bgcolor: colors.purpleLight,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Person sx={{ fontSize: 32, color: colors.purple }} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
|
||||
#{participant.id}
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 1, fontSize: '1.25rem' }}>
|
||||
{participant.name}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
{participant.phone}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Chip
|
||||
label={getStatusText(participant.status)}
|
||||
color={getStatusColor(participant.status) as any}
|
||||
size="small"
|
||||
sx={{ fontWeight: 600 }}
|
||||
size="medium"
|
||||
sx={{ fontWeight: 600, px: 2, py: 2.5 }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@ -287,26 +464,34 @@ export default function ParticipantsPage() {
|
||||
<Box
|
||||
sx={{
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'divider',
|
||||
pt: 2,
|
||||
borderColor: colors.gray[100],
|
||||
pt: 4,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 0.5,
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
참여 경로
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
{participant.channel}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={participant.channel}
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: colors.purpleLight,
|
||||
color: colors.purple,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
참여 일시
|
||||
</Typography>
|
||||
<Typography variant="body2">{participant.date}</Typography>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
{participant.date}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
@ -318,87 +503,145 @@ export default function ParticipantsPage() {
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', mb: 5 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', mb: 10 }}>
|
||||
<Pagination
|
||||
count={totalPages}
|
||||
page={currentPage}
|
||||
onChange={(_, page) => setCurrentPage(page)}
|
||||
color="primary"
|
||||
size="large"
|
||||
sx={{
|
||||
'& .MuiPaginationItem-root': {
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Excel Download Button (Desktop only) */}
|
||||
<Box sx={{ display: { xs: 'none', md: 'block' } }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
size="large"
|
||||
startIcon={<Download />}
|
||||
onClick={handleDownloadClick}
|
||||
sx={{ borderRadius: 2 }}
|
||||
>
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Participant Detail Dialog */}
|
||||
<Dialog
|
||||
open={detailDialogOpen}
|
||||
onClose={() => setDetailDialogOpen(false)}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: {
|
||||
borderRadius: 4,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DialogTitle>참여자 상세 정보</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<DialogTitle sx={{ p: 5, pb: 3 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
참여자 상세 정보
|
||||
</Typography>
|
||||
</DialogTitle>
|
||||
<DialogContent dividers sx={{ p: 5 }}>
|
||||
{selectedParticipant && (
|
||||
<Box sx={{ p: 2 }}>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
응모번호
|
||||
<Box>
|
||||
<Box sx={{ mb: 4, textAlign: 'center' }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: '50%',
|
||||
bgcolor: colors.purpleLight,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Person sx={{ fontSize: 40, color: colors.purple }} />
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
{selectedParticipant.name}
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
#{selectedParticipant.id}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
이름
|
||||
</Typography>
|
||||
<Typography variant="body1">{selectedParticipant.name}</Typography>
|
||||
</Box>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
전화번호
|
||||
</Typography>
|
||||
<Typography variant="body1">{selectedParticipant.phone}</Typography>
|
||||
</Box>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
참여 경로
|
||||
</Typography>
|
||||
<Typography variant="body1">{selectedParticipant.channel}</Typography>
|
||||
</Box>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
참여 일시
|
||||
</Typography>
|
||||
<Typography variant="body1">{selectedParticipant.date}</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
당첨 여부
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{getStatusText(selectedParticipant.status)}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
p: 3,
|
||||
bgcolor: colors.gray[100],
|
||||
borderRadius: 3,
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
|
||||
전화번호
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
{selectedParticipant.phone}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
p: 3,
|
||||
bgcolor: colors.gray[100],
|
||||
borderRadius: 3,
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
|
||||
참여 경로
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
{selectedParticipant.channel}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
p: 3,
|
||||
bgcolor: colors.gray[100],
|
||||
borderRadius: 3,
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
|
||||
참여 일시
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
{selectedParticipant.date}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
p: 3,
|
||||
bgcolor: colors.gray[100],
|
||||
borderRadius: 3,
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
|
||||
당첨 여부
|
||||
</Typography>
|
||||
<Chip
|
||||
label={getStatusText(selectedParticipant.status)}
|
||||
color={getStatusColor(selectedParticipant.status) as any}
|
||||
size="medium"
|
||||
sx={{ fontWeight: 600 }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDetailDialogOpen(false)} variant="contained">
|
||||
<DialogActions sx={{ p: 5, pt: 3 }}>
|
||||
<Button
|
||||
onClick={() => setDetailDialogOpen(false)}
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
py: 1.5,
|
||||
background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.purple} 100%)`,
|
||||
}}
|
||||
>
|
||||
확인
|
||||
</Button>
|
||||
</DialogActions>
|
||||
|
||||
@ -17,8 +17,9 @@ import {
|
||||
DialogActions,
|
||||
Link,
|
||||
} from '@mui/material';
|
||||
import { ArrowBack, CheckCircle, Edit, RocketLaunch, Save } from '@mui/icons-material';
|
||||
import { ArrowBack, CheckCircle, Edit, RocketLaunch, Save, People, AttachMoney, TrendingUp } from '@mui/icons-material';
|
||||
import { EventData } from '../page';
|
||||
import { cardStyles, colors, responsiveText } from '@/shared/lib/button-styles';
|
||||
|
||||
interface ApprovalStepProps {
|
||||
eventData: EventData;
|
||||
@ -61,91 +62,214 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="md" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: colors.gray[50], pt: { xs: 7, sm: 8 }, pb: 10 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 8 }}>
|
||||
<IconButton onClick={onBack}>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, fontWeight: 700 }}>
|
||||
최종 승인
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Title Section */}
|
||||
<Box sx={{ textAlign: 'center', mb: 5 }}>
|
||||
<CheckCircle sx={{ fontSize: 64, color: 'success.main', mb: 2 }} />
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
<Box sx={{ textAlign: 'center', mb: 10 }}>
|
||||
<CheckCircle sx={{ fontSize: 64, color: colors.purple, mb: 2 }} />
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, fontWeight: 700, mb: 2 }}>
|
||||
이벤트를 확인해주세요
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
<Typography variant="body1" color="text.secondary" sx={{ ...responsiveText.body1 }}>
|
||||
모든 정보를 검토한 후 배포하세요
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Event Summary Card */}
|
||||
<Card elevation={0} sx={{ mb: 4, borderRadius: 3 }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2 }}>
|
||||
{eventData.recommendation?.title || '이벤트 제목'}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1, mb: 3 }}>
|
||||
<Chip label="배포 대기" color="warning" size="small" />
|
||||
<Chip label="AI 추천" color="info" size="small" />
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={2} sx={{ pt: 2, borderTop: 1, borderColor: 'divider' }}>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
이벤트 기간
|
||||
{/* Event Summary Statistics */}
|
||||
<Grid container spacing={4} sx={{ mb: 10 }}>
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<CheckCircle sx={{
|
||||
fontSize: 32,
|
||||
color: colors.gray[900],
|
||||
mb: 1,
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
<Typography variant="body2" sx={{
|
||||
color: colors.gray[700],
|
||||
fontSize: '0.875rem',
|
||||
mb: 1,
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}>
|
||||
이벤트 제목
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
2025.02.01 ~ 2025.02.28
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '1rem',
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{eventData.recommendation?.title || '이벤트 제목'}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<People sx={{
|
||||
fontSize: 32,
|
||||
color: colors.gray[900],
|
||||
mb: 1,
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
<Typography variant="body2" sx={{
|
||||
color: colors.gray[700],
|
||||
fontSize: '0.875rem',
|
||||
mb: 1,
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}>
|
||||
목표 참여자
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
{eventData.recommendation?.expectedParticipants || 0}명
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '1.75rem',
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{eventData.recommendation?.expectedParticipants || 0}
|
||||
<Typography component="span" sx={{
|
||||
fontSize: '1rem',
|
||||
ml: 0.5,
|
||||
color: colors.gray[900],
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}>
|
||||
명
|
||||
</Typography>
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<AttachMoney sx={{
|
||||
fontSize: 32,
|
||||
color: colors.gray[900],
|
||||
mb: 1,
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
<Typography variant="body2" sx={{
|
||||
color: colors.gray[700],
|
||||
fontSize: '0.875rem',
|
||||
mb: 1,
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}>
|
||||
예상 비용
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
{eventData.recommendation?.estimatedCost.toLocaleString() || 0}원
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '1.75rem',
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{((eventData.recommendation?.estimatedCost || 0) / 10000).toFixed(0)}
|
||||
<Typography component="span" sx={{
|
||||
fontSize: '1rem',
|
||||
ml: 0.5,
|
||||
color: colors.gray[900],
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}>
|
||||
만원
|
||||
</Typography>
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.mintLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<TrendingUp sx={{
|
||||
fontSize: 32,
|
||||
color: colors.gray[900],
|
||||
mb: 1,
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
<Typography variant="body2" sx={{
|
||||
color: colors.gray[700],
|
||||
fontSize: '0.875rem',
|
||||
mb: 1,
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}>
|
||||
예상 ROI
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: 'error.main' }}>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '1.75rem',
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{eventData.recommendation?.roi || 0}%
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Event Details */}
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 3 }}>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
|
||||
이벤트 상세
|
||||
</Typography>
|
||||
|
||||
<Card elevation={0} sx={{ mb: 2, borderRadius: 3 }}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, mb: 4 }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="caption" color="text.secondary" sx={{ ...responsiveText.body2, fontSize: '0.875rem' }}>
|
||||
이벤트 제목
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body1" sx={{ ...responsiveText.body1, fontWeight: 600, mt: 1 }}>
|
||||
{eventData.recommendation?.title}
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -156,14 +280,14 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card elevation={0} sx={{ mb: 2, borderRadius: 3 }}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, mb: 4 }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="caption" color="text.secondary" sx={{ ...responsiveText.body2, fontSize: '0.875rem' }}>
|
||||
경품
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body1" sx={{ ...responsiveText.body1, fontWeight: 600, mt: 1 }}>
|
||||
{eventData.recommendation?.prize}
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -174,14 +298,14 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card elevation={0} sx={{ mb: 2, borderRadius: 3 }}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, mb: 10 }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="caption" color="text.secondary" sx={{ ...responsiveText.body2, fontSize: '0.875rem' }}>
|
||||
참여 방법
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body1" sx={{ ...responsiveText.body1, fontWeight: 600, mt: 1 }}>
|
||||
{eventData.recommendation?.participationMethod}
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -190,21 +314,36 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
</Card>
|
||||
|
||||
{/* Distribution Channels */}
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 3, mt: 4 }}>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
|
||||
배포 채널
|
||||
</Typography>
|
||||
|
||||
<Card elevation={0} sx={{ mb: 4, borderRadius: 3 }}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, mb: 10 }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mb: 4 }}>
|
||||
{getChannelNames(eventData.channels).map((channel) => (
|
||||
<Chip key={channel} label={channel} color="primary" variant="outlined" />
|
||||
<Chip
|
||||
key={channel}
|
||||
label={channel}
|
||||
sx={{
|
||||
bgcolor: colors.purple,
|
||||
color: 'white',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.875rem',
|
||||
px: 2,
|
||||
py: 2.5,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<Edit />}
|
||||
sx={{ color: 'primary.main' }}
|
||||
sx={{
|
||||
...responsiveText.body2,
|
||||
fontWeight: 600,
|
||||
color: colors.purple,
|
||||
}}
|
||||
>
|
||||
채널 수정하기
|
||||
</Button>
|
||||
@ -212,19 +351,27 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
</Card>
|
||||
|
||||
{/* Terms Agreement */}
|
||||
<Card elevation={0} sx={{ mb: 5, borderRadius: 3, bgcolor: 'grey.50' }}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, bgcolor: colors.gray[50], mb: 10 }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={agreeTerms}
|
||||
onChange={(e) => setAgreeTerms(e.target.checked)}
|
||||
sx={{
|
||||
color: colors.purple,
|
||||
'&.Mui-checked': {
|
||||
color: colors.purple,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Typography variant="body2">
|
||||
<Typography variant="body2" sx={{ ...responsiveText.body1 }}>
|
||||
이벤트 약관 및 개인정보 처리방침에 동의합니다{' '}
|
||||
<span style={{ color: 'red' }}>(필수)</span>
|
||||
<Typography component="span" sx={{ color: colors.orange, fontWeight: 600 }}>
|
||||
(필수)
|
||||
</Typography>
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
@ -232,7 +379,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
component="button"
|
||||
variant="body2"
|
||||
onClick={() => setTermsDialogOpen(true)}
|
||||
sx={{ color: 'error.main', ml: 4, mt: 1 }}
|
||||
sx={{ ...responsiveText.body2, ml: 4, mt: 2, fontWeight: 600, color: colors.purple }}
|
||||
>
|
||||
약관 보기
|
||||
</Link>
|
||||
@ -240,7 +387,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
</Card>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
@ -248,7 +395,20 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
disabled={!agreeTerms || isDeploying}
|
||||
onClick={handleApprove}
|
||||
startIcon={isDeploying ? null : <RocketLaunch />}
|
||||
sx={{ py: 1.5 }}
|
||||
sx={{
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
'&:disabled': {
|
||||
background: colors.gray[300],
|
||||
},
|
||||
}}
|
||||
>
|
||||
{isDeploying ? '배포 중...' : '배포하기'}
|
||||
</Button>
|
||||
@ -258,7 +418,20 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
size="large"
|
||||
onClick={handleSaveDraft}
|
||||
startIcon={<Save />}
|
||||
sx={{ py: 1.5 }}
|
||||
sx={{
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
borderWidth: 2,
|
||||
borderColor: colors.gray[300],
|
||||
color: colors.gray[700],
|
||||
'&:hover': {
|
||||
borderWidth: 2,
|
||||
borderColor: colors.gray[400],
|
||||
bgcolor: colors.gray[50],
|
||||
},
|
||||
}}
|
||||
>
|
||||
임시저장
|
||||
</Button>
|
||||
@ -271,39 +444,61 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
onClose={() => setTermsDialogOpen(false)}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: {
|
||||
borderRadius: 4,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DialogTitle>이벤트 약관</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
<DialogTitle sx={{ ...responsiveText.h3, fontWeight: 700, p: 6, pb: 4 }}>
|
||||
이벤트 약관
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ px: 6, pb: 6 }}>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 3 }}>
|
||||
제1조 (목적)
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ mb: 3 }}>
|
||||
<Typography variant="body2" sx={{ ...responsiveText.body1, mb: 6, color: colors.gray[700] }}>
|
||||
본 약관은 KT AI 이벤트 마케팅 서비스를 통해 진행되는 이벤트의 참여 및 개인정보 처리에 관한
|
||||
사항을 규정합니다.
|
||||
</Typography>
|
||||
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 3 }}>
|
||||
제2조 (개인정보 수집 및 이용)
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ mb: 1 }}>
|
||||
<Typography variant="body2" sx={{ ...responsiveText.body1, mb: 2, color: colors.gray[700] }}>
|
||||
수집 항목: 이름, 전화번호, 이메일
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ mb: 1 }}>
|
||||
<Typography variant="body2" sx={{ ...responsiveText.body1, mb: 2, color: colors.gray[700] }}>
|
||||
이용 목적: 이벤트 참여 확인 및 경품 제공
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ mb: 3 }}>
|
||||
<Typography variant="body2" sx={{ ...responsiveText.body1, mb: 6, color: colors.gray[700] }}>
|
||||
보유 기간: 이벤트 종료 후 6개월
|
||||
</Typography>
|
||||
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 3 }}>
|
||||
제3조 (당첨자 발표)
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
<Typography variant="body2" sx={{ ...responsiveText.body1, color: colors.gray[700] }}>
|
||||
당첨자는 이벤트 종료 후 7일 이내 개별 연락 드립니다.
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setTermsDialogOpen(false)} variant="contained">
|
||||
<DialogActions sx={{ p: 6, pt: 4 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={() => setTermsDialogOpen(false)}
|
||||
variant="contained"
|
||||
sx={{
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
}}
|
||||
>
|
||||
확인
|
||||
</Button>
|
||||
</DialogActions>
|
||||
@ -316,30 +511,44 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
setSuccessDialogOpen(false);
|
||||
onApprove();
|
||||
}}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
borderRadius: 4,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DialogContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<CheckCircle sx={{ fontSize: 80, color: 'success.main', mb: 2 }} />
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
<DialogContent sx={{ textAlign: 'center', py: 10, px: 8 }}>
|
||||
<CheckCircle sx={{ fontSize: 80, color: colors.purple, mb: 4 }} />
|
||||
<Typography variant="h5" sx={{ fontSize: '1.5rem', fontWeight: 700, mb: 3 }}>
|
||||
배포 완료!
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ fontSize: '1rem', mb: 8 }}>
|
||||
이벤트가 성공적으로 배포되었습니다.
|
||||
<br />
|
||||
실시간으로 참여자를 확인할 수 있습니다.
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={() => {
|
||||
setSuccessDialogOpen(false);
|
||||
onApprove();
|
||||
}}
|
||||
>
|
||||
대시보드로 이동
|
||||
</Button>
|
||||
</Box>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={() => {
|
||||
setSuccessDialogOpen(false);
|
||||
onApprove();
|
||||
}}
|
||||
sx={{
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
}}
|
||||
>
|
||||
대시보드로 이동
|
||||
</Button>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Box>
|
||||
|
||||
@ -17,6 +17,24 @@ import {
|
||||
} from '@mui/material';
|
||||
import { ArrowBack } from '@mui/icons-material';
|
||||
|
||||
// 디자인 시스템 색상
|
||||
const colors = {
|
||||
pink: '#F472B6',
|
||||
purple: '#C084FC',
|
||||
purpleLight: '#E9D5FF',
|
||||
blue: '#60A5FA',
|
||||
mint: '#34D399',
|
||||
orange: '#FB923C',
|
||||
yellow: '#FBBF24',
|
||||
gray: {
|
||||
900: '#1A1A1A',
|
||||
700: '#4A4A4A',
|
||||
500: '#9E9E9E',
|
||||
300: '#D9D9D9',
|
||||
100: '#F5F5F5',
|
||||
},
|
||||
};
|
||||
|
||||
interface Channel {
|
||||
id: string;
|
||||
name: string;
|
||||
@ -89,19 +107,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
const selectedCount = channels.filter((ch) => ch.selected).length;
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 6, md: 8 } }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 4 }}>
|
||||
<IconButton onClick={onBack}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 8 }}>
|
||||
<IconButton onClick={onBack} sx={{ width: 48, height: 48 }}>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
|
||||
배포 채널 선택
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 4, textAlign: 'center' }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 8, textAlign: 'center', fontSize: '1rem' }}>
|
||||
(최소 1개 이상)
|
||||
</Typography>
|
||||
|
||||
@ -109,21 +127,34 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: 3,
|
||||
borderRadius: 3,
|
||||
opacity: channels[0].selected ? 1 : 0.6,
|
||||
transition: 'opacity 0.3s',
|
||||
mb: 6,
|
||||
borderRadius: 4,
|
||||
border: channels[0].selected ? 2 : 1,
|
||||
borderColor: channels[0].selected ? colors.purple : 'divider',
|
||||
bgcolor: channels[0].selected ? `${colors.purpleLight}40` : 'background.paper',
|
||||
boxShadow: channels[0].selected ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.3s',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={channels[0].selected}
|
||||
onChange={() => handleChannelToggle('uriTV')}
|
||||
sx={{
|
||||
color: colors.purple,
|
||||
'&.Mui-checked': {
|
||||
color: colors.purple,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="우리동네TV"
|
||||
label={
|
||||
<Typography variant="body1" sx={{ fontWeight: channels[0].selected ? 700 : 600, fontSize: '1.125rem' }}>
|
||||
우리동네TV
|
||||
</Typography>
|
||||
}
|
||||
sx={{ mb: channels[0].selected ? 2 : 0 }}
|
||||
/>
|
||||
|
||||
@ -171,21 +202,34 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: 3,
|
||||
borderRadius: 3,
|
||||
opacity: channels[1].selected ? 1 : 0.6,
|
||||
transition: 'opacity 0.3s',
|
||||
mb: 6,
|
||||
borderRadius: 4,
|
||||
border: channels[1].selected ? 2 : 1,
|
||||
borderColor: channels[1].selected ? colors.purple : 'divider',
|
||||
bgcolor: channels[1].selected ? `${colors.purpleLight}40` : 'background.paper',
|
||||
boxShadow: channels[1].selected ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.3s',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={channels[1].selected}
|
||||
onChange={() => handleChannelToggle('ringoBiz')}
|
||||
sx={{
|
||||
color: colors.purple,
|
||||
'&.Mui-checked': {
|
||||
color: colors.purple,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="링고비즈"
|
||||
label={
|
||||
<Typography variant="body1" sx={{ fontWeight: channels[1].selected ? 700 : 600, fontSize: '1.125rem' }}>
|
||||
링고비즈
|
||||
</Typography>
|
||||
}
|
||||
sx={{ mb: channels[1].selected ? 2 : 0 }}
|
||||
/>
|
||||
|
||||
@ -217,21 +261,34 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: 3,
|
||||
borderRadius: 3,
|
||||
opacity: channels[2].selected ? 1 : 0.6,
|
||||
transition: 'opacity 0.3s',
|
||||
mb: 6,
|
||||
borderRadius: 4,
|
||||
border: channels[2].selected ? 2 : 1,
|
||||
borderColor: channels[2].selected ? colors.purple : 'divider',
|
||||
bgcolor: channels[2].selected ? `${colors.purpleLight}40` : 'background.paper',
|
||||
boxShadow: channels[2].selected ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.3s',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={channels[2].selected}
|
||||
onChange={() => handleChannelToggle('genieTV')}
|
||||
sx={{
|
||||
color: colors.purple,
|
||||
'&.Mui-checked': {
|
||||
color: colors.purple,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="지니TV 광고"
|
||||
label={
|
||||
<Typography variant="body1" sx={{ fontWeight: channels[2].selected ? 700 : 600, fontSize: '1.125rem' }}>
|
||||
지니TV 광고
|
||||
</Typography>
|
||||
}
|
||||
sx={{ mb: channels[2].selected ? 2 : 0 }}
|
||||
/>
|
||||
|
||||
@ -290,21 +347,34 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: 5,
|
||||
borderRadius: 3,
|
||||
opacity: channels[3].selected ? 1 : 0.6,
|
||||
transition: 'opacity 0.3s',
|
||||
mb: 10,
|
||||
borderRadius: 4,
|
||||
border: channels[3].selected ? 2 : 1,
|
||||
borderColor: channels[3].selected ? colors.purple : 'divider',
|
||||
bgcolor: channels[3].selected ? `${colors.purpleLight}40` : 'background.paper',
|
||||
boxShadow: channels[3].selected ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.3s',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={channels[3].selected}
|
||||
onChange={() => handleChannelToggle('sns')}
|
||||
sx={{
|
||||
color: colors.purple,
|
||||
'&.Mui-checked': {
|
||||
color: colors.purple,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="SNS"
|
||||
label={
|
||||
<Typography variant="body1" sx={{ fontWeight: channels[3].selected ? 700 : 600, fontSize: '1.125rem' }}>
|
||||
SNS
|
||||
</Typography>
|
||||
}
|
||||
sx={{ mb: channels[3].selected ? 2 : 0 }}
|
||||
/>
|
||||
|
||||
@ -320,6 +390,12 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
onChange={(e) =>
|
||||
handleConfigChange('sns', 'instagram', e.target.checked.toString())
|
||||
}
|
||||
sx={{
|
||||
color: colors.purple,
|
||||
'&.Mui-checked': {
|
||||
color: colors.purple,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="Instagram"
|
||||
@ -332,6 +408,12 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
onChange={(e) =>
|
||||
handleConfigChange('sns', 'naver', e.target.checked.toString())
|
||||
}
|
||||
sx={{
|
||||
color: colors.purple,
|
||||
'&.Mui-checked': {
|
||||
color: colors.purple,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="Naver Blog"
|
||||
@ -344,6 +426,12 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
onChange={(e) =>
|
||||
handleConfigChange('sns', 'kakao', e.target.checked.toString())
|
||||
}
|
||||
sx={{
|
||||
color: colors.purple,
|
||||
'&.Mui-checked': {
|
||||
color: colors.purple,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="Kakao Channel"
|
||||
@ -374,17 +462,29 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
</Card>
|
||||
|
||||
{/* Summary */}
|
||||
<Card elevation={0} sx={{ mb: 5, borderRadius: 3, bgcolor: 'grey.50' }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Typography variant="h6">총 예상 비용</Typography>
|
||||
<Typography variant="h6" color="error.main" sx={{ fontWeight: 700 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: 10,
|
||||
borderRadius: 4,
|
||||
bgcolor: 'grey.50',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 8 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 4 }}>
|
||||
<Typography variant="h6" sx={{ fontSize: '1.25rem' }}>
|
||||
총 예상 비용
|
||||
</Typography>
|
||||
<Typography variant="h6" color="error.main" sx={{ fontWeight: 700, fontSize: '1.25rem' }}>
|
||||
{totalCost.toLocaleString()}원
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Typography variant="h6">총 예상 노출</Typography>
|
||||
<Typography variant="h6" color="primary.main" sx={{ fontWeight: 700 }}>
|
||||
<Typography variant="h6" sx={{ fontSize: '1.25rem' }}>
|
||||
총 예상 노출
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1.25rem', color: colors.purple }}>
|
||||
{totalExposure > 0 ? `${totalExposure.toLocaleString()}명+` : '0명'}
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -392,8 +492,23 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
</Card>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
<Button fullWidth variant="outlined" size="large" onClick={onBack} sx={{ py: 1.5 }}>
|
||||
<Box sx={{ display: 'flex', gap: 4 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
size="large"
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
borderWidth: 2,
|
||||
'&:hover': {
|
||||
borderWidth: 2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
이전
|
||||
</Button>
|
||||
<Button
|
||||
@ -402,7 +517,20 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
size="large"
|
||||
disabled={selectedCount === 0}
|
||||
onClick={handleNext}
|
||||
sx={{ py: 1.5 }}
|
||||
sx={{
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
'&:disabled': {
|
||||
background: colors.gray[300],
|
||||
},
|
||||
}}
|
||||
>
|
||||
다음
|
||||
</Button>
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
IconButton,
|
||||
} from '@mui/material';
|
||||
import { ArrowBack, Edit } from '@mui/icons-material';
|
||||
import { cardStyles, colors, responsiveText } from '@/shared/lib/button-styles';
|
||||
|
||||
interface ContentEditStepProps {
|
||||
initialTitle: string;
|
||||
@ -39,71 +40,73 @@ export default function ContentEditStep({
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: colors.gray[50], pt: { xs: 7, sm: 8 }, pb: 10 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 4 }}>
|
||||
<IconButton onClick={onBack}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 10 }}>
|
||||
<IconButton onClick={onBack} sx={{ width: 48, height: 48 }}>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, fontWeight: 700 }}>
|
||||
콘텐츠 편집
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={4}>
|
||||
<Grid container spacing={6}>
|
||||
{/* Preview Section */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 3 }}>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
|
||||
미리보기
|
||||
</Typography>
|
||||
<Card elevation={0} sx={{ borderRadius: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
aspectRatio: '1 / 1',
|
||||
bgcolor: 'grey.100',
|
||||
borderRadius: '12px 12px 0 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
p: 4,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 48, marginBottom: 16 }}>
|
||||
celebration
|
||||
</span>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
{title || '제목을 입력하세요'}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
|
||||
{prize || '경품을 입력하세요'}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{guide || '참여 안내를 입력하세요'}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
aspectRatio: '1 / 1',
|
||||
bgcolor: colors.gray[100],
|
||||
borderRadius: 3,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
p: 6,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 64, marginBottom: 24, color: colors.purple }}>
|
||||
celebration
|
||||
</span>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 2 }}>
|
||||
{title || '제목을 입력하세요'}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ ...responsiveText.body1, mb: 2 }}>
|
||||
{prize || '경품을 입력하세요'}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ ...responsiveText.body2 }}>
|
||||
{guide || '참여 안내를 입력하세요'}
|
||||
</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
{/* Edit Section */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 3 }}>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
|
||||
편집
|
||||
</Typography>
|
||||
|
||||
<Card elevation={0} sx={{ borderRadius: 3, mb: 3 }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||
<Edit color="primary" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 6 }}>
|
||||
<Edit sx={{ color: colors.purple, fontSize: 28 }} />
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700 }}>
|
||||
텍스트 편집
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<Box>
|
||||
<TextField
|
||||
fullWidth
|
||||
@ -133,7 +136,7 @@ export default function ContentEditStep({
|
||||
value={guide}
|
||||
onChange={(e) => setGuide(e.target.value)}
|
||||
multiline
|
||||
rows={3}
|
||||
rows={4}
|
||||
inputProps={{ maxLength: 100 }}
|
||||
helperText={`${guide.length}/100자`}
|
||||
/>
|
||||
@ -145,11 +148,42 @@ export default function ContentEditStep({
|
||||
</Grid>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<Box sx={{ display: 'flex', gap: 2, mt: 5 }}>
|
||||
<Button fullWidth variant="outlined" size="large" onClick={handleSave} sx={{ py: 1.5 }}>
|
||||
<Box sx={{ display: 'flex', gap: 4, mt: 10 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
size="large"
|
||||
onClick={handleSave}
|
||||
sx={{
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
borderWidth: 2,
|
||||
'&:hover': {
|
||||
borderWidth: 2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
저장
|
||||
</Button>
|
||||
<Button fullWidth variant="contained" size="large" onClick={handleNext} sx={{ py: 1.5 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={handleNext}
|
||||
sx={{
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
}}
|
||||
>
|
||||
다음 단계
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
@ -11,9 +11,28 @@ import {
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
Dialog,
|
||||
Grid,
|
||||
} from '@mui/material';
|
||||
import { ArrowBack, ZoomIn, Psychology } from '@mui/icons-material';
|
||||
|
||||
// 디자인 시스템 색상
|
||||
const colors = {
|
||||
pink: '#F472B6',
|
||||
purple: '#C084FC',
|
||||
purpleLight: '#E9D5FF',
|
||||
blue: '#60A5FA',
|
||||
mint: '#34D399',
|
||||
orange: '#FB923C',
|
||||
yellow: '#FBBF24',
|
||||
gray: {
|
||||
900: '#1A1A1A',
|
||||
700: '#4A4A4A',
|
||||
500: '#9E9E9E',
|
||||
300: '#D9D9D9',
|
||||
100: '#F5F5F5',
|
||||
},
|
||||
};
|
||||
|
||||
interface ImageStyle {
|
||||
id: string;
|
||||
name: string;
|
||||
@ -91,23 +110,23 @@ export default function ContentPreviewStep({
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="md" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 4 }}>
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 6, md: 8 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 8 }}>
|
||||
<IconButton onClick={onBack}>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
|
||||
SNS 이미지 생성
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ textAlign: 'center', mt: 10, mb: 10 }}>
|
||||
<Box sx={{ textAlign: 'center', mt: 15, mb: 15 }}>
|
||||
<Psychology
|
||||
sx={{
|
||||
fontSize: 64,
|
||||
color: 'info.main',
|
||||
mb: 2,
|
||||
fontSize: 80,
|
||||
color: colors.purple,
|
||||
mb: 4,
|
||||
animation: 'spin 2s linear infinite',
|
||||
'@keyframes spin': {
|
||||
'0%': { transform: 'rotate(0deg)' },
|
||||
@ -115,15 +134,15 @@ export default function ContentPreviewStep({
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, mb: 3, fontSize: '1.5rem' }}>
|
||||
AI 이미지 생성 중
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 3, fontSize: '1.125rem' }}>
|
||||
딥러닝 모델이 이벤트에 어울리는
|
||||
<br />
|
||||
이미지를 생성하고 있어요...
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
|
||||
예상 시간: 5초
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -133,134 +152,148 @@ export default function ContentPreviewStep({
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="md" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 6, md: 8 } }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 8 }}>
|
||||
<IconButton onClick={onBack}>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
|
||||
SNS 이미지 생성
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 8, textAlign: 'center', fontSize: '1rem' }}>
|
||||
이벤트에 어울리는 스타일을 선택하세요
|
||||
</Typography>
|
||||
|
||||
<RadioGroup value={selectedStyle} onChange={(e) => handleStyleSelect(e.target.value)}>
|
||||
{imageStyles.map((style) => (
|
||||
<Box key={style.id} sx={{ mb: 4 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2 }}>
|
||||
{style.name}
|
||||
</Typography>
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
{imageStyles.map((style) => (
|
||||
<Grid item xs={12} md={4} key={style.id}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 4,
|
||||
border: selectedStyle === style.id ? 2 : 1,
|
||||
borderColor: selectedStyle === style.id ? colors.purple : 'divider',
|
||||
bgcolor: selectedStyle === style.id ? `${colors.purpleLight}40` : 'background.paper',
|
||||
transition: 'all 0.3s',
|
||||
position: 'relative',
|
||||
boxShadow: selectedStyle === style.id ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
'&:hover': {
|
||||
borderColor: colors.purple,
|
||||
transform: 'translateY(-2px)',
|
||||
boxShadow: '0 8px 16px rgba(0, 0, 0, 0.15)',
|
||||
},
|
||||
}}
|
||||
onClick={() => handleStyleSelect(style.id)}
|
||||
>
|
||||
<CardContent sx={{ p: 0 }}>
|
||||
{/* 스타일 이름 */}
|
||||
<Box sx={{ p: 4, borderBottom: 1, borderColor: 'divider', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1.125rem' }}>
|
||||
{style.name}
|
||||
</Typography>
|
||||
<FormControlLabel
|
||||
value={style.id}
|
||||
control={<Radio sx={{ color: colors.purple, '&.Mui-checked': { color: colors.purple } }} />}
|
||||
label=""
|
||||
sx={{ m: 0 }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 3,
|
||||
border: selectedStyle === style.id ? 3 : 1,
|
||||
borderColor: selectedStyle === style.id ? 'error.main' : 'divider',
|
||||
transition: 'all 0.3s',
|
||||
position: 'relative',
|
||||
'&:hover': {
|
||||
transform: 'translateY(-2px)',
|
||||
boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
}}
|
||||
onClick={() => handleStyleSelect(style.id)}
|
||||
>
|
||||
{selectedStyle === style.id && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 16,
|
||||
right: 16,
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'error.main',
|
||||
color: 'white',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 20 }}>
|
||||
check
|
||||
</span>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<CardContent sx={{ p: 0 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
aspectRatio: '1 / 1',
|
||||
background: style.gradient || '#f5f5f5',
|
||||
borderRadius: '12px 12px 0 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
p: 4,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="material-icons"
|
||||
style={{
|
||||
fontSize: 48,
|
||||
marginBottom: 16,
|
||||
color: style.textColor || 'inherit',
|
||||
}}
|
||||
>
|
||||
{style.icon}
|
||||
</span>
|
||||
<Typography
|
||||
variant="body1"
|
||||
{/* 이미지 프리뷰 */}
|
||||
<Box
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
mb: 1,
|
||||
color: style.textColor || 'text.primary',
|
||||
width: '100%',
|
||||
aspectRatio: '1 / 1',
|
||||
background: style.gradient || colors.gray[100],
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
p: 6,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
color: style.textColor || 'text.secondary',
|
||||
opacity: style.textColor ? 0.9 : 1,
|
||||
}}
|
||||
>
|
||||
{prize}
|
||||
</Typography>
|
||||
</Box>
|
||||
<span
|
||||
className="material-icons"
|
||||
style={{
|
||||
fontSize: 64,
|
||||
marginBottom: 24,
|
||||
color: style.textColor || colors.gray[700],
|
||||
}}
|
||||
>
|
||||
{style.icon}
|
||||
</span>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
mb: 2,
|
||||
color: style.textColor || 'text.primary',
|
||||
fontSize: '1.25rem',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
color: style.textColor || 'text.secondary',
|
||||
opacity: style.textColor ? 0.9 : 1,
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
{prize}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ p: 2, display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<ZoomIn />}
|
||||
onClick={(e) => handlePreview(style, e)}
|
||||
>
|
||||
크게보기
|
||||
</Button>
|
||||
<FormControlLabel
|
||||
value={style.id}
|
||||
control={<Radio sx={{ display: 'none' }} />}
|
||||
label=""
|
||||
sx={{ display: 'none' }}
|
||||
/>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Box>
|
||||
))}
|
||||
{/* 크게보기 버튼 */}
|
||||
<Box sx={{ p: 4, display: 'flex', justifyContent: 'center' }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<ZoomIn />}
|
||||
onClick={(e) => handlePreview(style, e)}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
py: 1.5,
|
||||
px: 4,
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
크게보기
|
||||
</Button>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</RadioGroup>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<Box sx={{ display: 'flex', gap: 2, mt: 5 }}>
|
||||
<Button fullWidth variant="outlined" size="large" onClick={onSkip} sx={{ py: 1.5 }}>
|
||||
<Box sx={{ display: 'flex', gap: 4 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
size="large"
|
||||
onClick={onSkip}
|
||||
sx={{
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
borderWidth: 2,
|
||||
'&:hover': {
|
||||
borderWidth: 2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
건너뛰기
|
||||
</Button>
|
||||
<Button
|
||||
@ -269,7 +302,20 @@ export default function ContentPreviewStep({
|
||||
size="large"
|
||||
disabled={!selectedStyle}
|
||||
onClick={handleNext}
|
||||
sx={{ py: 1.5 }}
|
||||
sx={{
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
'&:disabled': {
|
||||
background: colors.gray[300],
|
||||
},
|
||||
}}
|
||||
>
|
||||
다음
|
||||
</Button>
|
||||
@ -321,7 +367,7 @@ export default function ContentPreviewStep({
|
||||
maxWidth: 600,
|
||||
aspectRatio: '1 / 1',
|
||||
background: fullscreenStyle.gradient || '#f5f5f5',
|
||||
borderRadius: 3,
|
||||
borderRadius: 4,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
|
||||
@ -14,6 +14,24 @@ import {
|
||||
import { AutoAwesome, TrendingUp, Replay, Store, Campaign } from '@mui/icons-material';
|
||||
import { EventObjective } from '../page';
|
||||
|
||||
// 디자인 시스템 색상
|
||||
const colors = {
|
||||
pink: '#F472B6',
|
||||
purple: '#C084FC',
|
||||
purpleLight: '#E9D5FF',
|
||||
blue: '#60A5FA',
|
||||
mint: '#34D399',
|
||||
orange: '#FB923C',
|
||||
yellow: '#FBBF24',
|
||||
gray: {
|
||||
900: '#1A1A1A',
|
||||
700: '#4A4A4A',
|
||||
500: '#9E9E9E',
|
||||
300: '#D9D9D9',
|
||||
100: '#F5F5F5',
|
||||
},
|
||||
};
|
||||
|
||||
interface ObjectiveOption {
|
||||
id: EventObjective;
|
||||
icon: React.ReactNode;
|
||||
@ -62,54 +80,56 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="md" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
|
||||
<Container maxWidth="md" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 6, md: 8 } }}>
|
||||
{/* Title Section */}
|
||||
<Box sx={{ mb: 5, textAlign: 'center' }}>
|
||||
<AutoAwesome sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} />
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
<Box sx={{ mb: 10, textAlign: 'center' }}>
|
||||
<AutoAwesome sx={{ fontSize: 80, color: colors.purple, mb: 4 }} />
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, mb: 4, fontSize: '2rem' }}>
|
||||
이벤트 목적을 선택해주세요
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
<Typography variant="body1" color="text.secondary" sx={{ fontSize: '1.125rem' }}>
|
||||
AI가 목적에 맞는 최적의 이벤트를 추천해드립니다
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Purpose Options */}
|
||||
<RadioGroup value={selected} onChange={(e) => setSelected(e.target.value as EventObjective)}>
|
||||
<Grid container spacing={3} sx={{ mb: 5 }}>
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
{objectives.map((objective) => (
|
||||
<Grid item xs={12} sm={6} key={objective.id}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 3,
|
||||
borderRadius: 4,
|
||||
border: selected === objective.id ? 2 : 1,
|
||||
borderColor: selected === objective.id ? 'primary.main' : 'divider',
|
||||
bgcolor: selected === objective.id ? 'action.selected' : 'background.paper',
|
||||
borderColor: selected === objective.id ? colors.purple : 'divider',
|
||||
bgcolor: selected === objective.id ? `${colors.purpleLight}40` : 'background.paper',
|
||||
transition: 'all 0.2s',
|
||||
boxShadow: selected === objective.id ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
'&:hover': {
|
||||
borderColor: 'primary.main',
|
||||
boxShadow: selected === objective.id ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
borderColor: colors.purple,
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
transform: 'translateY(-2px)',
|
||||
},
|
||||
}}
|
||||
onClick={() => setSelected(objective.id)}
|
||||
>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2, mb: 2 }}>
|
||||
<Box sx={{ color: 'primary.main' }}>{objective.icon}</Box>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, mb: 3 }}>
|
||||
<Box sx={{ color: colors.purple }}>{objective.icon}</Box>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2, fontSize: '1.25rem' }}>
|
||||
{objective.title}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
|
||||
{objective.description}
|
||||
</Typography>
|
||||
</Box>
|
||||
<FormControlLabel
|
||||
value={objective.id}
|
||||
control={<Radio />}
|
||||
control={<Radio sx={{ color: selected === objective.id ? colors.purple : undefined }} />}
|
||||
label=""
|
||||
sx={{ m: 0 }}
|
||||
/>
|
||||
@ -125,14 +145,15 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: 5,
|
||||
bgcolor: 'primary.light',
|
||||
borderRadius: 3,
|
||||
mb: 10,
|
||||
background: `linear-gradient(135deg, ${colors.purpleLight} 0%, ${colors.blue}20 100%)`,
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ display: 'flex', gap: 2, p: 3 }}>
|
||||
<AutoAwesome sx={{ color: 'primary.main' }} />
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<CardContent sx={{ display: 'flex', gap: 3, p: 6 }}>
|
||||
<AutoAwesome sx={{ color: colors.purple, fontSize: 28 }} />
|
||||
<Typography variant="body2" sx={{ fontSize: '1rem', lineHeight: 1.8, color: colors.gray[700] }}>
|
||||
선택하신 목적에 따라 AI가 업종, 지역, 계절 트렌드를 분석하여 가장 효과적인 이벤트를 추천합니다.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -146,7 +167,20 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
|
||||
size="large"
|
||||
disabled={!selected}
|
||||
onClick={handleNext}
|
||||
sx={{ py: 1.5 }}
|
||||
sx={{
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
'&:disabled': {
|
||||
background: colors.gray[300],
|
||||
},
|
||||
}}
|
||||
>
|
||||
다음
|
||||
</Button>
|
||||
|
||||
@ -19,6 +19,24 @@ import {
|
||||
import { ArrowBack, Edit, Insights } from '@mui/icons-material';
|
||||
import { EventObjective, BudgetLevel, EventMethod } from '../page';
|
||||
|
||||
// 디자인 시스템 색상
|
||||
const colors = {
|
||||
pink: '#F472B6',
|
||||
purple: '#C084FC',
|
||||
purpleLight: '#E9D5FF',
|
||||
blue: '#60A5FA',
|
||||
mint: '#34D399',
|
||||
orange: '#FB923C',
|
||||
yellow: '#FBBF24',
|
||||
gray: {
|
||||
900: '#1A1A1A',
|
||||
700: '#4A4A4A',
|
||||
500: '#9E9E9E',
|
||||
300: '#D9D9D9',
|
||||
100: '#F5F5F5',
|
||||
},
|
||||
};
|
||||
|
||||
interface Recommendation {
|
||||
id: string;
|
||||
budget: BudgetLevel;
|
||||
@ -144,49 +162,56 @@ export default function RecommendationStep({ onNext, onBack }: RecommendationSte
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 6, md: 8 } }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 4 }}>
|
||||
<IconButton onClick={onBack}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 8 }}>
|
||||
<IconButton onClick={onBack} sx={{ width: 48, height: 48 }}>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
|
||||
AI 이벤트 추천
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Trends Analysis */}
|
||||
<Card elevation={0} sx={{ mb: 5, borderRadius: 3 }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||
<Insights color="primary" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: 10,
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 8 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 6 }}>
|
||||
<Insights sx={{ fontSize: 32, color: colors.purple }} />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1.25rem' }}>
|
||||
AI 트렌드 분석
|
||||
</Typography>
|
||||
</Box>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={6}>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 2, fontSize: '1rem' }}>
|
||||
📍 업종 트렌드
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
|
||||
음식점업 신년 프로모션 트렌드
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 2, fontSize: '1rem' }}>
|
||||
🗺️ 지역 트렌드
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
|
||||
강남구 음식점 할인 이벤트 증가
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 2, fontSize: '1rem' }}>
|
||||
☀️ 시즌 트렌드
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
|
||||
설 연휴 특수 대비 고객 유치 전략
|
||||
</Typography>
|
||||
</Grid>
|
||||
@ -195,52 +220,67 @@ export default function RecommendationStep({ onNext, onBack }: RecommendationSte
|
||||
</Card>
|
||||
|
||||
{/* Budget Selection */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2 }}>
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 4, fontSize: '1.25rem' }}>
|
||||
예산별 추천 이벤트
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 6, fontSize: '1rem' }}>
|
||||
각 예산별 2가지 방식 (온라인 1개, 오프라인 1개)을 추천합니다
|
||||
</Typography>
|
||||
<Tabs
|
||||
value={selectedBudget}
|
||||
onChange={(_, value) => setSelectedBudget(value)}
|
||||
variant="fullWidth"
|
||||
sx={{ mb: 4 }}
|
||||
sx={{ mb: 8 }}
|
||||
>
|
||||
<Tab label="💰 저비용" value="low" />
|
||||
<Tab label="💰💰 중비용" value="medium" />
|
||||
<Tab label="💰💰💰 고비용" value="high" />
|
||||
<Tab
|
||||
label="💰 저비용"
|
||||
value="low"
|
||||
sx={{ py: 3, fontSize: '1rem', fontWeight: 600 }}
|
||||
/>
|
||||
<Tab
|
||||
label="💰💰 중비용"
|
||||
value="medium"
|
||||
sx={{ py: 3, fontSize: '1rem', fontWeight: 600 }}
|
||||
/>
|
||||
<Tab
|
||||
label="💰💰💰 고비용"
|
||||
value="high"
|
||||
sx={{ py: 3, fontSize: '1rem', fontWeight: 600 }}
|
||||
/>
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{/* Recommendations */}
|
||||
<RadioGroup value={selected} onChange={(e) => setSelected(e.target.value)}>
|
||||
<Grid container spacing={3} sx={{ mb: 5 }}>
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
{budgetRecommendations.map((rec) => (
|
||||
<Grid item xs={12} md={6} key={rec.id}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 3,
|
||||
borderRadius: 4,
|
||||
border: selected === rec.id ? 2 : 1,
|
||||
borderColor: selected === rec.id ? 'primary.main' : 'divider',
|
||||
bgcolor: selected === rec.id ? 'action.selected' : 'background.paper',
|
||||
borderColor: selected === rec.id ? colors.purple : 'divider',
|
||||
bgcolor: selected === rec.id ? `${colors.purpleLight}40` : 'background.paper',
|
||||
transition: 'all 0.2s',
|
||||
boxShadow: selected === rec.id ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
'&:hover': {
|
||||
borderColor: 'primary.main',
|
||||
borderColor: colors.purple,
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
transform: 'translateY(-2px)',
|
||||
},
|
||||
}}
|
||||
onClick={() => setSelected(rec.id)}
|
||||
>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 4 }}>
|
||||
<Chip
|
||||
label={rec.method === 'online' ? '🌐 온라인' : '🏪 오프라인'}
|
||||
color={rec.method === 'online' ? 'primary' : 'secondary'}
|
||||
size="small"
|
||||
size="medium"
|
||||
sx={{ fontSize: '0.875rem', py: 2 }}
|
||||
/>
|
||||
<FormControlLabel value={rec.id} control={<Radio />} label="" sx={{ m: 0 }} />
|
||||
</Box>
|
||||
@ -251,59 +291,61 @@ export default function RecommendationStep({ onNext, onBack }: RecommendationSte
|
||||
value={editedData[rec.id]?.title || rec.title}
|
||||
onChange={(e) => handleEditTitle(rec.id, e.target.value)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
sx={{ mb: 2 }}
|
||||
sx={{ mb: 4 }}
|
||||
InputProps={{
|
||||
endAdornment: <Edit fontSize="small" color="action" />,
|
||||
sx: { fontSize: '1rem', py: 2 },
|
||||
}}
|
||||
/>
|
||||
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: 'block' }}>
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block', fontSize: '0.875rem' }}>
|
||||
경품
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
size="small"
|
||||
size="medium"
|
||||
variant="outlined"
|
||||
value={editedData[rec.id]?.prize || rec.prize}
|
||||
onChange={(e) => handleEditPrize(rec.id, e.target.value)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
InputProps={{
|
||||
endAdornment: <Edit fontSize="small" color="action" />,
|
||||
sx: { fontSize: '1rem' },
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={2} sx={{ mt: 2 }}>
|
||||
<Grid container spacing={4} sx={{ mt: 4 }}>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.875rem' }}>
|
||||
참여 방법
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, fontSize: '1rem', mt: 1 }}>
|
||||
{rec.participationMethod}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.875rem' }}>
|
||||
예상 참여
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, fontSize: '1rem', mt: 1 }}>
|
||||
{rec.expectedParticipants}명
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.875rem' }}>
|
||||
예상 비용
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, fontSize: '1rem', mt: 1 }}>
|
||||
{(rec.estimatedCost / 10000).toFixed(0)}만원
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.875rem' }}>
|
||||
투자대비수익률
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: 'error.main' }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: 'error.main', fontSize: '1rem', mt: 1 }}>
|
||||
{rec.roi}%
|
||||
</Typography>
|
||||
</Grid>
|
||||
@ -316,11 +358,46 @@ export default function RecommendationStep({ onNext, onBack }: RecommendationSte
|
||||
</RadioGroup>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
<Button fullWidth variant="outlined" size="large" onClick={onBack} sx={{ py: 1.5 }}>
|
||||
<Box sx={{ display: 'flex', gap: 4 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
size="large"
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
borderWidth: 2,
|
||||
'&:hover': {
|
||||
borderWidth: 2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
이전
|
||||
</Button>
|
||||
<Button fullWidth variant="contained" size="large" disabled={!selected} onClick={handleNext} sx={{ py: 1.5 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
size="large"
|
||||
disabled={!selected}
|
||||
onClick={handleNext}
|
||||
sx={{
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
'&:disabled': {
|
||||
background: colors.gray[300],
|
||||
},
|
||||
}}
|
||||
>
|
||||
다음
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
@ -13,13 +13,34 @@ import {
|
||||
Card,
|
||||
CardContent,
|
||||
Typography,
|
||||
Chip,
|
||||
InputAdornment,
|
||||
Pagination,
|
||||
Grid,
|
||||
LinearProgress,
|
||||
Chip,
|
||||
} from '@mui/material';
|
||||
import { Search, FilterList } from '@mui/icons-material';
|
||||
import {
|
||||
Search,
|
||||
FilterList,
|
||||
Event,
|
||||
TrendingUp,
|
||||
People,
|
||||
CardGiftcard,
|
||||
Phone,
|
||||
Share,
|
||||
ShoppingCart,
|
||||
Email,
|
||||
LocalFireDepartment,
|
||||
NewReleases,
|
||||
Warning,
|
||||
Star,
|
||||
} from '@mui/icons-material';
|
||||
import Header from '@/shared/ui/Header';
|
||||
import {
|
||||
cardStyles,
|
||||
colors,
|
||||
responsiveText,
|
||||
} from '@/shared/lib/button-styles';
|
||||
|
||||
// Mock 데이터
|
||||
const mockEvents = [
|
||||
@ -29,11 +50,16 @@ const mockEvents = [
|
||||
status: 'active' as const,
|
||||
daysLeft: 5,
|
||||
participants: 128,
|
||||
targetParticipants: 200,
|
||||
roi: 450,
|
||||
startDate: '2025-11-01',
|
||||
endDate: '2025-11-15',
|
||||
prize: '커피 쿠폰',
|
||||
method: '전화번호 입력',
|
||||
isUrgent: true,
|
||||
isPopular: false,
|
||||
isHighROI: true,
|
||||
isNew: false,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
@ -41,11 +67,16 @@ const mockEvents = [
|
||||
status: 'active' as const,
|
||||
daysLeft: 12,
|
||||
participants: 56,
|
||||
targetParticipants: 100,
|
||||
roi: 320,
|
||||
startDate: '2025-11-05',
|
||||
endDate: '2025-11-20',
|
||||
prize: '할인 쿠폰',
|
||||
method: 'SNS 팔로우',
|
||||
isUrgent: false,
|
||||
isPopular: false,
|
||||
isHighROI: false,
|
||||
isNew: false,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
@ -53,11 +84,16 @@ const mockEvents = [
|
||||
status: 'ended' as const,
|
||||
daysLeft: 0,
|
||||
participants: 234,
|
||||
targetParticipants: 150,
|
||||
roi: 580,
|
||||
startDate: '2025-10-15',
|
||||
endDate: '2025-10-31',
|
||||
prize: '상품권',
|
||||
method: '구매 인증',
|
||||
isUrgent: false,
|
||||
isPopular: true,
|
||||
isHighROI: true,
|
||||
isNew: false,
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
@ -65,11 +101,16 @@ const mockEvents = [
|
||||
status: 'scheduled' as const,
|
||||
daysLeft: 30,
|
||||
participants: 0,
|
||||
targetParticipants: 300,
|
||||
roi: 0,
|
||||
startDate: '2025-12-01',
|
||||
endDate: '2025-12-15',
|
||||
prize: '체험권',
|
||||
method: '이메일 등록',
|
||||
isUrgent: false,
|
||||
isPopular: false,
|
||||
isHighROI: false,
|
||||
isNew: true,
|
||||
},
|
||||
];
|
||||
|
||||
@ -114,16 +155,28 @@ export default function EventsPage() {
|
||||
router.push(`/events/${eventId}`);
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
const getStatusStyle = (status: string) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
return 'success';
|
||||
return {
|
||||
bgcolor: colors.mint,
|
||||
color: 'white',
|
||||
};
|
||||
case 'scheduled':
|
||||
return 'info';
|
||||
return {
|
||||
bgcolor: colors.blue,
|
||||
color: 'white',
|
||||
};
|
||||
case 'ended':
|
||||
return 'default';
|
||||
return {
|
||||
bgcolor: colors.gray[300],
|
||||
color: colors.gray[700],
|
||||
};
|
||||
default:
|
||||
return 'default';
|
||||
return {
|
||||
bgcolor: colors.gray[200],
|
||||
color: colors.gray[600],
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -140,13 +193,209 @@ export default function EventsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const getMethodIcon = (method: string) => {
|
||||
switch (method) {
|
||||
case '전화번호 입력':
|
||||
return <Phone sx={{ fontSize: 18 }} />;
|
||||
case 'SNS 팔로우':
|
||||
return <Share sx={{ fontSize: 18 }} />;
|
||||
case '구매 인증':
|
||||
return <ShoppingCart sx={{ fontSize: 18 }} />;
|
||||
case '이메일 등록':
|
||||
return <Email sx={{ fontSize: 18 }} />;
|
||||
default:
|
||||
return <Event sx={{ fontSize: 18 }} />;
|
||||
}
|
||||
};
|
||||
|
||||
const calculateProgress = (event: typeof mockEvents[0]) => {
|
||||
if (event.status !== 'active') return 0;
|
||||
const total = new Date(event.endDate).getTime() - new Date(event.startDate).getTime();
|
||||
const elapsed = Date.now() - new Date(event.startDate).getTime();
|
||||
return Math.min(Math.max((elapsed / total) * 100, 0), 100);
|
||||
};
|
||||
|
||||
// 통계 계산
|
||||
const stats = {
|
||||
total: mockEvents.length,
|
||||
active: mockEvents.filter((e) => e.status === 'active').length,
|
||||
totalParticipants: mockEvents.reduce((sum, e) => sum + e.participants, 0),
|
||||
avgROI: Math.round(
|
||||
mockEvents.filter((e) => e.roi > 0).reduce((sum, e) => sum + e.roi, 0) /
|
||||
mockEvents.filter((e) => e.roi > 0).length
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header title="이벤트 목록" showBack={true} showMenu={false} showProfile={true} />
|
||||
<Box sx={{ pt: { xs: 7, sm: 8 }, minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
pt: { xs: 7, sm: 8 },
|
||||
pb: 10,
|
||||
bgcolor: colors.gray[50],
|
||||
minHeight: '100vh',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
{/* Summary Statistics */}
|
||||
<Grid container spacing={4} sx={{ mb: 8 }}>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<Event sx={{
|
||||
fontSize: 32,
|
||||
color: colors.gray[900],
|
||||
mb: 1,
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '1.75rem',
|
||||
mb: 0.5,
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{stats.total}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{
|
||||
color: colors.gray[700],
|
||||
fontSize: '0.875rem',
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}>
|
||||
전체 이벤트
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.mintLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<LocalFireDepartment sx={{
|
||||
fontSize: 32,
|
||||
color: colors.gray[900],
|
||||
mb: 1,
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '1.75rem',
|
||||
mb: 0.5,
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{stats.active}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{
|
||||
color: colors.gray[700],
|
||||
fontSize: '0.875rem',
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}>
|
||||
진행중
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<People sx={{
|
||||
fontSize: 32,
|
||||
color: colors.gray[900],
|
||||
mb: 1,
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '1.75rem',
|
||||
mb: 0.5,
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{stats.totalParticipants}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{
|
||||
color: colors.gray[700],
|
||||
fontSize: '0.875rem',
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}>
|
||||
총 참여자
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<TrendingUp sx={{
|
||||
fontSize: 32,
|
||||
color: colors.gray[900],
|
||||
mb: 1,
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '1.75rem',
|
||||
mb: 0.5,
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{stats.avgROI}%
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{
|
||||
color: colors.gray[700],
|
||||
fontSize: '0.875rem',
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}>
|
||||
평균 ROI
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Search Section */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="이벤트명 검색..."
|
||||
@ -155,28 +404,51 @@ export default function EventsPage() {
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Search />
|
||||
<Search sx={{ color: colors.gray[400] }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: 2,
|
||||
borderRadius: 3,
|
||||
bgcolor: 'white',
|
||||
'& fieldset': {
|
||||
borderColor: colors.gray[200],
|
||||
},
|
||||
'&:hover fieldset': {
|
||||
borderColor: colors.gray[300],
|
||||
},
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: colors.purple,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Filters */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
|
||||
<FilterList color="error" />
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
|
||||
<FilterList sx={{ color: colors.purple }} />
|
||||
<FormControl sx={{ flex: 1, minWidth: 120 }}>
|
||||
<InputLabel>상태</InputLabel>
|
||||
<Select
|
||||
value={statusFilter}
|
||||
label="상태"
|
||||
onChange={(e) => setStatusFilter(e.target.value as EventStatus)}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
bgcolor: 'white',
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[200],
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[300],
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.purple,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem value="all">전체</MenuItem>
|
||||
<MenuItem value="active">진행중</MenuItem>
|
||||
@ -190,6 +462,19 @@ export default function EventsPage() {
|
||||
value={periodFilter}
|
||||
label="기간"
|
||||
onChange={(e) => setPeriodFilter(e.target.value as Period)}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
bgcolor: 'white',
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[200],
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[300],
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.purple,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem value="1month">최근 1개월</MenuItem>
|
||||
<MenuItem value="3months">최근 3개월</MenuItem>
|
||||
@ -202,16 +487,29 @@ export default function EventsPage() {
|
||||
</Box>
|
||||
|
||||
{/* Sorting */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Box sx={{ mb: 8 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
정렬:
|
||||
<Typography variant="body2" sx={{ ...responsiveText.body2, fontWeight: 600 }}>
|
||||
정렬
|
||||
</Typography>
|
||||
<FormControl sx={{ width: 160 }}>
|
||||
<Select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as SortBy)}
|
||||
size="small"
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
bgcolor: 'white',
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[200],
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.gray[300],
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: colors.purple,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem value="latest">최신순</MenuItem>
|
||||
<MenuItem value="participants">참여자순</MenuItem>
|
||||
@ -222,89 +520,234 @@ export default function EventsPage() {
|
||||
</Box>
|
||||
|
||||
{/* Event List */}
|
||||
<Box sx={{ mb: 5 }}>
|
||||
<Box sx={{ mb: 10 }}>
|
||||
{pageEvents.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 8 }}>
|
||||
<span className="material-icons" style={{ fontSize: 64, color: '#bdbdbd' }}>
|
||||
event_busy
|
||||
</span>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mt: 2 }}>
|
||||
검색 결과가 없습니다
|
||||
</Typography>
|
||||
</Box>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
...cardStyles.default,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 20 }}>
|
||||
<Box sx={{ color: colors.gray[300], mb: 3 }}>
|
||||
<span className="material-icons" style={{ fontSize: 72 }}>
|
||||
event_busy
|
||||
</span>
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ mb: 2, color: colors.gray[700] }}>
|
||||
검색 결과가 없습니다
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[500] }}>
|
||||
다른 검색 조건으로 다시 시도해보세요
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
{pageEvents.map((event) => (
|
||||
<Card
|
||||
key={event.id}
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 3,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
transition: 'all 0.2s ease',
|
||||
'&:hover': {
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
transform: 'translateY(-2px)',
|
||||
},
|
||||
...cardStyles.clickable,
|
||||
}}
|
||||
onClick={() => handleEventClick(event.id)}
|
||||
>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
{/* Header */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'space-between',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, flex: 1 }}>
|
||||
{event.title}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={`${getStatusText(event.status)}${
|
||||
event.status === 'active'
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
{/* Header with Badges */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'start',
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], flex: 1 }}>
|
||||
{event.title}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
px: 2.5,
|
||||
py: 0.75,
|
||||
borderRadius: 2,
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 600,
|
||||
...getStatusStyle(event.status),
|
||||
}}
|
||||
>
|
||||
{getStatusText(event.status)}
|
||||
{event.status === 'active'
|
||||
? ` | D-${event.daysLeft}`
|
||||
: event.status === 'scheduled'
|
||||
? ` | D+${event.daysLeft}`
|
||||
: ''
|
||||
}`}
|
||||
color={getStatusColor(event.status) as any}
|
||||
size="small"
|
||||
sx={{ fontWeight: 600 }}
|
||||
/>
|
||||
: ''}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Status Badges */}
|
||||
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
|
||||
{event.isUrgent && (
|
||||
<Chip
|
||||
icon={<Warning sx={{ fontSize: 16 }} />}
|
||||
label="마감임박"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#FEF3C7',
|
||||
color: '#92400E',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
'& .MuiChip-icon': { color: '#92400E' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{event.isPopular && (
|
||||
<Chip
|
||||
icon={<LocalFireDepartment sx={{ fontSize: 16 }} />}
|
||||
label="인기"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#FEE2E2',
|
||||
color: '#991B1B',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
'& .MuiChip-icon': { color: '#991B1B' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{event.isHighROI && (
|
||||
<Chip
|
||||
icon={<Star sx={{ fontSize: 16 }} />}
|
||||
label="높은 ROI"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#DCFCE7',
|
||||
color: '#166534',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
'& .MuiChip-icon': { color: '#166534' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{event.isNew && (
|
||||
<Chip
|
||||
icon={<NewReleases sx={{ fontSize: 16 }} />}
|
||||
label="신규"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#DBEAFE',
|
||||
color: '#1E40AF',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.75rem',
|
||||
'& .MuiChip-icon': { color: '#1E40AF' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Stats */}
|
||||
<Grid container spacing={2} sx={{ mb: 2 }}>
|
||||
<Grid item xs={6}>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
참여
|
||||
{/* Progress Bar for Active Events */}
|
||||
{event.status === 'active' && (
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
|
||||
<Typography variant="caption" sx={{ color: colors.gray[600], fontSize: '0.75rem' }}>
|
||||
이벤트 진행률
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600 }}>
|
||||
{event.participants}명
|
||||
<Typography variant="caption" sx={{ color: colors.gray[700], fontWeight: 600, fontSize: '0.75rem' }}>
|
||||
{Math.round(calculateProgress(event))}%
|
||||
</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={calculateProgress(event)}
|
||||
sx={{
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
bgcolor: colors.gray[200],
|
||||
'& .MuiLinearProgress-bar': {
|
||||
borderRadius: 4,
|
||||
background: `linear-gradient(90deg, ${colors.mint} 0%, ${colors.blue} 100%)`,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Event Info and Stats Container */}
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
|
||||
{/* Left: Event Info */}
|
||||
<Box>
|
||||
<Box sx={{ mb: 4, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<CardGiftcard sx={{ fontSize: 18, color: colors.pink }} />
|
||||
<Typography variant="body2" sx={{ color: colors.gray[700], fontSize: '0.875rem' }}>
|
||||
{event.prize}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{getMethodIcon(event.method)}
|
||||
<Typography variant="body2" sx={{ color: colors.gray[700], fontSize: '0.875rem' }}>
|
||||
{event.method}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Date */}
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: colors.gray[600],
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<span>📅</span>
|
||||
<span>
|
||||
{event.startDate} ~ {event.endDate}
|
||||
</span>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Right: Stats */}
|
||||
<Box sx={{ display: 'flex', gap: 8, textAlign: 'right' }}>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
투자대비수익률
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 1, color: colors.gray[600], fontWeight: 500 }}
|
||||
>
|
||||
참여자
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: 'error.main' }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.gray[900], mb: 0.5 }}>
|
||||
{event.participants.toLocaleString()}
|
||||
<Typography
|
||||
component="span"
|
||||
variant="body2"
|
||||
sx={{ ml: 0.5, color: colors.gray[600] }}
|
||||
>
|
||||
명
|
||||
</Typography>
|
||||
</Typography>
|
||||
{event.targetParticipants > 0 && (
|
||||
<Typography variant="caption" sx={{ color: colors.gray[500], fontSize: '0.75rem' }}>
|
||||
목표: {event.targetParticipants}명 ({Math.round((event.participants / event.targetParticipants) * 100)}%)
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 1, color: colors.gray[600], fontWeight: 500 }}
|
||||
>
|
||||
ROI
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: event.roi >= 400 ? colors.mint : event.roi >= 200 ? colors.orange : colors.gray[500] }}>
|
||||
{event.roi}%
|
||||
</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Date */}
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{event.startDate} ~ {event.endDate}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
@ -314,13 +757,28 @@ export default function EventsPage() {
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', mb: 5 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<Pagination
|
||||
count={totalPages}
|
||||
page={currentPage}
|
||||
onChange={(_, page) => setCurrentPage(page)}
|
||||
color="primary"
|
||||
size="large"
|
||||
sx={{
|
||||
'& .MuiPaginationItem-root': {
|
||||
color: colors.gray[700],
|
||||
fontWeight: 600,
|
||||
'&.Mui-selected': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
|
||||
color: 'white',
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purpleLight} 0%, ${colors.blueLight} 100%)`,
|
||||
},
|
||||
},
|
||||
'&:hover': {
|
||||
bgcolor: colors.gray[100],
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@ -88,14 +88,14 @@ export default function HomePage() {
|
||||
minHeight: '100vh',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" sx={{ pt: 5, pb: 4, px: { xs: 3, sm: 4, md: 5 } }}>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
{/* Welcome Section */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
...responsiveText.h2,
|
||||
mb: 2,
|
||||
mb: 4,
|
||||
}}
|
||||
>
|
||||
안녕하세요, {mockUser.name}님! 👋
|
||||
@ -106,7 +106,7 @@ export default function HomePage() {
|
||||
</Box>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<Grid container spacing={4} sx={{ mb: 6 }}>
|
||||
<Grid container spacing={6} sx={{ mb: 10 }}>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Card
|
||||
elevation={0}
|
||||
@ -116,36 +116,46 @@ export default function HomePage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.2)',
|
||||
bgcolor: 'rgba(0, 0, 0, 0.05)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Celebration sx={{ fontSize: 32, color: 'white' }} />
|
||||
<Celebration sx={{
|
||||
fontSize: 32,
|
||||
color: colors.gray[900],
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 1,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
color: colors.gray[700],
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}
|
||||
>
|
||||
진행 중인 이벤트
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '2.25rem',
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{activeEvents.length}
|
||||
</Typography>
|
||||
@ -161,36 +171,46 @@ export default function HomePage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.2)',
|
||||
bgcolor: 'rgba(0, 0, 0, 0.05)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Group sx={{ fontSize: 32, color: 'white' }} />
|
||||
<Group sx={{
|
||||
fontSize: 32,
|
||||
color: colors.gray[900],
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 1,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
color: colors.gray[700],
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}
|
||||
>
|
||||
총 참여자
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '2.25rem',
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{totalParticipants.toLocaleString()}
|
||||
</Typography>
|
||||
@ -206,36 +226,46 @@ export default function HomePage() {
|
||||
borderColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.2)',
|
||||
bgcolor: 'rgba(0, 0, 0, 0.05)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<TrendingUp sx={{ fontSize: 32, color: 'white' }} />
|
||||
<TrendingUp sx={{
|
||||
fontSize: 32,
|
||||
color: colors.gray[900],
|
||||
filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
|
||||
}} />
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 1,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
color: colors.gray[700],
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
|
||||
}}
|
||||
>
|
||||
평균 ROI
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: colors.gray[900],
|
||||
fontSize: '2.25rem',
|
||||
textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
{avgROI}%
|
||||
</Typography>
|
||||
@ -245,11 +275,11 @@ export default function HomePage() {
|
||||
</Grid>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 4 }}>
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 6 }}>
|
||||
빠른 시작
|
||||
</Typography>
|
||||
<Grid container spacing={4}>
|
||||
<Grid container spacing={6}>
|
||||
<Grid item xs={6} sm={6}>
|
||||
<Card
|
||||
elevation={0}
|
||||
@ -258,7 +288,7 @@ export default function HomePage() {
|
||||
}}
|
||||
onClick={handleCreateEvent}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 72,
|
||||
@ -269,13 +299,13 @@ export default function HomePage() {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2.5,
|
||||
mb: 3,
|
||||
boxShadow: '0 4px 14px 0 rgba(167, 139, 250, 0.39)',
|
||||
}}
|
||||
>
|
||||
<Add sx={{ fontSize: 36, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: '1.125rem' }}>
|
||||
새 이벤트
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -289,7 +319,7 @@ export default function HomePage() {
|
||||
}}
|
||||
onClick={handleViewAnalytics}
|
||||
>
|
||||
<CardContent sx={{ textAlign: 'center', py: 5 }}>
|
||||
<CardContent sx={{ textAlign: 'center', py: 6 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 72,
|
||||
@ -300,13 +330,13 @@ export default function HomePage() {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
mb: 2.5,
|
||||
mb: 3,
|
||||
boxShadow: '0 4px 14px 0 rgba(96, 165, 250, 0.39)',
|
||||
}}
|
||||
>
|
||||
<Analytics sx={{ fontSize: 36, color: 'white' }} />
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900] }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: '1.125rem' }}>
|
||||
성과분석
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -316,9 +346,9 @@ export default function HomePage() {
|
||||
</Box>
|
||||
|
||||
{/* Active Events */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Box
|
||||
sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}
|
||||
sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 6 }}
|
||||
>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3 }}>
|
||||
진행 중인 이벤트
|
||||
@ -372,7 +402,7 @@ export default function HomePage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
{activeEvents.map((event) => (
|
||||
<Card
|
||||
key={event.id}
|
||||
@ -382,13 +412,13 @@ export default function HomePage() {
|
||||
}}
|
||||
onClick={() => handleEventClick(event.id)}
|
||||
>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 4 } }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'start',
|
||||
mb: 3,
|
||||
mb: 6,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
@ -411,11 +441,11 @@ export default function HomePage() {
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 3,
|
||||
mb: 6,
|
||||
color: colors.gray[600],
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<span>📅</span>
|
||||
@ -423,7 +453,7 @@ export default function HomePage() {
|
||||
{event.startDate} ~ {event.endDate}
|
||||
</span>
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 6 }}>
|
||||
<Box sx={{ display: 'flex', gap: 12 }}>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
@ -465,8 +495,8 @@ export default function HomePage() {
|
||||
</Box>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 4 }}>
|
||||
<Box sx={{ mb: 10 }}>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 6 }}>
|
||||
최근 활동
|
||||
</Typography>
|
||||
<Card
|
||||
@ -475,15 +505,15 @@ export default function HomePage() {
|
||||
...cardStyles.default,
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 4 } }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
{mockActivities.map((activity, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 3,
|
||||
pt: index > 0 ? 3.5 : 0,
|
||||
mt: index > 0 ? 3.5 : 0,
|
||||
gap: 4,
|
||||
pt: index > 0 ? 6 : 0,
|
||||
mt: index > 0 ? 6 : 0,
|
||||
borderTop: index > 0 ? 1 : 0,
|
||||
borderColor: colors.gray[200],
|
||||
}}
|
||||
|
||||
@ -7,10 +7,12 @@ import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
TextField,
|
||||
Button,
|
||||
Typography,
|
||||
Paper,
|
||||
Card,
|
||||
CardContent,
|
||||
Avatar,
|
||||
Select,
|
||||
MenuItem,
|
||||
@ -26,7 +28,8 @@ import {
|
||||
import { Person, Visibility, VisibilityOff, CheckCircle } from '@mui/icons-material';
|
||||
import { useAuthStore } from '@/stores/authStore';
|
||||
import { useUIStore } from '@/stores/uiStore';
|
||||
import { getGradientButtonStyle, responsiveText, containerStyles } from '@/shared/lib/button-styles';
|
||||
import Header from '@/shared/ui/Header';
|
||||
import { cardStyles, colors, responsiveText } from '@/shared/lib/button-styles';
|
||||
|
||||
// 기본 정보 스키마
|
||||
const basicInfoSchema = z.object({
|
||||
@ -186,304 +189,341 @@ export default function ProfilePage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ ...containerStyles.page }}>
|
||||
<Box sx={{ maxWidth: 600, mx: 'auto', px: { xs: 3, sm: 4 }, py: { xs: 3, sm: 4 } }}>
|
||||
{/* 사용자 정보 섹션 */}
|
||||
<Paper elevation={0} sx={{ p: 4, mb: 3, textAlign: 'center' }}>
|
||||
<Avatar
|
||||
sx={{
|
||||
width: 80,
|
||||
height: 80,
|
||||
mx: 'auto',
|
||||
mb: 2,
|
||||
bgcolor: 'grey.100',
|
||||
color: 'grey.400',
|
||||
}}
|
||||
>
|
||||
<Person sx={{ fontSize: 48 }} />
|
||||
</Avatar>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 0.5 }}>
|
||||
{user?.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{user?.email}
|
||||
</Typography>
|
||||
</Paper>
|
||||
<>
|
||||
<Header title="프로필" showBack={true} showMenu={false} showProfile={false} />
|
||||
<Box
|
||||
sx={{
|
||||
pt: { xs: 7, sm: 8 },
|
||||
pb: 10,
|
||||
bgcolor: colors.gray[50],
|
||||
minHeight: '100vh',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
|
||||
{/* 사용자 정보 섹션 */}
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, mb: 10, textAlign: 'center' }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<Avatar
|
||||
sx={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
mx: 'auto',
|
||||
mb: 3,
|
||||
bgcolor: colors.purple,
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
<Person sx={{ fontSize: 56 }} />
|
||||
</Avatar>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3, mb: 1 }}>
|
||||
{user?.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ ...responsiveText.body1 }}>
|
||||
{user?.email}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 기본 정보 */}
|
||||
<Paper elevation={0} sx={{ p: 4, mb: 3 }}>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, mb: 3 }}>
|
||||
기본 정보
|
||||
</Typography>
|
||||
{/* 기본 정보 */}
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, mb: 10 }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
|
||||
기본 정보
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Controller
|
||||
name="name"
|
||||
control={basicControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
label="이름"
|
||||
error={!!basicErrors.name}
|
||||
helperText={basicErrors.name?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="phone"
|
||||
control={basicControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
label="전화번호"
|
||||
onChange={(e) => {
|
||||
const formatted = formatPhoneNumber(e.target.value);
|
||||
field.onChange(formatted);
|
||||
}}
|
||||
error={!!basicErrors.phone}
|
||||
helperText={basicErrors.phone?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="email"
|
||||
control={basicControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
label="이메일"
|
||||
type="email"
|
||||
error={!!basicErrors.email}
|
||||
helperText={basicErrors.email?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* 매장 정보 */}
|
||||
<Paper elevation={0} sx={{ p: 4, mb: 3 }}>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, mb: 3 }}>
|
||||
매장 정보
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Controller
|
||||
name="businessName"
|
||||
control={businessControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
label="매장명"
|
||||
error={!!businessErrors.businessName}
|
||||
helperText={businessErrors.businessName?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="businessType"
|
||||
control={businessControl}
|
||||
render={({ field }) => (
|
||||
<FormControl fullWidth error={!!businessErrors.businessType}>
|
||||
<InputLabel>업종</InputLabel>
|
||||
<Select {...field} label="업종">
|
||||
<MenuItem value="restaurant">음식점</MenuItem>
|
||||
<MenuItem value="cafe">카페/베이커리</MenuItem>
|
||||
<MenuItem value="retail">소매/편의점</MenuItem>
|
||||
<MenuItem value="beauty">미용/뷰티</MenuItem>
|
||||
<MenuItem value="fitness">헬스/피트니스</MenuItem>
|
||||
<MenuItem value="education">학원/교육</MenuItem>
|
||||
<MenuItem value="service">서비스업</MenuItem>
|
||||
<MenuItem value="other">기타</MenuItem>
|
||||
</Select>
|
||||
{businessErrors.businessType && (
|
||||
<Typography variant="caption" color="error" sx={{ mt: 0.5, ml: 2 }}>
|
||||
{businessErrors.businessType.message}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Controller
|
||||
name="name"
|
||||
control={basicControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
label="이름"
|
||||
error={!!basicErrors.name}
|
||||
helperText={basicErrors.name?.message}
|
||||
/>
|
||||
)}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="businessLocation"
|
||||
control={businessControl}
|
||||
render={({ field }) => (
|
||||
<TextField {...field} fullWidth label="주소" />
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="businessHours"
|
||||
control={businessControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
label="영업시간"
|
||||
placeholder="예: 10:00 ~ 22:00"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* 비밀번호 변경 */}
|
||||
<Paper elevation={0} sx={{ p: 4, mb: 3 }}>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, mb: 3 }}>
|
||||
비밀번호 변경
|
||||
</Typography>
|
||||
<Controller
|
||||
name="phone"
|
||||
control={basicControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
label="전화번호"
|
||||
onChange={(e) => {
|
||||
const formatted = formatPhoneNumber(e.target.value);
|
||||
field.onChange(formatted);
|
||||
}}
|
||||
error={!!basicErrors.phone}
|
||||
helperText={basicErrors.phone?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Controller
|
||||
name="currentPassword"
|
||||
control={passwordControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
<Controller
|
||||
name="email"
|
||||
control={basicControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
label="이메일"
|
||||
type="email"
|
||||
error={!!basicErrors.email}
|
||||
helperText={basicErrors.email?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 매장 정보 */}
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, mb: 10 }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
|
||||
매장 정보
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Controller
|
||||
name="businessName"
|
||||
control={businessControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
label="매장명"
|
||||
error={!!businessErrors.businessName}
|
||||
helperText={businessErrors.businessName?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="businessType"
|
||||
control={businessControl}
|
||||
render={({ field }) => (
|
||||
<FormControl fullWidth error={!!businessErrors.businessType}>
|
||||
<InputLabel>업종</InputLabel>
|
||||
<Select {...field} label="업종">
|
||||
<MenuItem value="restaurant">음식점</MenuItem>
|
||||
<MenuItem value="cafe">카페/베이커리</MenuItem>
|
||||
<MenuItem value="retail">소매/편의점</MenuItem>
|
||||
<MenuItem value="beauty">미용/뷰티</MenuItem>
|
||||
<MenuItem value="fitness">헬스/피트니스</MenuItem>
|
||||
<MenuItem value="education">학원/교육</MenuItem>
|
||||
<MenuItem value="service">서비스업</MenuItem>
|
||||
<MenuItem value="other">기타</MenuItem>
|
||||
</Select>
|
||||
{businessErrors.businessType && (
|
||||
<Typography variant="caption" color="error" sx={{ mt: 0.5, ml: 2 }}>
|
||||
{businessErrors.businessType.message}
|
||||
</Typography>
|
||||
)}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="businessLocation"
|
||||
control={businessControl}
|
||||
render={({ field }) => (
|
||||
<TextField {...field} fullWidth label="주소" />
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="businessHours"
|
||||
control={businessControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
label="영업시간"
|
||||
placeholder="예: 10:00 ~ 22:00"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 비밀번호 변경 */}
|
||||
<Card elevation={0} sx={{ ...cardStyles.default, mb: 10 }}>
|
||||
<CardContent sx={{ p: { xs: 6, sm: 8 } }}>
|
||||
<Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
|
||||
비밀번호 변경
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Controller
|
||||
name="currentPassword"
|
||||
control={passwordControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
type={showCurrentPassword ? 'text' : 'password'}
|
||||
label="현재 비밀번호"
|
||||
placeholder="현재 비밀번호를 입력하세요"
|
||||
error={!!passwordErrors.currentPassword}
|
||||
helperText={passwordErrors.currentPassword?.message}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={() => setShowCurrentPassword(!showCurrentPassword)}
|
||||
edge="end"
|
||||
>
|
||||
{showCurrentPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="newPassword"
|
||||
control={passwordControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
type={showNewPassword ? 'text' : 'password'}
|
||||
label="새 비밀번호"
|
||||
placeholder="새 비밀번호를 입력하세요"
|
||||
error={!!passwordErrors.newPassword}
|
||||
helperText={passwordErrors.newPassword?.message || '8자 이상, 영문과 숫자를 포함해주세요'}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={() => setShowNewPassword(!showNewPassword)}
|
||||
edge="end"
|
||||
>
|
||||
{showNewPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="confirmPassword"
|
||||
control={passwordControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
label="비밀번호 확인"
|
||||
placeholder="비밀번호를 다시 입력하세요"
|
||||
error={!!passwordErrors.confirmPassword}
|
||||
helperText={passwordErrors.confirmPassword?.message}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
edge="end"
|
||||
>
|
||||
{showConfirmPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
type={showCurrentPassword ? 'text' : 'password'}
|
||||
label="현재 비밀번호"
|
||||
placeholder="현재 비밀번호를 입력하세요"
|
||||
error={!!passwordErrors.currentPassword}
|
||||
helperText={passwordErrors.currentPassword?.message}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={() => setShowCurrentPassword(!showCurrentPassword)}
|
||||
edge="end"
|
||||
>
|
||||
{showCurrentPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
variant="outlined"
|
||||
size="large"
|
||||
onClick={handlePasswordSubmit(onChangePassword)}
|
||||
sx={{
|
||||
mt: 1,
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
borderWidth: 2,
|
||||
'&:hover': {
|
||||
borderWidth: 2,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="newPassword"
|
||||
control={passwordControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
type={showNewPassword ? 'text' : 'password'}
|
||||
label="새 비밀번호"
|
||||
placeholder="새 비밀번호를 입력하세요"
|
||||
error={!!passwordErrors.newPassword}
|
||||
helperText={passwordErrors.newPassword?.message || '8자 이상, 영문과 숫자를 포함해주세요'}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={() => setShowNewPassword(!showNewPassword)}
|
||||
edge="end"
|
||||
>
|
||||
{showNewPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="confirmPassword"
|
||||
control={passwordControl}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
fullWidth
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
label="비밀번호 확인"
|
||||
placeholder="비밀번호를 다시 입력하세요"
|
||||
error={!!passwordErrors.confirmPassword}
|
||||
helperText={passwordErrors.confirmPassword?.message}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
edge="end"
|
||||
>
|
||||
{showConfirmPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
>
|
||||
비밀번호 변경
|
||||
</Button>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={handlePasswordSubmit(onChangePassword)}
|
||||
onClick={handleSave}
|
||||
sx={{
|
||||
mt: 1,
|
||||
py: { xs: 1.5, sm: 1.75 },
|
||||
fontSize: { xs: 15, sm: 16 },
|
||||
fontWeight: 600,
|
||||
borderWidth: 2,
|
||||
py: 3,
|
||||
borderRadius: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
}}
|
||||
>
|
||||
비밀번호 변경
|
||||
저장하기
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="text"
|
||||
size="large"
|
||||
color="error"
|
||||
onClick={() => setLogoutDialogOpen(true)}
|
||||
sx={{
|
||||
py: 3,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
로그아웃
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={handleSave}
|
||||
sx={{
|
||||
py: { xs: 1.5, sm: 1.75 },
|
||||
fontSize: { xs: 15, sm: 16 },
|
||||
...getGradientButtonStyle('primary'),
|
||||
}}
|
||||
>
|
||||
저장하기
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="text"
|
||||
size="large"
|
||||
color="error"
|
||||
onClick={() => setLogoutDialogOpen(true)}
|
||||
sx={{
|
||||
py: { xs: 1.5, sm: 1.75 },
|
||||
fontSize: { xs: 15, sm: 16 },
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
로그아웃
|
||||
</Button>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* 저장 완료 다이얼로그 */}
|
||||
<Dialog open={successDialogOpen} onClose={() => setSuccessDialogOpen(false)}>
|
||||
<Dialog
|
||||
open={successDialogOpen}
|
||||
onClose={() => setSuccessDialogOpen(false)}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
borderRadius: 4,
|
||||
minWidth: 300,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DialogContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
|
||||
<CheckCircle sx={{ fontSize: 64, color: 'success.main', mb: 2 }} />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 1, fontSize: '1.25rem' }}>
|
||||
저장 완료
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
|
||||
프로필 정보가 업데이트되었습니다.
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
@ -496,8 +536,15 @@ export default function ProfilePage() {
|
||||
}}
|
||||
sx={{
|
||||
minWidth: 120,
|
||||
py: { xs: 1.25, sm: 1.5 },
|
||||
...getGradientButtonStyle('success'),
|
||||
py: 2,
|
||||
borderRadius: 2,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
'&:hover': {
|
||||
background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
|
||||
opacity: 0.9,
|
||||
},
|
||||
}}
|
||||
>
|
||||
확인
|
||||
@ -506,29 +553,51 @@ export default function ProfilePage() {
|
||||
</Dialog>
|
||||
|
||||
{/* 로그아웃 확인 다이얼로그 */}
|
||||
<Dialog open={logoutDialogOpen} onClose={() => setLogoutDialogOpen(false)}>
|
||||
<DialogTitle>로그아웃</DialogTitle>
|
||||
<Dialog
|
||||
open={logoutDialogOpen}
|
||||
onClose={() => setLogoutDialogOpen(false)}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
borderRadius: 4,
|
||||
minWidth: 300,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DialogTitle sx={{ fontSize: '1.25rem', fontWeight: 700 }}>로그아웃</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography variant="body1" sx={{ textAlign: 'center', py: 2 }}>
|
||||
<Typography variant="body1" sx={{ textAlign: 'center', py: 2, fontSize: '1rem' }}>
|
||||
로그아웃 하시겠습니까?
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<DialogActions sx={{ justifyContent: 'center', gap: 2, pb: 3 }}>
|
||||
<Button
|
||||
onClick={() => setLogoutDialogOpen(false)}
|
||||
sx={{ fontWeight: 600 }}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: '1rem',
|
||||
py: 2,
|
||||
px: 4,
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleLogout}
|
||||
sx={{ ...getGradientButtonStyle('error') }}
|
||||
color="error"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
fontSize: '1rem',
|
||||
py: 2,
|
||||
px: 4,
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
확인
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -24,13 +24,13 @@
|
||||
--color-error: #D32F2F;
|
||||
--color-info: #0288D1;
|
||||
|
||||
/* Spacing (4px Grid) */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-s: 8px;
|
||||
--spacing-m: 16px;
|
||||
--spacing-l: 24px;
|
||||
--spacing-xl: 32px;
|
||||
--spacing-2xl: 48px;
|
||||
/* Spacing (4px Grid) - Doubled values */
|
||||
--spacing-xs: 8px;
|
||||
--spacing-s: 16px;
|
||||
--spacing-m: 32px;
|
||||
--spacing-l: 48px;
|
||||
--spacing-xl: 64px;
|
||||
--spacing-2xl: 96px;
|
||||
|
||||
/* Border Radius */
|
||||
--border-radius-sm: 4px;
|
||||
@ -73,8 +73,8 @@ body {
|
||||
padding: 0;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
"Roboto", "Helvetica Neue", system-ui, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-gray-900);
|
||||
background-color: var(--color-gray-50);
|
||||
min-height: 100%;
|
||||
@ -149,18 +149,18 @@ button {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
padding: 0 40px;
|
||||
padding: 0 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
padding: 0 80px;
|
||||
padding: 0 120px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user