02動画埋め込み再生ボタンオーバーレイ

<main class="stage is-demo">
  <div class="vcard">
    <div class="vcard__thumb">
      <span class="vcard__ring" aria-hidden="true"></span>
      <button class="vcard__play" type="button" aria-label="動画を再生">
        <svg class="ic-play" viewBox="0 0 256 256" width="30" height="30" aria-hidden="true"><g fill="currentColor"><path d="M228.23 134.69L84.15 222.81A8 8 0 0 1 72 216.12V39.88a8 8 0 0 1 12.15-6.69l144.08 88.12a7.82 7.82 0 0 1 0 13.38" opacity=".2"/><path d="M232.4 114.49L88.32 26.35a16 16 0 0 0-16.2-.3A15.86 15.86 0 0 0 64 39.87v176.26A15.94 15.94 0 0 0 80 232a16.07 16.07 0 0 0 8.36-2.35l144.04-88.14a15.81 15.81 0 0 0 0-27ZM80 215.94V40l143.83 88Z"/></g></svg>
        <svg class="ic-pause" viewBox="0 0 256 256" width="26" height="26" aria-hidden="true" hidden><g fill="currentColor"><path d="M208 48v160a8 8 0 0 1-8 8h-40a8 8 0 0 1-8-8V48a8 8 0 0 1 8-8h40a8 8 0 0 1 8 8M96 40H56a8 8 0 0 0-8 8v160a8 8 0 0 0 8 8h40a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8" opacity=".2"/><path d="M200 32h-40a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m0 176h-40V48h40ZM96 32H56a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m0 176H56V48h40Z"/></g></svg>
      </button>
      <span class="vcard__time">3:42</span>
    </div>
    <div class="vcard__bar"><span class="vcard__bar-fill"></span></div>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-loop;   // 2s — 링 펄스 한 주기
$easing: $ease-out;
$color: $subject-blue;

@include stage($stage-ink);

.vcard {
  width: 260px;
  border-radius: $r-card;
  overflow: hidden;
  box-shadow: $shadow-raised;
  background: #0b0d14;
}

.vcard__thumb {
  position: relative;
  height: 146px;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba($color, .55), transparent 60%),
    linear-gradient(160deg, #1a2036, #0b0d14 70%);
}

.vcard__ring {
  position: absolute;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
  opacity: 0;
  transform: scale(.8);
}

.vcard__play {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  transition: transform $dur-quick $ease-out, background $dur-quick $ease-out;
}
.vcard__play:hover { background: rgba(255, 255, 255, .28); transform: scale(1.06); }
.vcard__play svg { transform: translateX(2px); }

.vcard__time {
  position: absolute;
  right: $sp-2; bottom: $sp-2;
  padding: $sp-1 $sp-2;
  border-radius: $r-xs;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font: 700 11px/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.vcard__bar { height: 4px; background: rgba(255, 255, 255, .14); }
.vcard__bar-fill { display: block; height: 100%; width: 0%; background: $color; }

// 자동 재생 루프 — 재생 버튼 둘레 링이 신호를 보내듯 펄스
.stage.is-demo .vcard__ring { animation: vcard-ping $duration $easing infinite; }

@keyframes vcard-ping {
  0% { opacity: .55; transform: scale(.8); }
  70% { opacity: 0; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .vcard__ring { animation: none; opacity: 0; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.vcard {
  width: 260px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  background: #0b0d14;
}

.vcard__thumb {
  position: relative;
  height: 146px;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 30% 20%, rgba(47, 109, 246, 0.55), transparent 60%), linear-gradient(160deg, #1a2036, #0b0d14 70%);
}

.vcard__ring {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: scale(0.8);
}

.vcard__play {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  transition: transform 220ms ease-out, background 220ms ease-out;
}

.vcard__play:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.06);
}

.vcard__play svg {
  transform: translateX(2px);
}

.vcard__time {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font: 700 11px/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.vcard__bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.14);
}

.vcard__bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #2f6df6;
}

.stage.is-demo .vcard__ring {
  animation: vcard-ping 2s ease-out infinite;
}

@keyframes vcard-ping {
  0% {
    opacity: 0.55;
    transform: scale(0.8);
  }
  70% {
    opacity: 0;
    transform: scale(1.35);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .vcard__ring {
    animation: none;
    opacity: 0;
  }
}

// 실제 동작: 再生 버튼을 누르면 아이콘이 바뀌고 진행바가 실제로 채워진다(모형 再生 — 진짜 영상 파일은 없음).
var btn = document.querySelector('.vcard__play');
var play = document.querySelector('.ic-play');
var pause = document.querySelector('.ic-pause');
var fill = document.querySelector('.vcard__bar-fill');
var playing = false;
var raf = null;
var start = 0;
function tick(ts) {
  if (!start) start = ts;
  var pct = Math.min(100, ((ts - start) / 6000) * 100);
  fill.style.width = pct + '%';
  if (pct < 100 && playing) raf = requestAnimationFrame(tick);
}
btn.addEventListener('click', function () {
  playing = !playing;
  play.hidden = playing;
  pause.hidden = !playing;
  btn.setAttribute('aria-label', playing ? '一時停止' : '動画を再生');
  if (playing) { start = 0; raf = requestAnimationFrame(tick); }
  else if (raf) cancelAnimationFrame(raf);
});

import { useEffect, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./VideoPlayOverlay.module.scss";

export type VideoPlayOverlayProps = {
  duration?: number;
  easing?: string;
  color?: string;
  time?: string;
};

export default function VideoPlayOverlay({ duration = 2000, easing = "ease-out", color = "#2f6df6", time = "3:42" }: VideoPlayOverlayProps) {
  const vars: CSSProperties = { "--duration": `${duration}ms`, "--easing": easing, "--color": color } as CSSProperties;
  const [playing, setPlaying] = useState(false);
  const [pct, setPct] = useState(0);
  const raf = useRef<number | null>(null);
  const start = useRef<number>(0);

  useEffect(() => {
    if (!playing) return;
    start.current = 0;
    const tick = (ts: number) => {
      if (!start.current) start.current = ts;
      const p = Math.min(100, ((ts - start.current) / 6000) * 100);
      setPct(p);
      if (p < 100) raf.current = requestAnimationFrame(tick);
    };
    raf.current = requestAnimationFrame(tick);
    return () => { if (raf.current) cancelAnimationFrame(raf.current); };
  }, [playing]);

  return (
    <div className={styles.card} style={vars}>
      <div className={styles.thumb}>
        <span className={styles.ring} aria-hidden="true" />
        <button className={styles.play} type="button" aria-label={playing ? "일시정지" : "영상 재생"} onClick={() => setPlaying((v) => !v)}>
          {playing ? (
            <svg viewBox="0 0 256 256" width="26" height="26" aria-hidden="true"><g fill="currentColor">
              <path opacity=".2" d="M208 48v160a8 8 0 0 1-8 8h-40a8 8 0 0 1-8-8V48a8 8 0 0 1 8-8h40a8 8 0 0 1 8 8M96 40H56a8 8 0 0 0-8 8v160a8 8 0 0 0 8 8h40a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8" />
              <path d="M200 32h-40a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m0 176h-40V48h40ZM96 32H56a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m0 176H56V48h40Z" />
            </g></svg>
          ) : (
            <svg viewBox="0 0 256 256" width="30" height="30" aria-hidden="true"><g fill="currentColor">
              <path opacity=".2" d="M228.23 134.69L84.15 222.81A8 8 0 0 1 72 216.12V39.88a8 8 0 0 1 12.15-6.69l144.08 88.12a7.82 7.82 0 0 1 0 13.38" />
              <path d="M232.4 114.49L88.32 26.35a16 16 0 0 0-16.2-.3A15.86 15.86 0 0 0 64 39.87v176.26A15.94 15.94 0 0 0 80 232a16.07 16.07 0 0 0 8.36-2.35l144.04-88.14a15.81 15.81 0 0 0 0-27ZM80 215.94V40l143.83 88Z" />
            </g></svg>
          )}
        </button>
        <span className={styles.time}>{time}</span>
      </div>
      <div className={styles.bar}><span className={styles.fill} style={{ width: `${pct}%` }} /></div>
    </div>
  );
}