From 47ed0b5a7ca9ac849b9e38f865cd6c691e5eccea Mon Sep 17 00:00:00 2001
From: cherry2250 <kcr7812@naver.com>
Date: Mon, 27 Oct 2025 16:15:43 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B7=B8=EB=9E=98=EB=94=94=EC=96=B8=ED=8A=B8?=
 =?UTF-8?q?=20=EB=B0=B0=EA=B2=BD=20=EC=B9=B4=EB=93=9C=20=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B0=80=EB=8F=85=EC=84=B1=20=EA=B0=9C=EC=84=A0=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=9E=85=EC=B2=B4=EA=B0=90=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 배경색이 있는 모든 카드의 흰색 글자를 검은색으로 변경하여 가독성 향상
- 아이콘과 텍스트에 그림자 효과를 추가하여 입체감 부여
- Profile 페이지 디자인 통일성 완료

변경 파일:
- src/app/(main)/page.tsx: 대시보드 KPI 카드 (3개)
- src/app/(main)/events/page.tsx: 이벤트 통계 카드 (4개)
- src/app/(main)/events/create/steps/ApprovalStep.tsx: 승인 단계 요약 카드 (4개)
- src/app/(main)/profile/page.tsx: 프로필 페이지 전체 리디자인

적용된 효과:
- 아이콘: drop-shadow(0px 2px 4px rgba(0,0,0,0.2))
- 큰 텍스트: text-shadow 0px 2px 4px rgba(0,0,0,0.15)
- 작은 텍스트: text-shadow 0px 1px 2px rgba(0,0,0,0.1)
- 아이콘 배경: rgba(0,0,0,0.05) (대시보드)
- 글자 색상: colors.gray[900] (제목), colors.gray[700] (라벨)
---
 .../events/create/steps/ApprovalStep.tsx      |  98 ++-
 src/app/(main)/events/page.tsx                |  84 ++-
 src/app/(main)/page.tsx                       |  54 +-
 src/app/(main)/profile/page.tsx               | 639 ++++++++++--------
 4 files changed, 552 insertions(+), 323 deletions(-)

diff --git a/src/app/(main)/events/create/steps/ApprovalStep.tsx b/src/app/(main)/events/create/steps/ApprovalStep.tsx
index 043a63f..465029e 100644
--- a/src/app/(main)/events/create/steps/ApprovalStep.tsx
+++ b/src/app/(main)/events/create/steps/ApprovalStep.tsx
@@ -97,13 +97,28 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <CheckCircle sx={{ fontSize: 32, color: 'white', mb: 1 }} />
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem', mb: 1 }}>
+                <CheckCircle sx={{
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  mb: 1,
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   이벤트 제목
                 </Typography>
                 <Typography
                   variant="h6"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1rem' }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1rem',
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {eventData.recommendation?.title || '이벤트 제목'}
                 </Typography>
@@ -120,16 +135,36 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <People sx={{ fontSize: 32, color: 'white', mb: 1 }} />
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem', mb: 1 }}>
+                <People sx={{
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  mb: 1,
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   목표 참여자
                 </Typography>
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {eventData.recommendation?.expectedParticipants || 0}
-                  <Typography component="span" sx={{ fontSize: '1rem', ml: 0.5 }}>
+                  <Typography component="span" sx={{
+                    fontSize: '1rem',
+                    ml: 0.5,
+                    color: colors.gray[900],
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}>
                     명
                   </Typography>
                 </Typography>
@@ -146,16 +181,36 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <AttachMoney sx={{ fontSize: 32, color: 'white', mb: 1 }} />
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem', mb: 1 }}>
+                <AttachMoney sx={{
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  mb: 1,
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   예상 비용
                 </Typography>
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {((eventData.recommendation?.estimatedCost || 0) / 10000).toFixed(0)}
-                  <Typography component="span" sx={{ fontSize: '1rem', ml: 0.5 }}>
+                  <Typography component="span" sx={{
+                    fontSize: '1rem',
+                    ml: 0.5,
+                    color: colors.gray[900],
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}>
                     만원
                   </Typography>
                 </Typography>
@@ -172,13 +227,28 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <TrendingUp sx={{ fontSize: 32, color: 'white', mb: 1 }} />
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem', mb: 1 }}>
+                <TrendingUp sx={{
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  mb: 1,
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   예상 ROI
                 </Typography>
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {eventData.recommendation?.roi || 0}%
                 </Typography>
diff --git a/src/app/(main)/events/page.tsx b/src/app/(main)/events/page.tsx
index c6b0ea4..1a2dea4 100644
--- a/src/app/(main)/events/page.tsx
+++ b/src/app/(main)/events/page.tsx
@@ -250,14 +250,29 @@ export default function EventsPage() {
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <Event sx={{ fontSize: 32, color: 'white', mb: 1 }} />
+                <Event sx={{
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem', mb: 0.5 }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    mb: 0.5,
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {stats.total}
                 </Typography>
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem' }}>
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   전체 이벤트
                 </Typography>
               </CardContent>
@@ -273,14 +288,29 @@ export default function EventsPage() {
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <LocalFireDepartment sx={{ fontSize: 32, color: 'white', mb: 1 }} />
+                <LocalFireDepartment sx={{
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem', mb: 0.5 }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    mb: 0.5,
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {stats.active}
                 </Typography>
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem' }}>
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   진행중
                 </Typography>
               </CardContent>
@@ -296,14 +326,29 @@ export default function EventsPage() {
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <People sx={{ fontSize: 32, color: 'white', mb: 1 }} />
+                <People sx={{
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem', mb: 0.5 }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    mb: 0.5,
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {stats.totalParticipants}
                 </Typography>
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem' }}>
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   총 참여자
                 </Typography>
               </CardContent>
@@ -319,14 +364,29 @@ export default function EventsPage() {
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <TrendingUp sx={{ fontSize: 32, color: 'white', mb: 1 }} />
+                <TrendingUp sx={{
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem', mb: 0.5 }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    mb: 0.5,
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {stats.avgROI}%
                 </Typography>
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem' }}>
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   평균 ROI
                 </Typography>
               </CardContent>
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index 6dbac59..a6888e0 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -122,7 +122,7 @@ export default function HomePage() {
                       width: 64,
                       height: 64,
                       borderRadius: '50%',
-                      bgcolor: 'rgba(255, 255, 255, 0.2)',
+                      bgcolor: 'rgba(0, 0, 0, 0.05)',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
@@ -130,22 +130,32 @@ export default function HomePage() {
                       mb: 3,
                     }}
                   >
-                    <Celebration sx={{ fontSize: 32, color: 'white' }} />
+                    <Celebration sx={{
+                      fontSize: 32,
+                      color: colors.gray[900],
+                      filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                    }} />
                   </Box>
                   <Typography
                     variant="body2"
                     sx={{
                       mb: 1,
-                      color: 'rgba(255, 255, 255, 0.9)',
+                      color: colors.gray[700],
                       fontWeight: 500,
                       fontSize: '0.875rem',
+                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
                     }}
                   >
                     진행 중인 이벤트
                   </Typography>
                   <Typography
                     variant="h3"
-                    sx={{ fontWeight: 700, color: 'white', fontSize: '2.25rem' }}
+                    sx={{
+                      fontWeight: 700,
+                      color: colors.gray[900],
+                      fontSize: '2.25rem',
+                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                    }}
                   >
                     {activeEvents.length}
                   </Typography>
@@ -167,7 +177,7 @@ export default function HomePage() {
                       width: 64,
                       height: 64,
                       borderRadius: '50%',
-                      bgcolor: 'rgba(255, 255, 255, 0.2)',
+                      bgcolor: 'rgba(0, 0, 0, 0.05)',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
@@ -175,22 +185,32 @@ export default function HomePage() {
                       mb: 3,
                     }}
                   >
-                    <Group sx={{ fontSize: 32, color: 'white' }} />
+                    <Group sx={{
+                      fontSize: 32,
+                      color: colors.gray[900],
+                      filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                    }} />
                   </Box>
                   <Typography
                     variant="body2"
                     sx={{
                       mb: 1,
-                      color: 'rgba(255, 255, 255, 0.9)',
+                      color: colors.gray[700],
                       fontWeight: 500,
                       fontSize: '0.875rem',
+                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
                     }}
                   >
                     총 참여자
                   </Typography>
                   <Typography
                     variant="h3"
-                    sx={{ fontWeight: 700, color: 'white', fontSize: '2.25rem' }}
+                    sx={{
+                      fontWeight: 700,
+                      color: colors.gray[900],
+                      fontSize: '2.25rem',
+                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                    }}
                   >
                     {totalParticipants.toLocaleString()}
                   </Typography>
@@ -212,7 +232,7 @@ export default function HomePage() {
                       width: 64,
                       height: 64,
                       borderRadius: '50%',
-                      bgcolor: 'rgba(255, 255, 255, 0.2)',
+                      bgcolor: 'rgba(0, 0, 0, 0.05)',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
@@ -220,22 +240,32 @@ export default function HomePage() {
                       mb: 3,
                     }}
                   >
-                    <TrendingUp sx={{ fontSize: 32, color: 'white' }} />
+                    <TrendingUp sx={{
+                      fontSize: 32,
+                      color: colors.gray[900],
+                      filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                    }} />
                   </Box>
                   <Typography
                     variant="body2"
                     sx={{
                       mb: 1,
-                      color: 'rgba(255, 255, 255, 0.9)',
+                      color: colors.gray[700],
                       fontWeight: 500,
                       fontSize: '0.875rem',
+                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
                     }}
                   >
                     평균 ROI
                   </Typography>
                   <Typography
                     variant="h3"
-                    sx={{ fontWeight: 700, color: 'white', fontSize: '2.25rem' }}
+                    sx={{
+                      fontWeight: 700,
+                      color: colors.gray[900],
+                      fontSize: '2.25rem',
+                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                    }}
                   >
                     {avgROI}%
                   </Typography>
diff --git a/src/app/(main)/profile/page.tsx b/src/app/(main)/profile/page.tsx
index 5184a57..b970fd5 100644
--- a/src/app/(main)/profile/page.tsx
+++ b/src/app/(main)/profile/page.tsx
@@ -7,10 +7,12 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import {
   Box,
+  Container,
   TextField,
   Button,
   Typography,
-  Paper,
+  Card,
+  CardContent,
   Avatar,
   Select,
   MenuItem,
@@ -26,7 +28,8 @@ import {
 import { Person, Visibility, VisibilityOff, CheckCircle } from '@mui/icons-material';
 import { useAuthStore } from '@/stores/authStore';
 import { useUIStore } from '@/stores/uiStore';
-import { getGradientButtonStyle, responsiveText, containerStyles } from '@/shared/lib/button-styles';
+import Header from '@/shared/ui/Header';
+import { cardStyles, colors, responsiveText } from '@/shared/lib/button-styles';
 
 // 기본 정보 스키마
 const basicInfoSchema = z.object({
@@ -186,304 +189,341 @@ export default function ProfilePage() {
   };
 
   return (
-    <Box sx={{ ...containerStyles.page }}>
-      <Box sx={{ maxWidth: 600, mx: 'auto', px: { xs: 3, sm: 4 }, py: { xs: 3, sm: 4 } }}>
-        {/* 사용자 정보 섹션 */}
-        <Paper elevation={0} sx={{ p: 4, mb: 3, textAlign: 'center' }}>
-          <Avatar
-            sx={{
-              width: 80,
-              height: 80,
-              mx: 'auto',
-              mb: 2,
-              bgcolor: 'grey.100',
-              color: 'grey.400',
-            }}
-          >
-            <Person sx={{ fontSize: 48 }} />
-          </Avatar>
-          <Typography variant="h5" sx={{ ...responsiveText.h3, mb: 0.5 }}>
-            {user?.name}
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            {user?.email}
-          </Typography>
-        </Paper>
+    <>
+      <Header title="프로필" showBack={true} showMenu={false} showProfile={false} />
+      <Box
+        sx={{
+          pt: { xs: 7, sm: 8 },
+          pb: 10,
+          bgcolor: colors.gray[50],
+          minHeight: '100vh',
+        }}
+      >
+        <Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
+          {/* 사용자 정보 섹션 */}
+          <Card elevation={0} sx={{ ...cardStyles.default, mb: 10, textAlign: 'center' }}>
+            <CardContent sx={{ p: { xs: 6, sm: 8 } }}>
+              <Avatar
+                sx={{
+                  width: 100,
+                  height: 100,
+                  mx: 'auto',
+                  mb: 3,
+                  bgcolor: colors.purple,
+                  color: 'white',
+                }}
+              >
+                <Person sx={{ fontSize: 56 }} />
+              </Avatar>
+              <Typography variant="h5" sx={{ ...responsiveText.h3, mb: 1 }}>
+                {user?.name}
+              </Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ ...responsiveText.body1 }}>
+                {user?.email}
+              </Typography>
+            </CardContent>
+          </Card>
 
-        {/* 기본 정보 */}
-        <Paper elevation={0} sx={{ p: 4, mb: 3 }}>
-          <Typography variant="h6" sx={{ ...responsiveText.h4, mb: 3 }}>
-            기본 정보
-          </Typography>
+          {/* 기본 정보 */}
+          <Card elevation={0} sx={{ ...cardStyles.default, mb: 10 }}>
+            <CardContent sx={{ p: { xs: 6, sm: 8 } }}>
+              <Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
+                기본 정보
+              </Typography>
 
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-            <Controller
-              name="name"
-              control={basicControl}
-              render={({ field }) => (
-                <TextField
-                  {...field}
-                  fullWidth
-                  label="이름"
-                  error={!!basicErrors.name}
-                  helperText={basicErrors.name?.message}
-                />
-              )}
-            />
-
-            <Controller
-              name="phone"
-              control={basicControl}
-              render={({ field }) => (
-                <TextField
-                  {...field}
-                  fullWidth
-                  label="전화번호"
-                  onChange={(e) => {
-                    const formatted = formatPhoneNumber(e.target.value);
-                    field.onChange(formatted);
-                  }}
-                  error={!!basicErrors.phone}
-                  helperText={basicErrors.phone?.message}
-                />
-              )}
-            />
-
-            <Controller
-              name="email"
-              control={basicControl}
-              render={({ field }) => (
-                <TextField
-                  {...field}
-                  fullWidth
-                  label="이메일"
-                  type="email"
-                  error={!!basicErrors.email}
-                  helperText={basicErrors.email?.message}
-                />
-              )}
-            />
-          </Box>
-        </Paper>
-
-        {/* 매장 정보 */}
-        <Paper elevation={0} sx={{ p: 4, mb: 3 }}>
-          <Typography variant="h6" sx={{ ...responsiveText.h4, mb: 3 }}>
-            매장 정보
-          </Typography>
-
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-            <Controller
-              name="businessName"
-              control={businessControl}
-              render={({ field }) => (
-                <TextField
-                  {...field}
-                  fullWidth
-                  label="매장명"
-                  error={!!businessErrors.businessName}
-                  helperText={businessErrors.businessName?.message}
-                />
-              )}
-            />
-
-            <Controller
-              name="businessType"
-              control={businessControl}
-              render={({ field }) => (
-                <FormControl fullWidth error={!!businessErrors.businessType}>
-                  <InputLabel>업종</InputLabel>
-                  <Select {...field} label="업종">
-                    <MenuItem value="restaurant">음식점</MenuItem>
-                    <MenuItem value="cafe">카페/베이커리</MenuItem>
-                    <MenuItem value="retail">소매/편의점</MenuItem>
-                    <MenuItem value="beauty">미용/뷰티</MenuItem>
-                    <MenuItem value="fitness">헬스/피트니스</MenuItem>
-                    <MenuItem value="education">학원/교육</MenuItem>
-                    <MenuItem value="service">서비스업</MenuItem>
-                    <MenuItem value="other">기타</MenuItem>
-                  </Select>
-                  {businessErrors.businessType && (
-                    <Typography variant="caption" color="error" sx={{ mt: 0.5, ml: 2 }}>
-                      {businessErrors.businessType.message}
-                    </Typography>
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+                <Controller
+                  name="name"
+                  control={basicControl}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      fullWidth
+                      label="이름"
+                      error={!!basicErrors.name}
+                      helperText={basicErrors.name?.message}
+                    />
                   )}
-                </FormControl>
-              )}
-            />
-
-            <Controller
-              name="businessLocation"
-              control={businessControl}
-              render={({ field }) => (
-                <TextField {...field} fullWidth label="주소" />
-              )}
-            />
-
-            <Controller
-              name="businessHours"
-              control={businessControl}
-              render={({ field }) => (
-                <TextField
-                  {...field}
-                  fullWidth
-                  label="영업시간"
-                  placeholder="예: 10:00 ~ 22:00"
                 />
-              )}
-            />
-          </Box>
-        </Paper>
 
-        {/* 비밀번호 변경 */}
-        <Paper elevation={0} sx={{ p: 4, mb: 3 }}>
-          <Typography variant="h6" sx={{ ...responsiveText.h4, mb: 3 }}>
-            비밀번호 변경
-          </Typography>
+                <Controller
+                  name="phone"
+                  control={basicControl}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      fullWidth
+                      label="전화번호"
+                      onChange={(e) => {
+                        const formatted = formatPhoneNumber(e.target.value);
+                        field.onChange(formatted);
+                      }}
+                      error={!!basicErrors.phone}
+                      helperText={basicErrors.phone?.message}
+                    />
+                  )}
+                />
 
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-            <Controller
-              name="currentPassword"
-              control={passwordControl}
-              render={({ field }) => (
-                <TextField
-                  {...field}
+                <Controller
+                  name="email"
+                  control={basicControl}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      fullWidth
+                      label="이메일"
+                      type="email"
+                      error={!!basicErrors.email}
+                      helperText={basicErrors.email?.message}
+                    />
+                  )}
+                />
+              </Box>
+            </CardContent>
+          </Card>
+
+          {/* 매장 정보 */}
+          <Card elevation={0} sx={{ ...cardStyles.default, mb: 10 }}>
+            <CardContent sx={{ p: { xs: 6, sm: 8 } }}>
+              <Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
+                매장 정보
+              </Typography>
+
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+                <Controller
+                  name="businessName"
+                  control={businessControl}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      fullWidth
+                      label="매장명"
+                      error={!!businessErrors.businessName}
+                      helperText={businessErrors.businessName?.message}
+                    />
+                  )}
+                />
+
+                <Controller
+                  name="businessType"
+                  control={businessControl}
+                  render={({ field }) => (
+                    <FormControl fullWidth error={!!businessErrors.businessType}>
+                      <InputLabel>업종</InputLabel>
+                      <Select {...field} label="업종">
+                        <MenuItem value="restaurant">음식점</MenuItem>
+                        <MenuItem value="cafe">카페/베이커리</MenuItem>
+                        <MenuItem value="retail">소매/편의점</MenuItem>
+                        <MenuItem value="beauty">미용/뷰티</MenuItem>
+                        <MenuItem value="fitness">헬스/피트니스</MenuItem>
+                        <MenuItem value="education">학원/교육</MenuItem>
+                        <MenuItem value="service">서비스업</MenuItem>
+                        <MenuItem value="other">기타</MenuItem>
+                      </Select>
+                      {businessErrors.businessType && (
+                        <Typography variant="caption" color="error" sx={{ mt: 0.5, ml: 2 }}>
+                          {businessErrors.businessType.message}
+                        </Typography>
+                      )}
+                    </FormControl>
+                  )}
+                />
+
+                <Controller
+                  name="businessLocation"
+                  control={businessControl}
+                  render={({ field }) => (
+                    <TextField {...field} fullWidth label="주소" />
+                  )}
+                />
+
+                <Controller
+                  name="businessHours"
+                  control={businessControl}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      fullWidth
+                      label="영업시간"
+                      placeholder="예: 10:00 ~ 22:00"
+                    />
+                  )}
+                />
+              </Box>
+            </CardContent>
+          </Card>
+
+          {/* 비밀번호 변경 */}
+          <Card elevation={0} sx={{ ...cardStyles.default, mb: 10 }}>
+            <CardContent sx={{ p: { xs: 6, sm: 8 } }}>
+              <Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
+                비밀번호 변경
+              </Typography>
+
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+                <Controller
+                  name="currentPassword"
+                  control={passwordControl}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      fullWidth
+                      type={showCurrentPassword ? 'text' : 'password'}
+                      label="현재 비밀번호"
+                      placeholder="현재 비밀번호를 입력하세요"
+                      error={!!passwordErrors.currentPassword}
+                      helperText={passwordErrors.currentPassword?.message}
+                      InputProps={{
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <IconButton
+                              onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                              edge="end"
+                            >
+                              {showCurrentPassword ? <VisibilityOff /> : <Visibility />}
+                            </IconButton>
+                          </InputAdornment>
+                        ),
+                      }}
+                    />
+                  )}
+                />
+
+                <Controller
+                  name="newPassword"
+                  control={passwordControl}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      fullWidth
+                      type={showNewPassword ? 'text' : 'password'}
+                      label="새 비밀번호"
+                      placeholder="새 비밀번호를 입력하세요"
+                      error={!!passwordErrors.newPassword}
+                      helperText={passwordErrors.newPassword?.message || '8자 이상, 영문과 숫자를 포함해주세요'}
+                      InputProps={{
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <IconButton
+                              onClick={() => setShowNewPassword(!showNewPassword)}
+                              edge="end"
+                            >
+                              {showNewPassword ? <VisibilityOff /> : <Visibility />}
+                            </IconButton>
+                          </InputAdornment>
+                        ),
+                      }}
+                    />
+                  )}
+                />
+
+                <Controller
+                  name="confirmPassword"
+                  control={passwordControl}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      fullWidth
+                      type={showConfirmPassword ? 'text' : 'password'}
+                      label="비밀번호 확인"
+                      placeholder="비밀번호를 다시 입력하세요"
+                      error={!!passwordErrors.confirmPassword}
+                      helperText={passwordErrors.confirmPassword?.message}
+                      InputProps={{
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <IconButton
+                              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                              edge="end"
+                            >
+                              {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
+                            </IconButton>
+                          </InputAdornment>
+                        ),
+                      }}
+                    />
+                  )}
+                />
+
+                <Button
                   fullWidth
-                  type={showCurrentPassword ? 'text' : 'password'}
-                  label="현재 비밀번호"
-                  placeholder="현재 비밀번호를 입력하세요"
-                  error={!!passwordErrors.currentPassword}
-                  helperText={passwordErrors.currentPassword?.message}
-                  InputProps={{
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        <IconButton
-                          onClick={() => setShowCurrentPassword(!showCurrentPassword)}
-                          edge="end"
-                        >
-                          {showCurrentPassword ? <VisibilityOff /> : <Visibility />}
-                        </IconButton>
-                      </InputAdornment>
-                    ),
+                  variant="outlined"
+                  size="large"
+                  onClick={handlePasswordSubmit(onChangePassword)}
+                  sx={{
+                    mt: 1,
+                    py: 3,
+                    borderRadius: 3,
+                    fontSize: '1rem',
+                    fontWeight: 600,
+                    borderWidth: 2,
+                    '&:hover': {
+                      borderWidth: 2,
+                    },
                   }}
-                />
-              )}
-            />
-
-            <Controller
-              name="newPassword"
-              control={passwordControl}
-              render={({ field }) => (
-                <TextField
-                  {...field}
-                  fullWidth
-                  type={showNewPassword ? 'text' : 'password'}
-                  label="새 비밀번호"
-                  placeholder="새 비밀번호를 입력하세요"
-                  error={!!passwordErrors.newPassword}
-                  helperText={passwordErrors.newPassword?.message || '8자 이상, 영문과 숫자를 포함해주세요'}
-                  InputProps={{
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        <IconButton
-                          onClick={() => setShowNewPassword(!showNewPassword)}
-                          edge="end"
-                        >
-                          {showNewPassword ? <VisibilityOff /> : <Visibility />}
-                        </IconButton>
-                      </InputAdornment>
-                    ),
-                  }}
-                />
-              )}
-            />
-
-            <Controller
-              name="confirmPassword"
-              control={passwordControl}
-              render={({ field }) => (
-                <TextField
-                  {...field}
-                  fullWidth
-                  type={showConfirmPassword ? 'text' : 'password'}
-                  label="비밀번호 확인"
-                  placeholder="비밀번호를 다시 입력하세요"
-                  error={!!passwordErrors.confirmPassword}
-                  helperText={passwordErrors.confirmPassword?.message}
-                  InputProps={{
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        <IconButton
-                          onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                          edge="end"
-                        >
-                          {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
-                        </IconButton>
-                      </InputAdornment>
-                    ),
-                  }}
-                />
-              )}
-            />
+                >
+                  비밀번호 변경
+                </Button>
+              </Box>
+            </CardContent>
+          </Card>
 
+          {/* 액션 버튼 */}
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
             <Button
               fullWidth
-              variant="outlined"
+              variant="contained"
               size="large"
-              onClick={handlePasswordSubmit(onChangePassword)}
+              onClick={handleSave}
               sx={{
-                mt: 1,
-                py: { xs: 1.5, sm: 1.75 },
-                fontSize: { xs: 15, sm: 16 },
-                fontWeight: 600,
-                borderWidth: 2,
+                py: 3,
+                borderRadius: 3,
+                fontSize: '1rem',
+                fontWeight: 700,
+                background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
+                '&:hover': {
+                  background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
+                  opacity: 0.9,
+                },
               }}
             >
-              비밀번호 변경
+              저장하기
+            </Button>
+            <Button
+              fullWidth
+              variant="text"
+              size="large"
+              color="error"
+              onClick={() => setLogoutDialogOpen(true)}
+              sx={{
+                py: 3,
+                fontSize: '1rem',
+                fontWeight: 600,
+              }}
+            >
+              로그아웃
             </Button>
           </Box>
-        </Paper>
-
-        {/* 액션 버튼 */}
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          <Button
-            fullWidth
-            variant="contained"
-            size="large"
-            onClick={handleSave}
-            sx={{
-              py: { xs: 1.5, sm: 1.75 },
-              fontSize: { xs: 15, sm: 16 },
-              ...getGradientButtonStyle('primary'),
-            }}
-          >
-            저장하기
-          </Button>
-          <Button
-            fullWidth
-            variant="text"
-            size="large"
-            color="error"
-            onClick={() => setLogoutDialogOpen(true)}
-            sx={{
-              py: { xs: 1.5, sm: 1.75 },
-              fontSize: { xs: 15, sm: 16 },
-              fontWeight: 600,
-            }}
-          >
-            로그아웃
-          </Button>
-        </Box>
+        </Container>
       </Box>
 
       {/* 저장 완료 다이얼로그 */}
-      <Dialog open={successDialogOpen} onClose={() => setSuccessDialogOpen(false)}>
+      <Dialog
+        open={successDialogOpen}
+        onClose={() => setSuccessDialogOpen(false)}
+        PaperProps={{
+          sx: {
+            borderRadius: 4,
+            minWidth: 300,
+          },
+        }}
+      >
         <DialogContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
           <CheckCircle sx={{ fontSize: 64, color: 'success.main', mb: 2 }} />
-          <Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
+          <Typography variant="h6" sx={{ fontWeight: 700, mb: 1, fontSize: '1.25rem' }}>
             저장 완료
           </Typography>
-          <Typography variant="body2" color="text.secondary">
+          <Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
             프로필 정보가 업데이트되었습니다.
           </Typography>
         </DialogContent>
@@ -496,8 +536,15 @@ export default function ProfilePage() {
             }}
             sx={{
               minWidth: 120,
-              py: { xs: 1.25, sm: 1.5 },
-              ...getGradientButtonStyle('success'),
+              py: 2,
+              borderRadius: 2,
+              fontSize: '1rem',
+              fontWeight: 700,
+              background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
+              '&:hover': {
+                background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
+                opacity: 0.9,
+              },
             }}
           >
             확인
@@ -506,29 +553,51 @@ export default function ProfilePage() {
       </Dialog>
 
       {/* 로그아웃 확인 다이얼로그 */}
-      <Dialog open={logoutDialogOpen} onClose={() => setLogoutDialogOpen(false)}>
-        <DialogTitle>로그아웃</DialogTitle>
+      <Dialog
+        open={logoutDialogOpen}
+        onClose={() => setLogoutDialogOpen(false)}
+        PaperProps={{
+          sx: {
+            borderRadius: 4,
+            minWidth: 300,
+          },
+        }}
+      >
+        <DialogTitle sx={{ fontSize: '1.25rem', fontWeight: 700 }}>로그아웃</DialogTitle>
         <DialogContent>
-          <Typography variant="body1" sx={{ textAlign: 'center', py: 2 }}>
+          <Typography variant="body1" sx={{ textAlign: 'center', py: 2, fontSize: '1rem' }}>
             로그아웃 하시겠습니까?
           </Typography>
         </DialogContent>
-        <DialogActions>
+        <DialogActions sx={{ justifyContent: 'center', gap: 2, pb: 3 }}>
           <Button
             onClick={() => setLogoutDialogOpen(false)}
-            sx={{ fontWeight: 600 }}
+            sx={{
+              fontWeight: 600,
+              fontSize: '1rem',
+              py: 2,
+              px: 4,
+              borderRadius: 2,
+            }}
           >
             취소
           </Button>
           <Button
             variant="contained"
             onClick={handleLogout}
-            sx={{ ...getGradientButtonStyle('error') }}
+            color="error"
+            sx={{
+              fontWeight: 700,
+              fontSize: '1rem',
+              py: 2,
+              px: 4,
+              borderRadius: 2,
+            }}
           >
             확인
           </Button>
         </DialogActions>
       </Dialog>
-    </Box>
+    </>
   );
 }