fix(vton-slider): initial render shows after-only (clip-path refactor) (#602)

[thxforall]

Summary

BeforeAfter slider의 첫 렌더 시 after 이미지만 보이고 before 이미지가 width=0으로 표시되지 않던 race condition을 CSS clip-path 방식으로 리팩토하여 해결.

Root cause

BeforeAfterSlider.tsx:54-57의 inner image width를 containerRef.current.offsetWidth로 계산:

style={{
  width: `${containerRef.current ? containerRef.current.offsetWidth : 0}px`,
  maxWidth: "none",
}}

첫 렌더에서 containerRef.current === null → before 이미지 width=0 → after만 표시. 사용자가 슬라이더를 드래그하면 setSliderPos가 re-render를 트리거하면서 그제야 ref가 측정되어 정상 표시.

Changes

• packages/web/lib/components/vton/BeforeAfterSlider.tsx — 전체 리팩토
  • <div> clip wrapper + offsetWidth 기반 inner img 제거
  • 두 이미지를 모두 absolute inset-0 h-full w-full object-contain로 동일 위치/크기에 겹쳐 배치
  • 위 레이어(before)에만 style={{ clipPath: \inset(0 ${100 - sliderPos}% 0 0)` }}` 적용
  • divider line에 pointer-events-none 추가 (드래그 hit-test 방해 방지)
• packages/web/lib/components/vton/__tests__/BeforeAfterSlider.test.tsx (신규)
  • 첫 마운트에서 두 이미지 모두 DOM에 존재 확인
  • 기본 sliderPos=50일 때 clipPath가 inset(0 50% 0 0)인지 확인
  • inline width px 값이 더 이상 적용되지 않는지(offsetWidth 의존 제거 확인) 확인

Verification

• bun run test BeforeAfterSlider.test.tsx → 3 PASS
• bun run lint → 0 errors (pre-existing img warning만)
• bun run tsc --noEmit → 0 errors (vton files)
• bun run build → PASS

Test plan

• VTON 모달에서 try-on 완료 후 결과 화면 첫 렌더 시 before/after가 50% 분할로 동시에 표시되는지 확인 (이전엔 드래그해야 보였음)
• 슬라이더 드래그 시 부드러운 비율 변경 확인
• Before/After 텍스트 라벨 표시 확인
• 핸들 클릭+드래그 동작 확인 (divider line이 hit-test 방해 안 함)

---

⚠️ Heads-up — bun run build failure is NOT this PR

Local bun run build가 packages/web/app/api/v1/content/assets/plan/__tests__/route.test.ts:559의 useResearchInCopy 타입 mismatch로 실패합니다. 이는 dev pre-existing: #498 (feat(content-studio): AI-powered content generation pipeline) 머지된 시점부터 발생. 본 PR은 vton 파일만 건드리고 vton 한정 lint/tsc/test는 모두 PASS. content-studio 영역 fix는 별도 owner가 처리해야 함.

Refs #602 (sub-PR #2 of 4)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
decoded-app	Error		May 28, 2026 10:45am