diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index bc20bfc..61de739 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -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,9 +60,10 @@ 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
- ? Math.round(mockEvents.reduce((sum, e) => sum + e.roi, 0) / mockEvents.length)
- : 0;
+ const avgROI =
+ mockEvents.length > 0
+ ? Math.round(mockEvents.reduce((sum, e) => sum + e.roi, 0) / mockEvents.length)
+ : 0;
const handleCreateEvent = () => {
router.push('/events/create');
@@ -92,379 +89,439 @@ export default function HomePage() {
}}
>
- {/* Welcome Section */}
-
-
- 안녕하세요, {mockUser.name}님! 👋
-
-
- 이벤트 현황을 한눈에 확인하고 성과를 분석해보세요
-
-
-
- {/* KPI Cards */}
-
-
-
+
-
-
-
-
-
- 진행 중인 이벤트
-
-
- {activeEvents.length}
-
-
-
-
-
-
-
-
-
-
-
- 총 참여자
-
-
- {totalParticipants.toLocaleString()}
-
-
-
-
-
-
-
-
-
-
-
- 평균 ROI
-
-
- {avgROI}%
-
-
-
-
-
-
- {/* Quick Actions */}
-
-
- 빠른 시작
-
-
-
-
-
-
-
-
-
- 새 이벤트
-
-
-
-
-
-
-
-
-
-
-
- 성과 분석
-
-
-
-
-
-
-
- {/* Active Events */}
-
-
-
- 진행 중인 이벤트
+ 안녕하세요, {mockUser.name}님! 👋
+
+
+ 이벤트 현황을 한눈에 확인하고 성과를 분석해보세요
-
- {activeEvents.length === 0 ? (
-
-
-
-
- event_busy
-
-
-
- 진행 중인 이벤트가 없습니다
-
-
- 새로운 이벤트를 만들어 고객과 소통해보세요
-
- }
- onClick={handleCreateEvent}
- sx={{
- py: { xs: 1.5, sm: 1.75 },
- px: { xs: 3, sm: 4 },
- fontSize: { xs: 15, sm: 16 },
- ...getGradientButtonStyle('primary'),
- }}
- >
- 새 이벤트 만들기
-
-
-
- ) : (
-
- {activeEvents.map((event) => (
+ {/* KPI Cards */}
+
+
+
+
+
+
+
+
+ 진행 중인 이벤트
+
+
+ {activeEvents.length}
+
+
+
+
+
+
+
+
+
+
+
+ 총 참여자
+
+
+ {totalParticipants.toLocaleString()}
+
+
+
+
+
+
+
+
+
+
+
+ 평균 ROI
+
+
+ {avgROI}%
+
+
+
+
+
+
+ {/* Quick Actions */}
+
+
+ 빠른 시작
+
+
+
handleEventClick(event.id)}
+ onClick={handleCreateEvent}
>
-
-
-
- {event.title}
-
-
- {event.status}
-
+
+
+
-
- 📅
- {event.startDate} ~ {event.endDate}
+
+ 새 이벤트
-
-
-
- 참여자
-
-
- {event.participants.toLocaleString()}
-
- 명
-
-
-
-
-
- ROI
-
-
- {event.roi}%
-
-
-
- ))}
-
- )}
-
-
- {/* Recent Activity */}
-
-
- 최근 활동
-
-
-
- {mockActivities.map((activity, index) => (
-
+
+ 0 ? 3.5 : 0,
- mt: index > 0 ? 3.5 : 0,
- borderTop: index > 0 ? 1 : 0,
- borderColor: colors.gray[200],
+ ...cardStyles.clickable,
}}
+ onClick={handleViewAnalytics}
>
-
+
+
+
+
+ 성과분석
+
+
+
+
+
+
+
+ {/* Active Events */}
+
+
+
+ 진행 중인 이벤트
+
+
+
+
+ {activeEvents.length === 0 ? (
+
+
+
+
+ event_busy
+
+
+
+ 진행 중인 이벤트가 없습니다
+
+
+ 새로운 이벤트를 만들어 고객과 소통해보세요
+
+ }
+ onClick={handleCreateEvent}
sx={{
- width: 48,
- height: 48,
- borderRadius: '14px',
- background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- flexShrink: 0,
+ py: { xs: 1.5, sm: 1.75 },
+ px: { xs: 3, sm: 4 },
+ fontSize: { xs: 15, sm: 16 },
+ ...getGradientButtonStyle('primary'),
}}
>
-
-
-
-
- {activity.text}
-
-
- {activity.time}
-
-
-
- ))}
-
-
-
-
+ 새 이벤트 만들기
+
+
+
+ ) : (
+
+ {activeEvents.map((event) => (
+ handleEventClick(event.id)}
+ >
+
+
+
+ {event.title}
+
+
+ {event.status}
+
+
+
+ 📅
+
+ {event.startDate} ~ {event.endDate}
+
+
+
+
+
+ 참여자
+
+
+ {event.participants.toLocaleString()}
+
+ 명
+
+
+
+
+
+ ROI
+
+
+ {event.roi}%
+
+
+
+
+
+ ))}
+
+ )}
+
- {/* Floating Action Button */}
-
+
+ 최근 활동
+
+
+
+ {mockActivities.map((activity, index) => (
+ 0 ? 3.5 : 0,
+ mt: index > 0 ? 3.5 : 0,
+ borderTop: index > 0 ? 1 : 0,
+ borderColor: colors.gray[200],
+ }}
+ >
+
+
+
+
+
+ {activity.text}
+
+
+ {activity.time}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Floating Action Button */}
+