mirror of
https://github.com/ktds-dg0501/kt-event-marketing-fe.git
synced 2025-12-06 08:16:23 +00:00
create 페이지 전체 색상 시스템 통일 및 ChannelStep 체크박스 디자인 개선
- 메인/이벤트 페이지와 동일한 색상 시스템을 모든 create 페이지에 적용 - ObjectiveStep: 아이콘, 카드 선택 상태, 그라데이션 버튼에 통일된 색상 적용 - RecommendationStep: AI 트렌드 아이콘, 카드 선택/호버 상태에 purple 색상 적용 - ChannelStep: 모든 채널 카드 및 체크박스에 통일된 디자인 시스템 적용 - 선택된 카드: purple 테두리, purpleLight 배경, 강조된 그림자 - 모든 체크박스: purple 색상 적용 (메인 체크박스 + SNS 하위 체크박스) - 선택 상태에 따른 폰트 굵기 변화로 시각적 피드백 강화 - ContentPreviewStep, ContentEditStep, ApprovalStep: 색상 시스템 추가 (향후 사용 준비) - 총 예상 노출 텍스트: purple 색상 적용 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
cherry2250
parent
a2e6e017a6
commit
8e2376dc57
@ -20,6 +20,24 @@ import {
|
||||
import { ArrowBack, CheckCircle, Edit, RocketLaunch, Save } from '@mui/icons-material';
|
||||
import { EventData } 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 ApprovalStepProps {
|
||||
eventData: EventData;
|
||||
onApprove: () => void;
|
||||
|
||||
@ -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;
|
||||
@ -111,9 +129,11 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
sx={{
|
||||
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',
|
||||
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: 6 }}>
|
||||
@ -122,9 +142,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
<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 }}
|
||||
/>
|
||||
|
||||
@ -174,9 +204,11 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
sx={{
|
||||
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',
|
||||
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: 6 }}>
|
||||
@ -185,9 +217,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
<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 }}
|
||||
/>
|
||||
|
||||
@ -221,9 +263,11 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
sx={{
|
||||
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',
|
||||
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: 6 }}>
|
||||
@ -232,9 +276,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
<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 }}
|
||||
/>
|
||||
|
||||
@ -295,9 +349,11 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
sx={{
|
||||
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',
|
||||
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: 6 }}>
|
||||
@ -306,9 +362,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
<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 }}
|
||||
/>
|
||||
|
||||
@ -324,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"
|
||||
@ -336,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"
|
||||
@ -348,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"
|
||||
@ -400,7 +484,7 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
|
||||
<Typography variant="h6" sx={{ fontSize: '1.25rem' }}>
|
||||
총 예상 노출
|
||||
</Typography>
|
||||
<Typography variant="h6" color="primary.main" sx={{ fontWeight: 700, fontSize: '1.25rem' }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1.25rem', color: colors.purple }}>
|
||||
{totalExposure > 0 ? `${totalExposure.toLocaleString()}명+` : '0명'}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
@ -12,6 +12,24 @@ import {
|
||||
} from '@mui/material';
|
||||
import { ArrowBack, Edit } 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 ContentEditStepProps {
|
||||
initialTitle: string;
|
||||
initialPrize: string;
|
||||
|
||||
@ -14,6 +14,24 @@ import {
|
||||
} 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;
|
||||
|
||||
@ -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;
|
||||
@ -66,7 +84,7 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
|
||||
<Container maxWidth="md" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 6, md: 8 } }}>
|
||||
{/* Title Section */}
|
||||
<Box sx={{ mb: 10, textAlign: 'center' }}>
|
||||
<AutoAwesome sx={{ fontSize: 80, color: 'primary.main', mb: 4 }} />
|
||||
<AutoAwesome sx={{ fontSize: 80, color: colors.purple, mb: 4 }} />
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, mb: 4, fontSize: '2rem' }}>
|
||||
이벤트 목적을 선택해주세요
|
||||
</Typography>
|
||||
@ -86,12 +104,12 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
|
||||
cursor: 'pointer',
|
||||
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',
|
||||
borderColor: colors.purple,
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
transform: 'translateY(-2px)',
|
||||
},
|
||||
@ -100,7 +118,7 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
|
||||
>
|
||||
<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={{ color: colors.purple }}>{objective.icon}</Box>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2, fontSize: '1.25rem' }}>
|
||||
{objective.title}
|
||||
@ -111,7 +129,7 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
|
||||
</Box>
|
||||
<FormControlLabel
|
||||
value={objective.id}
|
||||
control={<Radio />}
|
||||
control={<Radio sx={{ color: selected === objective.id ? colors.purple : undefined }} />}
|
||||
label=""
|
||||
sx={{ m: 0 }}
|
||||
/>
|
||||
@ -128,14 +146,14 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: 10,
|
||||
bgcolor: 'primary.light',
|
||||
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: 3, p: 6 }}>
|
||||
<AutoAwesome sx={{ color: 'primary.main', fontSize: 28 }} />
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem', lineHeight: 1.8 }}>
|
||||
<AutoAwesome sx={{ color: colors.purple, fontSize: 28 }} />
|
||||
<Typography variant="body2" sx={{ fontSize: '1rem', lineHeight: 1.8, color: colors.gray[700] }}>
|
||||
선택하신 목적에 따라 AI가 업종, 지역, 계절 트렌드를 분석하여 가장 효과적인 이벤트를 추천합니다.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -154,6 +172,14 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
|
||||
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],
|
||||
},
|
||||
}}
|
||||
>
|
||||
다음
|
||||
|
||||
@ -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;
|
||||
@ -167,7 +185,7 @@ export default function RecommendationStep({ onNext, onBack }: RecommendationSte
|
||||
>
|
||||
<CardContent sx={{ p: 8 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 6 }}>
|
||||
<Insights color="primary" sx={{ fontSize: 32 }} />
|
||||
<Insights sx={{ fontSize: 32, color: colors.purple }} />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1.25rem' }}>
|
||||
AI 트렌드 분석
|
||||
</Typography>
|
||||
@ -244,12 +262,12 @@ export default function RecommendationStep({ onNext, onBack }: RecommendationSte
|
||||
cursor: 'pointer',
|
||||
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)',
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user