Codex 작업지시서 #5 · STAGE 4+5 (TM 워크플로 + agent 성과)

STAGE 4+5 — TM 워크플로 + agent 성과. 출격 1차 baseline 정합성 작업.

[CONTEXT]
- 리포: /home/tlswkehd/projects/keeper-direct
- 브랜치: staging
- main HEAD: bd23ceb (P1+P1.5+P2+STAGE 1+STAGE 2 v3 + STAGE 2.5 wiring + balerion forward 모두 머지됨)
- 출격 진행 중: 5/6 11시 시작. 실제 lead 1건 진입 (방민아=Mn5aB attribution)
- 자동님 발화: "텔레마케터가 대시보드를 보고 사진데이터하고 매장데이터가 잘 들어왓는지 확인한 후에, 전화를 걸 수 있는 uiux가 필요" + "각 에이전트별 성과를 볼수있는 에이전트별 페이지가 필요"

[현재 dispatch bottleneck]
- 진단 단(영업원→사장님)은 100% 동작
- balance 50만원 그대로 — TM이 dispatch UI 어려워서 [💸 발송] 못 누름
- pending_review row 1건 (김밥천국 정왕역점) 큐에 있음

═══════════════════════════════════════════════
STAGE 4 — LeadDetailClient 한눈 UX (1 commit, ~2-3h)
═══════════════════════════════════════════════

기존 STAGE 4 보고서 그대로 진행:
- LeadDetailClient.tsx 16섹션 → Top fold(7) + Collapsible(10) 재배치
- 신규 컴포넌트 app/keeper-out/admin/components/CollapsibleSection.tsx
- 자세한 스펙은 docs/keeper-out/anti-abuse/06-p3-implementation-brief.md §3-2 + STAGE 4 보고서

Top fold 7개:
  1. Hero / 2. 매장 정보 / 4. Pain Points / 5. 사진 갤러리 /
  6. 영업자 / 7. 지급 요약 / 12. Status 진행

Collapsible 10개:
  3·8·9·10·11·13·14·15·16·17

커밋: feat(keeper-out/admin): lead detail 한눈 UX (Top fold 7 + Collapsible 10)

═══════════════════════════════════════════════
STAGE 5-A — PendingQueue 카드 향상 (1 commit, ~1.5-2h, ★ 가장 critical)
═══════════════════════════════════════════════

파일: app/keeper-out/admin/pending/PendingQueue.tsx 재작성
       (또는 새 sub-components)

신 카드 레이아웃:
A. Hero (1 row): 매장명 (큰글씨) · 시각 · scenario badge B vs A
B. 매장 사진 thumbnail row (인라인):
   lead.photo_urls.slice(0, 2).map((url) =>
     
   )
   사진 0장이면 "📷 사진 없음" 텍스트
C. 매장 정보 5 stat (한 줄 또는 grid):
   보안 / device_age / camera_count / monthly_fee / combined_isp
D. Pain Points chip + 영업분기 매핑:
   pain_points.map((p) => 🔴 {p} → {PAIN_TALKING[p]})
   PAIN_TALKING은 LeadDetailClient의 매핑 동일 (출동지연→SLA 등)
E. ★ [📞 전화] 큰 CTA 버튼:
   
     📞 {formatPhone(phone)}
   
F. outcome 빠른 액션 6 버튼 (2열×3 그리드):
   기존 OUTCOME_LABELS 6개 — 드롭다운 X, 버튼 그리드:
   [✅ 확인] [📵 부재] [❌ 점주 아님]
   [🚫 거절] [⚠️ 의심] [📞 번호 오류]
   각 버튼 클릭 시 markOutcome(id, outcome) 기존 함수 사용
G. ★ outcome=confirmed 시 [💸 발송] 큰 버튼 노출:
   if (lead.tm_outcome === 'confirmed' && lead.payout_status === 'pending_review') {
     
       💸 1만원 N페이 발송 (잔액 50만원)
     
   }
   dispatch 함수 = POST /api/keeper-out/admin/leads/[id]/dispatch (기존 endpoint, df00a7a)

H. 발송 후 처리:
   await load() refresh → 카드가 큐에서 제거됨

체크리스트:
- mobile-first (max-w-2xl, 모바일 viewport에서 잘 읽힘)
- 큰 click target (44x44 이상 모든 button/link)
- 색깔: 키퍼 오렌지 #ff5c00 (전화 버튼) + green-600 (발송 버튼)
- agent_1_data.code 표시 (자동님이 영업원 어떤 코드인지 확인 가능)

커밋: feat(keeper-out/admin): pending queue 카드 향상 — 사진 + tel CTA + outcome 빠른 액션 + 발송 강조

═══════════════════════════════════════════════
STAGE 5-B — agent 성과 페이지 (2 commits, ~2h)
═══════════════════════════════════════════════

(B-1) GET /api/keeper-out/admin/agents/route.ts 신설:

  export async function GET() {
    const agents = await sbSelect("keeper_outbound_agents",
      "select=*&active=eq.true&order=name.asc");

    // 각 agent의 성과 aggregation (Supabase RPC 또는 client-side)
    // 1차 단순 fetch로 시작, agent별 lead count는 클라이언트에서 계산
    const allLeads = await sbSelect("keeper_outbound_leads",
      "select=id,agent_1,agent_2,agent_3,status,scenario,expected_benefit,payout_status,created_at");

    const stats = agents.map(agent => {
      const myLeads = allLeads.filter(l =>
        l.agent_1 === agent.id || l.agent_2 === agent.id || l.agent_3 === agent.id
      );
      const today = myLeads.filter(l =>
        new Date(l.created_at).toDateString() === new Date().toDateString()
      ).length;
      const installed = myLeads.filter(l => l.status === 'installed').length;
      const sent = myLeads.filter(l => l.payout_status === 'sent').length;
      const benefit_sum = myLeads
        .filter(l => l.status === 'installed')
        .reduce((s, l) => s + (l.expected_benefit || 0), 0);
      return { ...agent, today, installed, sent, benefit_sum, total_leads: myLeads.length };
    });

    return NextResponse.json({ ok: true, agents: stats });
  }

(B-2) GET /api/keeper-out/admin/agents/[code]/route.ts 신설:

  export async function GET(_req, { params }) {
    const { code } = await params;

    const agents = await sbSelect("keeper_outbound_agents",
      `select=*&code=eq.${code}&limit=1`);
    if (!agents[0]) return NextResponse.json({ error: "not found" }, { status: 404 });
    const agent = agents[0];

    // 본인 leads (3 attribution 슬롯 OR)
    const leads = await sbSelect("keeper_outbound_leads",
      `select=id,store_name,phone,scenario,status,payout_status,expected_benefit,created_at` +
      `&or=(agent_1.eq.${agent.id},agent_2.eq.${agent.id},agent_3.eq.${agent.id})` +
      `&order=created_at.desc&limit=100`);

    return NextResponse.json({ ok: true, agent, leads });
  }

(B-3) UI 페이지:

app/keeper-out/admin/agents/page.tsx (RSC):
  import AgentsClient from "./AgentsClient";
  export default function Page() {
    return ;
  }

app/keeper-out/admin/agents/AgentsClient.tsx ("use client"):
  - useEffect로 GET /api/keeper-out/admin/agents
  - 카드 그리드 (각 agent):
    - name + code + role
    - 오늘/이번주/누적 stat
    - day_cap_count / week_cap_count 진행 (현재 사용 X — 추후)
    - 클릭 시 /keeper-out/admin/agents/{code}로 이동

app/keeper-out/admin/agents/[code]/page.tsx (RSC):
  import AgentDetailClient from "./AgentDetailClient";
  export default async function Page({ params }) {
    const { code } = await params;
    return ;
  }

app/keeper-out/admin/agents/[code]/AgentDetailClient.tsx ("use client"):
  - useEffect로 GET /api/keeper-out/admin/agents/{code}
  - Hero: name + code + role + active badge
  - Stat 카드 3개 (오늘 / 이번주 / 누적)
  - Stat 카드 보조: installed / sent / benefit_sum
  - 본인 매장 리스트 (Link href={/keeper-out/admin/leads/{id}})
  - 빈 상태: "아직 진단 받은 매장 없음"

(B-4) AdminClient.tsx에 nav 추가:
  영업원 성과
  - 기존 nav 옆에 추가
  - 기존 leaderboard와 별개 또는 통합 (코덱스 자체 판단)

커밋 단위 2개:
  1. feat(keeper-out/admin): agents 성과 API endpoints (목록 + 1명)
  2. feat(keeper-out/admin): agents 성과 페이지 (목록 + detail) + nav 추가

═══════════════════════════════════════════════
가드레일 (전체 공통)
═══════════════════════════════════════════════

✗ 청록 #009090 / #00b4b4 등 X (admin은 키퍼 오렌지)
✗ /diagnose/* 수정 X
✗ "한화" / "키퍼" / "하나비전" 사용자 face 텍스트 X
✗ next.config / package.json 수정 X
✗ main 직접 push X — staging only
✗ untracked 13개 보존
✓ 색깔: #ff5c00 / #cc4900 / #fff6f1 / #e8e4db
✓ mobile-first (큰 button, max-w 적절)
✓ 기존 endpoint 재사용 (PendingQueue dispatch / tm-call 그대로)
✓ PostgREST embed (LEAD_DETAIL_SELECT 패턴 차용)
✓ Next.js 15 params Promise (await params)

[검증]
1. npx tsc --noEmit → 0
2. npx eslint <변경 TS/TSX> → 0
3. npm run build → success
4. dev /keeper-out/admin/pending → 카드에 사진/매장정보/전화 버튼/outcome 6/발송 버튼 모두 노출
5. dev /keeper-out/admin/agents → 카드 그리드
6. dev /keeper-out/admin/agents/Mn5aB → 방민아 detail (1건 lead 표시)
7. dev /keeper-out/admin/agents/Kj7yJ → 김윤주 detail (0건)

[보고 형식]

## STAGE 4+5 결과 보고

### 1. commit sha (4개)
-  feat(keeper-out/admin): lead detail 한눈 UX
-  feat(keeper-out/admin): pending queue 카드 향상
-  feat(keeper-out/admin): agents 성과 API endpoints
-  feat(keeper-out/admin): agents 성과 페이지

### 2. 변경 파일 (신규/수정)

### 3. 검증 결과 (각 stage별 tsc/eslint/build/dev)

### 4. PendingQueue 카드 시각 확인 — 사진/전화/outcome/발송 모두 노출되는지

### 5. agents 페이지 — 방민아 1건 / 김윤주 0건 정확하게 표시되는지

### 6. 결정 사항 (자체 판단)

### 7. 막힌 곳 / 의문

[시작]
지금 STAGE 4 → 5-A → 5-B 순서로 진행. 각 stage 완료 후 staging push만.
main 머지는 PM 검증 후 자동님 결정.