06ロック解除カウントダウン — ロック後、再試行できるまでの残り秒数の値が減っていく方式

<main class="stage">
<div class="acc is-demo" id="acc">
  <div class="acc__num" id="accNum">8</div>
  <div class="acc__msg" id="accMsg">ロック解除までの残り秒数</div>
  <button class="acc__btn" id="accBtn" type="button">再試行</button>
</div>
</main>

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

// 계산 겹: 초가 바뀔 때 easeOutBack 커브로 펄스 스케일 값을 만든다 — index.html 참조
@include stage($stage-paper);

.acc {
  display: grid;
  justify-items: center;
  gap: $sp-2;
}

.acc__num {
  font: 800 56px/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  color: $subject-blue-deep;
  font-variant-numeric: tabular-nums;
  transform-origin: center;
}

.acc__msg {
  font: 500 13px/1.4 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  color: rgba($stage-ink, .68);
  text-align: center;
}

.acc__btn {
  margin-top: $sp-2;
  border: 0;
  border-radius: $r-control;
  padding: $sp-2 $sp-4;
  background: $stage-ink;
  color: $subject-cream;
  font: 700 14px/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  cursor: pointer;
  transition: opacity $dur-instant $ease-out;

  &:disabled { opacity: .4; cursor: not-allowed; }
}

@media (max-width: 340px) {
  .acc__num { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .acc__btn { transition: none; }
}

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

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

.acc {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.acc__num {
  font: 800 56px/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  color: #0a4fe8;
  font-variant-numeric: tabular-nums;
  transform-origin: center;
}

.acc__msg {
  font: 500 13px/1.4 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  color: rgba(23, 20, 26, 0.68);
  text-align: center;
}

.acc__btn {
  margin-top: 8px;
  border: 0;
  border-radius: 12px;
  padding: 8px 16px;
  background: #17141a;
  color: #fff7e6;
  font: 700 14px/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  cursor: pointer;
  transition: opacity 140ms ease-out;
}
.acc__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 340px) {
  .acc__num {
    font-size: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .acc__btn {
    transition: none;
  }
}

(function () {
  var root = document.getElementById('acc');
  var btn = document.getElementById('accBtn');
  var numEl = document.getElementById('accNum');
  var msgEl = document.getElementById('accMsg');

  // 상수: 잠금 유지 秒 · 데모 안 "1秒"를 표현하는 실제 ms(가속) · 초마다 펄스 스케일 크기
  var LOCK_SECONDS = 8;
  var DEMO_TICK_MS = 170;
  var PULSE_SCALE = 1.22;

  var remaining = LOCK_SECONDS;
  var timerId = null;

  function easeOutBack(t) { return 1 + 1.4 * Math.pow(t - 1, 3) + 0.6 * Math.pow(t - 1, 2); }

  // 계산 겹: 초가 바뀔 때 easing 곡선(easeOutBack)으로 스케일 값을 만들어 펄스
  function pulse() {
    var start = null;
    var dur = 160;
    function frame(ts) {
      if (start === null) start = ts;
      var t = Math.min(1, (ts - start) / dur);
      var s = 1 + (PULSE_SCALE - 1) * (1 - easeOutBack(t));
      numEl.style.transform = 'scale(' + s.toFixed(3) + ')';
      if (t < 1) requestAnimationFrame(frame);
      else numEl.style.transform = 'scale(1)';
    }
    requestAnimationFrame(frame);
  }

  function paint() {
    numEl.textContent = String(remaining);
    root.classList.toggle('acc--open', remaining <= 0);
    msgEl.textContent = remaining <= 0 ? '今すぐ再試行できます' : 'ロック解除までの残り秒数';
    btn.disabled = remaining > 0;
  }

  function start() {
    remaining = LOCK_SECONDS;
    paint();
    if (timerId) clearInterval(timerId);
    timerId = setInterval(function () {
      remaining -= 1;
      pulse();
      if (remaining <= 0) { clearInterval(timerId); timerId = null; }
      paint();
    }, DEMO_TICK_MS);
  }

  btn.addEventListener('click', function () {
    root.classList.remove('is-demo');
    stopAutoplay();
    if (remaining <= 0) start();
  });
  paint();

  var autoTimer = null;
  function stopAutoplay() { if (autoTimer) { clearTimeout(autoTimer); autoTimer = null; } }
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (!reduce) {
    start();
    autoTimer = setInterval(function () { if (remaining <= 0) start(); }, DEMO_TICK_MS);
  }
})();

import { useEffect, useRef } from "react";
import styles from "./AuthAttemptCooldownCountdown.module.scss";

type Box<T> = { current: T };

export default function AuthAttemptCooldownCountdown() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement | null>;

  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const btn = root.querySelector(`.${styles.btn}`) as HTMLButtonElement | null;
    const numEl = root.querySelector(`.${styles.num}`) as HTMLElement | null;
    const msgEl = root.querySelector(`.${styles.msg}`) as HTMLElement | null;
    if (!btn || !numEl || !msgEl) return;

    // 상수: 잠금 유지 초 · 데모 안 "1초"를 표현하는 실제 ms(가속) · 초마다 펄스 스케일 크기
    const LOCK_SECONDS = 8;
    const DEMO_TICK_MS = 170;
    const PULSE_SCALE = 1.22;

    let remaining = LOCK_SECONDS;
    let timerId: number | null = null;

    function easeOutBack(t: number) { return 1 + 1.4 * Math.pow(t - 1, 3) + 0.6 * Math.pow(t - 1, 2); }

    // 계산 겹: 초가 바뀔 때 easing 곡선(easeOutBack)으로 스케일 값을 만들어 펄스
    function pulse() {
      let start: number | null = null;
      const dur = 160;
      function frame(ts: number) {
        if (start === null) start = ts;
        const t = Math.min(1, (ts - start) / dur);
        const s = 1 + (PULSE_SCALE - 1) * (1 - easeOutBack(t));
        numEl!.style.transform = "scale(" + s.toFixed(3) + ")";
        if (t < 1) requestAnimationFrame(frame);
        else numEl!.style.transform = "scale(1)";
      }
      requestAnimationFrame(frame);
    }

    function paint() {
      numEl!.textContent = String(remaining);
      root!.classList.toggle(styles.open, remaining <= 0);
      msgEl!.textContent = remaining <= 0 ? "지금 다시 시도할 수 있습니다" : "잠금 해제까지 남은 초";
      btn!.disabled = remaining > 0;
    }

    function start() {
      remaining = LOCK_SECONDS;
      paint();
      if (timerId !== null) window.clearInterval(timerId);
      timerId = window.setInterval(() => {
        remaining -= 1;
        pulse();
        if (remaining <= 0 && timerId !== null) { window.clearInterval(timerId); timerId = null; }
        paint();
      }, DEMO_TICK_MS);
    }

    function onClick() {
      root!.classList.remove(styles["is-demo"]);
      stopAutoplay();
      if (remaining <= 0) start();
    }
    btn.addEventListener("click", onClick);
    paint();

    let autoTimer: number | null = null;
    function stopAutoplay() { if (autoTimer !== null) { window.clearTimeout(autoTimer); autoTimer = null; } }
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (!reduce) {
      start();
      autoTimer = window.setInterval(() => { if (remaining <= 0) start(); }, DEMO_TICK_MS);
    }

    return () => {
      stopAutoplay();
      if (timerId !== null) window.clearInterval(timerId);
      btn.removeEventListener("click", onClick);
    };
  }, []);

  return (
    <div ref={rootRef} className={`${styles.stage} ${styles.acc} ${styles["is-demo"]}`}>
      <div className={styles.num}>8</div>
      <div className={styles.msg}>잠금 해제까지 남은 초</div>
      <button className={styles.btn} type="button">다시 시도</button>
    </div>
  );
}