mirror of
https://github.com/ktds-dg0501/kt-event-marketing-fe.git
synced 2026-06-13 06:59:09 +00:00
인증 영역 개발 완료 (로그인, 회원가입, 프로필 관리)
- 로그인 페이지: 이메일 + 비밀번호 로그인, 소셜 로그인 버튼 - 회원가입 페이지: 3단계 funnel (계정정보, 개인정보, 사업장정보) - 프로필 관리 페이지: 기본정보/매장정보 수정, 비밀번호 변경, 로그아웃 - MUI v6 + React Hook Form + Zod 검증 - Next.js 14 App Router, TypeScript 5 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
cherry2250
@@ -0,0 +1,187 @@
|
||||
/* CSS Variables */
|
||||
:root {
|
||||
/* Primary Colors */
|
||||
--color-primary-main: #E31E24;
|
||||
--color-primary-light: #FF4D52;
|
||||
--color-primary-dark: #C71820;
|
||||
|
||||
/* Secondary Colors */
|
||||
--color-secondary-main: #0066FF;
|
||||
--color-secondary-light: #4D94FF;
|
||||
--color-secondary-dark: #004DBF;
|
||||
|
||||
/* Grayscale */
|
||||
--color-gray-900: #1A1A1A;
|
||||
--color-gray-700: #4A4A4A;
|
||||
--color-gray-500: #9E9E9E;
|
||||
--color-gray-300: #D9D9D9;
|
||||
--color-gray-100: #F5F5F5;
|
||||
--color-gray-50: #FFFFFF;
|
||||
|
||||
/* Semantic Colors */
|
||||
--color-success: #00C853;
|
||||
--color-warning: #FFA000;
|
||||
--color-error: #D32F2F;
|
||||
--color-info: #0288D1;
|
||||
|
||||
/* Spacing (4px Grid) */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-s: 8px;
|
||||
--spacing-m: 16px;
|
||||
--spacing-l: 24px;
|
||||
--spacing-xl: 32px;
|
||||
--spacing-2xl: 48px;
|
||||
|
||||
/* Border Radius */
|
||||
--border-radius-sm: 4px;
|
||||
--border-radius-md: 8px;
|
||||
--border-radius-lg: 12px;
|
||||
--border-radius-xl: 16px;
|
||||
--border-radius-full: 9999px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Z-Index */
|
||||
--z-index-modal: 1300;
|
||||
--z-index-drawer: 1200;
|
||||
--z-index-app-bar: 1100;
|
||||
--z-index-fab: 1050;
|
||||
--z-index-sticky: 1020;
|
||||
}
|
||||
|
||||
/* CSS Reset & Base Styles */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
"Roboto", "Helvetica Neue", system-ui, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--color-gray-900);
|
||||
background-color: var(--color-gray-50);
|
||||
min-height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary-main);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-primary-light);
|
||||
}
|
||||
|
||||
/* Remove default button styles */
|
||||
button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Accessibility: Focus Indicators */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--color-secondary-main);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
::selection {
|
||||
background-color: var(--color-primary-light);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Scrollbar (Webkit) */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-gray-100);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-gray-300);
|
||||
border-radius: var(--border-radius-full);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-gray-500);
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
padding: 0 80px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile First - Hide on Mobile */
|
||||
.hide-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hide-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide on Desktop */
|
||||
.hide-desktop {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hide-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,253 @@
|
||||
import { createTheme } from '@mui/material/styles';
|
||||
|
||||
// KT 브랜드 컬러 시스템
|
||||
const colors = {
|
||||
// Primary: KT Red
|
||||
primary: {
|
||||
main: '#E31E24',
|
||||
light: '#FF4D52',
|
||||
dark: '#C71820',
|
||||
contrastText: '#FFFFFF',
|
||||
},
|
||||
// Secondary: AI Blue
|
||||
secondary: {
|
||||
main: '#0066FF',
|
||||
light: '#4D94FF',
|
||||
dark: '#004DBF',
|
||||
contrastText: '#FFFFFF',
|
||||
},
|
||||
// Grayscale
|
||||
gray: {
|
||||
900: '#1A1A1A', // Black
|
||||
700: '#4A4A4A',
|
||||
500: '#9E9E9E',
|
||||
300: '#D9D9D9',
|
||||
100: '#F5F5F5',
|
||||
50: '#FFFFFF', // White
|
||||
},
|
||||
// Semantic Colors
|
||||
success: {
|
||||
main: '#00C853',
|
||||
},
|
||||
warning: {
|
||||
main: '#FFA000',
|
||||
},
|
||||
error: {
|
||||
main: '#D32F2F',
|
||||
},
|
||||
info: {
|
||||
main: '#0288D1',
|
||||
},
|
||||
};
|
||||
|
||||
// Breakpoints (Mobile First)
|
||||
const breakpoints = {
|
||||
values: {
|
||||
xs: 320,
|
||||
sm: 768,
|
||||
md: 1024,
|
||||
lg: 1280,
|
||||
xl: 1920,
|
||||
},
|
||||
};
|
||||
|
||||
// Typography (Pretendard)
|
||||
const typography = {
|
||||
fontFamily: '"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", system-ui, sans-serif',
|
||||
// Display
|
||||
h1: {
|
||||
fontSize: '28px',
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.3,
|
||||
letterSpacing: '-0.5px',
|
||||
'@media (min-width:768px)': {
|
||||
fontSize: '32px',
|
||||
},
|
||||
'@media (min-width:1024px)': {
|
||||
fontSize: '36px',
|
||||
},
|
||||
},
|
||||
// H1
|
||||
h2: {
|
||||
fontSize: '24px',
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.3,
|
||||
letterSpacing: '-0.3px',
|
||||
'@media (min-width:768px)': {
|
||||
fontSize: '28px',
|
||||
},
|
||||
'@media (min-width:1024px)': {
|
||||
fontSize: '32px',
|
||||
},
|
||||
},
|
||||
// H2
|
||||
h3: {
|
||||
fontSize: '20px',
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.4,
|
||||
letterSpacing: '-0.2px',
|
||||
'@media (min-width:768px)': {
|
||||
fontSize: '22px',
|
||||
},
|
||||
'@media (min-width:1024px)': {
|
||||
fontSize: '24px',
|
||||
},
|
||||
},
|
||||
// H3
|
||||
h4: {
|
||||
fontSize: '18px',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.4,
|
||||
letterSpacing: '0px',
|
||||
'@media (min-width:768px)': {
|
||||
fontSize: '20px',
|
||||
},
|
||||
},
|
||||
// Body Large
|
||||
body1: {
|
||||
fontSize: '16px',
|
||||
fontWeight: 400,
|
||||
lineHeight: 1.5,
|
||||
letterSpacing: '0px',
|
||||
'@media (min-width:768px)': {
|
||||
fontSize: '18px',
|
||||
},
|
||||
},
|
||||
// Body Medium
|
||||
body2: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 400,
|
||||
lineHeight: 1.5,
|
||||
letterSpacing: '0px',
|
||||
'@media (min-width:768px)': {
|
||||
fontSize: '16px',
|
||||
},
|
||||
},
|
||||
// Body Small
|
||||
caption: {
|
||||
fontSize: '12px',
|
||||
fontWeight: 400,
|
||||
lineHeight: 1.5,
|
||||
letterSpacing: '0px',
|
||||
'@media (min-width:768px)': {
|
||||
fontSize: '14px',
|
||||
},
|
||||
},
|
||||
// Button
|
||||
button: {
|
||||
fontSize: '16px',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.5,
|
||||
letterSpacing: '0px',
|
||||
textTransform: 'none' as const,
|
||||
},
|
||||
};
|
||||
|
||||
// Spacing (4px Grid System)
|
||||
const spacing = 4;
|
||||
|
||||
// Component Overrides
|
||||
const components = {
|
||||
MuiButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: '8px',
|
||||
padding: '12px 20px',
|
||||
boxShadow: 'none',
|
||||
'&:hover': {
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
sizeLarge: {
|
||||
height: '48px',
|
||||
padding: '16px 24px',
|
||||
},
|
||||
sizeMedium: {
|
||||
height: '44px',
|
||||
padding: '12px 20px',
|
||||
},
|
||||
sizeSmall: {
|
||||
height: '36px',
|
||||
padding: '8px 16px',
|
||||
},
|
||||
contained: {
|
||||
boxShadow: '0 2px 4px rgba(227, 30, 36, 0.2)',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiCard: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
border: '1px solid #E0E0E0',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTextField: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '8px',
|
||||
'& fieldset': {
|
||||
borderColor: '#D9D9D9',
|
||||
},
|
||||
'&:hover fieldset': {
|
||||
borderColor: '#E31E24',
|
||||
},
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: '#0066FF',
|
||||
borderWidth: '2px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiCheckbox: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'&.Mui-checked': {
|
||||
color: '#E31E24',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiRadio: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'&.Mui-checked': {
|
||||
color: '#E31E24',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Create MUI Theme
|
||||
export const theme = createTheme({
|
||||
palette: {
|
||||
primary: colors.primary,
|
||||
secondary: colors.secondary,
|
||||
success: colors.success,
|
||||
warning: colors.warning,
|
||||
error: colors.error,
|
||||
info: colors.info,
|
||||
grey: colors.gray,
|
||||
background: {
|
||||
default: '#FFFFFF',
|
||||
paper: '#FFFFFF',
|
||||
},
|
||||
text: {
|
||||
primary: colors.gray[900],
|
||||
secondary: colors.gray[700],
|
||||
disabled: colors.gray[500],
|
||||
},
|
||||
},
|
||||
breakpoints,
|
||||
typography,
|
||||
spacing,
|
||||
components,
|
||||
shape: {
|
||||
borderRadius: 8,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user