Codex 작업지시서 #4 · STAGE 4 대시보드 한눈 UX

STAGE 4 — 대시보드 한눈 UX (출격 후 작업, deadline 외)

[CONTEXT]
- 리포: /home/tlswkehd/projects/keeper-direct
- 브랜치: staging
- main HEAD: b4d4b83 (P1+P1.5+P2+STAGE 1+STAGE 2 v3 anti-abuse + STAGE 2.5 wiring 모두 머지됨)
- staging도 동일 (이번 STAGE 4가 main 대비 첫 commit)
- 영업원 agent INSERT 완료: 방민아=Mn5aB / 김윤주=Kj7yJ / 자동님=86Af9

[MISSION]
LeadDetailClient.tsx 16섹션을 Top fold(7개) + Collapsible(10개)로 재배치.
영업원이 폰에서 lead 클릭 시 스크롤 0회에 핵심 3가지가 보이게:
1. 매장 피드백 = pain_points + pain_note
2. 매장 정보 = store_name + ceo + phone + 보안 5 stat
3. 사진들 = photo_urls 그리드 (대형, 클릭 시 새 탭 — lightbox는 후속)

[작업 — 1 commit]

(1) 신규 컴포넌트
파일: app/keeper-out/admin/components/CollapsibleSection.tsx

"use client";
import { useState } from "react";

interface Props {
  title: string;
  icon?: string;
  defaultOpen?: boolean;
  badge?: string;
  children: React.ReactNode;
}

export default function CollapsibleSection({ title, icon, defaultOpen = false, badge, children }: Props) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    

       setOpen(!open)}
        className="w-full flex items-center justify-between p-4 hover:bg-[#fff6f1] transition"
      >
        
          {icon && {icon}}
          {title}
          {badge && {badge}}
        
        {open ? "▴" : "▾"}
      
      {open && 
{children}
}
    
  );
}

(2) LeadDetailClient.tsx 재배치

Top fold (스크롤 0회 보임 — 그대로 노출):
  ├─ 1. Hero (매장명 + status pipeline + scenario benefit + 등록일)
  ├─ 2. 매장 정보 (ceo / phone tel: / 보안 5 stat 카드)
  ├─ 4. ★ Pain Points + 영업분기 매핑 (chip + pain_note 인용)
  ├─ 5. ★ 사진 갤러리 (대형 그리드, target=_blank)
  ├─ 6. 영업자 1·2·3 미니 카드
  ├─ 7. 지급 요약 (총 지급 + 대기 — 액수 큰 글씨)
  └─ 12. Status 진행 액션 (PipelineRow 인라인)

Collapsible (접힌 상태 default — 사용자가 펼쳐 봄):
  ├─ 8. 이벤트 타임라인 — defaultOpen=false, badge="N건"
  ├─ 9. 방문 로그 — defaultOpen=false, badge="N건"
  ├─ 10. 점주 다른 매장 — defaultOpen=false, badge=owner.name
  ├─ 11. 매장 마스터 — defaultOpen=false (place null이면 hide)
  ├─ 13. 메모 추가 폼 — defaultOpen=false
  ├─ 14. ★ 검증 결과 — defaultOpen=false
  ├─ 15. ★ 키퍼 admin 매칭 — defaultOpen=false
  ├─ 16. ★ 승인 이력 (TM/admin) — defaultOpen=false
  └─ 17. ★ 발송 액션 — defaultOpen=false (TM은 admin/pending에서 직접 호출)

* 섹션 3 (현재 보안)는 섹션 2 매장 정보의 5 stat과 통합 → 별도 섹션 X

[가드레일]
✗ 청록 #009090 / #00b4b4 / #006B6B / #007575 / #e6f7f7 사용 X (admin 영역, 키퍼 오렌지 #ff5c00)
✗ "한화" / "키퍼" / "하나비전" 사용자 face 텍스트 X
✗ /api endpoints / 다른 페이지 수정 X
✗ next.config / package.json 수정 X
✗ main 직접 push X
✗ untracked 13개 (CLAUDE.md / catchrank / landing / context / data / scripts / docs / public/assets) 보존
✓ LeadDetailClient.tsx 본체 재배치 OK (이번 핵심)
✓ CollapsibleSection.tsx 신설 OK
✓ 기존 섹션 컨텐츠는 그대로 두고 wrapper만 변경 (HeroSection, PainSection 등 함수 재사용)

[검증]
1. npx tsc --noEmit → 0
2. npx eslint app/keeper-out/admin/leads/[id]/LeadDetailClient.tsx app/keeper-out/admin/components/CollapsibleSection.tsx → 0
3. npm run build → success
4. dev 서버 띄우고 /keeper-out/admin/leads/ 접속:
   - Top fold(7개)가 스크롤 0회에 모두 보이는지 (모바일 viewport 360x800 기준)
   - Collapsible 클릭 시 펼침/접힘 동작
   - 모바일 폰 사용성 (영업원이 한 손으로 스크롤)

[커밋]
feat(keeper-out/admin): lead detail 한눈 UX — Top fold(7) + Collapsible(10) 재배치

[보고 형식]

## STAGE 4 결과 보고

### 1. commit sha
-  feat(keeper-out/admin): lead detail 한눈 UX ...

### 2. 변경 파일
신규: app/keeper-out/admin/components/CollapsibleSection.tsx
수정: app/keeper-out/admin/leads/[id]/LeadDetailClient.tsx

### 3. Top fold 7개 / Collapsible 10개 배치 그대로 따랐는지 (예/변경)

### 4. 검증 결과
- tsc / eslint / build PASS / FAIL
- 모바일 viewport에서 Top fold 7개 스크롤 0회 확인
- Collapsible 동작 확인

### 5. 결정 사항 (자체 판단한 것)

### 6. 막힌 곳 / 의문

[시작]
지금 진행. staging push까지. main 머지는 PM 검증 후 자동님 결정.