AI 사업계획서와 기업분석 결과를 조회·관리하는 SaaS의 프론트엔드를 개발했습니다. 본인인증, 월 단위 이용권 결제, 인증·이용권 상태에 따른 화면 접근 흐름을 구현했습니다.
로그인 · 본인인증→주문 생성 · 결제→이용권 확인→결과물 조회
해결 과제
본인인증 로직을 재사용 가능한 구조로 분리하고, 로그인·이용권 유효 상태에 따라 결제와 결과 조회 흐름을 여러 화면에서 일관되게 처리해야 했습니다.
담당 업무 · 구현
- PASS 인증을 120줄짜리 훅에서 forwardRef 기반 헤드리스 컴포넌트로 분리해 팝업 실행, 완료 콜백 중복 방지, 이벤트 리스너·타이머 정리를 캡슐화했습니다.
- Toss Payments를 연동하고 주문 생성·결제 승인 API 요청과 성공·실패 상태를 Redux-Saga로 분리해 관리했습니다.
- 로그인 여부·이용권 만료일을 검증하는 서버 레이아웃 가드 함수를 만들어 사업계획서·기업분석의 결과 조회·결제·결제상세 등 7개 화면에서 재사용했습니다.
- 복귀 경로 생성 시 허용 도메인을 검사하고 조회·결제·내역 화면을 구현했습니다.
결과
- PASS 본인인증 로직을 재사용 가능한 컴포넌트 구조로 분리했습니다.
- 로그인·이용권 만료 여부를 검증하는 공통 가드 함수를 만들어 결과 조회·결제 등 7개 화면의 접근 제어에 재사용했습니다.
TypeScriptReactNext.js (App Router)Redux ToolkitRedux-Saga