[Bug] 이메일 인증 중 팝업 닫히면 입력 상태가 초기화되는 문제

[Turtle-Hwan]

문제 설명

Google OAuth 로그인 후 건국대 이메일 인증 과정에서 인증 코드 입력 창이 표시된 상태에서 팝업을 닫으면, 다시 열었을 때 입력 상태가 초기화되어 처음부터 다시 진행해야 하는 문제

재현 방법

1. 설정 → Google 로그인 진행
2. 이메일 인증 시작 → 이메일 입력 → 인증 코드 발송
3. 인증 코드 입력 화면에서 팝업 닫기
4. 팝업 다시 열기 → 이메일 입력 화면으로 초기화됨

원인 분석

EmailVerificationDialog 컴포넌트의 인증 중간 상태(step, emailId, authCode)가 React state로만 관리되고 있어서, 팝업 창이 닫히면 컴포넌트가 언마운트되면서 모든 상태가 초기화됨.

관련 파일

• src/components/EmailVerificationDialog.tsx

수정 계획

해결 방안

기존 chrome.storage.local 기반으로 인증 중간 상태를 저장하여 팝업이 닫혀도 유지되도록 함.

구현 내용

1. 코드 발송 시 상태 저장

   await chrome.storage.local.set({ 
     verificationStep: 'code',
     verificationEmail: kuMail,
     verificationTimestamp: Date.now()
   });

2. 컴포넌트 마운트 시 상태 복원

   useEffect(() => {
     const loadSavedState = async () => {
       const storage = await chrome.storage.local.get([
         'verificationStep', 
         'verificationEmail',
         'verificationTimestamp'
       ]);
       // 5분 이내인 경우에만 복원
       if (storage.verificationStep === 'code' && 
           storage.verificationEmail &&
           Date.now() - storage.verificationTimestamp < 5 * 60 * 1000) {
         setEmailId(storage.verificationEmail.split('@')[0]);
         setStep('code');
       }
     };
     loadSavedState();
   }, []);

3. 인증 완료/취소 시 상태 정리

   await chrome.storage.local.remove([
     'verificationStep', 
     'verificationEmail',
     'verificationTimestamp'
   ]);

4. 만료 시간 처리

   • 인증 코드 유효 시간(5분) 이후 자동 초기화