토스 앱 안에서 동작하는 WebView 프론트엔드를 FSD 아키텍처로 구현한 현장실습 프로젝트

2026.01 ~ 2026.02 · 디라이브 현장실습 · React WebView 프론트엔드 개발

다른 프론트엔드 개발자 1명과 함께 아키텍처를 논의하고, 백엔드·디자이너와 협업했습니다.

한 줄 요약

기존 네이티브 앱 UI를 React 기반 웹뷰로 옮기는 프로젝트. 토스 Granite 환경 위에서 동작하며, Flutter 앱 ↔ WebView ↔ 백엔드 API가 동시에 연결되는 구조에서 React WebView 프론트엔드 개발에 참여했다.

기술 스택

React, Vite, TypeScript, React Router, Zustand, React Query(useInfiniteQuery), Tailwind CSS, @toss/tds-mobile(Granite), 커스텀 AppBridge, Kakao Map SDK

내가 한 일

• FSD(Feature-Sliced Design) 아키텍처 도입 — 이전 프로젝트(UniSchedule·이음)에서 hooks/api/pages가 섞여 불편했던 문제를 해결하기 위해 의도적으로 도입
• 홈 피드·가게 리스트 무한 스크롤 (useInfiniteQuery + useInView)
• React Query 쿼리키 체계 설계 및 문서화 — 스크랩/리뷰 작성/로그인 변경 시 어떤 쿼리를 invalidate/reset 할지 규칙화
• 가게 상세·리뷰 상세 API 연동, Kakao Map 연동
• 프로필/팔로우 — 무한 스크롤 + 팔로우 토글
• 웹뷰–Flutter 브릿지 — 최상단 스크롤, 뒤로가기 차단/허용, 모달 열기, 공유/클립보드 등 다양한 브릿지 이벤트 처리
• 인수인계용 handover 문서(env·스크립트·인증·브릿지 요약) 작성

🔧 트러블슈팅

WebView 인증 — 401이라고 다 로그아웃시키면 안 된다

토스 앱에서 code를 받아 인증하는 구조였는데, '아직 code를 한 번도 못 받은 상태'에서 발생하는 401까지 no-token 페이지로 보내면 정상 사용자가 튕기는 문제가 있었다.

→ "아직 code를 못 받은 상태"와 "인증이 실제로 만료된 상태"를 구분해, 전자는 로그아웃시키지 않고 대기시키도록 처리. 같은 code로 중복 인증 요청이 나가지 않도록 방지하는 로직도 추가했다.