share-kakao

공유하기와 Kakao 연동

공개 명함 뷰어(/card/:slug)와 실시간 미리보기(/live-preview)의 공유하기 버튼은 누르면 카카오톡 / 문자 2개짜리 미니 시트(components/ShareMenu)를 연다(2026-07-28). 이미지·이메일 탭은 없다.

• 카카오톡(domain/shareCard.ts) — Kakao JS SDK Kakao.Share.sendDefault 피드 템플릿. 썸네일 = OG 이미지, 제목 = “{이름}님의 명함을 확인하세요”, 버튼 1개 “명함 확인” → 카드 URL. 카카오톡이 자기 친구/채팅방 선택창을 띄운다. 안 되면 OS native share → 링크 복사로 폴백.
• 문자(domain/shareMessage.ts) — sms:?&body= 딥링크에 인사말 템플릿 본문을 담는다. SMS는 SDK 미지원이라 “명함 확인” 버튼 카드가 아니라 링크만 전달된다(수신 앱이 OG를 읽으면 썸네일 미리보기).

공유 URL은 서버가 준 card.shareUrl(owner 쪽은 buildPublicCardPath(slug)) + 사이트 origin으로 만든다 — window.location.href 금지. 공유 시 SHARE_CLICK 분석 이벤트를 1회 기록한다. 실시간 미리보기에서는 명함이 비공개면 공유 대신 “명함을 공개하면 공유할 수 있어요” 토스트를 띄운다.

Kakao 연동 계약

• 키: VITE_KAKAO_JS_KEY(JavaScript 키). FE 전용 — BE는 쓰지 않는다. 로컬 .env + 배포 빌드 env(Vercel/CI) 둘 다 설정해야 배포본에서 동작(Vite 빌드타임 주입).
• 도메인 등록: Kakao Developers → 앱 → 플랫폼 → Web에 배포 origin + http://localhost:3000 등록. 미등록이면 sendDefault가 실패한다.
• 추가 기능 신청 불필요: 친구목록/메시지 발송 API·비즈앱 검수는 native 공유창 방식과 무관.
• BE 의존: 공유받은 /card/* 페이지는 BE가 nonce CSP로 서빙 → CSP에 script-src https://t1.kakaocdn.net·connect-src https://kapi.kakao.com 허용됨 (be as-built §6.3).

폴백 (항상 공유 가능)

• 키 없음 / SDK 로드 실패 / sendDefault 예외 → native share → 링크 복사.
• Kakao 콘솔 세팅 전에도 빌드·배포·공유는 정상 동작하고, 키/도메인만 채우면 카카오 카드가 실동작한다.