From cf88f1a99e097437790f9211eb49ef1bd7cd6136 Mon Sep 17 00:00:00 2001
From: bat1120 <bat1120@naver.com>
Date: Tue, 5 May 2026 11:03:02 +0900
Subject: [PATCH] =?UTF-8?q?polish(abm-tab):=20=EC=8B=9C=EB=AE=AC=20?=
 =?UTF-8?q?=EC=95=88=EB=82=B4=20+=20competitor=20=EC=83=89=20=EB=B6=84?=
 =?UTF-8?q?=EA=B8=B0=20+=20=EC=A7=80=EB=8F=84=20height=20=ED=99=95?=
 =?UTF-8?q?=EB=8C=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AbmTab.tsx:
- 시뮬 첫 진입 시 안내 박스 추가 (5,000 페르소나 + 시나리오 + 큐 패널 설명 + 범례)
- 지도 height 440px → 640px (가독성)
- 외곽 panel layout flex-col gap-3 정돈

AgentMapVisualizer.tsx:
- competitor 색 분기 변경: 자사 브랜드(category='own_brand')만 red, 경쟁업체 모두 yellow
- 범례 라벨 수정: '경쟁 프랜차이즈' → '자사 매장', '경쟁 개인점' → '경쟁업체'
- prettier 포맷팅

사용자 피드백 (2026-05-05).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/AgentMapVisualizer.tsx     | 21 +++++------
 .../dashboard/tabs/AbmTab.tsx                 | 37 +++++++++++++++++--
 2 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/AgentMapVisualizer.tsx b/frontend/src/components/AgentMapVisualizer.tsx
index 8ffc3940..7141e660 100644
--- a/frontend/src/components/AgentMapVisualizer.tsx
+++ b/frontend/src/components/AgentMapVisualizer.tsx
@@ -362,7 +362,10 @@ export default function AgentMapVisualizer({
           const pixel = competitorPixels[comp.id];
           if (!pixel) return null;
           const isFranchise = comp.is_franchise;
-          const pinColor = isFranchise ? '#fb565b' : '#ffba00';
+          // 사용자 피드백 (2026-05-05): 자사 브랜드만 red, 경쟁업체 (프랜차이즈/개인점) 모두 yellow.
+          // own_brand category 는 AbmTab 의 sameBrandLocations 에서 부여.
+          const isOwnBrand = comp.category === 'own_brand';
+          const pinColor = isOwnBrand ? '#fb565b' : '#ffba00';
           const isSelected = selectedCompetitorId === comp.id;
 
           // 가장 가까운 공실 spot 까지 거리 (Haversine, m)
@@ -388,9 +391,7 @@ export default function AgentMapVisualizer({
           return (
             <div
               key={`comp-${comp.id}`}
-              className={`absolute flex flex-col items-center ${
-                isSelected ? 'z-[60]' : 'z-20'
-              }`}
+              className={`absolute flex flex-col items-center ${isSelected ? 'z-[60]' : 'z-20'}`}
               style={{
                 left: pixel.x,
                 top: pixel.y,
@@ -421,10 +422,7 @@ export default function AgentMapVisualizer({
                   style={{ borderColor: pinColor }}
                 >
                   <div className="flex items-baseline justify-between gap-2 mb-1.5">
-                    <span
-                      className="text-[11px] font-black truncate"
-                      style={{ color: pinColor }}
-                    >
+                    <span className="text-[11px] font-black truncate" style={{ color: pinColor }}>
                       {comp.name}
                     </span>
                     <button
@@ -460,8 +458,7 @@ export default function AgentMapVisualizer({
                     )}
                     {comp.distance_m != null && (
                       <div>
-                        <span className="font-mono">중심거리:</span>{' '}
-                        {Math.round(comp.distance_m)}m
+                        <span className="font-mono">중심거리:</span> {Math.round(comp.distance_m)}m
                       </div>
                     )}
                   </div>
@@ -525,7 +522,7 @@ export default function AgentMapVisualizer({
                   strokeWidth="2"
                 />
               </svg>
-              <span className="text-[0.5625rem] text-muted-foreground">경쟁 프랜차이즈</span>
+              <span className="text-[0.5625rem] text-muted-foreground">자사 매장</span>
             </div>
             <div className="flex items-center gap-1.5">
               <svg width="10" height="10" viewBox="0 0 18 18">
@@ -536,7 +533,7 @@ export default function AgentMapVisualizer({
                   strokeWidth="2"
                 />
               </svg>
-              <span className="text-[0.5625rem] text-muted-foreground">경쟁 개인점</span>
+              <span className="text-[0.5625rem] text-muted-foreground">경쟁업체</span>
             </div>
             <div className="mt-0.5 pt-1 border-t border-border">
               <span className="text-[0.5rem] font-mono text-muted-foreground">
diff --git a/frontend/src/components/SimulationResult/dashboard/tabs/AbmTab.tsx b/frontend/src/components/SimulationResult/dashboard/tabs/AbmTab.tsx
index 40b0f548..d262b3fc 100644
--- a/frontend/src/components/SimulationResult/dashboard/tabs/AbmTab.tsx
+++ b/frontend/src/components/SimulationResult/dashboard/tabs/AbmTab.tsx
@@ -274,8 +274,37 @@ export function AbmTab({ simResult, brandName, businessType, storeArea }: Props)
       {/* 지도 / ABM 뷰 — 퐁당퐁당: AbmGroup(card white) → 여기 panel(secondary gray)
           → 안 inner cards(card white). 사용자 피드백 (2026-05-05): 제일 밖 white. */}
       {mode === 'map' ? (
-        <div className="bg-secondary border border-border rounded-3xl p-4">
-          <div className="h-14 bg-muted/90 backdrop-blur-md border border-border rounded-t-2xl flex justify-between items-center px-6 shrink-0 mb-0">
+        <div className="bg-secondary border border-border rounded-3xl p-4 flex flex-col gap-3">
+          {/* 시뮬레이션 안내 — 첫 진입 시 컨텍스트. 사용자 피드백 (2026-05-05). */}
+          <div className="rounded-2xl border border-primary/25 bg-primary/[0.04] px-4 py-3 flex items-start gap-3">
+            <div className="shrink-0 w-7 h-7 rounded-full bg-primary/15 flex items-center justify-center">
+              <Radar size={14} className="text-primary" />
+            </div>
+            <div className="flex flex-col gap-1 min-w-0">
+              <p className="text-[12px] font-black text-foreground tracking-tight leading-tight">
+                ABM 시뮬레이터 — 마포 5,000 페르소나 행동 시뮬
+              </p>
+              <p className="text-[11px] text-muted-foreground leading-snug tracking-tight">
+                지도에서 <span className="font-bold text-foreground">공실 spot (초록)</span> 클릭 →
+                <span className="font-bold text-foreground"> 시나리오 (날씨/요일/임대료)</span> 설정
+                → 시뮬 실행. 5,000 가상 에이전트가 마포 전역에서 이동·소비 패턴 시뮬 → 선택 spot 의
+                일 방문/매출/잠식 추정. 여러 spot 큐 누적 → 순차 실행 (우하단 패널).
+              </p>
+              <p className="text-[10px] text-muted-foreground/80 leading-snug">
+                범례:{' '}
+                <span className="font-bold" style={{ color: '#fb565b' }}>
+                  ▲ 자사 매장
+                </span>
+                {' · '}
+                <span className="font-bold" style={{ color: '#ffba00' }}>
+                  ▲ 경쟁업체
+                </span>
+                {' · '}
+                <span className="font-bold text-success">● 공실 매물</span>
+              </p>
+            </div>
+          </div>
+          <div className="h-14 bg-muted/90 backdrop-blur-md border border-border rounded-2xl flex justify-between items-center px-6 shrink-0">
             <h4 className="text-xs font-black text-foreground flex items-center gap-3">
               <span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_10px_rgba(0,44,209,0.8)]" />
               Multi-Agent Geospatial Recommendations
@@ -284,9 +313,9 @@ export function AbmTab({ simResult, brandName, businessType, storeArea }: Props)
               AI AGENT TARGETING · {locations.length} VACANCY · {competitors.length} COMP
             </p>
           </div>
-          <div className="relative bg-secondary rounded-b-2xl overflow-hidden">
+          <div className="relative bg-secondary rounded-2xl overflow-hidden">
             <AgentMapVisualizer
-              height="440px"
+              height="640px"
               locations={locations.length > 0 ? locations : undefined}
               competitors={competitors}
               onSpotClick={handleAgentMapSpotClick}