From 38ac0af5a9604f332e5a66e1141e2cca674bd20b Mon Sep 17 00:00:00 2001
From: Haewon Kam <haewonkam@Haewons-MacBook-Pro.local>
Date: Tue, 9 Jun 2026 14:25:53 +0900
Subject: [PATCH] =?UTF-8?q?Add=20"=ED=88=AC=ED=91=9C=20=EA=B3=B5=EC=9C=A0?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0"=20share=20button=20to=20detail=20header=20(?=
 =?UTF-8?q?ADO2=20purple)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 상세 페이지 헤더: "전체 일정" 옆 오른쪽에 "투표 공유하기" 버튼 추가
- ShareButton(클라이언트): navigator.share invoke → 클립보드 폴백
- 공유 시맨틱 토큰 --share #A65EFF (ADO2 브랜드 포인트 퍼플) 등록
- DESIGN.md 토큰 표 갱신

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/globals.css              |  2 ++
 app/match/[matchId]/page.tsx |  9 +++++++-
 components/Hero.tsx          | 14 ++++++++++--
 components/ShareButton.tsx   | 43 ++++++++++++++++++++++++++++++++++++
 docs/DESIGN.md               |  2 ++
 5 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 components/ShareButton.tsx

diff --git a/app/globals.css b/app/globals.css
index 339117a..329ab0e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -23,6 +23,8 @@
   --gpt: #15a99b; /* 틸그린 (teal green) */
   --claude: #e8814a;
   --gemini: #5b8cff;
+
+  --share: #a65eff; /* 공유/바이럴 액션 (ADO2 브랜드 포인트 퍼플) */
 }
 
 * {
diff --git a/app/match/[matchId]/page.tsx b/app/match/[matchId]/page.tsx
index 70c6860..6faa6ab 100644
--- a/app/match/[matchId]/page.tsx
+++ b/app/match/[matchId]/page.tsx
@@ -44,7 +44,14 @@ export default async function MatchPage({
 
   return (
     <main className="shell">
-      <Hero back />
+      <Hero
+        back
+        share={{
+          url: matchUrl(match.matchId),
+          title: `${match.teamA.shortName} vs ${match.teamB.shortName} — TriplePick`,
+          text: `${match.hookText} — AI 셋의 예측을 보고 너의 픽을 찍어봐!`,
+        }}
+      />
 
       {/* 경기별 후킹 카피 (한 줄) */}
       <h1 className="mt-6 flex items-center justify-center gap-2 whitespace-nowrap text-[19px] font-extrabold leading-snug">
diff --git a/components/Hero.tsx b/components/Hero.tsx
index a9575d6..531a137 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,17 +1,27 @@
 import Link from "next/link";
+import ShareButton from "./ShareButton";
+
+type Share = { url: string; title: string; text: string };
 
 // 브랜드 헤더 (대시보드·상세 공용). 경기별 후킹 카피는 상세 페이지에서 별도 노출.
-export default function Hero({ back = false }: { back?: boolean }) {
+export default function Hero({
+  back = false,
+  share,
+}: {
+  back?: boolean;
+  share?: Share;
+}) {
   return (
     <header className="pt-5 text-center">
       {back && (
-        <div className="mb-3 flex">
+        <div className="mb-3 flex items-center justify-between">
           <Link
             href="/"
             className="flex items-center gap-1 rounded-full border border-white/12 bg-white/8 px-3 py-1.5 text-[12px] font-bold text-white/85 active:scale-95"
           >
             ← 전체 일정
           </Link>
+          {share && <ShareButton {...share} />}
         </div>
       )}
       <div className="font-impact text-[44px] leading-none tracking-tight">
diff --git a/components/ShareButton.tsx b/components/ShareButton.tsx
new file mode 100644
index 0000000..eeecd4a
--- /dev/null
+++ b/components/ShareButton.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+
+// 투표(경기) 공유 — 모바일 네이티브 공유(invoke), 미지원 시 클립보드 복사 폴백 (D8)
+export default function ShareButton({
+  url,
+  title,
+  text,
+}: {
+  url: string;
+  title: string;
+  text: string;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const onShare = async () => {
+    if (typeof navigator !== "undefined" && navigator.share) {
+      try {
+        await navigator.share({ title, text, url });
+        return;
+      } catch {
+        /* 사용자 취소 */
+      }
+    }
+    try {
+      await navigator.clipboard.writeText(`${text}\n${url}`);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1800);
+    } catch {
+      /* noop */
+    }
+  };
+
+  return (
+    <button
+      onClick={onShare}
+      className="flex items-center rounded-full border border-[var(--share)]/55 bg-[var(--share)]/12 px-3 py-1.5 text-[12px] font-bold text-[var(--share)] transition active:scale-95"
+    >
+      {copied ? "링크 복사됨 ✓" : "투표 공유하기"}
+    </button>
+  );
+}
diff --git a/docs/DESIGN.md b/docs/DESIGN.md
index 76a7ca1..7c55963 100644
--- a/docs/DESIGN.md
+++ b/docs/DESIGN.md
@@ -34,6 +34,8 @@
 | 라이트 라인 | `--line-l` | `#E3E5DF` | 시트 보더 |
 
 **모델 컬러(고정):** GPT `--gpt #15A99B`(틸그린) · Claude `--claude #E8814A`(오렌지) · Gemini `--gemini #5B8CFF`(블루)
+**공유/바이럴 시맨틱:** `--share #A65EFF`(ADO2 브랜드 포인트 퍼플) — 공유 액션 전용. 그린(예측/플레이)과 의미 분리. (현재 적용: 헤더 "투표 공유하기". 권장: Arena 공유 버튼도 동일 토큰으로 통일.)
+**일정 민트:** `#94FBE0` — 대시보드 일정 카드 아웃라인·VS·날짜 헤딩 (그린 #4AFFA0 브랜드 포인트와 구분)
 **상금 카드(쿨톤, 골드 폐기):** 보더 `--gold-border #5EF0B4` · 배경 `--gold-bg #0E1F1B`(딥틸) · 버튼 그라데 `#85FCA8 → #15A99B`(`.gold-btn`)
 
 > 배경: `radial-gradient(120% 50% at 50% -5%, #20302A, var(--bg))` — 상단 미세 그린 글로우.