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

이벤트 생성(create) 모든 페이지 디자인 개선 및 간격 통일

Browse Source 
- 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 2025-10-27 15:03:08 +09:00
parent 28f0ebde33
commit a2e6e017a6
6 changed files with 209 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/(main)/events/create/steps/ApprovalStep.tsx
View File

@ -61,10 +61,10 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
}; };
return ( return (
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}> <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
<Container maxWidth="md" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}> <Container maxWidth="md" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 6, md: 8 } }}>
{/* Header */} {/* Header */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 4 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 8 }}>
<IconButton onClick={onBack}> <IconButton onClick={onBack}>
<ArrowBack /> <ArrowBack />
</IconButton> </IconButton>
@ -85,7 +85,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
</Box> </Box>
{/* Event Summary Card */} {/* Event Summary Card */}
<Card elevation={0} sx={{ mb: 4, borderRadius: 3 }}> <Card elevation={0} sx={{ mb: 4, borderRadius: 4 }}>
<CardContent sx={{ p: 4 }}> <CardContent sx={{ p: 4 }}>
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2 }}> <Typography variant="h6" sx={{ fontWeight: 700, mb: 2 }}>
{eventData.recommendation?.title || '이벤트 제목'} {eventData.recommendation?.title || '이벤트 제목'}
@ -138,7 +138,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
이벤트 상세 이벤트 상세
</Typography> </Typography>
<Card elevation={0} sx={{ mb: 2, borderRadius: 3 }}> <Card elevation={0} sx={{ mb: 2, borderRadius: 4 }}>
<CardContent sx={{ p: 3 }}> <CardContent sx={{ p: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}> <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
<Box sx={{ flex: 1 }}> <Box sx={{ flex: 1 }}>
@ -156,7 +156,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
</CardContent> </CardContent>
</Card> </Card>
<Card elevation={0} sx={{ mb: 2, borderRadius: 3 }}> <Card elevation={0} sx={{ mb: 2, borderRadius: 4 }}>
<CardContent sx={{ p: 3 }}> <CardContent sx={{ p: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}> <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
<Box sx={{ flex: 1 }}> <Box sx={{ flex: 1 }}>
@ -174,7 +174,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
</CardContent> </CardContent>
</Card> </Card>
<Card elevation={0} sx={{ mb: 2, borderRadius: 3 }}> <Card elevation={0} sx={{ mb: 2, borderRadius: 4 }}>
<CardContent sx={{ p: 3 }}> <CardContent sx={{ p: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}> <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
<Box sx={{ flex: 1 }}> <Box sx={{ flex: 1 }}>
@ -194,7 +194,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
배포 채널 배포 채널
</Typography> </Typography>
<Card elevation={0} sx={{ mb: 4, borderRadius: 3 }}> <Card elevation={0} sx={{ mb: 4, borderRadius: 4 }}>
<CardContent sx={{ p: 3 }}> <CardContent sx={{ p: 3 }}>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}> <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>
{getChannelNames(eventData.channels).map((channel) => ( {getChannelNames(eventData.channels).map((channel) => (
@ -212,7 +212,7 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
</Card> </Card>
{/* Terms Agreement */} {/* 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 }}> <CardContent sx={{ p: 3 }}>
<FormControlLabel <FormControlLabel
control={ control={

92
src/app/(main)/events/create/steps/ChannelStep.tsx
View File

@ -89,19 +89,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
const selectedCount = channels.filter((ch) => ch.selected).length; const selectedCount = channels.filter((ch) => ch.selected).length;
return ( return (
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}> <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
<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: 6, md: 8 } }}>
{/* Header */} {/* Header */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 4 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 8 }}>
<IconButton onClick={onBack}> <IconButton onClick={onBack} sx={{ width: 48, height: 48 }}>
<ArrowBack /> <ArrowBack />
</IconButton> </IconButton>
<Typography variant="h5" sx={{ fontWeight: 700 }}> <Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
배포 채널 선택 배포 채널 선택
</Typography> </Typography>
</Box> </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개 이상) (최소 1개 이상)
</Typography> </Typography>
@ -109,13 +109,14 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
<Card <Card
elevation={0} elevation={0}
sx={{ sx={{
mb: 3, mb: 6,
borderRadius: 3, borderRadius: 4,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
opacity: channels[0].selected ? 1 : 0.6, opacity: channels[0].selected ? 1 : 0.6,
transition: 'opacity 0.3s', transition: 'opacity 0.3s',
}} }}
> >
<CardContent sx={{ p: 4 }}> <CardContent sx={{ p: 6 }}>
<FormControlLabel <FormControlLabel
control={ control={
<Checkbox <Checkbox
@ -171,13 +172,14 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
<Card <Card
elevation={0} elevation={0}
sx={{ sx={{
mb: 3, mb: 6,
borderRadius: 3, borderRadius: 4,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
opacity: channels[1].selected ? 1 : 0.6, opacity: channels[1].selected ? 1 : 0.6,
transition: 'opacity 0.3s', transition: 'opacity 0.3s',
}} }}
> >
<CardContent sx={{ p: 4 }}> <CardContent sx={{ p: 6 }}>
<FormControlLabel <FormControlLabel
control={ control={
<Checkbox <Checkbox
@ -217,13 +219,14 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
<Card <Card
elevation={0} elevation={0}
sx={{ sx={{
mb: 3, mb: 6,
borderRadius: 3, borderRadius: 4,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
opacity: channels[2].selected ? 1 : 0.6, opacity: channels[2].selected ? 1 : 0.6,
transition: 'opacity 0.3s', transition: 'opacity 0.3s',
}} }}
> >
<CardContent sx={{ p: 4 }}> <CardContent sx={{ p: 6 }}>
<FormControlLabel <FormControlLabel
control={ control={
<Checkbox <Checkbox
@ -290,13 +293,14 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
<Card <Card
elevation={0} elevation={0}
sx={{ sx={{
mb: 5, mb: 10,
borderRadius: 3, borderRadius: 4,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
opacity: channels[3].selected ? 1 : 0.6, opacity: channels[3].selected ? 1 : 0.6,
transition: 'opacity 0.3s', transition: 'opacity 0.3s',
}} }}
> >
<CardContent sx={{ p: 4 }}> <CardContent sx={{ p: 6 }}>
<FormControlLabel <FormControlLabel
control={ control={
<Checkbox <Checkbox
@ -374,17 +378,29 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
</Card> </Card>
{/* Summary */} {/* Summary */}
<Card elevation={0} sx={{ mb: 5, borderRadius: 3, bgcolor: 'grey.50' }}> <Card
<CardContent sx={{ p: 4 }}> elevation={0}
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}> sx={{
<Typography variant="h6">총 예상 비용</Typography> mb: 10,
<Typography variant="h6" color="error.main" sx={{ fontWeight: 700 }}> 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()}원 {totalCost.toLocaleString()}원
</Typography> </Typography>
</Box> </Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}> <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
<Typography variant="h6">총 예상 노출</Typography> <Typography variant="h6" sx={{ fontSize: '1.25rem' }}>
<Typography variant="h6" color="primary.main" sx={{ fontWeight: 700 }}> 총 예상 노출
</Typography>
<Typography variant="h6" color="primary.main" sx={{ fontWeight: 700, fontSize: '1.25rem' }}>
{totalExposure > 0 ? `${totalExposure.toLocaleString()}명+` : '0명'} {totalExposure > 0 ? `${totalExposure.toLocaleString()}명+` : '0명'}
</Typography> </Typography>
</Box> </Box>
@ -392,8 +408,23 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
</Card> </Card>
{/* Action Buttons */} {/* Action Buttons */}
<Box sx={{ display: 'flex', gap: 2 }}> <Box sx={{ display: 'flex', gap: 4 }}>
<Button fullWidth variant="outlined" size="large" onClick={onBack} sx={{ py: 1.5 }}> <Button
fullWidth
variant="outlined"
size="large"
onClick={onBack}
sx={{
py: 3,
borderRadius: 3,
fontSize: '1rem',
fontWeight: 600,
borderWidth: 2,
'&:hover': {
borderWidth: 2,
},
}}
>
이전 이전
</Button> </Button>
<Button <Button
@ -402,7 +433,12 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
size="large" size="large"
disabled={selectedCount === 0} disabled={selectedCount === 0}
onClick={handleNext} onClick={handleNext}
sx={{ py: 1.5 }} sx={{
py: 3,
borderRadius: 3,
fontSize: '1rem',
fontWeight: 700,
}}
> >
다음 다음
</Button> </Button>

10
src/app/(main)/events/create/steps/ContentEditStep.tsx
View File

@ -39,10 +39,10 @@ export default function ContentEditStep({
}; };
return ( return (
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}> <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
<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: 6, md: 8 } }}>
{/* Header */} {/* Header */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 4 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 8 }}>
<IconButton onClick={onBack}> <IconButton onClick={onBack}>
<ArrowBack /> <ArrowBack />
</IconButton> </IconButton>
@ -57,7 +57,7 @@ export default function ContentEditStep({
<Typography variant="h6" sx={{ fontWeight: 700, mb: 3 }}> <Typography variant="h6" sx={{ fontWeight: 700, mb: 3 }}>
미리보기 미리보기
</Typography> </Typography>
<Card elevation={0} sx={{ borderRadius: 3 }}> <Card elevation={0} sx={{ borderRadius: 4 }}>
<Box <Box
sx={{ sx={{
width: '100%', width: '100%',
@ -94,7 +94,7 @@ export default function ContentEditStep({
편집 편집
</Typography> </Typography>
<Card elevation={0} sx={{ borderRadius: 3, mb: 3 }}> <Card elevation={0} sx={{ borderRadius: 4, mb: 3 }}>
<CardContent sx={{ p: 4 }}> <CardContent sx={{ p: 4 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
<Edit color="primary" /> <Edit color="primary" />

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

@ -91,9 +91,9 @@ export default function ContentPreviewStep({
if (loading) { if (loading) {
return ( return (
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}> <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
<Container maxWidth="md" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}> <Container maxWidth="md" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 6, md: 8 } }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 4 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 8 }}>
<IconButton onClick={onBack}> <IconButton onClick={onBack}>
<ArrowBack /> <ArrowBack />
</IconButton> </IconButton>
@ -133,10 +133,10 @@ export default function ContentPreviewStep({
} }
return ( return (
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}> <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
<Container maxWidth="md" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}> <Container maxWidth="md" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 6, md: 8 } }}>
{/* Header */} {/* Header */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 4 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 8 }}>
<IconButton onClick={onBack}> <IconButton onClick={onBack}>
<ArrowBack /> <ArrowBack />
</IconButton> </IconButton>
@ -156,7 +156,7 @@ export default function ContentPreviewStep({
elevation={0} elevation={0}
sx={{ sx={{
cursor: 'pointer', cursor: 'pointer',
borderRadius: 3, borderRadius: 4,
border: selectedStyle === style.id ? 3 : 1, border: selectedStyle === style.id ? 3 : 1,
borderColor: selectedStyle === style.id ? 'error.main' : 'divider', borderColor: selectedStyle === style.id ? 'error.main' : 'divider',
transition: 'all 0.3s', transition: 'all 0.3s',
@ -321,7 +321,7 @@ export default function ContentPreviewStep({
maxWidth: 600, maxWidth: 600,
aspectRatio: '1 / 1', aspectRatio: '1 / 1',
background: fullscreenStyle.gradient || '#f5f5f5', background: fullscreenStyle.gradient || '#f5f5f5',
borderRadius: 3, borderRadius: 4,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',

46
src/app/(main)/events/create/steps/ObjectiveStep.tsx
View File

@ -62,48 +62,50 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
}; };
return ( return (
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}> <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
<Container maxWidth="md" sx={{ pt: 4, pb: 4, px: { xs: 3, sm: 3, md: 4 } }}> <Container maxWidth="md" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 6, md: 8 } }}>
{/* Title Section */} {/* Title Section */}
<Box sx={{ mb: 5, textAlign: 'center' }}> <Box sx={{ mb: 10, textAlign: 'center' }}>
<AutoAwesome sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} /> <AutoAwesome sx={{ fontSize: 80, color: 'primary.main', mb: 4 }} />
<Typography variant="h4" sx={{ fontWeight: 700, mb: 1 }}> <Typography variant="h4" sx={{ fontWeight: 700, mb: 4, fontSize: '2rem' }}>
이벤트 목적을 선택해주세요 이벤트 목적을 선택해주세요
</Typography> </Typography>
<Typography variant="body1" color="text.secondary"> <Typography variant="body1" color="text.secondary" sx={{ fontSize: '1.125rem' }}>
AI가 목적에 맞는 최적의 이벤트를 추천해드립니다 AI가 목적에 맞는 최적의 이벤트를 추천해드립니다
</Typography> </Typography>
</Box> </Box>
{/* Purpose Options */} {/* Purpose Options */}
<RadioGroup value={selected} onChange={(e) => setSelected(e.target.value as EventObjective)}> <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) => ( {objectives.map((objective) => (
<Grid item xs={12} sm={6} key={objective.id}> <Grid item xs={12} sm={6} key={objective.id}>
<Card <Card
elevation={0} elevation={0}
sx={{ sx={{
cursor: 'pointer', cursor: 'pointer',
borderRadius: 3, borderRadius: 4,
border: selected === objective.id ? 2 : 1, border: selected === objective.id ? 2 : 1,
borderColor: selected === objective.id ? 'primary.main' : 'divider', borderColor: selected === objective.id ? 'primary.main' : 'divider',
bgcolor: selected === objective.id ? 'action.selected' : 'background.paper', bgcolor: selected === objective.id ? 'action.selected' : 'background.paper',
transition: 'all 0.2s', 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': { '&:hover': {
borderColor: 'primary.main', 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)} onClick={() => setSelected(objective.id)}
> >
<CardContent sx={{ p: 4 }}> <CardContent sx={{ p: 6 }}>
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2, mb: 2 }}> <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, mb: 3 }}>
<Box sx={{ color: 'primary.main' }}>{objective.icon}</Box> <Box sx={{ color: 'primary.main' }}>{objective.icon}</Box>
<Box sx={{ flex: 1 }}> <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} {objective.title}
</Typography> </Typography>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
{objective.description} {objective.description}
</Typography> </Typography>
</Box> </Box>
@ -125,14 +127,15 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
<Card <Card
elevation={0} elevation={0}
sx={{ sx={{
mb: 5, mb: 10,
bgcolor: 'primary.light', 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 }}> <CardContent sx={{ display: 'flex', gap: 3, p: 6 }}>
<AutoAwesome sx={{ color: 'primary.main' }} /> <AutoAwesome sx={{ color: 'primary.main', fontSize: 28 }} />
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem', lineHeight: 1.8 }}>
선택하신 목적에 따라 AI가 업종, 지역, 계절 트렌드를 분석하여 가장 효과적인 이벤트를 추천합니다. 선택하신 목적에 따라 AI가 업종, 지역, 계절 트렌드를 분석하여 가장 효과적인 이벤트를 추천합니다.
</Typography> </Typography>
</CardContent> </CardContent>
@ -146,7 +149,12 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
size="large" size="large"
disabled={!selected} disabled={!selected}
onClick={handleNext} onClick={handleNext}
sx={{ py: 1.5 }} sx={{
py: 3,
borderRadius: 3,
fontSize: '1rem',
fontWeight: 700,
}}
> >
다음 다음
</Button> </Button>

141
src/app/(main)/events/create/steps/RecommendationStep.tsx
View File

@ -144,49 +144,56 @@ export default function RecommendationStep({ onNext, onBack }: RecommendationSte
}; };
return ( return (
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}> <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
<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: 6, md: 8 } }}>
{/* Header */} {/* Header */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 4 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 8 }}>
<IconButton onClick={onBack}> <IconButton onClick={onBack} sx={{ width: 48, height: 48 }}>
<ArrowBack /> <ArrowBack />
</IconButton> </IconButton>
<Typography variant="h5" sx={{ fontWeight: 700 }}> <Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
AI 이벤트 추천 AI 이벤트 추천
</Typography> </Typography>
</Box> </Box>
{/* Trends Analysis */} {/* Trends Analysis */}
<Card elevation={0} sx={{ mb: 5, borderRadius: 3 }}> <Card
<CardContent sx={{ p: 4 }}> elevation={0}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}> sx={{
<Insights color="primary" /> mb: 10,
<Typography variant="h6" sx={{ fontWeight: 700 }}> 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 트렌드 분석 AI 트렌드 분석
</Typography> </Typography>
</Box> </Box>
<Grid container spacing={3}> <Grid container spacing={6}>
<Grid item xs={12} md={4}> <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>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
음식점업 신년 프로모션 트렌드 음식점업 신년 프로모션 트렌드
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} md={4}> <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>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
강남구 음식점 할인 이벤트 증가 강남구 음식점 할인 이벤트 증가
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} md={4}> <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>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
설 연휴 특수 대비 고객 유치 전략 설 연휴 특수 대비 고객 유치 전략
</Typography> </Typography>
</Grid> </Grid>
@ -195,52 +202,67 @@ export default function RecommendationStep({ onNext, onBack }: RecommendationSte
</Card> </Card>
{/* Budget Selection */} {/* Budget Selection */}
<Box sx={{ mb: 4 }}> <Box sx={{ mb: 8 }}>
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2 }}> <Typography variant="h6" sx={{ fontWeight: 700, mb: 4, fontSize: '1.25rem' }}>
예산별 추천 이벤트 예산별 추천 이벤트
</Typography> </Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}> <Typography variant="body2" color="text.secondary" sx={{ mb: 6, fontSize: '1rem' }}>
각 예산별 2가지 방식 (온라인 1개, 오프라인 1개)을 추천합니다 각 예산별 2가지 방식 (온라인 1개, 오프라인 1개)을 추천합니다
</Typography> </Typography>
<Tabs <Tabs
value={selectedBudget} value={selectedBudget}
onChange={(_, value) => setSelectedBudget(value)} onChange={(_, value) => setSelectedBudget(value)}
variant="fullWidth" variant="fullWidth"
sx={{ mb: 4 }} sx={{ mb: 8 }}
> >
<Tab label="💰 저비용" value="low" /> <Tab
<Tab label="💰💰 중비용" value="medium" /> label="💰 저비용"
<Tab label="💰💰💰 고비용" value="high" /> 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> </Tabs>
</Box> </Box>
{/* Recommendations */} {/* Recommendations */}
<RadioGroup value={selected} onChange={(e) => setSelected(e.target.value)}> <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) => ( {budgetRecommendations.map((rec) => (
<Grid item xs={12} md={6} key={rec.id}> <Grid item xs={12} md={6} key={rec.id}>
<Card <Card
elevation={0} elevation={0}
sx={{ sx={{
cursor: 'pointer', cursor: 'pointer',
borderRadius: 3, borderRadius: 4,
border: selected === rec.id ? 2 : 1, border: selected === rec.id ? 2 : 1,
borderColor: selected === rec.id ? 'primary.main' : 'divider', borderColor: selected === rec.id ? 'primary.main' : 'divider',
bgcolor: selected === rec.id ? 'action.selected' : 'background.paper', bgcolor: selected === rec.id ? 'action.selected' : 'background.paper',
transition: 'all 0.2s', 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': { '&:hover': {
borderColor: 'primary.main', borderColor: 'primary.main',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
transform: 'translateY(-2px)',
}, },
}} }}
onClick={() => setSelected(rec.id)} onClick={() => setSelected(rec.id)}
> >
<CardContent sx={{ p: 4 }}> <CardContent sx={{ p: 6 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}> <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 4 }}>
<Chip <Chip
label={rec.method === 'online' ? '🌐 온라인' : '🏪 오프라인'} label={rec.method === 'online' ? '🌐 온라인' : '🏪 오프라인'}
color={rec.method === 'online' ? 'primary' : 'secondary'} 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 }} /> <FormControlLabel value={rec.id} control={<Radio />} label="" sx={{ m: 0 }} />
</Box> </Box>
@ -251,59 +273,61 @@ export default function RecommendationStep({ onNext, onBack }: RecommendationSte
value={editedData[rec.id]?.title || rec.title} value={editedData[rec.id]?.title || rec.title}
onChange={(e) => handleEditTitle(rec.id, e.target.value)} onChange={(e) => handleEditTitle(rec.id, e.target.value)}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
sx={{ mb: 2 }} sx={{ mb: 4 }}
InputProps={{ InputProps={{
endAdornment: <Edit fontSize="small" color="action" />, endAdornment: <Edit fontSize="small" color="action" />,
sx: { fontSize: '1rem', py: 2 },
}} }}
/> />
<Box sx={{ mb: 2 }}> <Box sx={{ mb: 4 }}>
<Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: 'block' }}> <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block', fontSize: '0.875rem' }}>
경품 경품
</Typography> </Typography>
<TextField <TextField
fullWidth fullWidth
size="small" size="medium"
variant="outlined" variant="outlined"
value={editedData[rec.id]?.prize || rec.prize} value={editedData[rec.id]?.prize || rec.prize}
onChange={(e) => handleEditPrize(rec.id, e.target.value)} onChange={(e) => handleEditPrize(rec.id, e.target.value)}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
InputProps={{ InputProps={{
endAdornment: <Edit fontSize="small" color="action" />, endAdornment: <Edit fontSize="small" color="action" />,
sx: { fontSize: '1rem' },
}} }}
/> />
</Box> </Box>
<Grid container spacing={2} sx={{ mt: 2 }}> <Grid container spacing={4} sx={{ mt: 4 }}>
<Grid item xs={6}> <Grid item xs={6}>
<Typography variant="caption" color="text.secondary"> <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.875rem' }}>
참여 방법 참여 방법
</Typography> </Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }}> <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '1rem', mt: 1 }}>
{rec.participationMethod} {rec.participationMethod}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Typography variant="caption" color="text.secondary"> <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.875rem' }}>
예상 참여 예상 참여
</Typography> </Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }}> <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '1rem', mt: 1 }}>
{rec.expectedParticipants}명 {rec.expectedParticipants}명
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Typography variant="caption" color="text.secondary"> <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.875rem' }}>
예상 비용 예상 비용
</Typography> </Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }}> <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '1rem', mt: 1 }}>
{(rec.estimatedCost / 10000).toFixed(0)}만원 {(rec.estimatedCost / 10000).toFixed(0)}만원
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Typography variant="caption" color="text.secondary"> <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.875rem' }}>
투자대비수익률 투자대비수익률
</Typography> </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}% {rec.roi}%
</Typography> </Typography>
</Grid> </Grid>
@ -316,11 +340,38 @@ export default function RecommendationStep({ onNext, onBack }: RecommendationSte
</RadioGroup> </RadioGroup>
{/* Action Buttons */} {/* Action Buttons */}
<Box sx={{ display: 'flex', gap: 2 }}> <Box sx={{ display: 'flex', gap: 4 }}>
<Button fullWidth variant="outlined" size="large" onClick={onBack} sx={{ py: 1.5 }}> <Button
fullWidth
variant="outlined"
size="large"
onClick={onBack}
sx={{
py: 3,
borderRadius: 3,
fontSize: '1rem',
fontWeight: 600,
borderWidth: 2,
'&:hover': {
borderWidth: 2,
},
}}
>
이전 이전
</Button> </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> </Button>
</Box> </Box>