File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import { reactive } from 'vue';
// 파일 업로드/다운로드 상태를 관리하는 전역 스토어
const uploadProgressStore = reactive({
// 상태 데이터
isUploading: false, // 모달 표시 여부
currentFileIndex: 0,
totalFiles: 0,
currentFileName: '',
totalProgress: 0,
stage: '', // 'uploading', 'processing', 'downloading'
processingProgress: 0, // 서버 처리 단계의 가상 진행률 (0-100)
// 상태 초기화 메서드
resetState() {
this.isUploading = false;
this.currentFileIndex = 0;
this.totalFiles = 0;
this.currentFileName = '';
this.totalProgress = 0;
this.stage = '';
this.processingProgress = 0;
// 진행 타이머가 있다면 정리
if (this._processingTimer) {
clearInterval(this._processingTimer);
this._processingTimer = null;
}
},
// 업로드 시작 메서드
startUpload(fileName, totalCount = 1) {
// 혹시 모를 이전 상태 초기화
this.resetState();
// 새 업로드 시작
this.isUploading = true;
this.currentFileIndex = 1;
this.totalFiles = totalCount;
this.currentFileName = fileName;
this.totalProgress = 0;
this.stage = 'uploading';
},
// 다운로드 시작 메서드
startDownload(fileName) {
// 혹시 모를 이전 상태 초기화
this.resetState();
// 새 다운로드 시작
this.isUploading = true;
this.currentFileIndex = 1;
this.totalFiles = 1;
this.currentFileName = fileName;
this.totalProgress = 0;
this.stage = 'downloading';
},
// 진행 상태 업데이트 메서드
updateProgress(loaded, total) {
if (total > 0) {
const progress = Math.round((loaded * 100) / total);
this.totalProgress = progress;
}
},
// 내부용 타이머 변수
_processingTimer: null,
// 업로드/다운로드 단계 설정 메서드
setStage(stage) {
this.stage = stage;
if (stage === 'uploading' || stage === 'downloading') {
// 업로드/다운로드 단계로 변경 시 처리 단계 타이머 정리
if (this._processingTimer) {
clearInterval(this._processingTimer);
this._processingTimer = null;
}
this.processingProgress = 0;
}
else if (stage === 'processing') {
// 파일 업로드는 100% 완료
this.totalProgress = 100;
// 처리 단계 진행 시뮬레이션 시작
this.processingProgress = 0;
// 타이머가 이미 있으면 정리
if (this._processingTimer) {
clearInterval(this._processingTimer);
}
// 처리 단계 진행 시뮬레이션을 위한 타이머 설정
// 최대 95%까지만 채워서 실제 완료 전에는 100%가 되지 않도록 함
this._processingTimer = setInterval(() => {
if (this.processingProgress < 95) {
// 처음에는 빠르게, 나중에는 천천히 증가하도록 설정
const increment = Math.max(1, 10 - Math.floor(this.processingProgress / 10));
this.processingProgress += increment;
} else {
// 95%에 도달하면 타이머 정지
clearInterval(this._processingTimer);
this._processingTimer = null;
}
}, 500); // 0.5초마다 업데이트
}
},
// 서버 처리 완료 메서드 (API 응답 수신 후 호출)
completeProcessing() {
// 처리 타이머 정리
if (this._processingTimer) {
clearInterval(this._processingTimer);
this._processingTimer = null;
}
// 처리 진행률 100%로 설정
this.processingProgress = 100;
},
// 모달 닫기 메서드 (alert 표시 후 호출)
closeModal() {
this.resetState();
},
// 오류 발생 시 호출할 메서드
handleError() {
this.resetState();
}
});
export default uploadProgressStore;