JenniferSoft Design Docs

Appearance

AutoRefresh ​

설정한 주기에 맞춰 화면의 데이터를 자동으로 새로고침할 수 있도록 도와주는 컴포넌트입니다. 필요 시 즉시 새로고침을 실행해 최신 상태를 빠르게 반영할 수 있습니다.

Interactive Playground ​

아래에서 각 props를 직접 조작하며 컴포넌트를 테스트해보세요.

Props 설정
running
미리보기
자동 새로고침
10s
새로고침 횟수: 0
vue
<script setup lang="ts">
import { ref } from 'vue';
import { AutoRefresh } from '@jennifersoft/vue-components-v2';

const status = ref<'running' | 'paused' | 'retrying' | 'failed'>('running');

const text = {
    running: '자동 새로고침',
    paused: '자동 새로고침',
    retrying: '새로고침 재시도 중...',
    failed: '새로고침이 실패했습니다.',
};

const handleRefresh = () => {
    console.log('새로고침 실행');
};
</script>

<template>
    <AutoRefresh
        :status="status"
        type="outlined"
        size="medium"
        :text="text"
        :interval="10000"
        :retry-limit="3"
        @update:status="(v) => (status = v)"
        @refresh="handleRefresh"
    />
</template>

Props ​

Prop타입필수기본값설명
status'running' | 'paused' | 'retrying' | 'failed'✓-컴포넌트 상태
type'outlined' | 'ghost'-'outlined'외곽선 스타일
size'small' | 'medium' | 'large'-'medium'컴포넌트 크기
text{ running, paused, retrying, failed: string }✓-각 상태별 표시 텍스트
intervalnumber-10000새로고침 주기 (ms)
retryLimitnumber-3재시도 횟수 제한
refreshOnMountboolean-false마운트 시 즉시 새로고침 여부

Events ​

EventPayload설명
update:status'running' | 'paused' | 'retrying' | 'failed'토글 버튼 클릭 시 status 동기화
refresh-새로고침 버튼 클릭 또는 주기 도달 시

상태별 동작 ​

상태타이머프로그레스interval 텍스트설명
running✅✅10s, 1m40s정상 동작 중
paused❌❌OFF사용자가 일시정지
retrying✅✅(빈 문자열)새로고침 재시도 중 (running과 동일 동작)
failed❌❌(빈 문자열)새로고침 실패

부가 기능 ​

타이머 일시정지/재개 ​

  • pause: 타이머가 일시정지되며, 남은 시간이 유지됩니다.
  • resume: 일시정지된 시점부터 타이머가 재개됩니다.

탭 비활성화 처리 ​

브라우저 탭이 비활성화되면 타이머가 자동으로 일시정지됩니다. (running, retrying 상태) 탭이 다시 활성화되면 타이머가 재개되지만, 사용자가 직접 pause한 경우에는 자동으로 재개되지 않습니다.

배경 프로그레스 ​

running 및 retrying 상태에서는 다음 새로고침까지 남은 시간을 배경색이 차오르는 형태로 시각화합니다.

interval 텍스트 표시 ​

interval 값은 상세하게 표시됩니다:

  • 10000ms → 10s
  • 100000ms → 1m40s
  • 3661000ms → 1h1m1s

Size ​

자동 새로고침
10s
자동 새로고침
10s
자동 새로고침
10s

Type ​

자동 새로고침
10s
자동 새로고침
10s

Status ​

running
자동 새로고침
10s
paused
자동 새로고침
OFF
retrying
새로고침 재시도 중...
failed
새로고침이 실패했습니다.