From 4928d24ace3cf8f9c42fd4eac0ae0e601aaf98dd Mon Sep 17 00:00:00 2001
From: Haewon Kam <haewonkam@Haewons-MacBook-Pro.local>
Date: Sat, 4 Apr 2026 16:23:29 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20consistent=20ExternalLink=20on=20all=20?=
 =?UTF-8?q?channel=20names=20=E2=80=94=20Facebook=20+=20OtherChannels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Facebook pageName now links to facebook.com/{url} with ExternalLink icon.
OtherChannels: moved ExternalLink from right-end to inline with channel
name, matching the Instagram/YouTube pattern.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/report/FacebookAudit.tsx | 14 +++++++++++++-
 src/components/report/OtherChannels.tsx | 24 +++++++++++++-----------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/report/FacebookAudit.tsx b/src/components/report/FacebookAudit.tsx
index 02c290d..f35e6fe 100644
--- a/src/components/report/FacebookAudit.tsx
+++ b/src/components/report/FacebookAudit.tsx
@@ -59,7 +59,19 @@ function PageCard({ page, index }: { key?: string | number; page: FacebookPage;
         )}
       </div>
 
-      <h3 className="font-bold text-lg text-[#0A1128] mb-1">{page.pageName}</h3>
+      <h3 className="font-bold text-lg text-[#0A1128] mb-1">
+        {page.url ? (
+          <a
+            href={page.url.startsWith('http') ? page.url : `https://www.facebook.com/${page.url}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-[#6C5CE7] inline-flex items-center gap-1"
+          >
+            {page.pageName}
+            <ExternalLink size={13} className="text-[#6C5CE7]" />
+          </a>
+        ) : page.pageName}
+      </h3>
       <p className="text-xs text-slate-500 mb-4">{page.category}</p>
 
       {/* Metrics grid */}
diff --git a/src/components/report/OtherChannels.tsx b/src/components/report/OtherChannels.tsx
index dc53c59..0a725f3 100644
--- a/src/components/report/OtherChannels.tsx
+++ b/src/components/report/OtherChannels.tsx
@@ -44,20 +44,22 @@ export default function OtherChannels({ channels, website }: OtherChannelsProps)
               >
                 <StatusIcon size={20} className={cfg.color} />
                 <div className="flex-1 min-w-0">
-                  <p className="text-sm font-semibold text-[#0A1128]">{ch.name}</p>
+                  {ch.url ? (
+                    <a
+                      href={ch.url.startsWith('http') ? ch.url : `https://${ch.url}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-sm font-semibold text-[#0A1128] hover:text-[#6C5CE7] inline-flex items-center gap-1"
+                    >
+                      {ch.name}
+                      <ExternalLink size={12} className="text-[#6C5CE7] shrink-0" />
+                    </a>
+                  ) : (
+                    <p className="text-sm font-semibold text-[#0A1128]">{ch.name}</p>
+                  )}
                   <p className="text-sm text-slate-500">{ch.details}</p>
                 </div>
                 <span className={`text-xs font-medium ${cfg.color}`}>{cfg.label}</span>
-                {ch.url && (
-                  <a
-                    href={ch.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-[#6C5CE7] hover:underline"
-                  >
-                    <ExternalLink size={16} />
-                  </a>
-                )}
               </motion.div>
             );
           })}