JenniferSoft Design Docs

Appearance

AutoRefresh ​

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

Interactive Playground ​

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

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

const status = ref<AutoRefreshStatus>('running');

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

const tooltip = {
    refresh: { content: '새로고침' },
    resume: { content: '재개' },
    pause: { content: '일시정지' },
};

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

<template>
    <AutoRefresh
        :status="status"
        type="outlined"
        size="medium"
        :label="label"
        :tooltip="tooltip"
        :interval="10000"
        @update:status="(v) => (status = v)"
        @refresh="handleRefresh"
    />
</template>

Props ​

Prop타입필수기본값설명
status'loading' | 'running' | 'paused' | 'retrying' | 'failed'✓-컴포넌트 상태
type'outlined' | 'ghost'-'outlined'외곽선 스타일
size'small' | 'medium' | 'large'-'medium'컴포넌트 크기
label{ loading, running, paused, retrying, failed: string }✓-각 상태별 표시 텍스트
tooltip{ refresh, resume, pause: TooltipProps }✓-각 버튼별 툴팁 설정
intervalnumber-10000새로고침 주기 (ms)
refreshOnMountboolean-false마운트 시 즉시 새로고침 여부

Events ​

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

Exposed ​

ref를 통해 컴포넌트 인스턴스에 접근하면 다음 값들을 사용할 수 있습니다.

Name타입설명
progressComputedRef<number>현재 진행률 (0~100)
remainingTimeRef<number>다음 새로고침까지 남은 시간 (ms)

상태별 동작 ​

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

부가 기능 ​

타이머 일시정지/재개 ​

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

탭 비활성화 처리 ​

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

배경 프로그레스 ​

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

남은 시간 카운트다운 ​

running 상태에서는 다음 새로고침까지 남은 시간이 실시간으로 표시됩니다:

  • 10s → 9s → 8s → ... → 1s → (새로고침)
  • 1m40s → 1m39s → ... → 1m0s → 59s → ...

Size ​

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

Type ​

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

Status ​

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