동기화

2026-05-14 01:21:27 +09:00
parent acea2afce5
commit 958fe6b980
379 changed files with 21786 additions and 423 deletions
@@ -0,0 +1,129 @@
+/**
+ * GA 정산시스템 디자인 토큰 — 토스(Toss) 톤 조정
+ * main.tsx ConfigProvider 의 theme 에 주입되며,
+ * styles/variables.css 의 CSS 변수와 동기하여 사용한다.
+ */
+
+// ────────────────────────────────────────────────
+// 색상
+// ────────────────────────────────────────────────
+
+/** 브랜드 — 토스 시그니처 블루 */
+export const COLOR_PRIMARY        = '#3182F6';
+export const COLOR_PRIMARY_HOVER  = '#1B64DA';
+export const COLOR_PRIMARY_LIGHT  = '#EBF3FF';
+export const COLOR_PRIMARY_DARK   = '#0E4FC4';
+
+/** 시맨틱 — 토스 팔레트 */
+export const COLOR_SUCCESS        = '#13B47A';
+export const COLOR_SUCCESS_BG     = '#E8FAF3';
+export const COLOR_SUCCESS_BORDER = '#A3E6C8';
+
+export const COLOR_WARNING        = '#F2A024';
+export const COLOR_WARNING_BG     = '#FFF6E6';
+export const COLOR_WARNING_BORDER = '#F6D08A';
+
+export const COLOR_ERROR          = '#F04452';
+export const COLOR_ERROR_BG       = '#FEF0F1';
+export const COLOR_ERROR_BORDER   = '#F9B0B6';
+
+export const COLOR_INFO           = '#3182F6';
+export const COLOR_INFO_BG        = '#EBF3FF';
+export const COLOR_INFO_BORDER    = '#A8CAFE';
+
+/** Neutral Gray — 토스 팔레트 (8단계) */
+export const GRAY = {
+  50:  '#F9FAFB',
+  100: '#F2F4F6',
+  200: '#E5E8EB',
+  300: '#D1D6DB',
+  400: '#B0B8C1',
+  500: '#8B95A1',
+  600: '#4E5968',
+  700: '#333D4B',
+  800: '#191F28',
+  900: '#191F28',
+} as const;
+
+/** 금액 색상 */
+export const COLOR_MONEY_PLUS  = COLOR_SUCCESS;
+export const COLOR_MONEY_MINUS = COLOR_ERROR;
+export const COLOR_MONEY_ZERO  = GRAY[500];
+
+// ────────────────────────────────────────────────
+// 타이포그래피
+// ────────────────────────────────────────────────
+
+export const FONT_FAMILY = "'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif";
+
+export const FONT_SIZE = {
+  xs:   11,
+  sm:   13,
+  base: 15,   // 본문 기준 — 토스는 14보다 한 단계 키움
+  md:   16,
+  lg:   20,
+  xl:   24,
+  '2xl': 32,
+} as const;
+
+export const FONT_WEIGHT = {
+  normal:   400,
+  medium:   500,
+  semibold: 600,
+  bold:     700,
+} as const;
+
+export const LINE_HEIGHT = {
+  tight:  1.3,
+  normal: 1.5,
+  loose:  1.7,
+} as const;
+
+// ────────────────────────────────────────────────
+// 공간 (Spacing)
+// ────────────────────────────────────────────────
+
+export const SPACING = {
+  1:  4,
+  2:  8,
+  3: 12,
+  4: 16,
+  6: 24,
+  8: 32,
+  12: 48,
+  16: 64,
+} as const;
+
+// ────────────────────────────────────────────────
+// Border Radius — 토스 비율
+// ────────────────────────────────────────────────
+
+export const RADIUS = {
+  sm:   8,   // 칩, 작은 요소
+  md:   12,  // 버튼, 입력창
+  lg:   16,  // 카드
+  xl:   20,  // 큰 모달
+  full: 9999,
+} as const;
+
+// ────────────────────────────────────────────────
+// 그림자 — 매우 옅고 부드럽게 (토스 스타일)
+// ────────────────────────────────────────────────
+
+export const SHADOW = {
+  sm:  '0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04)',
+  md:  '0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06)',
+  lg:  '0 4px 16px rgba(0,0,0,0.10), 0 16px 48px rgba(0,0,0,0.08)',
+} as const;
+
+// ────────────────────────────────────────────────
+// 레이아웃
+// ────────────────────────────────────────────────
+
+export const LAYOUT = {
+  siderWidth:          240,
+  siderCollapsedWidth: 64,
+  headerHeight:        56,
+  contentPadding:      24,
+  pageMaxWidth:        1440,
+} as const;