From f2d533df09f75fd5d7a48e1b4a36b922478a263d Mon Sep 17 00:00:00 2001
From: cherry2250 <kcr7812@naver.com>
Date: Mon, 27 Oct 2025 16:18:46 +0900
Subject: [PATCH] =?UTF-8?q?ContentEditStep=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8=20=ED=86=B5=EC=9D=BC=20=EB=B0=8F?=
 =?UTF-8?q?=20=EC=B9=B4=EB=93=9C=20=ED=81=AC=EA=B8=B0=20=EB=8F=99=EC=9D=BC?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

공통 디자인 시스템에 맞춰 ContentEditStep 페이지를 리디자인하고
미리보기/편집 카드의 높이를 동일하게 조정했습니다.

주요 변경사항:
- cardStyles, colors, responsiveText 공통 디자인 시스템 적용
- 페이지 배경: colors.gray[50]
- 양쪽 카드에 height: '100%' 추가하여 크기 동일화
- 카드 패딩: p: { xs: 6, sm: 8 }로 통일
- Grid spacing: 6으로 증가
- 헤더 및 섹션 여백 통일 (mb: 10, mb: 6)
- 미리보기 아이콘 크기 64px, 색상 purple 적용
- Edit 아이콘 색상 purple 적용
- TextField rows 4로 증가 (참여안내 입력 공간 확대)
- 버튼 상단 여백 mt: 10으로 증가

반응형 타이포그래피 적용:
- 헤더: responsiveText.h3
- 섹션 제목: responsiveText.h4
- 본문 텍스트: responsiveText.body1, body2
---
 .../events/create/steps/ContentEditStep.tsx   | 109 ++++++++----------
 1 file changed, 47 insertions(+), 62 deletions(-)

diff --git a/src/app/(main)/events/create/steps/ContentEditStep.tsx b/src/app/(main)/events/create/steps/ContentEditStep.tsx
index e8d122a..5f8f659 100644
--- a/src/app/(main)/events/create/steps/ContentEditStep.tsx
+++ b/src/app/(main)/events/create/steps/ContentEditStep.tsx
@@ -11,24 +11,7 @@ import {
   IconButton,
 } from '@mui/material';
 import { ArrowBack, Edit } from '@mui/icons-material';
-
-// 디자인 시스템 색상
-const colors = {
-  pink: '#F472B6',
-  purple: '#C084FC',
-  purpleLight: '#E9D5FF',
-  blue: '#60A5FA',
-  mint: '#34D399',
-  orange: '#FB923C',
-  yellow: '#FBBF24',
-  gray: {
-    900: '#1A1A1A',
-    700: '#4A4A4A',
-    500: '#9E9E9E',
-    300: '#D9D9D9',
-    100: '#F5F5F5',
-  },
-};
+import { cardStyles, colors, responsiveText } from '@/shared/lib/button-styles';
 
 interface ContentEditStepProps {
   initialTitle: string;
@@ -57,71 +40,73 @@ export default function ContentEditStep({
   };
 
   return (
-    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 20 }}>
-      <Container maxWidth="lg" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 6, md: 8 } }}>
+    <Box sx={{ minHeight: '100vh', bgcolor: colors.gray[50], pt: { xs: 7, sm: 8 }, pb: 10 }}>
+      <Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
         {/* Header */}
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 8 }}>
-          <IconButton onClick={onBack}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 10 }}>
+          <IconButton onClick={onBack} sx={{ width: 48, height: 48 }}>
             <ArrowBack />
           </IconButton>
-          <Typography variant="h5" sx={{ fontWeight: 700 }}>
+          <Typography variant="h5" sx={{ ...responsiveText.h3, fontWeight: 700 }}>
             콘텐츠 편집
           </Typography>
         </Box>
 
-        <Grid container spacing={4}>
+        <Grid container spacing={6}>
           {/* Preview Section */}
           <Grid item xs={12} md={6}>
-            <Typography variant="h6" sx={{ fontWeight: 700, mb: 3 }}>
+            <Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
               미리보기
             </Typography>
-            <Card elevation={0} sx={{ borderRadius: 4 }}>
-              <Box
-                sx={{
-                  width: '100%',
-                  aspectRatio: '1 / 1',
-                  bgcolor: 'grey.100',
-                  borderRadius: '12px 12px 0 0',
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  p: 4,
-                  textAlign: 'center',
-                }}
-              >
-                <span className="material-icons" style={{ fontSize: 48, marginBottom: 16 }}>
-                  celebration
-                </span>
-                <Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
-                  {title || '제목을 입력하세요'}
-                </Typography>
-                <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
-                  {prize || '경품을 입력하세요'}
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  {guide || '참여 안내를 입력하세요'}
-                </Typography>
-              </Box>
+            <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
+              <CardContent sx={{ p: { xs: 6, sm: 8 } }}>
+                <Box
+                  sx={{
+                    width: '100%',
+                    aspectRatio: '1 / 1',
+                    bgcolor: colors.gray[100],
+                    borderRadius: 3,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    p: 6,
+                    textAlign: 'center',
+                  }}
+                >
+                  <span className="material-icons" style={{ fontSize: 64, marginBottom: 24, color: colors.purple }}>
+                    celebration
+                  </span>
+                  <Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 2 }}>
+                    {title || '제목을 입력하세요'}
+                  </Typography>
+                  <Typography variant="body1" color="text.secondary" sx={{ ...responsiveText.body1, mb: 2 }}>
+                    {prize || '경품을 입력하세요'}
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary" sx={{ ...responsiveText.body2 }}>
+                    {guide || '참여 안내를 입력하세요'}
+                  </Typography>
+                </Box>
+              </CardContent>
             </Card>
           </Grid>
 
           {/* Edit Section */}
           <Grid item xs={12} md={6}>
-            <Typography variant="h6" sx={{ fontWeight: 700, mb: 3 }}>
+            <Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
               편집
             </Typography>
 
-            <Card elevation={0} sx={{ borderRadius: 4, mb: 3 }}>
-              <CardContent sx={{ p: 4 }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
-                  <Edit color="primary" />
-                  <Typography variant="h6" sx={{ fontWeight: 700 }}>
+            <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
+              <CardContent sx={{ p: { xs: 6, sm: 8 } }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 6 }}>
+                  <Edit sx={{ color: colors.purple, fontSize: 28 }} />
+                  <Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700 }}>
                     텍스트 편집
                   </Typography>
                 </Box>
 
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                   <Box>
                     <TextField
                       fullWidth
@@ -151,7 +136,7 @@ export default function ContentEditStep({
                       value={guide}
                       onChange={(e) => setGuide(e.target.value)}
                       multiline
-                      rows={3}
+                      rows={4}
                       inputProps={{ maxLength: 100 }}
                       helperText={`${guide.length}/100자`}
                     />
@@ -163,7 +148,7 @@ export default function ContentEditStep({
         </Grid>
 
         {/* Action Buttons */}
-        <Box sx={{ display: 'flex', gap: 4, mt: 5 }}>
+        <Box sx={{ display: 'flex', gap: 4, mt: 10 }}>
           <Button
             fullWidth
             variant="outlined"