[Mate] 개발일지 # 16 - 이메일/패스키 인증 시스템 구축 및 회원가입 UX 개선

백엔드 인증 로직 구현 및 DB 모델링

이메일 및 패스키 인증 시스템 Google SMTP를 활용한 인증번호 발송 로직과 WebAuthn 표준을 따르는 패스키 회원가입 API(/signup/options, /verify)를 구현했다. 보안 강화를 위해 python-dotenv를 도입하여 민감 정보를 환경변수로 분리했다. 데이터베이스는 User와 Passkey 테이블을 1:N 관계로 정의하고, credential_id 및 public_key 등 필수 필드에 대한 인덱싱을 완료했다.

보안 모듈 리팩토링 기존 create_access_token 함수가 단일 문자열 인자만 허용하여 확장이 불가능한 문제가 있었다. 이를 딕셔너리(data: dict) 전체를 인자로 받도록 리팩토링하여, 향후 토큰 내에 역할(Role)이나 타입 정보를 포함할 수 있도록 유연성을 확보했다.

트러블슈팅: 예외 처리 및 환경 설정

SMTP 인증 및 DB 무결성 에러 해결 SMTP 535 인증 에러는 환경변수 로드 시 비밀번호에 포함된 공백 문자가 원인이었으며, 이를 제거하여 해결했다. 또한 중복된 이메일로 가입 시도 시 DB의 UNIQUE 제약 조건에 의해 500 Internal Server Error가 발생했다. 이를 해결하기 위해 API 진입 시점에 db.query로 중복 여부를 선행 검사(Pre-check)하고, 중복 시 400 Bad Request를 반환하도록 로직을 변경했다. 이메일 발송 전에도 동일한 검사 로직을 추가하여 불필요한 리소스 낭비를 차단했다.

API 라우팅 누락 수정 새로 작성한 엔드포인트가 404 Not Found를 반환하는 문제는 main.py에 라우터가 등록되지 않아 발생했다. include_router를 명시적으로 선언하여 API 경로를 정상화했다.

프론트엔드 UX 개선 및 타입 안정화

비동기 상태 관리 및 UI 컴포넌트화 loadingMap 객체를 도입하여 아이디 확인, 이메일 발송, 인증 확인 등 각 단계별 로딩 상태를 독립적으로 관리했다. 이를 기반으로 Spinner 컴포넌트를 적용하여 중복 클릭을 방지했다. 기존의 alert()은 상태(성공/실패/정보)에 따라 UI가 변경되는 AlertModal 컴포넌트로 대체하여 디자인 일관성을 확보했다. 또한 any 타입을 제거하고 AxiosError 및 Type Guard를 적용하여 런타임 에러 가능성을 낮췄다.

Insight

DB 스키마의 제약 조건(Unique)은 최후의 보루일 뿐, 애플리케이션 레벨에서의 선행 검증(Validation)이 사용자 경험과 서버 안정성 측면에서 필수적임을 확인했다. 또한 공통 유틸리티 함수(토큰 생성 등) 설계 시, 현재 요구사항뿐만 아니라 향후 확장 가능성(Payload 구조 변경 등)을 고려한 인터페이스 정의가 리팩토링 비용을 절감하는 핵심임을 배웠다.