[feature] 카카오톡 공유 및 web share api로 변경

[seongwon030]

#️⃣연관된 이슈

ex) #1082

📝작업 내용

문제

카카오톡 공유하기 기능은 로그인이 필요해 사용성이 좋지 않았습니다.

해결

카카오톡 공유하기 기능을 제거하고, web share api로 URL을 복사 붙여넣기 할 수 있게 수정했습니다.

형식: 지금 모아동에서 한누리 동아리를 확인해보세요! https://www.moadong.com/club/6873be489033815c43911937

웹뷰 브리징

RN PR

• 앱 내 WebView 환경(window.ReactNativeWebView 존재 시)인지를 감지합니다.
• 앱 환경일 경우 postMessage를 통해 Native Layer로 공유 데이터를 전달합니다.

Clipboard Fallback 처리

• Web Share API를 지원하지 않는 환경(데스크탑 등)에서는 자동으로 URL이 클립보드에 복사되도 Fallback 처리를 추가했습니다.
• 사용자 피드백을 위해 alert('링크가 복사되었습니다.')를 노출합니다.

Mixpanel 트래킹 세분화
공유 방식에 따라 이벤트를 구분하여 추적하도록 개선했습니다.

• native_share: 앱 내 공유
• web_share: 모바일 웹 OS 공유
• clipboard: URL 복사

추가 변경사항

navigator.share가 window에서 제대로 동작하지 않았습니다.

그래서 데스크탑에서는 URL 복사만 하고, 모바일 뷰에서는 web share api를 사용하도록 했습니다.

중점적으로 리뷰받고 싶은 부분(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

논의하고 싶은 부분(선택)

논의하고 싶은 부분이 있다면 작성해주세요.

🫡 참고사항

Summary by CodeRabbit

• 개선

  • 공유 기능이 네이티브 공유 → Web Share API → 클립보드 순으로 동작하도록 확장되어 더 많은 환경에서 원활한 공유가 가능합니다.
  • RN WebView 환경에서 네이티브 공유 경로가 추가되어 앱 내 공유 경험이 개선되었습니다.
  • 공유 페이로드가 URL 기반으로 통일되어 일관된 공유 동작을 제공합니다.
  • 접근성 레이블(aria-label)과 아이콘 대체 텍스트(alt)가 더 일반화되어 접근성이 향상되었습니다.
  • 공유 이벤트 트래킹이 사용한 방식(네이티브/웹/클립보드)을 구분해 기록합니다.

• 리팩토링

  • 앱 시작 시 수행되던 카카오 공유 SDK 초기화 코드가 제거되어 초기화 로직이 간소화되었습니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
moadong	Ready	Preview, Comment	Jan 23, 2026 5:22am

[coderabbitai]

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. Received: "**" at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

프론트엔드 초기화에서 Kakao SDK 초기화를 제거하고, ClubDetailPage의 ShareButton 공유 로직을 Kakao 기반에서 RN WebView postMessage / Web Share API / 클립보드 폴백 조합으로 전환했습니다.

Changes

코호트 / 파일(s)	변경 요약
초기화 변경 frontend/src/index.tsx	initializeKakaoSDK 임포트 및 호출 제거; initializeMixpanel()·initializeSentry() 호출 유지.
공유 기능 리팩토링 frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx	Kakao SDK 및 Kakao 전용 공유 흐름 제거. RN WebView 감지 후 postMessage로 SHARE 페이로드 전송(트랙: native_share), 모바일에서 navigator.share 사용 시 web_share, 미지원 시 클립보드 복사 및 clipboard 트래킹으로 분기. 공유 URL/제목 통합 생성, aria-label·alt 텍스트 일반화.

Sequence Diagram(s)

sequenceDiagram
  participant User as 사용자
  participant UI as ShareButton(Component)
  participant RN as ReactNativeWebView
  participant WebAPI as WebShareAPI
  participant Clipboard as 클립보드
  participant Analytics as Analytics

  User->>UI: 공유 버튼 클릭
  UI->>UI: isInAppWebView 확인
  alt RN WebView 존재
    UI->>RN: postMessage({ type: "SHARE", url, title })
    RN->>Analytics: track("native_share", { clubName })
  else RN WebView 미존재
    UI->>WebAPI: navigator.share(shareData)?
    alt Web Share 지원
      WebAPI-->>UI: 공유 성공/취소
      UI->>Analytics: track("web_share", { clubName })
    else Web Share 미지원
      UI->>Clipboard: navigator.clipboard.writeText(url)
      Clipboard-->>UI: 복사 성공/실패
      UI->>Analytics: track("clipboard", { clubName })
    end
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

• MOA-542: KakaoTalk 기반에서 링크/Web Share 방식으로 전환하려는 목표와 일치합니다.
• moadong issue 1082: Kakao 기반 공유를 링크/Web Share로 전환하는 변경과 직접 관련됩니다.

Possibly related PRs

• PR 979: ShareButton의 공유 메시지/페이로드 변경 이력이 있어 충돌 가능성이 높습니다.
• PR 589: Kakao SDK 초기화 및 Kakao 기반 공유를 다룬 PR로 초기화 관련 충돌 소지가 있습니다.
• PR 795: 동일 컴포넌트의 스타일/아이콘 변경 이력으로 병합 시 UI 조정 필요성이 있습니다.

Suggested labels

🔨 Refactor

Suggested reviewers

• oesnuj
• lepitaaar
• SeongHoonC

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 주요 변경사항을 명확히 반영하고 있습니다: 카카오톡 공유 제거 및 Web Share API로의 전환이 코드 변경의 핵심입니다.
Linked Issues check	✅ Passed	코드 변경사항이 MOA-542의 모든 주요 요구사항을 충족합니다: 카카오톡 공유 제거, Web Share API 적용, 클립보드 폴백, RN WebView 지원, 이벤트 추적 세분화가 모두 구현되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 MOA-542의 요구사항 범위 내에 있으며, 카카오톡 SDK 초기화 제거 및 공유 방식 변경은 직접적으로 관련된 필수 변경입니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx`:
- Around line 22-50: handleShare currently swallows all navigator.share errors;
extract the clipboard write + alert + tracking logic into a helper (e.g.,
copyLinkToClipboard) and call it as a fallback when navigator.share throws an
error that is NOT a user-cancel AbortError (check with err instanceof
DOMException && err.name === 'AbortError'); also guard clipboard use with
navigator.clipboard existence and preserve the existing
USER_EVENT.SHARE_BUTTON_CLICKED tracking (method: 'clipboard') when fallback
succeeds, and show the same failure alert when clipboard is unavailable or
writeText fails.

[suhyun113]

모바일에서 공유 버튼이 카카오톡 로그인 때문에 불편했는데 훨씬 편해졌네요!!
데스크탑에서 현재는 브라우저가 OS의 기본 공유 창을 띄우게 되던데, 불편해보여서 나중에 공유 모달을 직접 구현해도 좋을 것 같아여

수고하셨습니다ㅏ

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx`:
- Around line 61-67: The clipboard copy currently uses shareData.text (which
contains message+URL); change it to copy only the URL string (e.g., use
shareData.url or construct the share URL from clubDetail) inside the ShareButton
component so navigator.clipboard.writeText(...) writes only the plain URL;
update any surrounding variables in the ShareButton/handleShare function to
reference the URL-only value (leave trackEvent(USER_EVENT.SHARE_BUTTON_CLICKED,
...) unchanged except the method field if needed).