shared-dg05-dodari/kt-event-marketing-fe
7
0
Fork 0
mirror of https://github.com/ktds-dg0501/kt-event-marketing-fe.git synced 2025-12-06 10:56:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

ContentEditStep 페이지 디자인 통일 및 카드 크기 동일화

Browse Source 
공통 디자인 시스템에 맞춰 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
This commit is contained in:
cherry2250 2025-10-27 16:18:46 +09:00
parent 47ed0b5a7c
commit f2d533df09
1 changed files with 47 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/app/(main)/events/create/steps/ContentEditStep.tsx
View File

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