[Meta ESG] 자동저장 구현

개요

Meta ESG 프로젝트 요건 중 자동저장 기능이 있었다.

백엔드 코드는 수정하지 않고 프론트에서 타이머를 사용해 백엔드로 저장을 요청하여 구현했다.

---

HTML

타이머를 보여줄 div와 타이머 on/off를 저장할 input이 필요하다

input에 onclick 메서드를 달았다.

<p class="auto-save">자동저장 <span id="autoSaveTimer">5:00</span></p>
<div class="btn-on-off-wrap">
	<input type="checkbox" id="autoSaveToggle" class="btn-on-off">
	<label for="autoSaveToggle" onclick="toggleAutoSave()"><span></span></label>
</div>

 

JS

let min = 5, sec = 0;
let timer;

// init
$(function(){
  if($('#autoSaveToggle').is(':checked')){
    startTimer();
  }
});

// 자동저장 타이머 시작
function startTimer() {
  timer = setInterval(countTimer, 1000);
}

// 자동저장 타이머 종료
function stopTimer() {
  clearInterval(timer);
}

// 자동저장 타이머 리셋
function resetTimer(){
  min = 5;
  sec = 0;
  $('#autoSaveTimer').text(min + ':' + (sec < 10 ? '0':'') + sec);
}

// 자동저장 타이머 interval 함수
function countTimer() {
  if(sec > 0){
    sec--;
  }else{
    if(min > 0){
      sec = 59;
      min--;
    }else{
      clearInterval(timer);
      save(); // 미리 구현해놓은 save함수
      location.reload(); // 저장 후 새로고침
    }
  }

  $('#autoSaveTimer').text(min + ':' + (sec < 10 ? '0':'') + sec);
}

// 자동저장 on/off 버튼 onclick
function toggleAutoSave(){
  if($('#autoSaveToggle').is(':checked')){
    stopTimer();
    resetTimer();
  }else{
    startTimer();
  }
}