Developer Brief

TossMe

토스로 바로 송금

토스 앱으로 바로 송금할 수 있는 딥링크 생성기입니다. 은행·계좌·금액을 입력하면 토스 앱에서 열 수 있는 링크와 QR 코드를 만들고, 링크 복사·QR 저장을 지원합니다.

기술 스택

Next.js 16React 19TypeScriptTailwind CSSRadix UIqrcode.react

API·DB·서버 상태 없이 브라우저에서 완결되는 클라이언트 전용 구조입니다. 입력값을 받아 supertoss:// 딥링크를 실시간으로 조합하고 QR·링크로 전달합니다.

문제

'입력 정보 저장'으로 localStorage 값을 복원하면, 빈 기본값으로 그려진 SSR 결과와 클라이언트 복원 결과가 달라 하이드레이션 불일치·깜빡임이 발생

해결

마운트 완료 여부를 isHydrated 플래그로 추적하고, 폼 영역을 opacity 트랜지션으로 가려 클라이언트 상태가 확정된 뒤에만 표시

문제

iOS Safari 등 일부 환경에서는 navigator.clipboard를 쓸 수 없어 링크 복사가 실패

해결

Clipboard API → 숨김 textarea + execCommand('copy') → prompt() 순의 3단계 폴백으로 어떤 환경에서도 복사 경로를 보장

문제

qrcode.react는 canvas로만 렌더링돼 사용자가 QR을 이미지 파일로 바로 저장할 수 없음

해결

ref로 canvas 요소를 참조해 toDataURL('image/png')로 변환한 뒤, 동적으로 생성한 <a download> 클릭으로 PNG 다운로드를 구현

아키텍처

입력값을 실시간 추적해 supertoss:// 송금 딥링크를 조합

딥링크를 qrcode.react로 QR 렌더링, canvas를 PNG로 저장

'입력 정보 저장' 선택 시 localStorage에 동기화·복원

Next.js 16 App Router 기반, Vercel 배포

문제 · 해결

문제