목차

이슈 #1: 검사 진행 상태 유지

1. 이슈 상황

항목 내용
발생 환경 학생이 검사 도중 브라우저를 닫거나 새로고침할 때
증상 검사 진행 상태가 초기화되어 처음부터 다시 시작해야 함
영향 범위 전체 검사 페이지, 사용자 경험

문제 코드 예시:

// 문제: Redux 상태만 사용 시 새로고침하면 상태 초기화
const ExamGroup = () => {
  const { examInputData, testingInfo } = useSelector(state => state.examInfo);
  // 새로고침 시 examInputData가 초기값으로 리셋됨
};

2. 해결 방안 후보

방안 장점 단점
A. localStorage 활용 간단한 구현, 브라우저 종료 후에도 유지 용량 제한 (5MB), 보안 취약
B. sessionStorage 활용 탭 단위 격리, 간단한 구현 브라우저 종료 시 삭제
C. 서버 저장 디바이스 무관 복구 가능, 보안 API 호출 필요, 복잡성 증가
D. Redux-Persist Redux와 통합, 자동화 추가 라이브러리, 설정 복잡

3. 선택한 해결법

선택: A안 (localStorage 활용)

// ExamGroup.js - 검사 상태 localStorage 저장
const ExamGroup = () => {
  const { examInputData, testingInfo } = useSelector(state => state.examInfo);

  // 초기 로드 시 localStorage에서 상태 복원
  const initData = () => {
    const setPaginasion = JSON.parse(localStorage.getItem('examIssueInfo'));
    const idx = examInputData.findIndex(
      data => data.examCode === testingInfo.examCode
    );
    setPage(setPaginasion[idx].position.currentPage);
    setPart(setPaginasion[idx].position.currentPart);
    setTotalPages(setPaginasion[idx].position.totalPages);
  };

  // 상태 변경 시 localStorage에 저장
  useEffect(() => {
    localStorage.setItem('examIssueInfo', JSON.stringify(examInputData));
  }, [examInputData]);

  useEffect(() => {
    initData();
  }, []);
};

4. 선택 이유

관점 이유
구현 복잡도 가장 빠르게 구현 가능
사용자 경험 브라우저 종료 후 다시 접속해도 이어하기 가능
보안 검사 답변은 민감 정보가 아니므로 localStorage로 충분
오프라인 지원 네트워크 없이도 진행 상태 유지