Developer Brief

TossMe

토스로 바로 송금

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

기술 스택

Next.js 16React 19TypeScriptTailwind CSSRadix UIqrcode.react

API·DB·서버 상태 없이 브라우저에서 완결되는 클라이언트 전용 구조입니다. 입력값을 받아 supertoss:// 딥링크를 실시간으로 조합하고, QR·링크로 전달합니다. SSR 레이아웃은 셸만 제공하고 생성기는 단일 클라이언트 컴포넌트 트리로 동작합니다.

입력값(은행·계좌·금액)을 useEffect로 추적해 URLSearchParams로 supertoss://send 딥링크를 실시간 조합 (accountNo는 하이픈, amount는 콤마 제거)
정적 은행 목록(BANKS 22개)에서 선택하거나 '직접 입력'으로 보완하고, 선택한 은행명을 딥링크 bank 파라미터로 그대로 전달 (별도 코드 변환 없음)
qrcode.react의 QRCodeCanvas(오류정정 레벨 H)로 딥링크를 QR로 렌더링, ref로 canvas를 잡아 PNG로 저장
'입력 정보 저장' 토글 시 은행·계좌·금액·커스텀 여부를 localStorage(tossme_saved_input)에 동기화하고 마운트 시 복원
Next.js 16 App Router + Pretendard 로컬 폰트, @next/third-parties GA·메타데이터·사이트맵으로 SEO를 구성하고 Vercel에 배포

문제

'입력 정보 저장'으로 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 다운로드를 구현

아키텍처

입력값(은행·계좌·금액)을 useEffect로 추적해 URLSearchParams로 supertoss://send 딥링크를 실시간 조합 (accountNo는 하이픈, amount는 콤마 제거)

정적 은행 목록(BANKS 22개)에서 선택하거나 '직접 입력'으로 보완하고, 선택한 은행명을 딥링크 bank 파라미터로 그대로 전달 (별도 코드 변환 없음)

qrcode.react의 QRCodeCanvas(오류정정 레벨 H)로 딥링크를 QR로 렌더링, ref로 canvas를 잡아 PNG로 저장

'입력 정보 저장' 토글 시 은행·계좌·금액·커스텀 여부를 localStorage(tossme_saved_input)에 동기화하고 마운트 시 복원

Next.js 16 App Router + Pretendard 로컬 폰트, @next/third-parties GA·메타데이터·사이트맵으로 SEO를 구성하고 Vercel에 배포

문제 · 해결

문제