From e1fefc2dad8910c0ae21bee949a5d80857cb4fb4 Mon Sep 17 00:00:00 2001
From: cherry2250 <kcr7812@naver.com>
Date: Mon, 27 Oct 2025 11:44:25 +0900
Subject: [PATCH] =?UTF-8?q?develop=20:=20=ED=99=98=EA=B2=BD=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=EC=B4=88=EA=B8=B0=20=EC=85=8B=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(main)/page.tsx | 791 +++++++++++++++++++++-------------------
 1 file changed, 425 insertions(+), 366 deletions(-)

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() {
         }}
       >
         <Container maxWidth="lg" sx={{ pt: 5, pb: 4, px: { xs: 3, sm: 4, md: 5 } }}>
-        {/* Welcome Section */}
-        <Box sx={{ mb: 6 }}>
-          <Typography
-            variant="h3"
-            sx={{
-              ...responsiveText.h2,
-              mb: 2,
-            }}
-          >
-            안녕하세요, {mockUser.name}님! 👋
-          </Typography>
-          <Typography variant="body1" sx={{ ...responsiveText.body1 }}>
-            이벤트 현황을 한눈에 확인하고 성과를 분석해보세요
-          </Typography>
-        </Box>
-
-        {/* KPI Cards */}
-        <Grid container spacing={4} sx={{ mb: 6 }}>
-          <Grid item xs={12} sm={4}>
-            <Card
-              elevation={0}
+          {/* Welcome Section */}
+          <Box sx={{ mb: 6 }}>
+            <Typography
+              variant="h3"
               sx={{
-                ...cardStyles.default,
-                background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
-                borderColor: 'transparent',
+                ...responsiveText.h2,
+                mb: 2,
               }}
             >
-              <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <Box
-                  sx={{
-                    width: 64,
-                    height: 64,
-                    borderRadius: '50%',
-                    bgcolor: 'rgba(255, 255, 255, 0.2)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    margin: '0 auto',
-                    mb: 2,
-                  }}
-                >
-                  <Celebration sx={{ fontSize: 32, color: 'white' }} />
-                </Box>
-                <Typography
-                  variant="body2"
-                  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' }}>
-                  {activeEvents.length}
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-          <Grid item xs={12} sm={4}>
-            <Card
-              elevation={0}
-              sx={{
-                ...cardStyles.default,
-                background: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.mintLight} 100%)`,
-                borderColor: 'transparent',
-              }}
-            >
-              <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <Box
-                  sx={{
-                    width: 64,
-                    height: 64,
-                    borderRadius: '50%',
-                    bgcolor: 'rgba(255, 255, 255, 0.2)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    margin: '0 auto',
-                    mb: 2,
-                  }}
-                >
-                  <Group sx={{ fontSize: 32, color: 'white' }} />
-                </Box>
-                <Typography
-                  variant="body2"
-                  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' }}>
-                  {totalParticipants.toLocaleString()}
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-          <Grid item xs={12} sm={4}>
-            <Card
-              elevation={0}
-              sx={{
-                ...cardStyles.default,
-                background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
-                borderColor: 'transparent',
-              }}
-            >
-              <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <Box
-                  sx={{
-                    width: 64,
-                    height: 64,
-                    borderRadius: '50%',
-                    bgcolor: 'rgba(255, 255, 255, 0.2)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    margin: '0 auto',
-                    mb: 2,
-                  }}
-                >
-                  <TrendingUp sx={{ fontSize: 32, color: 'white' }} />
-                </Box>
-                <Typography
-                  variant="body2"
-                  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' }}>
-                  {avgROI}%
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-        </Grid>
-
-        {/* Quick Actions */}
-        <Box sx={{ mb: 6 }}>
-          <Typography variant="h5" sx={{ ...responsiveText.h3, mb: 4 }}>
-            빠른 시작
-          </Typography>
-          <Grid container spacing={4}>
-            <Grid item xs={6} sm={6}>
-              <Card
-                elevation={0}
-                sx={{
-                  ...cardStyles.clickable,
-                }}
-                onClick={handleCreateEvent}
-              >
-                <CardContent sx={{ textAlign: 'center', py: 5 }}>
-                  <Box
-                    sx={{
-                      width: 72,
-                      height: 72,
-                      borderRadius: '20px',
-                      background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      margin: '0 auto',
-                      mb: 2.5,
-                      boxShadow: '0 4px 14px 0 rgba(167, 139, 250, 0.39)',
-                    }}
-                  >
-                    <Add sx={{ fontSize: 36, color: 'white' }} />
-                  </Box>
-                  <Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900] }}>
-                    새 이벤트
-                  </Typography>
-                </CardContent>
-              </Card>
-            </Grid>
-            <Grid item xs={6} sm={6}>
-              <Card
-                elevation={0}
-                sx={{
-                  ...cardStyles.clickable,
-                }}
-                onClick={handleViewAnalytics}
-              >
-                <CardContent sx={{ textAlign: 'center', py: 5 }}>
-                  <Box
-                    sx={{
-                      width: 72,
-                      height: 72,
-                      borderRadius: '20px',
-                      background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.mint} 100%)`,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      margin: '0 auto',
-                      mb: 2.5,
-                      boxShadow: '0 4px 14px 0 rgba(96, 165, 250, 0.39)',
-                    }}
-                  >
-                    <Analytics sx={{ fontSize: 36, color: 'white' }} />
-                  </Box>
-                  <Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900] }}>
-                    성과 분석
-                  </Typography>
-                </CardContent>
-              </Card>
-            </Grid>
-          </Grid>
-        </Box>
-
-        {/* Active Events */}
-        <Box sx={{ mb: 6 }}>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
-            <Typography variant="h5" sx={{ ...responsiveText.h3 }}>
-              진행 중인 이벤트
+              안녕하세요, {mockUser.name}님! 👋
+            </Typography>
+            <Typography variant="body1" sx={{ ...responsiveText.body1 }}>
+              이벤트 현황을 한눈에 확인하고 성과를 분석해보세요
             </Typography>
-            <Button
-              size="medium"
-              endIcon={<span className="material-icons">chevron_right</span>}
-              onClick={() => router.push('/events')}
-              sx={{
-                color: colors.purple,
-                fontWeight: 600,
-                '&:hover': { bgcolor: 'rgba(167, 139, 250, 0.08)' },
-              }}
-            >
-              전체보기
-            </Button>
           </Box>
 
-          {activeEvents.length === 0 ? (
-            <Card
-              elevation={0}
-              sx={{
-                ...cardStyles.default,
-              }}
-            >
-              <CardContent sx={{ textAlign: 'center', py: 10 }}>
-                <Box sx={{ color: colors.gray[300], mb: 3 }}>
-                  <span className="material-icons" style={{ fontSize: 72 }}>
-                    event_busy
-                  </span>
-                </Box>
-                <Typography variant="h6" sx={{ mb: 2, color: colors.gray[700] }}>
-                  진행 중인 이벤트가 없습니다
-                </Typography>
-                <Typography variant="body2" sx={{ mb: 4, color: colors.gray[500] }}>
-                  새로운 이벤트를 만들어 고객과 소통해보세요
-                </Typography>
-                <Button
-                  variant="contained"
-                  startIcon={<Add />}
-                  onClick={handleCreateEvent}
-                  sx={{
-                    py: { xs: 1.5, sm: 1.75 },
-                    px: { xs: 3, sm: 4 },
-                    fontSize: { xs: 15, sm: 16 },
-                    ...getGradientButtonStyle('primary'),
-                  }}
-                >
-                  새 이벤트 만들기
-                </Button>
-              </CardContent>
-            </Card>
-          ) : (
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-              {activeEvents.map((event) => (
+          {/* KPI Cards */}
+          <Grid container spacing={4} sx={{ mb: 6 }}>
+            <Grid item xs={12} sm={4}>
+              <Card
+                elevation={0}
+                sx={{
+                  ...cardStyles.default,
+                  background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
+                  borderColor: 'transparent',
+                }}
+              >
+                <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
+                  <Box
+                    sx={{
+                      width: 64,
+                      height: 64,
+                      borderRadius: '50%',
+                      bgcolor: 'rgba(255, 255, 255, 0.2)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      margin: '0 auto',
+                      mb: 2,
+                    }}
+                  >
+                    <Celebration sx={{ fontSize: 32, color: 'white' }} />
+                  </Box>
+                  <Typography
+                    variant="body2"
+                    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' }}
+                  >
+                    {activeEvents.length}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+            <Grid item xs={12} sm={4}>
+              <Card
+                elevation={0}
+                sx={{
+                  ...cardStyles.default,
+                  background: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.mintLight} 100%)`,
+                  borderColor: 'transparent',
+                }}
+              >
+                <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
+                  <Box
+                    sx={{
+                      width: 64,
+                      height: 64,
+                      borderRadius: '50%',
+                      bgcolor: 'rgba(255, 255, 255, 0.2)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      margin: '0 auto',
+                      mb: 2,
+                    }}
+                  >
+                    <Group sx={{ fontSize: 32, color: 'white' }} />
+                  </Box>
+                  <Typography
+                    variant="body2"
+                    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' }}
+                  >
+                    {totalParticipants.toLocaleString()}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+            <Grid item xs={12} sm={4}>
+              <Card
+                elevation={0}
+                sx={{
+                  ...cardStyles.default,
+                  background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
+                  borderColor: 'transparent',
+                }}
+              >
+                <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
+                  <Box
+                    sx={{
+                      width: 64,
+                      height: 64,
+                      borderRadius: '50%',
+                      bgcolor: 'rgba(255, 255, 255, 0.2)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      margin: '0 auto',
+                      mb: 2,
+                    }}
+                  >
+                    <TrendingUp sx={{ fontSize: 32, color: 'white' }} />
+                  </Box>
+                  <Typography
+                    variant="body2"
+                    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' }}
+                  >
+                    {avgROI}%
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+
+          {/* Quick Actions */}
+          <Box sx={{ mb: 6 }}>
+            <Typography variant="h5" sx={{ ...responsiveText.h3, mb: 4 }}>
+              빠른 시작
+            </Typography>
+            <Grid container spacing={4}>
+              <Grid item xs={6} sm={6}>
                 <Card
-                  key={event.id}
                   elevation={0}
                   sx={{
                     ...cardStyles.clickable,
                   }}
-                  onClick={() => handleEventClick(event.id)}
+                  onClick={handleCreateEvent}
                 >
-                  <CardContent sx={{ p: { xs: 3, sm: 4 } }}>
-                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', mb: 3 }}>
-                      <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
-                        {event.title}
-                      </Typography>
-                      <Box
-                        sx={{
-                          px: 2.5,
-                          py: 0.75,
-                          bgcolor: colors.mint,
-                          color: 'white',
-                          borderRadius: 2,
-                          fontSize: '0.875rem',
-                          fontWeight: 600,
-                        }}
-                      >
-                        {event.status}
-                      </Box>
+                  <CardContent sx={{ textAlign: 'center', py: 5 }}>
+                    <Box
+                      sx={{
+                        width: 72,
+                        height: 72,
+                        borderRadius: '20px',
+                        background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        margin: '0 auto',
+                        mb: 2.5,
+                        boxShadow: '0 4px 14px 0 rgba(167, 139, 250, 0.39)',
+                      }}
+                    >
+                      <Add sx={{ fontSize: 36, color: 'white' }} />
                     </Box>
-                    <Typography variant="body2" sx={{ mb: 3, color: colors.gray[600], display: 'flex', alignItems: 'center', gap: 1 }}>
-                      <span>📅</span>
-                      <span>{event.startDate} ~ {event.endDate}</span>
+                    <Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900] }}>
+                      새 이벤트
                     </Typography>
-                    <Box sx={{ display: 'flex', gap: 6 }}>
-                      <Box>
-                        <Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}>
-                          참여자
-                        </Typography>
-                        <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>
-                        </Typography>
-                      </Box>
-                      <Box>
-                        <Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}>
-                          ROI
-                        </Typography>
-                        <Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint }}>
-                          {event.roi}%
-                        </Typography>
-                      </Box>
-                    </Box>
                   </CardContent>
                 </Card>
-              ))}
-            </Box>
-          )}
-        </Box>
-
-        {/* Recent Activity */}
-        <Box sx={{ mb: 6 }}>
-          <Typography variant="h5" sx={{ ...responsiveText.h3, mb: 4 }}>
-            최근 활동
-          </Typography>
-          <Card
-            elevation={0}
-            sx={{
-              ...cardStyles.default,
-            }}
-          >
-            <CardContent sx={{ p: { xs: 3, sm: 4 } }}>
-              {mockActivities.map((activity, index) => (
-                <Box
-                  key={index}
+              </Grid>
+              <Grid item xs={6} sm={6}>
+                <Card
+                  elevation={0}
                   sx={{
-                    display: 'flex',
-                    gap: 3,
-                    pt: index > 0 ? 3.5 : 0,
-                    mt: index > 0 ? 3.5 : 0,
-                    borderTop: index > 0 ? 1 : 0,
-                    borderColor: colors.gray[200],
+                    ...cardStyles.clickable,
                   }}
+                  onClick={handleViewAnalytics}
                 >
-                  <Box
+                  <CardContent sx={{ textAlign: 'center', py: 5 }}>
+                    <Box
+                      sx={{
+                        width: 72,
+                        height: 72,
+                        borderRadius: '20px',
+                        background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.mint} 100%)`,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        margin: '0 auto',
+                        mb: 2.5,
+                        boxShadow: '0 4px 14px 0 rgba(96, 165, 250, 0.39)',
+                      }}
+                    >
+                      <Analytics sx={{ fontSize: 36, color: 'white' }} />
+                    </Box>
+                    <Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900] }}>
+                      성과분석
+                    </Typography>
+                  </CardContent>
+                </Card>
+              </Grid>
+            </Grid>
+          </Box>
+
+          {/* Active Events */}
+          <Box sx={{ mb: 6 }}>
+            <Box
+              sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}
+            >
+              <Typography variant="h5" sx={{ ...responsiveText.h3 }}>
+                진행 중인 이벤트
+              </Typography>
+              <Button
+                size="medium"
+                endIcon={<span className="material-icons">chevron_right</span>}
+                onClick={() => router.push('/events')}
+                sx={{
+                  color: colors.purple,
+                  fontWeight: 600,
+                  '&:hover': { bgcolor: 'rgba(167, 139, 250, 0.08)' },
+                }}
+              >
+                전체보기
+              </Button>
+            </Box>
+
+            {activeEvents.length === 0 ? (
+              <Card
+                elevation={0}
+                sx={{
+                  ...cardStyles.default,
+                }}
+              >
+                <CardContent sx={{ textAlign: 'center', py: 10 }}>
+                  <Box sx={{ color: colors.gray[300], mb: 3 }}>
+                    <span className="material-icons" style={{ fontSize: 72 }}>
+                      event_busy
+                    </span>
+                  </Box>
+                  <Typography variant="h6" sx={{ mb: 2, color: colors.gray[700] }}>
+                    진행 중인 이벤트가 없습니다
+                  </Typography>
+                  <Typography variant="body2" sx={{ mb: 4, color: colors.gray[500] }}>
+                    새로운 이벤트를 만들어 고객과 소통해보세요
+                  </Typography>
+                  <Button
+                    variant="contained"
+                    startIcon={<Add />}
+                    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.icon sx={{ fontSize: 24, color: 'white' }} />
-                  </Box>
-                  <Box sx={{ flex: 1 }}>
-                    <Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], mb: 0.5 }}>
-                      {activity.text}
-                    </Typography>
-                    <Typography variant="body2" sx={{ color: colors.gray[500] }}>
-                      {activity.time}
-                    </Typography>
-                  </Box>
-                </Box>
-              ))}
-            </CardContent>
-          </Card>
-        </Box>
-      </Container>
+                    새 이벤트 만들기
+                  </Button>
+                </CardContent>
+              </Card>
+            ) : (
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                {activeEvents.map((event) => (
+                  <Card
+                    key={event.id}
+                    elevation={0}
+                    sx={{
+                      ...cardStyles.clickable,
+                    }}
+                    onClick={() => handleEventClick(event.id)}
+                  >
+                    <CardContent sx={{ p: { xs: 3, sm: 4 } }}>
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                          alignItems: 'start',
+                          mb: 3,
+                        }}
+                      >
+                        <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
+                          {event.title}
+                        </Typography>
+                        <Box
+                          sx={{
+                            px: 2.5,
+                            py: 0.75,
+                            bgcolor: colors.mint,
+                            color: 'white',
+                            borderRadius: 2,
+                            fontSize: '0.875rem',
+                            fontWeight: 600,
+                          }}
+                        >
+                          {event.status}
+                        </Box>
+                      </Box>
+                      <Typography
+                        variant="body2"
+                        sx={{
+                          mb: 3,
+                          color: colors.gray[600],
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 1,
+                        }}
+                      >
+                        <span>📅</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>
+                          <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>
+                          </Typography>
+                        </Box>
+                        <Box>
+                          <Typography
+                            variant="body2"
+                            sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}
+                          >
+                            ROI
+                          </Typography>
+                          <Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint }}>
+                            {event.roi}%
+                          </Typography>
+                        </Box>
+                      </Box>
+                    </CardContent>
+                  </Card>
+                ))}
+              </Box>
+            )}
+          </Box>
 
-      {/* Floating Action Button */}
-      <Fab
+          {/* Recent Activity */}
+          <Box sx={{ mb: 6 }}>
+            <Typography variant="h5" sx={{ ...responsiveText.h3, mb: 4 }}>
+              최근 활동
+            </Typography>
+            <Card
+              elevation={0}
+              sx={{
+                ...cardStyles.default,
+              }}
+            >
+              <CardContent sx={{ p: { xs: 3, sm: 4 } }}>
+                {mockActivities.map((activity, index) => (
+                  <Box
+                    key={index}
+                    sx={{
+                      display: 'flex',
+                      gap: 3,
+                      pt: index > 0 ? 3.5 : 0,
+                      mt: index > 0 ? 3.5 : 0,
+                      borderTop: index > 0 ? 1 : 0,
+                      borderColor: colors.gray[200],
+                    }}
+                  >
+                    <Box
+                      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,
+                      }}
+                    >
+                      <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 }}
+                      >
+                        {activity.text}
+                      </Typography>
+                      <Typography variant="body2" sx={{ color: colors.gray[500] }}>
+                        {activity.time}
+                      </Typography>
+                    </Box>
+                  </Box>
+                ))}
+              </CardContent>
+            </Card>
+          </Box>
+        </Container>
+
+        {/* Floating Action Button */}
+        <Fab
           sx={{
             position: 'fixed',
             bottom: { xs: 80, sm: 90 },
@@ -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}