mirror of
https://github.com/ktds-dg0501/kt-event-marketing-fe.git
synced 2025-12-06 08:16:23 +00:00
이벤트 생성(create) 모든 페이지 디자인 개선 및 간격 통일
- ObjectiveStep: 간격 2배 확대, 아이콘 및 텍스트 크기 증가 - RecommendationStep: 카드 간격 확대, AI 트렌드 분석 섹션 개선 - ChannelStep: 채널 카드 간격 확대, Summary 카드 디자인 개선 - ContentPreviewStep: 전체 간격 2배 확대, borderRadius 통일 - ContentEditStep: 전체 간격 2배 확대, borderRadius 통일 - ApprovalStep: 전체 간격 2배 확대, borderRadius 통일 - 모든 버튼: py: 3, borderRadius: 3, fontSize: 1rem으로 통일 - 모든 카드: borderRadius: 4, boxShadow 통일 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
cherry2250
parent
28f0ebde33
commit
a2e6e017a6
@ -61,10 +61,10 @@ 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: 'background.default', pb: 20 }}>
|
||||
<Container maxWidth="md" 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>
|
||||
@ -85,7 +85,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
</Box>
|
||||
|
||||
{/* Event Summary Card */}
|
||||
<Card elevation={0} sx={{ mb: 4, borderRadius: 3 }}>
|
||||
<Card elevation={0} sx={{ mb: 4, borderRadius: 4 }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2 }}>
|
||||
{eventData.recommendation?.title || '이벤트 제목'}
|
||||
@ -138,7 +138,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
이벤트 상세
|
||||
</Typography>
|
||||
|
||||
<Card elevation={0} sx={{ mb: 2, borderRadius: 3 }}>
|
||||
<Card elevation={0} sx={{ mb: 2, borderRadius: 4 }}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
@ -156,7 +156,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card elevation={0} sx={{ mb: 2, borderRadius: 3 }}>
|
||||
<Card elevation={0} sx={{ mb: 2, borderRadius: 4 }}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
@ -174,7 +174,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card elevation={0} sx={{ mb: 2, borderRadius: 3 }}>
|
||||
<Card elevation={0} sx={{ mb: 2, borderRadius: 4 }}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
@ -194,7 +194,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
배포 채널
|
||||
</Typography>
|
||||
|
||||
<Card elevation={0} sx={{ mb: 4, borderRadius: 3 }}>
|
||||
<Card elevation={0} sx={{ mb: 4, borderRadius: 4 }}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>
|
||||
{getChannelNames(eventData.channels).map((channel) => (
|
||||
@ -212,7 +212,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
|
||||
</Card>
|
||||
|
||||
{/* Terms Agreement */}
|
||||
<Card elevation={0} sx={{ mb: 5, borderRadius: 3, bgcolor: 'grey.50' }}>
|
||||
<Card elevation={0} sx={{ mb: 5, borderRadius: 4, bgcolor: 'grey.50' }}>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
|
||||
@ -89,19 +89,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,13 +109,14 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: 3,
|
||||
borderRadius: 3,
|
||||
mb: 6,
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
opacity: channels[0].selected ? 1 : 0.6,
|
||||
transition: 'opacity 0.3s',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
@ -171,13 +172,14 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: 3,
|
||||
borderRadius: 3,
|
||||
mb: 6,
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
opacity: channels[1].selected ? 1 : 0.6,
|
||||
transition: 'opacity 0.3s',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
@ -217,13 +219,14 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: 3,
|
||||
borderRadius: 3,
|
||||
mb: 6,
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
opacity: channels[2].selected ? 1 : 0.6,
|
||||
transition: 'opacity 0.3s',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
@ -290,13 +293,14 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: 5,
|
||||
borderRadius: 3,
|
||||
mb: 10,
|
||||
borderRadius: 4,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
opacity: channels[3].selected ? 1 : 0.6,
|
||||
transition: 'opacity 0.3s',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
@ -374,17 +378,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" color="primary.main" sx={{ fontWeight: 700, fontSize: '1.25rem' }}>
|
||||
{totalExposure > 0 ? `${totalExposure.toLocaleString()}명+` : '0명'}
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -392,8 +408,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 +433,12 @@ 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,
|
||||
}}
|
||||
>
|
||||
다음
|
||||
</Button>
|
||||
|
||||
@ -39,10 +39,10 @@ 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: '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>
|
||||
@ -57,7 +57,7 @@ export default function ContentEditStep({
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 3 }}>
|
||||
미리보기
|
||||
</Typography>
|
||||
<Card elevation={0} sx={{ borderRadius: 3 }}>
|
||||
<Card elevation={0} sx={{ borderRadius: 4 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
@ -94,7 +94,7 @@ export default function ContentEditStep({
|
||||
편집
|
||||
</Typography>
|
||||
|
||||
<Card elevation={0} sx={{ borderRadius: 3, mb: 3 }}>
|
||||
<Card elevation={0} sx={{ borderRadius: 4, mb: 3 }}>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||
<Edit color="primary" />
|
||||
|
||||
@ -91,9 +91,9 @@ 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="md" 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>
|
||||
@ -133,10 +133,10 @@ 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="md" 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>
|
||||
@ -156,7 +156,7 @@ export default function ContentPreviewStep({
|
||||
elevation={0}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 3,
|
||||
borderRadius: 4,
|
||||
border: selectedStyle === style.id ? 3 : 1,
|
||||
borderColor: selectedStyle === style.id ? 'error.main' : 'divider',
|
||||
transition: 'all 0.3s',
|
||||
@ -321,7 +321,7 @@ export default function ContentPreviewStep({
|
||||
maxWidth: 600,
|
||||
aspectRatio: '1 / 1',
|
||||
background: fullscreenStyle.gradient || '#f5f5f5',
|
||||
borderRadius: 3,
|
||||
borderRadius: 4,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
|
||||
@ -62,48 +62,50 @@ 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: 'primary.main', 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',
|
||||
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)',
|
||||
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 }}>
|
||||
<CardContent sx={{ p: 6 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, mb: 3 }}>
|
||||
<Box sx={{ color: 'primary.main' }}>{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>
|
||||
@ -125,14 +127,15 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: 5,
|
||||
mb: 10,
|
||||
bgcolor: 'primary.light',
|
||||
borderRadius: 3,
|
||||
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: 'primary.main', fontSize: 28 }} />
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem', lineHeight: 1.8 }}>
|
||||
선택하신 목적에 따라 AI가 업종, 지역, 계절 트렌드를 분석하여 가장 효과적인 이벤트를 추천합니다.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -146,7 +149,12 @@ 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,
|
||||
}}
|
||||
>
|
||||
다음
|
||||
</Button>
|
||||
|
||||
@ -144,49 +144,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 color="primary" sx={{ fontSize: 32 }} />
|
||||
<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 +202,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',
|
||||
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',
|
||||
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 +273,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 +340,38 @@ 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,
|
||||
}}
|
||||
>
|
||||
다음
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user