develop : 환경 설정 초기 셋팅

src/app/(main)/page.tsx

@@ -1,16 +1,7 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import {
+import { Box, Container, Typography, Grid, Card, CardContent, Button, Fab } from '@mui/material';
-  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}