고객 수 추이에 +- 추가.

src/features/crm/CsHome/ActiveCustomerTrendLine.jsx

@@ -1,72 +1,121 @@
 import { useMemo } from 'react'
 
-// 최근 N일 활성 고객 수 — 미니멀 라인.
+// 최근 N일: 위 = 활성 고객 수(선), 아래 = 일별 신규(+)/해지(−) 막대. x축(날짜) 공유.
-//  선 + 점 + 각 점 위 숫자 + 아래 날짜만. (격자/영역/그림자/툴팁 없음)
+//  절대 수와 일별 증감은 스케일이 완전히 달라서 한 영역에 겹치지 않고 위/아래로 분리.
-const W = 720, H = 180
+const W = 720, H = 320
-const X0 = 30, X1 = W - 30      // 좌우 여백
+const X0 = 40, X1 = W - 28
-const YTOP = 52, YBOT = 132     // 선이 그려지는 세로 밴드
+const L_TOP = 44, L_BOT = 118   // 위: 선 영역
-const ACCENT = '#2e7d32'
+const B_TOP = 182, B_BOT = 268  // 아래: 막대 영역
+const DATE_Y = H - 10
+const ACCENT = '#2e7d32'        // 선 / 신규(+)
+const REM = '#d64545'           // 해지(−)
 
 const parseYmd = (s) => {
-  const [y, m, d] = String(s).split('-').map(Number)
+  const [, m, d] = String(s).split('-').map(Number)
   return { m, d }
 }
 
 export default function ActiveCustomerTrendLine({ points }) {
   const model = useMemo(() => {
-    const pts = (points ?? [])
+    const pts = (points ?? []).map((p) => ({
-      .map((p) => ({ ...parseYmd(p.date), count: Number(p.count ?? 0) }))
+      ...parseYmd(p.date),
-      .filter((p) => Number.isFinite(p.count))
+      count: Number(p.count ?? 0),
+      added: Number(p.added ?? 0),
+      removed: Number(p.removed ?? 0),
+    }))
     if (!pts.length) return { pts: [] }
 
-    const counts = pts.map((p) => p.count)
-    let lo = Math.min(...counts), hi = Math.max(...counts)
-    // 선이 밴드 가운데쯤 오도록 살짝 여백
-    const pad = lo === hi ? Math.max(1, Math.round(Math.abs(hi) * 0.08)) : (hi - lo) * 0.6
-    lo -= pad; hi += pad
-    if (lo === hi) hi = lo + 1
-
     const n = pts.length
     const xOf = (i) => (n === 1 ? (X0 + X1) / 2 : X0 + ((X1 - X0) * i) / (n - 1))
-    const yOf = (v) => YBOT - ((v - lo) / (hi - lo)) * (YBOT - YTOP)
 
-    const xy = pts.map((p, i) => [xOf(i), yOf(p.count)])
+    // 위: 선 스케일 (절대 수 — 변화가 작으니 데이터 범위에 맞춰 확대)
-    const linePath = xy
+    const cs = pts.map((p) => p.count)
-      .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0].toFixed(2)},${p[1].toFixed(2)}`)
+    let lo = Math.min(...cs), hi = Math.max(...cs)
+    const pad = lo === hi ? Math.max(1, Math.round(Math.abs(hi) * 0.02)) : (hi - lo) * 0.6
+    lo -= pad; hi += pad
+    if (lo === hi) hi = lo + 1
+    const yLine = (v) => L_BOT - ((v - lo) / (hi - lo)) * (L_BOT - L_TOP)
+    const linePath = pts
+      .map((p, i) => `${i === 0 ? 'M' : 'L'} ${xOf(i).toFixed(2)},${yLine(p.count).toFixed(2)}`)
       .join(' ')
 
-    return { pts, xOf, yOf, linePath }
+    // 아래: 막대 스케일 (그 주 증감 최대치 기준 단일 스케일)
+    const maxUp = Math.max(0, ...pts.map((p) => p.added))
+    const maxDown = Math.max(0, ...pts.map((p) => p.removed))
+    const denom = maxUp + maxDown
+    const ppu = denom > 0 ? (B_BOT - B_TOP) / denom : 0
+    const baseline = denom > 0 ? B_TOP + maxUp * ppu : (B_TOP + B_BOT) / 2
+    const spacing = n > 1 ? (X1 - X0) / (n - 1) : (X1 - X0)
+    const bw = Math.min(26, Math.max(12, spacing * 0.42))
+
+    return { pts, xOf, yLine, linePath, lastIdx: n - 1, ppu, baseline, bw, hasBars: denom > 0 }
   }, [points])
 
   if (!model.pts.length) {
-    return <div className="cshome-chart-empty">최근 활성 고객 데이터가 없습니다.</div>
+    return <div className="cshome-chart-empty">최근 데이터가 없습니다.</div>
   }
 
-  const { pts, xOf, yOf, linePath } = model
+  const { pts, xOf, yLine, linePath, lastIdx, ppu, baseline, bw, hasBars } = model
-  const lastIdx = pts.length - 1
 
   return (
-    <svg className="cshome-chart" viewBox={`0 0 ${W} ${H}`} role="img" aria-label="최근 활성 고객 추이">
+    <svg className="cshome-chart" viewBox={`0 0 ${W} ${H}`} role="img"
+      aria-label="활성 고객 추이 및 일별 신규·해지">
+      {/* 영역 라벨 */}
+      <text x={8} y={16} fontSize="9.5" fill="#9aa5a0">활성 고객 (곳)</text>
+      <text x={8} y={B_TOP - 16} fontSize="9.5" fill="#9aa5a0">일별 증감</text>
+
+      {/* 위: 활성 수 선 */}
       <path d={linePath} fill="none" stroke={ACCENT} strokeWidth="2"
         strokeLinejoin="round" strokeLinecap="round" />
-
       {pts.map((p, i) => {
-        const cx = xOf(i), cy = yOf(p.count)
+        const cx = xOf(i), cy = yLine(p.count), isLast = i === lastIdx
-        const isLast = i === lastIdx
         return (
-          <g key={i}>
+          <g key={`l${i}`}>
             <circle cx={cx} cy={cy} r={isLast ? 4 : 3} fill={ACCENT} />
-            <text x={cx} y={cy - 10} textAnchor="middle"
+            <text x={cx} y={cy - 9} textAnchor="middle"
-              fontSize={isLast ? 11 : 10} fontWeight={isLast ? 700 : 500}
+              fontSize={isLast ? 10.5 : 9.5} fontWeight={isLast ? 700 : 500}
-              fill={isLast ? ACCENT : '#5b6b60'}>
+              fill={isLast ? ACCENT : '#5b6b60'}>{p.count.toLocaleString()}</text>
-              {p.count.toLocaleString()}
+          </g>
-            </text>
+        )
-            <text x={cx} y={H - 10} textAnchor="middle" fontSize="9.5" fill="#aab2ac">
+      })}
+
+      {/* 아래: 0 기준선 + 신규/해지 막대 */}
+      <line x1={X0} y1={baseline} x2={X1} y2={baseline} stroke="#d8e0db" />
+      {pts.map((p, i) => {
+        const cx = xOf(i)
+        const upH = p.added * ppu, downH = p.removed * ppu
+        const none = p.added === 0 && p.removed === 0
+        return (
+          <g key={`b${i}`}>
+            {p.added > 0 && (
+              <>
+                <rect x={cx - bw / 2} y={baseline - upH} width={bw} height={upH} rx="3" fill={ACCENT} />
+                <text x={cx} y={baseline - upH - 6} textAnchor="middle"
+                  fontSize="11" fontWeight="700" fill={ACCENT}>+{p.added.toLocaleString()}</text>
+              </>
+            )}
+            {p.removed > 0 && (
+              <>
+                <rect x={cx - bw / 2} y={baseline} width={bw} height={downH} rx="3" fill={REM} />
+                <text x={cx} y={baseline + downH + 14} textAnchor="middle"
+                  fontSize="11" fontWeight="700" fill={REM}>−{p.removed.toLocaleString()}</text>
+              </>
+            )}
+            {none && (
+              <text x={cx} y={baseline - 6} textAnchor="middle" fontSize="10" fill="#c4ccc6">0</text>
+            )}
+            <text x={cx} y={DATE_Y} textAnchor="middle" fontSize="9.5" fill="#aab2ac">
               {p.m}/{p.d}
             </text>
           </g>
         )
       })}
+
+      {!hasBars && (
+        <text x={W / 2} y={baseline - 12} textAnchor="middle" fontSize="11" fill="#9aa5a0">
+          이 기간 변동 없음
+        </text>
+      )}
     </svg>
   )
 }

src/features/crm/CsHome/CsHomePage.jsx

@@ -13,7 +13,6 @@ const localToday = () => {
 }
 
 const asList = (json) => (Array.isArray(json) ? json : (json?.data ?? []))
-const asObject = (json) => (json?.data ?? json ?? null)
 
 /* ─────────────────────────────────────────────────────────────
    드라이버 상태 코드(ddsStatus) → 카테고리 매핑.
@@ -38,21 +37,18 @@ const categoryOf = (code) => {
 
 export default function CsHomePage() {
   const [rows, setRows] = useState([])         // /driver-daily-stat 응답 (오늘)
-  const [cust, setCust] = useState(null)       // { total, today } | null
+  const [trend, setTrend] = useState([])       // [{ date, count, added, removed }] 최근 7일
-  const [trend, setTrend] = useState([])       // [{ date, count }] 최근 7일 활성 고객
   const [loading, setLoading] = useState(true)
   const [driverErr, setDriverErr] = useState(null)
-  const [custErr, setCustErr] = useState(null)
   const [trendErr, setTrendErr] = useState(null)
   const [updatedAt, setUpdatedAt] = useState(null)
 
   const load = useCallback(async (signal) => {
     const today = localToday()
 
-    // 세 소스를 독립적으로 호출 — 한쪽이 실패해도 나머지는 그대로 표시.
+    // 두 소스를 독립적으로 호출 — 한쪽이 실패해도 나머지는 그대로 표시.
-    const [driverRes, custRes, trendRes] = await Promise.allSettled([
+    const [driverRes, trendRes] = await Promise.allSettled([
       fetchWithRefresh(crmUrl(`/driver-daily-stat?date=${today}`)),
-      fetchWithRefresh(crmUrl('/customer/summary')),
       fetchWithRefresh(crmUrl('/customer/active-trend?days=7')),
     ])
 
@@ -67,23 +63,6 @@ export default function CsHomePage() {
       if (!signal?.aborted) setDriverErr(e.message || '운행 현황을 불러오지 못했습니다.')
     }
 
-    // 고객 요약
-    try {
-      if (custRes.status !== 'fulfilled') throw custRes.reason
-      const res = custRes.value
-      if (!res.ok) throw new Error(`고객 요약 요청 실패 (${res.status})`)
-      const obj = asObject(await res.json()) ?? {}
-      // 키 이름 변형을 관대하게 수용
-      const total = obj.totalCount ?? obj.total ?? obj.customerCount ?? null
-      const todayN = obj.todayCount ?? obj.today ?? obj.addedToday ?? obj.newToday ?? null
-      if (!signal?.aborted) {
-        setCust({ total, today: todayN })
-        setCustErr(null)
-      }
-    } catch (e) {
-      if (!signal?.aborted) setCustErr(e.message || '고객 요약을 불러오지 못했습니다.')
-    }
-
     // 최근 7일 활성 고객 추이
     try {
       if (trendRes.status !== 'fulfilled') throw trendRes.reason
@@ -158,15 +137,10 @@ export default function CsHomePage() {
       <div className="cshome-section">
         <div className="cshome-section-head">
           <span className="cshome-section-title">고객</span>
-          {custErr && <span className="cshome-section-note">고객 요약 미연동 · {custErr}</span>}
-        </div>
-        <div className="cshome-grid cshome-grid-2">
-          <Card label="전체 고객 수" value={fmt(cust?.total)} unit="명" />
-          <Card label="오늘 추가된 고객" value={fmt(cust?.today)} unit="명" accent />
         </div>
         <div className="cshome-chart-card">
           <div className="cshome-chart-head">
-            <span className="cshome-chart-title">최근 7일 활성 고객 추이</span>
+            <span className="cshome-chart-title">최근 7일 활성 추이 · 신규(+)/해지(−)</span>
             {trendErr && <span className="cshome-section-note">추이 데이터 오류 · {trendErr}</span>}
           </div>
           <ActiveCustomerTrendLine points={trend} />