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

packages/web/lib/components/vton/BeforeAfterSlider.tsx

@@ -36,29 +36,24 @@ export function BeforeAfterSlider({
       }}
       onPointerMove={(e) => handleMove(e.clientX)}
     >
+      {/* After (밑층, 항상 100% 표시) */}
       <img
         src={afterSrc}
         alt="Result"
         draggable={false}
         className="pointer-events-none absolute inset-0 h-full w-full object-contain"
       />
+      {/* Before (위층, clip-path로 좌측만 표시) */}
+      <img
+        src={beforeSrc}
+        alt="Original"
+        draggable={false}
+        className="pointer-events-none absolute inset-0 h-full w-full object-contain"
+        style={{ clipPath: `inset(0 ${100 - sliderPos}% 0 0)` }}
+      />
+      {/* Divider line + handle */}
       <div
-        className="absolute inset-0 overflow-hidden"
-        style={{ width: `${sliderPos}%` }}
-      >
-        <img
-          src={beforeSrc}
-          alt="Original"
-          draggable={false}
-          className="pointer-events-none h-full object-contain"
-          style={{
-            width: `${containerRef.current ? containerRef.current.offsetWidth : 0}px`,
-            maxWidth: "none",
-          }}
-        />
-      </div>
-      <div
-        className="absolute top-0 bottom-0 z-10 w-0.5 bg-[#eafd67]"
+        className="pointer-events-none absolute top-0 bottom-0 z-10 w-0.5 bg-[#eafd67]"
         style={{ left: `${sliderPos}%` }}
       >
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-[#eafd67] bg-[#050505] p-1.5">

packages/web/lib/components/vton/__tests__/BeforeAfterSlider.test.tsx

@@ -0,0 +1,44 @@
+/* @vitest-environment jsdom */
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { BeforeAfterSlider } from "../BeforeAfterSlider";
+
+describe("BeforeAfterSlider", () => {
+  it("renders both before and after images on first mount", () => {
+    render(
+      <BeforeAfterSlider
+        beforeSrc="https://example.com/before.jpg"
+        afterSrc="https://example.com/after.jpg"
+      />
+    );
+
+    expect(screen.getByAltText("Original")).toBeInTheDocument();
+    expect(screen.getByAltText("Result")).toBeInTheDocument();
+  });
+
+  it("applies clip-path inset(0 50% 0 0) to before image at default sliderPos=50", () => {
+    render(
+      <BeforeAfterSlider
+        beforeSrc="https://example.com/before.jpg"
+        afterSrc="https://example.com/after.jpg"
+      />
+    );
+
+    const beforeImg = screen.getByAltText("Original");
+    expect(beforeImg.style.clipPath).toContain("inset(0 50% 0 0)");
+  });
+
+  it("does not use offsetWidth measurement on before image", () => {
+    render(
+      <BeforeAfterSlider
+        beforeSrc="https://example.com/before.jpg"
+        afterSrc="https://example.com/after.jpg"
+      />
+    );
+
+    const beforeImg = screen.getByAltText("Original");
+    // width should not be set as an inline px value (old race-condition approach)
+    expect(beforeImg.style.width).toBe("");
+  });
+});