From 8e2376dc573ffaae445b1270140219337bed3ac7 Mon Sep 17 00:00:00 2001 From: cherry2250 Date: Mon, 27 Oct 2025 15:19:31 +0900 Subject: [PATCH] =?UTF-8?q?create=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=A0=84=EC=B2=B4=20=EC=83=89=EC=83=81=20=EC=8B=9C=EC=8A=A4?= =?UTF-8?q?=ED=85=9C=20=ED=86=B5=EC=9D=BC=20=EB=B0=8F=20ChannelStep=20?= =?UTF-8?q?=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 메인/이벤트 페이지와 동일한 색상 시스템을 모든 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 --- .../events/create/steps/ApprovalStep.tsx | 18 +++ .../events/create/steps/ChannelStep.tsx | 118 +++++++++++++++--- .../events/create/steps/ContentEditStep.tsx | 18 +++ .../create/steps/ContentPreviewStep.tsx | 18 +++ .../events/create/steps/ObjectiveStep.tsx | 44 +++++-- .../create/steps/RecommendationStep.tsx | 26 +++- 6 files changed, 212 insertions(+), 30 deletions(-) diff --git a/src/app/(main)/events/create/steps/ApprovalStep.tsx b/src/app/(main)/events/create/steps/ApprovalStep.tsx index 5ca2156..2c5a814 100644 --- a/src/app/(main)/events/create/steps/ApprovalStep.tsx +++ b/src/app/(main)/events/create/steps/ApprovalStep.tsx @@ -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; diff --git a/src/app/(main)/events/create/steps/ChannelStep.tsx b/src/app/(main)/events/create/steps/ChannelStep.tsx index 488f541..0f3f1ae 100644 --- a/src/app/(main)/events/create/steps/ChannelStep.tsx +++ b/src/app/(main)/events/create/steps/ChannelStep.tsx @@ -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', }} > @@ -122,9 +142,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) { handleChannelToggle('uriTV')} + sx={{ + color: colors.purple, + '&.Mui-checked': { + color: colors.purple, + }, + }} /> } - label="우리동네TV" + label={ + + 우리동네TV + + } 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', }} > @@ -185,9 +217,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) { handleChannelToggle('ringoBiz')} + sx={{ + color: colors.purple, + '&.Mui-checked': { + color: colors.purple, + }, + }} /> } - label="링고비즈" + label={ + + 링고비즈 + + } 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', }} > @@ -232,9 +276,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) { handleChannelToggle('genieTV')} + sx={{ + color: colors.purple, + '&.Mui-checked': { + color: colors.purple, + }, + }} /> } - label="지니TV 광고" + label={ + + 지니TV 광고 + + } 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', }} > @@ -306,9 +362,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) { handleChannelToggle('sns')} + sx={{ + color: colors.purple, + '&.Mui-checked': { + color: colors.purple, + }, + }} /> } - label="SNS" + label={ + + SNS + + } 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) { 총 예상 노출 - + {totalExposure > 0 ? `${totalExposure.toLocaleString()}명+` : '0명'} diff --git a/src/app/(main)/events/create/steps/ContentEditStep.tsx b/src/app/(main)/events/create/steps/ContentEditStep.tsx index db9fe91..40d02af 100644 --- a/src/app/(main)/events/create/steps/ContentEditStep.tsx +++ b/src/app/(main)/events/create/steps/ContentEditStep.tsx @@ -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; diff --git a/src/app/(main)/events/create/steps/ContentPreviewStep.tsx b/src/app/(main)/events/create/steps/ContentPreviewStep.tsx index d1a3707..2459ce2 100644 --- a/src/app/(main)/events/create/steps/ContentPreviewStep.tsx +++ b/src/app/(main)/events/create/steps/ContentPreviewStep.tsx @@ -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; diff --git a/src/app/(main)/events/create/steps/ObjectiveStep.tsx b/src/app/(main)/events/create/steps/ObjectiveStep.tsx index 0e98adb..284cb3f 100644 --- a/src/app/(main)/events/create/steps/ObjectiveStep.tsx +++ b/src/app/(main)/events/create/steps/ObjectiveStep.tsx @@ -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) { {/* Title Section */} - + 이벤트 목적을 선택해주세요 @@ -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) { > - {objective.icon} + {objective.icon} {objective.title} @@ -111,7 +129,7 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) { } + control={} 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)', }} > - - + + 선택하신 목적에 따라 AI가 업종, 지역, 계절 트렌드를 분석하여 가장 효과적인 이벤트를 추천합니다. @@ -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], + }, }} > 다음 diff --git a/src/app/(main)/events/create/steps/RecommendationStep.tsx b/src/app/(main)/events/create/steps/RecommendationStep.tsx index c173ad7..f6c5111 100644 --- a/src/app/(main)/events/create/steps/RecommendationStep.tsx +++ b/src/app/(main)/events/create/steps/RecommendationStep.tsx @@ -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 > - + AI 트렌드 분석 @@ -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)', },