mirror of
https://github.com/ktds-dg0501/kt-event-marketing-fe.git
synced 2025-12-06 06:16:24 +00:00
develop : 환경 설정 초기 셋팅
This commit is contained in:
cherry2250
parent
01a77fe7a8
commit
e1fefc2dad
@ -1,16 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Typography,
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
Button,
|
||||
Fab,
|
||||
} from '@mui/material';
|
||||
import { Box, Container, Typography, Grid, Card, CardContent, Button, Fab } from '@mui/material';
|
||||
import {
|
||||
Add,
|
||||
Celebration,
|
||||
@ -22,7 +13,12 @@ import {
|
||||
CheckCircle,
|
||||
} from '@mui/icons-material';
|
||||
import Header from '@/shared/ui/Header';
|
||||
import { getGradientButtonStyle, responsiveText, cardStyles, colors } from '@/shared/lib/button-styles';
|
||||
import {
|
||||
getGradientButtonStyle,
|
||||
responsiveText,
|
||||
cardStyles,
|
||||
colors,
|
||||
} from '@/shared/lib/button-styles';
|
||||
|
||||
// Mock 사용자 데이터 (API 연동 전까지 임시 사용)
|
||||
const mockUser = {
|
||||
@ -64,7 +60,8 @@ export default function HomePage() {
|
||||
// KPI 계산
|
||||
const activeEvents = mockEvents.filter((e) => e.status === '진행중');
|
||||
const totalParticipants = mockEvents.reduce((sum, e) => sum + e.participants, 0);
|
||||
const avgROI = mockEvents.length > 0
|
||||
const avgROI =
|
||||
mockEvents.length > 0
|
||||
? Math.round(mockEvents.reduce((sum, e) => sum + e.roi, 0) / mockEvents.length)
|
||||
: 0;
|
||||
|
||||
@ -137,11 +134,19 @@ export default function HomePage() {
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 1, color: 'rgba(255, 255, 255, 0.9)', fontWeight: 500, fontSize: '0.875rem' }}
|
||||
sx={{
|
||||
mb: 1,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
>
|
||||
진행 중인 이벤트
|
||||
</Typography>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}
|
||||
>
|
||||
{activeEvents.length}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -174,11 +179,19 @@ export default function HomePage() {
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 1, color: 'rgba(255, 255, 255, 0.9)', fontWeight: 500, fontSize: '0.875rem' }}
|
||||
sx={{
|
||||
mb: 1,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
>
|
||||
총 참여자
|
||||
</Typography>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}
|
||||
>
|
||||
{totalParticipants.toLocaleString()}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -211,11 +224,19 @@ export default function HomePage() {
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 1, color: 'rgba(255, 255, 255, 0.9)', fontWeight: 500, fontSize: '0.875rem' }}
|
||||
sx={{
|
||||
mb: 1,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
>
|
||||
평균 ROI
|
||||
</Typography>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}
|
||||
>
|
||||
{avgROI}%
|
||||
</Typography>
|
||||
</CardContent>
|
||||
@ -296,7 +317,9 @@ export default function HomePage() {
|
||||
|
||||
{/* Active Events */}
|
||||
<Box sx={{ mb: 6 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
|
||||
<Box
|
||||
sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}
|
||||
>
|
||||
<Typography variant="h5" sx={{ ...responsiveText.h3 }}>
|
||||
진행 중인 이벤트
|
||||
</Typography>
|
||||
@ -360,7 +383,14 @@ export default function HomePage() {
|
||||
onClick={() => handleEventClick(event.id)}
|
||||
>
|
||||
<CardContent sx={{ p: { xs: 3, sm: 4 } }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', mb: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'start',
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
{event.title}
|
||||
</Typography>
|
||||
@ -378,24 +408,48 @@ export default function HomePage() {
|
||||
{event.status}
|
||||
</Box>
|
||||
</Box>
|
||||
<Typography variant="body2" sx={{ mb: 3, color: colors.gray[600], display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
mb: 3,
|
||||
color: colors.gray[600],
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<span>📅</span>
|
||||
<span>{event.startDate} ~ {event.endDate}</span>
|
||||
<span>
|
||||
{event.startDate} ~ {event.endDate}
|
||||
</span>
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 6 }}>
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}
|
||||
>
|
||||
참여자
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.gray[900] }}>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{ fontWeight: 700, color: colors.gray[900] }}
|
||||
>
|
||||
{event.participants.toLocaleString()}
|
||||
<Typography component="span" variant="body2" sx={{ ml: 0.5, color: colors.gray[600] }}>
|
||||
<Typography
|
||||
component="span"
|
||||
variant="body2"
|
||||
sx={{ ml: 0.5, color: colors.gray[600] }}
|
||||
>
|
||||
명
|
||||
</Typography>
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}
|
||||
>
|
||||
ROI
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint }}>
|
||||
@ -449,7 +503,10 @@ export default function HomePage() {
|
||||
<activity.icon sx={{ fontSize: 24, color: 'white' }} />
|
||||
</Box>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], mb: 0.5 }}>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ fontWeight: 600, color: colors.gray[900], mb: 0.5 }}
|
||||
>
|
||||
{activity.text}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: colors.gray[500] }}>
|
||||
@ -472,9 +529,11 @@ export default function HomePage() {
|
||||
width: { xs: 64, sm: 72 },
|
||||
height: { xs: 64, sm: 72 },
|
||||
...getGradientButtonStyle('primary'),
|
||||
boxShadow: '0 10px 25px -5px rgba(167, 139, 250, 0.5), 0 8px 10px -6px rgba(167, 139, 250, 0.5)',
|
||||
boxShadow:
|
||||
'0 10px 25px -5px rgba(167, 139, 250, 0.5), 0 8px 10px -6px rgba(167, 139, 250, 0.5)',
|
||||
'&:hover': {
|
||||
boxShadow: '0 20px 35px -5px rgba(167, 139, 250, 0.6), 0 12px 15px -6px rgba(167, 139, 250, 0.6)',
|
||||
boxShadow:
|
||||
'0 20px 35px -5px rgba(167, 139, 250, 0.6), 0 12px 15px -6px rgba(167, 139, 250, 0.6)',
|
||||
},
|
||||
}}
|
||||
onClick={handleCreateEvent}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user