AutoRefresh

자동 새로고침 기능을 제공하는 Vue 컴포넌트입니다. 설정된 주기에 따라 자동으로 새로고침을 실행하며, 사용자가 수동으로 제어할 수 있습니다.

개요

AutoRefresh 컴포넌트는 실시간 대시보드나 모니터링 화면에서 자동으로 데이터를 새로고침하는 기능을 제공합니다. 사용자가 설정한 주기에 따라 자동으로 새로고침이 실행되며, 일시정지/재생 및 수동 새로고침 기능도 지원합니다.

주요 기능

• ⏰ 자동 새로고침: 설정된 주기에 따라 자동으로 새로고침 실행
• 🎮 수동 제어: 일시정지/재생 및 수동 새로고침 버튼 제공
• 📊 진행률 표시: 다음 새로고침까지의 진행률을 실시간 시각화
• 🌐 다국어 지원: i18n 인젝션을 통한 다국어 지원
• ♿ 접근성: 키보드 네비게이션 및 스크린 리더 지원
• 🎨 반응형 애니메이션: 로딩 상태 및 진행률 애니메이션

사용 사례

• 실시간 대시보드의 자동 데이터 갱신
• 모니터링 화면의 주기적 상태 확인
• APM 차트의 실시간 데이터 업데이트
• 서버 상태 모니터링 화면

Props 인터페이스

interface AutoRefreshProps {
    /** 자동 새로고침 주기 (초 단위, 최소 1초) */
    interval: number;
    /** 컴포넌트 비활성화 여부 (기본값: false) */
    disabled?: boolean;
    /** 컴포넌트 마운트 시 자동으로 새로고침 시작 여부 (기본값: false) */
    autoStart?: boolean;
}

속성	타입	기본값	필수	설명
interval	number	-	✅	자동 새로고침 주기 (초 단위, 최소 1초)
disabled	boolean	false	❌	컴포넌트 비활성화 여부
autoStart	boolean	false	❌	컴포넌트 마운트 시 자동으로 새로고침 시작 여부

이벤트

interface AutoRefreshEvents {
    /** 자동 새로고침 실행 시 발생하는 이벤트 */
    refresh: () => void;
    /** 자동 새로고침 활성화/비활성화 토글 시 발생하는 이벤트 */
    toggle: (state: AutoRefreshToggleState) => void;
}

interface AutoRefreshToggleState {
    isActive: boolean;
    interval: number;
}

이벤트	페이로드	설명
refresh	-	자동 새로고침 실행 시 발생하는 이벤트
toggle	AutoRefreshToggleState	자동 새로고침 활성화/비활성화 토글 시 발생하는 이벤트

기본 사용법

<script setup>
import { AutoRefresh } from '@jennifersoft/apm-components';

const handleRefresh = () => {
    console.log('새로고침 실행!');
    // 데이터 새로고침 로직
};

const handleToggle = (state) => {
    console.log(
        `자동 새로고침이 ${state.isActive ? '활성화' : '비활성화'}되었습니다.`
    );
};
</script>

<template>
    <AutoRefresh
        :interval="10"
        @refresh="handleRefresh"
        @toggle="handleToggle"
    />
</template>

인터랙티브 데모

데이터 구조

AutoRefresh 컴포넌트에서 사용되는 주요 타입 정의는 다음과 같습니다:

// 토글 상태 인터페이스
interface AutoRefreshToggleState {
    isActive: boolean; // 현재 활성화 상태
    interval: number; // 새로고침 주기 (초)
}

// 다국어 지원 인터페이스
interface I18n {
    autoRefresh: string; // "Auto Refresh" 라벨 텍스트
    second: string; // "second" 단위 텍스트
}

고급 사용법

Auto Start 기능

<template>
    <!-- 페이지 로드 시 자동으로 새로고침 시작 -->
    <AutoRefresh :interval="5" :auto-start="true" @refresh="handleRefresh" />
</template>

조건부 비활성화

<script setup>
import { ref } from 'vue';

const isLoading = ref(false);

const handleRefresh = async () => {
    isLoading.value = true;
    try {
        await fetchData();
    } finally {
        isLoading.value = false;
    }
};
</script>

<template>
    <AutoRefresh
        :interval="10"
        :disabled="isLoading"
        @refresh="handleRefresh"
    />
</template>

다국어 설정

<script setup>
import { provide } from 'vue';

// 다국어 메시지 제공
provide('i18n', {
    autoRefresh: '자동 새로고침',
    second: '초',
});
</script>

<template>
    <AutoRefresh :interval="10" />
</template>

외부에서 상태 제어

<script setup>
import { ref } from 'vue';

const autoRefreshRef = ref();
const isActive = ref(false);

const handleToggle = (state) => {
    isActive.value = state.isActive;
};

const forceToggle = () => {
    // 외부에서 토글 트리거 (내부 API 접근)
    autoRefreshRef.value?.handleToggle();
};
</script>

<template>
    <div>
        <button @click="forceToggle">외부 토글</button>
        <AutoRefresh
            ref="autoRefreshRef"
            :interval="10"
            @toggle="handleToggle"
        />
    </div>
</template>

의존성

AutoRefresh 컴포넌트는 다음 외부 의존성을 사용합니다:

• @vueuse/core: useToggle 컴포저블 사용
• @jennifersoft/vue-components-v2: SvgIcon, ICON_TYPE 컴포넌트 사용

<script setup>
// 내부적으로 사용되는 의존성들
import { useToggle } from '@vueuse/core';
import { SvgIcon, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>

필요한 아이콘 타입

• ICON_TYPE.pause: 일시정지 아이콘
• ICON_TYPE.play: 재생 아이콘
• ICON_TYPE.loading: 로딩 아이콘 (자동 회전 애니메이션)
• ICON_TYPE.refresh: 새로고침 아이콘 </rewritten_file>