https://lhkef.or.kr/js/components/atoms/skeleton-shimmer/constants/skeleton-shimmer.config.js

1/** I. 기본 정보
2 * ==========================================
3 * <Skeleton Shimmer - Configuration>
4 *
5 * Author: Innobaebae Co.
6 * Created: 2025-01-27
7 * Version: 1.0.0
8 * Dependency: 없음
9 * Cross browser: Chrome 55+, Firefox 52+, Safari 13+, Edge 79+
10 *
11 * ==========================================
12 *
13 * 1. 목적:
14 *    Skeleton Shimmer 컴포넌트 설정 상수
15 *
16 * 2. 특징:
17 *    - 색상, 애니메이션 속도, 위치 설정
18 *    - 커스터마이징 가능한 옵션
19 *
20 * 3. 사용법:
21 *    import { SKELETON_SHIMMER_CONFIG } from './constants/skeleton-shimmer.config.js';
22 */
23
24// @ts-check
25
26/**
27 * Skeleton Shimmer 기본 설정
28 */
29export const SKELETON_SHIMMER_CONFIG = {
30	// === 색상 설정 ===
31	COLORS: {
32		BASE:      '#f0f0f0',    // 기본 배경색
33		HIGHLIGHT: '#e0e0e0',    // 하이라이트 색상
34	},
35
36	// === 애니메이션 설정 ===
37	ANIMATION: {
38		DURATION:   1.5,         // 애니메이션 지속 시간 (초)
39		TIMING:     'linear',    // 타이밍 함수
40		ITERATION:  'infinite',  // 반복 횟수
41		DIRECTION:  'normal',    // 방향
42	},
43
44	// === 그라디언트 설정 ===
45	GRADIENT: {
46		ANGLE:      90,          // 그라디언트 각도 (도)
47		STOPS: [
48			{ color: '#f0f0f0', position: 0 },
49			{ color: '#e0e0e0', position: 20 },
50			{ color: '#f0f0f0', position: 40 },
51			{ color: '#f0f0f0', position: 100 },
52		],
53		SIZE:       '200%',      // background-size
54	},
55
56	// === 위치 설정 ===
57	POSITION: {
58		TYPE:   'absolute',      // position 값
59		TOP:    0,
60		LEFT:   0,
61		WIDTH:  '100%',
62		HEIGHT: '100%',
63		Z_INDEX: 1,
64	},
65
66	// === 스타일 설정 ===
67	STYLE: {
68		BORDER_RADIUS: '0px',    // 모서리 둥글기 (기본값 0, 각 어댑터에서 오버라이드 가능)
69	},
70
71	// === CSS 클래스 ===
72	CLASSES: {
73		SHIMMER: 'skeleton-shimmer',
74		ACTIVE:  'skeleton-shimmer--active',
75		HIDDEN:  'skeleton-shimmer--hidden',
76	},
77
78	// === 데이터 속성 ===
79	ATTRIBUTES: {
80		SHIMMER:         'data-skeleton-shimmer',
81		BASE_COLOR:      'data-shimmer-base-color',
82		HIGHLIGHT_COLOR: 'data-shimmer-highlight-color',
83		SPEED:           'data-shimmer-speed',
84		DIRECTION:       'data-shimmer-direction',
85	},
86};