From bf90e8d242991511138eafb94c727a6d42a654b9 Mon Sep 17 00:00:00 2001
From: Mina Choi <mnchoi@o2o.kr>
Date: Thu, 21 May 2026 09:21:43 +0900
Subject: [PATCH] =?UTF-8?q?fix(brand-consistency):=200=EA=B0=9C=20?=
 =?UTF-8?q?=EB=B6=88=EC=9D=BC=EC=B9=98=20=E2=86=92=20'=EC=A0=84=20?=
 =?UTF-8?q?=EC=B1=84=EB=84=90=20=EC=9D=BC=EC=B9=98'=20=EB=A1=9C=20?=
 =?UTF-8?q?=ED=91=9C=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../plan/components/BrandingGuide.tsx         | 28 +++++++++++--------
 .../report/components/FacebookAudit.tsx       | 28 +++++++++++--------
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/features/plan/components/BrandingGuide.tsx b/src/features/plan/components/BrandingGuide.tsx
index 1ebe430..8f51b8e 100644
--- a/src/features/plan/components/BrandingGuide.tsx
+++ b/src/features/plan/components/BrandingGuide.tsx
@@ -439,17 +439,23 @@ function BrandConsistencyTab({ inconsistencies }: { inconsistencies: BrandIncons
               onClick={() => setExpanded(expanded === i ? null : i)}
               className="w-full flex items-center justify-between p-5 h-auto text-left hover:bg-slate-50/50 rounded-none"
             >
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 rounded-lg bg-brand-navy flex items-center justify-center text-white text-xs font-bold">
-                  {item.values.filter((v) => !v.isCorrect).length}
-                </div>
-                <div>
-                  <p className="font-semibold text-brand-navy">{item.field}</p>
-                  <p className="text-xs text-slate-500">
-                    {item.values.filter((v) => !v.isCorrect).length}개 채널 불일치
-                  </p>
-                </div>
-              </div>
+              {(() => {
+                const mismatchCount = item.values.filter((v) => !v.isCorrect).length;
+                const isAllConsistent = mismatchCount === 0;
+                return (
+                  <div className="flex items-center gap-3">
+                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-white text-xs font-bold ${isAllConsistent ? 'bg-brand-purple-soft' : 'bg-brand-navy'}`}>
+                      {isAllConsistent ? <CheckFilled size={14} /> : mismatchCount}
+                    </div>
+                    <div>
+                      <p className="font-semibold text-brand-navy">{item.field}</p>
+                      <p className="text-xs text-slate-500">
+                        {isAllConsistent ? '전 채널 일치' : `${mismatchCount}개 채널 불일치`}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })()}
               <ArrowRight
                 size={16}
                 className={`text-slate-400 transition-transform ${
diff --git a/src/features/report/components/FacebookAudit.tsx b/src/features/report/components/FacebookAudit.tsx
index 24ec63b..1f7d6a2 100644
--- a/src/features/report/components/FacebookAudit.tsx
+++ b/src/features/report/components/FacebookAudit.tsx
@@ -201,17 +201,23 @@ function BrandConsistencyMap({ inconsistencies }: { inconsistencies: BrandIncons
               onClick={() => setExpanded(expanded === i ? null : i)}
               className="w-full flex items-center justify-between p-5 h-auto text-left hover:bg-slate-50/50 rounded-none"
             >
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 rounded-lg bg-primary-900 flex items-center justify-center text-white text-xs font-bold">
-                  {item.values.filter(v => !v.isCorrect).length}
-                </div>
-                <div>
-                  <p className="font-semibold text-brand-navy">{item.field}</p>
-                  <p className="text-xs text-slate-500">
-                    {item.values.filter(v => !v.isCorrect).length}개 채널 불일치
-                  </p>
-                </div>
-              </div>
+              {(() => {
+                const mismatchCount = item.values.filter(v => !v.isCorrect).length;
+                const isAllConsistent = mismatchCount === 0;
+                return (
+                  <div className="flex items-center gap-3">
+                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-white text-xs font-bold ${isAllConsistent ? 'bg-brand-purple-soft' : 'bg-primary-900'}`}>
+                      {isAllConsistent ? <CheckCircle2 size={14} /> : mismatchCount}
+                    </div>
+                    <div>
+                      <p className="font-semibold text-brand-navy">{item.field}</p>
+                      <p className="text-xs text-slate-500">
+                        {isAllConsistent ? '전 채널 일치' : `${mismatchCount}개 채널 불일치`}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })()}
               <ArrowRight
                 size={16}
                 className={`text-slate-400 transition-transform ${expanded === i ? 'rotate-90' : ''}`}