로딩 스피너 디자인 개선

- ContentPreviewStep과 DrawPage의 로딩 스피너를 그라데이션 디자인으로 변경
- 보라색-핑크-파란색 그라데이션 회전 애니메이션 적용
- 중앙 아이콘에 펄스 애니메이션 추가
- DrawPage 다이얼로그 배경을 밝은 배경으로 변경하여 일관성 향상

src/app/(main)/events/[eventId]/draw/page.tsx

@@ -604,28 +604,55 @@ export default function DrawPage() {
           fullWidth
           PaperProps={{
             sx: {
-              bgcolor: 'rgba(0, 0, 0, 0.9)',
+              bgcolor: 'background.paper',
-              color: 'white',
               borderRadius: 4,
             },
           }}
         >
           <DialogContent sx={{ textAlign: 'center', py: 16 }}>
+            {/* 그라데이션 스피너 */}
+            <Box
+              sx={{
+                width: 100,
+                height: 100,
+                margin: '0 auto 48px',
+                borderRadius: '50%',
+                background: `conic-gradient(from 0deg, ${colors.purple}, ${colors.pink}, ${colors.blue}, ${colors.purple})`,
+                animation: 'spin 1.5s linear infinite',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                '@keyframes spin': {
+                  '0%': { transform: 'rotate(0deg)' },
+                  '100%': { transform: 'rotate(360deg)' },
+                },
+                '&::before': {
+                  content: '""',
+                  position: 'absolute',
+                  width: 75,
+                  height: 75,
+                  borderRadius: '50%',
+                  backgroundColor: 'background.paper',
+                },
+              }}
+            >
               <Casino
                 sx={{
-                fontSize: 100,
+                  fontSize: 50,
-                mb: 6,
+                  color: colors.purple,
-                animation: 'spin 0.5s infinite',
+                  zIndex: 1,
-                '@keyframes spin': {
+                  animation: 'pulse 1.5s ease-in-out infinite',
-                  '0%, 100%': { transform: 'rotate(0deg)' },
+                  '@keyframes pulse': {
-                  '50%': { transform: 'rotate(180deg)' },
+                    '0%, 100%': { opacity: 1, transform: 'scale(1)' },
+                    '50%': { opacity: 0.7, transform: 'scale(0.95)' },
                   },
                 }}
               />
+            </Box>
             <Typography variant="h4" sx={{ fontWeight: 700, mb: 2, fontSize: '2rem' }}>
               {animationText}
             </Typography>
-            <Typography variant="body1" sx={{ color: 'rgba(255,255,255,0.7)', fontSize: '1.125rem' }}>
+            <Typography variant="body1" color="text.secondary" sx={{ fontSize: '1.125rem' }}>
               {animationSubtext}
             </Typography>
           </DialogContent>

src/app/(main)/events/create/steps/ContentPreviewStep.tsx

@@ -122,18 +122,45 @@ export default function ContentPreviewStep({
           </Box>
 
           <Box sx={{ textAlign: 'center', mt: 15, mb: 15 }}>
-            <Psychology
+            {/* 그라데이션 스피너 */}
+            <Box
               sx={{
-                fontSize: 80,
+                width: 80,
-                color: colors.purple,
+                height: 80,
-                mb: 4,
+                margin: '0 auto 32px',
-                animation: 'spin 2s linear infinite',
+                borderRadius: '50%',
+                background: `conic-gradient(from 0deg, ${colors.purple}, ${colors.pink}, ${colors.blue}, ${colors.purple})`,
+                animation: 'spin 1.5s linear infinite',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
                 '@keyframes spin': {
                   '0%': { transform: 'rotate(0deg)' },
                   '100%': { transform: 'rotate(360deg)' },
                 },
+                '&::before': {
+                  content: '""',
+                  position: 'absolute',
+                  width: 60,
+                  height: 60,
+                  borderRadius: '50%',
+                  backgroundColor: 'background.default',
+                },
+              }}
+            >
+              <Psychology
+                sx={{
+                  fontSize: 40,
+                  color: colors.purple,
+                  zIndex: 1,
+                  animation: 'pulse 1.5s ease-in-out infinite',
+                  '@keyframes pulse': {
+                    '0%, 100%': { opacity: 1, transform: 'scale(1)' },
+                    '50%': { opacity: 0.7, transform: 'scale(0.95)' },
+                  },
                 }}
               />
+            </Box>
             <Typography variant="h5" sx={{ fontWeight: 700, mb: 3, fontSize: '1.5rem' }}>
               AI 이미지 생성 중
             </Typography>