P82282866/kt-event-marketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI 색상 체계 통일 및 CSS 변수 개선

Browse Source 
- CSS 변수 색상 팔레트 확장 (Primary, Secondary, Grayscale 세분화)
- 배경 및 경계선 색상 변수 추가 (bg-primary/secondary/tertiary, border-light/medium/dark)
- 모든 컴포넌트의 하드코딩된 색상값을 CSS 변수로 교체
- 버튼, 카드, Input, Modal, Navigation 컴포넌트 색상 통일
- 일관된 색상 시스템으로 유지보수성 및 확장성 향상

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
doyeon 2025-10-21 09:57:51 +09:00
parent f1ad9a79ea
commit 59f5c5a7ed
6 changed files with 111 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
design/uiux/prototype/css/components/buttons.css
View File

@ -72,16 +72,16 @@
} }
.btn-secondary:hover:not(:disabled) { .btn-secondary:hover:not(:disabled) {
background-color: #FFF5F5; /* 5% Red tint */ background-color: var(--color-primary-50);
} }
.btn-secondary:active:not(:disabled) { .btn-secondary:active:not(:disabled) {
background-color: #FFEBEB; /* 10% Red tint */ background-color: var(--color-primary-100);
} }
.btn-secondary:disabled { .btn-secondary:disabled {
background-color: var(--color-white); background-color: var(--color-white);
border-color: var(--color-gray-300); border-color: var(--border-medium);
color: var(--color-gray-500); color: var(--color-gray-500);
cursor: not-allowed; cursor: not-allowed;
} }
@ -97,11 +97,11 @@
} }
.btn-text:hover:not(:disabled) { .btn-text:hover:not(:disabled) {
background-color: #FFF5F5; /* 5% Red tint */ background-color: var(--color-primary-50);
} }
.btn-text:active:not(:disabled) { .btn-text:active:not(:disabled) {
background-color: #FFEBEB; /* 10% Red tint */ background-color: var(--color-primary-100);
} }
.btn-text:disabled { .btn-text:disabled {

19
design/uiux/prototype/css/components/cards.css
View File

@ -11,8 +11,8 @@
======================================== */ ======================================== */
.card { .card {
background-color: var(--color-white); background-color: var(--bg-primary);
border: 1px solid #E0E0E0; border: 1px solid var(--border-light);
border-radius: var(--radius-m); border-radius: var(--radius-m);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
padding: var(--spacing-l); padding: var(--spacing-l);
@ -21,7 +21,7 @@
.card:hover { .card:hover {
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 4px 12px rgba(227, 30, 36, 0.12); box-shadow: var(--shadow-lg);
} }
.card-selected { .card-selected {
@ -34,7 +34,7 @@
======================================== */ ======================================== */
.event-card { .event-card {
background-color: var(--color-white); background-color: var(--bg-primary);
border-radius: var(--radius-m); border-radius: var(--radius-m);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
overflow: hidden; overflow: hidden;
@ -88,7 +88,7 @@
======================================== */ ======================================== */
.stat-card { .stat-card {
background-color: var(--color-white); background-color: var(--bg-primary);
border-radius: var(--radius-l); border-radius: var(--radius-l);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
padding: var(--spacing-l); padding: var(--spacing-l);
@ -168,8 +168,8 @@
.ai-card { .ai-card {
position: relative; position: relative;
background-color: var(--color-white); background-color: var(--bg-primary);
border: 1px solid #E0E0E0; border: 1px solid var(--border-light);
border-radius: var(--radius-m); border-radius: var(--radius-m);
padding: var(--spacing-l); padding: var(--spacing-l);
cursor: pointer; cursor: pointer;
@ -177,13 +177,14 @@
} }
.ai-card:hover { .ai-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: var(--color-primary-light);
box-shadow: var(--shadow-lg);
transform: translateY(-2px); transform: translateY(-2px);
} }
.ai-card--selected { .ai-card--selected {
border: 2px solid var(--color-primary); border: 2px solid var(--color-primary);
background-color: #FFF5F5; background-color: var(--color-primary-50);
padding: calc(var(--spacing-l) - 1px); padding: calc(var(--spacing-l) - 1px);
} }

40
design/uiux/prototype/css/components/inputs.css
View File

@ -53,9 +53,9 @@
width: 100%; width: 100%;
height: var(--input-height); height: var(--input-height);
padding: var(--spacing-m); padding: var(--spacing-m);
border: 1px solid var(--color-gray-300); border: 1px solid var(--border-medium);
border-radius: var(--radius-s); border-radius: var(--radius-s);
background-color: var(--color-white); background-color: var(--bg-primary);
font-family: var(--font-family); font-family: var(--font-family);
font-size: var(--font-size-body-large); font-size: var(--font-size-body-large);
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
@ -77,8 +77,8 @@
} }
.input:disabled { .input:disabled {
background-color: var(--color-gray-100); background-color: var(--bg-tertiary);
border-color: #E0E0E0; border-color: var(--border-light);
color: var(--color-gray-500); color: var(--color-gray-500);
cursor: not-allowed; cursor: not-allowed;
} }
@ -103,9 +103,9 @@
width: 100%; width: 100%;
min-height: var(--textarea-min-height); min-height: var(--textarea-min-height);
padding: var(--spacing-m); padding: var(--spacing-m);
border: 1px solid var(--color-gray-300); border: 1px solid var(--border-medium);
border-radius: var(--radius-s); border-radius: var(--radius-s);
background-color: var(--color-white); background-color: var(--bg-primary);
font-family: var(--font-family); font-family: var(--font-family);
font-size: var(--font-size-body-medium); font-size: var(--font-size-body-medium);
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
@ -128,8 +128,8 @@
} }
.textarea:disabled { .textarea:disabled {
background-color: var(--color-gray-100); background-color: var(--bg-tertiary);
border-color: #E0E0E0; border-color: var(--border-light);
color: var(--color-gray-500); color: var(--color-gray-500);
cursor: not-allowed; cursor: not-allowed;
resize: none; resize: none;
@ -144,9 +144,9 @@
height: var(--input-height); height: var(--input-height);
padding: var(--spacing-m); padding: var(--spacing-m);
padding-right: 40px; padding-right: 40px;
border: 1px solid var(--color-gray-300); border: 1px solid var(--border-medium);
border-radius: var(--radius-s); border-radius: var(--radius-s);
background-color: var(--color-white); background-color: var(--bg-primary);
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="%239E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="%239E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 16px center; background-position: right 16px center;
@ -168,8 +168,8 @@
} }
.select:disabled { .select:disabled {
background-color: var(--color-gray-100); background-color: var(--bg-tertiary);
border-color: #E0E0E0; border-color: var(--border-light);
color: var(--color-gray-500); color: var(--color-gray-500);
cursor: not-allowed; cursor: not-allowed;
} }
@ -191,9 +191,9 @@
appearance: none; appearance: none;
width: 24px; width: 24px;
height: 24px; height: 24px;
border: 2px solid var(--color-gray-300); border: 2px solid var(--border-medium);
border-radius: var(--radius-xs); border-radius: var(--radius-xs);
background-color: var(--color-white); background-color: var(--bg-primary);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: all var(--transition-fast) var(--ease-out); transition: all var(--transition-fast) var(--ease-out);
@ -223,8 +223,8 @@
} }
.checkbox:disabled { .checkbox:disabled {
background-color: var(--color-gray-100); background-color: var(--bg-tertiary);
border-color: #E0E0E0; border-color: var(--border-light);
cursor: not-allowed; cursor: not-allowed;
} }
@ -251,9 +251,9 @@
appearance: none; appearance: none;
width: 24px; width: 24px;
height: 24px; height: 24px;
border: 2px solid var(--color-gray-300); border: 2px solid var(--border-medium);
border-radius: 50%; border-radius: 50%;
background-color: var(--color-white); background-color: var(--bg-primary);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: all var(--transition-fast) var(--ease-out); transition: all var(--transition-fast) var(--ease-out);
@ -282,8 +282,8 @@
} }
.radio:disabled { .radio:disabled {
background-color: var(--color-gray-100); background-color: var(--bg-tertiary);
border-color: #E0E0E0; border-color: var(--border-light);
cursor: not-allowed; cursor: not-allowed;
} }

34
design/uiux/prototype/css/components/modals.css
View File

@ -16,7 +16,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.5); background-color: var(--bg-overlay);
z-index: var(--z-modal-backdrop); z-index: var(--z-modal-backdrop);
display: flex; display: flex;
align-items: center; align-items: center;
@ -30,7 +30,7 @@
======================================== */ ======================================== */
.modal { .modal {
background-color: var(--color-white); background-color: var(--bg-primary);
border-radius: var(--radius-m); border-radius: var(--radius-m);
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl);
max-width: 600px; max-width: 600px;
@ -62,7 +62,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--spacing-l); padding: var(--spacing-l);
border-bottom: 1px solid var(--color-gray-300); border-bottom: 1px solid var(--border-light);
} }
.modal__title { .modal__title {
@ -97,7 +97,7 @@
justify-content: flex-end; justify-content: flex-end;
gap: var(--spacing-m); gap: var(--spacing-m);
padding: var(--spacing-l); padding: var(--spacing-l);
border-top: 1px solid var(--color-gray-300); border-top: 1px solid var(--border-light);
} }
/* ======================================== /* ========================================
@ -109,9 +109,9 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: var(--color-white); background-color: var(--bg-primary);
border-radius: var(--radius-l) var(--radius-l) 0 0; border-radius: var(--radius-l) var(--radius-l) 0 0;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-lg);
max-height: 90vh; max-height: 90vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -122,7 +122,7 @@
.bottom-sheet__handle { .bottom-sheet__handle {
width: 40px; width: 40px;
height: 4px; height: 4px;
background-color: var(--color-gray-300); background-color: var(--border-medium);
border-radius: var(--radius-xs); border-radius: var(--radius-xs);
margin: var(--spacing-m) auto; margin: var(--spacing-m) auto;
cursor: grab; cursor: grab;
@ -133,7 +133,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 var(--spacing-l) var(--spacing-l); padding: 0 var(--spacing-l) var(--spacing-l);
border-bottom: 1px solid var(--color-gray-300); border-bottom: 1px solid var(--border-light);
} }
.bottom-sheet__title { .bottom-sheet__title {
@ -168,7 +168,7 @@
justify-content: flex-end; justify-content: flex-end;
gap: var(--spacing-m); gap: var(--spacing-m);
padding: var(--spacing-l); padding: var(--spacing-l);
border-top: 1px solid var(--color-gray-300); border-top: 1px solid var(--border-light);
} }
/* ======================================== /* ========================================
@ -247,7 +247,7 @@
======================================== */ ======================================== */
.dialog { .dialog {
background-color: var(--color-white); background-color: var(--bg-primary);
border-radius: var(--radius-m); border-radius: var(--radius-m);
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl);
max-width: 400px; max-width: 400px;
@ -258,7 +258,7 @@
.dialog__header { .dialog__header {
padding: var(--spacing-l); padding: var(--spacing-l);
border-bottom: 1px solid var(--color-gray-300); border-bottom: 1px solid var(--border-light);
} }
.dialog__title { .dialog__title {
@ -284,7 +284,7 @@
justify-content: flex-end; justify-content: flex-end;
gap: var(--spacing-m); gap: var(--spacing-m);
padding: var(--spacing-l); padding: var(--spacing-l);
border-top: 1px solid var(--color-gray-300); border-top: 1px solid var(--border-light);
} }
/* ======================================== /* ========================================
@ -355,8 +355,8 @@
top: 100%; top: 100%;
left: 0; left: 0;
margin-top: var(--spacing-xs); margin-top: var(--spacing-xs);
background-color: var(--color-white); background-color: var(--bg-primary);
border: 1px solid var(--color-gray-300); border: 1px solid var(--border-light);
border-radius: var(--radius-s); border-radius: var(--radius-s);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
min-width: 200px; min-width: 200px;
@ -376,15 +376,15 @@
} }
.dropdown__item:hover { .dropdown__item:hover {
background-color: var(--color-gray-100); background-color: var(--bg-tertiary);
} }
.dropdown__item:active { .dropdown__item:active {
background-color: var(--color-gray-300); background-color: var(--bg-secondary);
} }
.dropdown__divider { .dropdown__divider {
height: 1px; height: 1px;
background-color: var(--color-gray-300); background-color: var(--border-light);
margin: var(--spacing-xs) 0; margin: var(--spacing-xs) 0;
} }

20
design/uiux/prototype/css/components/navigation.css
View File

@ -16,8 +16,8 @@
left: 0; left: 0;
right: 0; right: 0;
height: var(--app-bar-height); height: var(--app-bar-height);
background-color: var(--color-white); background-color: var(--bg-primary);
border-bottom: 1px solid var(--color-gray-300); border-bottom: 1px solid var(--border-light);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
z-index: var(--z-sticky); z-index: var(--z-sticky);
} }
@ -68,8 +68,8 @@
left: 0; left: 0;
right: 0; right: 0;
height: var(--bottom-nav-height); height: var(--bottom-nav-height);
background-color: var(--color-white); background-color: var(--bg-primary);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); box-shadow: var(--shadow-md);
z-index: var(--z-fixed); z-index: var(--z-fixed);
} }
@ -128,7 +128,7 @@
.tab-nav { .tab-nav {
display: flex; display: flex;
gap: var(--spacing-s); gap: var(--spacing-s);
border-bottom: 1px solid var(--color-gray-300); border-bottom: 1px solid var(--border-light);
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@ -194,7 +194,7 @@
} }
.breadcrumb__separator { .breadcrumb__separator {
color: var(--color-gray-300); color: var(--color-gray-400);
} }
.breadcrumb__item--active { .breadcrumb__item--active {
@ -246,8 +246,8 @@
/* Pending */ /* Pending */
.stepper__step--pending .stepper__circle { .stepper__step--pending .stepper__circle {
background-color: var(--color-gray-100); background-color: var(--bg-tertiary);
border: 1px solid var(--color-gray-300); border: 1px solid var(--border-medium);
color: var(--color-gray-500); color: var(--color-gray-500);
} }
@ -267,7 +267,7 @@
.stepper__line { .stepper__line {
flex: 1; flex: 1;
height: 2px; height: 2px;
background-color: var(--color-gray-300); background-color: var(--border-medium);
margin: 0 var(--spacing-s); margin: 0 var(--spacing-s);
} }
@ -282,7 +282,7 @@
.progress-bar { .progress-bar {
width: 100%; width: 100%;
height: 48px; height: 48px;
background-color: var(--color-gray-100); background-color: var(--bg-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
overflow: hidden; overflow: hidden;
position: relative; position: relative;

55
design/uiux/prototype/css/variables.css
View File

@ -11,39 +11,82 @@
Primary Colors (KT Red) Primary Colors (KT Red)
======================================== */ ======================================== */
--color-primary: #E31E24; --color-primary: #E31E24;
--color-primary-light: #FF4D52; --color-primary-light: #FF5A5F;
--color-primary-dark: #C71820; --color-primary-dark: #C01015;
--color-primary-50: #FFF5F5;
--color-primary-100: #FFE5E6;
--color-primary-200: #FFCCCE;
/* ======================================== /* ========================================
Secondary Colors (AI Blue) Secondary Colors (AI Blue)
======================================== */ ======================================== */
--color-secondary: #0066FF; --color-secondary: #0066FF;
--color-secondary-light: #4D94FF; --color-secondary-light: #4D94FF;
--color-secondary-dark: #004DBF; --color-secondary-dark: #0052CC;
--color-secondary-50: #F0F7FF;
--color-secondary-100: #E0EFFF;
--color-secondary-200: #B8DBFF;
/* ======================================== /* ========================================
Grayscale Grayscale
======================================== */ ======================================== */
--color-black: #1A1A1A; /* Gray-900 */ --color-black: #1A1A1A; /* Gray-900 */
--color-gray-800: #333333;
--color-gray-700: #4A4A4A; --color-gray-700: #4A4A4A;
--color-gray-600: #6B6B6B;
--color-gray-500: #9E9E9E; --color-gray-500: #9E9E9E;
--color-gray-400: #BDBDBD;
--color-gray-300: #D9D9D9; --color-gray-300: #D9D9D9;
--color-gray-200: #EEEEEE;
--color-gray-100: #F5F5F5; --color-gray-100: #F5F5F5;
--color-white: #FFFFFF; /* Gray-50 */ --color-gray-50: #FAFAFA;
--color-white: #FFFFFF;
/* ======================================== /* ========================================
Semantic Colors Semantic Colors
======================================== */ ======================================== */
--color-success: #00C853; --color-success: #00C853;
--color-success-light: #5EFC82;
--color-success-dark: #00A344;
--color-success-bg: #E8F5E9;
--color-warning: #FFA000; --color-warning: #FFA000;
--color-error: #D32F2F; --color-warning-light: #FFB333;
--color-warning-dark: #CC8000;
--color-warning-bg: #FFF8E1;
--color-error: #E31E24;
--color-error-light: #FF5A5F;
--color-error-dark: #C01015;
--color-error-bg: #FFEBEE;
--color-info: #0288D1; --color-info: #0288D1;
--color-info-light: #4FC3F7;
--color-info-dark: #01579B;
--color-info-bg: #E1F5FE;
/* ======================================== /* ========================================
Gradient Gradient
======================================== */ ======================================== */
--gradient-primary: linear-gradient(135deg, #E31E24 0%, #FF4D52 100%); --gradient-primary: linear-gradient(135deg, #E31E24 0%, #FF5A5F 100%);
--gradient-secondary: linear-gradient(135deg, #0066FF 0%, #4D94FF 100%); --gradient-secondary: linear-gradient(135deg, #0066FF 0%, #4D94FF 100%);
--gradient-success: linear-gradient(135deg, #00C853 0%, #5EFC82 100%);
--gradient-warning: linear-gradient(135deg, #FFA000 0%, #FFB333 100%);
/* ========================================
Background Colors
======================================== */
--bg-primary: #FFFFFF;
--bg-secondary: #FAFAFA;
--bg-tertiary: #F5F5F5;
--bg-overlay: rgba(0, 0, 0, 0.5);
/* ========================================
Border Colors
======================================== */
--border-light: #EEEEEE;
--border-medium: #D9D9D9;
--border-dark: #BDBDBD;
/* ======================================== /* ========================================
Typography - Font Family Typography - Font Family