던플 개발기 (18): 모바일 차트 잔혹사 — 라이브러리 5개와 iOS WebKit

flowchart LR
  S[SSR 마크업<br/>정적 SVG 포함] --> H{React 하이드레이션}
  H -->|성공| E[useEffect 실행]
  H -->|dev origin 거부<br/>client chunk 미전송| X[하이드레이션 실패]
  E --> M[컨테이너 측정]
  M --> D[차트 그리기]
  X -.->|이펙트 자체가 안 돎| Z[정적 SVG만 남고<br/>차트 자리는 영원히 공백]

// ❌ iOS WebKit에서 무너진 방식: oklch 토큰을 canvas로 되읽기
function resolveColor(host: HTMLElement, cssVar: string, fallback: string): string {
  const probe = document.createElement('span');
  probe.style.color = `var(${cssVar})`;
  host.appendChild(probe);
  const computed = getComputedStyle(probe).color; // oklch → lab(...) 으로 직렬화됨
  host.removeChild(probe);
 
  // getComputedStyle이 oklch를 lab()으로 주는데 lightweight-charts는 lab()도 못 읽는다.
  // 그래서 1×1 canvas에 찍고 픽셀을 되읽어 rgba() 문자열로 바꾼다.
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  if (ctx === null) return computed;
  ctx.fillStyle = computed;
  ctx.fillRect(0, 0, 1, 1);
  const data = ctx.getImageData(0, 0, 1, 1).data; // iOS WebKit: 전부 0 → 검정
  const [r, g, b, a] = [data[0] ?? 0, data[1] ?? 0, data[2] ?? 0, data[3] ?? 255];
  return `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(3)})`;
}

// ✅ 캔버스는 테마별 고정 sRGB hex. (오렌지 라인 + 블루 막대)
export function chartPalette(isDark: boolean): ChartPalette {
  return isDark
    ? { line: '#fb923c', volumeBar: '#6184ce', muted: '#9c9dab', border: '#2c2d38' }
    : { line: '#ea580c', volumeBar: '#6785c3', muted: '#61626f', border: '#dcdde5' };
}

const TOUCH_GHOST_MS = 700;
 
// 모바일: native touch가 iOS WebKit에서 가장 견고하다.
const onTouch = (event: React.TouchEvent<HTMLDivElement>): void => {
  lastTouchAt.current = Date.now();
  const touch = event.touches[0];
  if (touch !== undefined) {
    pickNearest(touch.clientX, event.currentTarget.getBoundingClientRect());
  }
};
// 데스크톱: 마우스. 단, 탭 직후의 '유령' 마우스 이벤트는 걸러낸다.
const onMouseMove = (event: React.MouseEvent<HTMLDivElement>): void => {
  if (Date.now() - lastTouchAt.current < TOUCH_GHOST_MS) return; // 유령 mousemove 무시
  pickNearest(event.clientX, event.currentTarget.getBoundingClientRect());
};
const onMouseLeave = (): void => {
  if (Date.now() - lastTouchAt.current < TOUCH_GHOST_MS) return; // 유령 mouseleave가 툴팁 지우는 것 방지
  setHover(null);
};

<div
  ref={containerRef}
  className="h-60 w-full"
  // iOS WebKit이 캔버스를 그려도 화면에 합성하지 않을 수 있어 별도 GPU 레이어로 승격.
  style={{ transform: 'translateZ(0)' }}
/>

sequenceDiagram
  participant C as 컴포넌트
  participant L as 레이아웃
  participant Lib as 차트 라이브러리
  C->>Lib: mount 시 render / createChart
  Lib->>L: getBoundingClientRect()
  L-->>Lib: 0 (일부 iOS WebKit)
  Note over Lib: 300×150 기본 크기 → 아무것도 안 그림
  C->>L: clientWidth 폴링 (requestAnimationFrame)
  L-->>C: 374px (정상)
  C->>Lib: resize(374, 240) — 명시 크기 주입

// 컨테이너에 폭이 잡히면(rAF 폴링) Chart.js에 재측정·재그리기를 강제
const poll = (): void => {
  if (cancelled) return;
  if (box.clientWidth > 0) {
    chartRef.current?.resize(); // 라이브러리가 다시 재고 그리도록
    return;
  }
  raf = requestAnimationFrame(poll);
};

const resize = (): void => {
  // Chart.js 내부 측정은 getBoundingClientRect() — 일부 모바일 WebKit에서 0 반환.
  // resize(w, h)에 명시 인자를 주면 그 측정을 건너뛴다. clientWidth는 정상(374px).
  if (box.clientWidth > 0 && box.clientHeight > 0) {
    chartRef.current?.resize(box.clientWidth, box.clientHeight);
  }
};

const apply = (): void => {
  // clientWidth가 신뢰할 수 있는 값이지만, 일부 모바일 WebKit에서는 0을 준다.
  // 그럴 땐 window.innerWidth(항상 동작)에서 셸+카드 패딩을 뺀 값으로 폴백.
  const w = box.clientWidth > 0 ? box.clientWidth : Math.max(window.innerWidth - 64, 200);
  const h = box.clientHeight > 0 ? box.clientHeight : 240;
  setSize((prev) => (prev.w === w && prev.h === h ? prev : { w, h }));
};
apply(); // 크기를 즉시 한 번 정하고(차트를 절대 gate로 막지 않음) 이후 정밀화

// TEMP: 홈 로드마다 무조건 쏘는 비콘 — 기기 UA별로 이 빌드가 돌았는지,
// 대시보드 데이터가 이 기기에서 resolve됐는지를 dev 서버 로그로 확인.
useEffect(() => {
  const tag = (s: string): string => s.replace(/[^a-zA-Z0-9.]/g, '_').slice(0, 70);
  const pts = data?.chart.points.length ?? -1;
  void fetch(
    `/__mdbg/v4/home/${tag(navigator.userAgent)}/init${initial === null ? 0 : 1}/data${data === undefined ? 0 : 1}/pts${pts}/vw${window.innerWidth}`
  ).catch(() => undefined);
}, [initial, data]);

// TEMP: React 없이도 도는 인라인 스크립트. 미처리 에러/거부(청크 로드 실패,
// 하이드레이션 불일치 등)를 <img> 비콘으로 로그에 남긴다.
window.addEventListener('error', (e) =>
  beacon(
    '/assets/err/' +
      tag(
        (e.message || '') +
          '@' +
          String(e.filename || '')
            .split('/')
            .pop()
      )
  )
);
window.addEventListener('unhandledrejection', (e) =>
  beacon('/assets/rej/' + tag(e.reason && e.reason.message ? e.reason.message : e.reason))
);

flowchart TD
  A[폰에서 차트가 빈 화면] --> B{인라인 스크립트 비콘은 오나?}
  B -->|온다 48개| C{React 이펙트 비콘은 오나?}
  C -->|하나도 안 온다 0개| D[React가 하이드레이션 안 됨]
  D --> E{왜 안 붙나 - error 비콘}
  E -->|client chunk 로드 실패| F[Next dev가 LAN origin에<br/>청크 제공 거부]

// apps/market-web/next.config.js
const nextConfig = {
  // 폰(비-localhost LAN origin)이 dev 청크/HMR을 받도록 허용.
  // 없으면 Next dev가 cross-origin으로 보고 client chunk 제공을 거부 → 하이드레이션 실패
  //  → 차트뿐 아니라 모든 client 인터랙션이 빈 화면이 된다. 내 머신의 LAN IP를 넣는다.
  allowedDevOrigins: ['192.168.0.114'],
};

void import('lightweight-charts').then(
  ({ createChart, LineSeries, HistogramSeries, ColorType, CrosshairMode }) => {
    const palette = chartPalette(resolvedTheme === 'dark');
    chartApi = createChart(container, {
      autoSize: true, // 예전의 명시 측정 workaround는 사라졌다.
      layout: {
        background: { type: ColorType.Solid, color: 'transparent' },
        textColor: palette.muted,
      },
      leftPriceScale: { visible: true, borderColor: palette.border },
      rightPriceScale: { visible: true, borderColor: palette.border },
      crosshair: { mode: CrosshairMode.Magnet },
      localization: { priceFormatter: (v: number) => formatGoldCompact(v) },
      handleScroll: false,
      handleScale: false,
    });
 
    // 막대(시세 총액)를 먼저 → 라인이 위에 그려지도록. 얇게 보이라고 빈 슬롯을 끼워 넣는다.
    const histSeries = chartApi.addSeries(HistogramSeries, {
      color: palette.volumeBar,
      base: 0,
      priceScaleId: 'right',
    });
    histSeries.setData(densifyBars(soldData));
 
    const lineSeries = chartApi.addSeries(LineSeries, {
      color: palette.line,
      lineWidth: 2,
      priceScaleId: 'left',
    });
    lineSeries.setData(listingData);
    chartApi.timeScale().fitContent();
  }
);

export function densifyBars(real: readonly SeriesPoint[]): Array<SeriesPoint | Whitespace> {
  const subslots = real.length <= 8 ? 4 : real.length <= 20 ? 2 : 1;
  if (real.length < 2 || subslots < 2) return [...real];
  const out: Array<SeriesPoint | Whitespace> = [];
  for (let i = 0; i < real.length; i++) {
    const point = real[i];
    if (point === undefined) continue;
    out.push(point);
    const next = real[i + 1];
    if (next !== undefined) {
      const step = (next.time - point.time) / subslots;
      for (let k = 1; k < subslots; k++) {
        out.push({ time: (point.time + Math.round(step * k)) as UTCTimestamp });
      }
    }
  }
  return out;
}