11ㅉㄴ

/* 깜빡임 On 상태 */
.blink-on {
    background-color: #ffcdd2 !important;
    color: #c62828 !important;          
    font-weight: bold;
}

/* 깜빡임 Off 상태 */
.blink-off {
    background-color: transparent !important;
    color: inherit !important;
}



class CellBlinkManager {
    /**
     * @param {string} gridId - jqxGrid의 jQuery 선택자 ID (예: '#jqxgrid')
     */
    constructor(gridId) {
        this.$grid = $(gridId);
        // { 'row_field': { intervalId: number, isBlinkOn: boolean, blinkIntervalMs: number } } 형태로 저장
        this.timers = {};
    }

    /**
     * 특정 셀의 깜빡임을 시작합니다.
     * 이미 깜빡이는 셀이라면 멈춘 후 다시 시작합니다.
     * @param {number} rowIndex - 행 인덱스
     * @param {string} dataField - 컬럼의 datafield 이름
     * @param {number} [blinkIntervalMs=500] - 깜빡이는 주기 (밀리초)
     * @param {number} [durationMs=null] - 전체 지속 시간 (null이면 영구 지속)
     */
    start(rowIndex, dataField, blinkIntervalMs = 500, durationMs = null) {
        const key = `${rowIndex}_${dataField}`;
        
        // 이미 실행 중이면 중지합니다.
        this.stop(rowIndex, dataField);

        let isBlinkOn = false;

        const toggleCellBlink = () => {
            const className = isBlinkOn ? 'blink-on' : 'blink-off';
            
            this.$grid.jqxGrid(
                'setcellproperty',
                rowIndex,
                dataField,
                'cellclassname',
                className
            );
            isBlinkOn = !isBlinkOn;
        };

        // Interval 시작
        const intervalId = setInterval(toggleCellBlink, blinkIntervalMs);

        // 타이머 상태 저장
        this.timers[key] = {
            intervalId: intervalId,
            isBlinkOn: false,
            blinkIntervalMs: blinkIntervalMs
        };

        console.log(`Blinking started for cell (${rowIndex}, ${dataField}).`);

        // 지속 시간이 설정된 경우, 타이머 설정
        if (durationMs !== null) {
            setTimeout(() => {
                this.stop(rowIndex, dataField);
            }, durationMs);
        }
    }

    /**
     * 특정 셀의 깜빡임을 정지하고 스타일을 기본 상태로 복구합니다.
     * @param {number} rowIndex - 행 인덱스
     * @param {string} dataField - 컬럼의 datafield 이름
     */
    stop(rowIndex, dataField) {
        const key = `${rowIndex}_${dataField}`;

        if (this.timers[key]) {
            // 1. Interval 정지
            clearInterval(this.timers[key].intervalId);

            // 2. 클래스를 제거하여 기본 상태로 복구
            this.$grid.jqxGrid(
                'setcellproperty',
                rowIndex,
                dataField,
                'cellclassname',
                '' // 클래스 제거
            );

            // 3. 타이머 기록 삭제
            delete this.timers[key];

            console.log(`Blinking stopped for cell (${rowIndex}, ${dataField}).`);
        }
    }
}