From 4ae7ea739a4d4f60f116652abed3738fe2181ce9 Mon Sep 17 00:00:00 2001
From: cherry2250 <kcr7812@naver.com>
Date: Mon, 27 Oct 2025 16:37:43 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EB=94=A9=20=EC=8A=A4=ED=94=BC?=
 =?UTF-8?q?=EB=84=88=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ContentPreviewStep과 DrawPage의 로딩 스피너를 그라데이션 디자인으로 변경
- 보라색-핑크-파란색 그라데이션 회전 애니메이션 적용
- 중앙 아이콘에 펄스 애니메이션 추가
- DrawPage 다이얼로그 배경을 밝은 배경으로 변경하여 일관성 향상
---
 src/app/(main)/events/[eventId]/draw/page.tsx | 47 +++++++++++++++----
 .../create/steps/ContentPreviewStep.tsx       | 39 ++++++++++++---
 2 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/src/app/(main)/events/[eventId]/draw/page.tsx b/src/app/(main)/events/[eventId]/draw/page.tsx
index 4f10d86..e9d09fe 100644
--- a/src/app/(main)/events/[eventId]/draw/page.tsx
+++ b/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)',
-              color: 'white',
+              bgcolor: 'background.paper',
               borderRadius: 4,
             },
           }}
         >
           <DialogContent sx={{ textAlign: 'center', py: 16 }}>
-            <Casino
+            {/* 그라데이션 스피너 */}
+            <Box
               sx={{
-                fontSize: 100,
-                mb: 6,
-                animation: 'spin 0.5s infinite',
+                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%, 100%': { transform: 'rotate(0deg)' },
-                  '50%': { transform: 'rotate(180deg)' },
+                  '0%': { transform: 'rotate(0deg)' },
+                  '100%': { transform: 'rotate(360deg)' },
+                },
+                '&::before': {
+                  content: '""',
+                  position: 'absolute',
+                  width: 75,
+                  height: 75,
+                  borderRadius: '50%',
+                  backgroundColor: 'background.paper',
                 },
               }}
-            />
+            >
+              <Casino
+                sx={{
+                  fontSize: 50,
+                  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="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>
diff --git a/src/app/(main)/events/create/steps/ContentPreviewStep.tsx b/src/app/(main)/events/create/steps/ContentPreviewStep.tsx
index b210c5d..5a2f7df 100644
--- a/src/app/(main)/events/create/steps/ContentPreviewStep.tsx
+++ b/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,
-                color: colors.purple,
-                mb: 4,
-                animation: 'spin 2s linear infinite',
+                width: 80,
+                height: 80,
+                margin: '0 auto 32px',
+                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>