07Resend countdown timer

<main class="stage">
  <div class="pin is-demo" role="group" aria-label="Verification code">
    <div class="pin__row">
      <span class="pin__box">
        <input class="pin__input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="one-time-code" aria-label="Verification code, digit 1">
        <span class="pin__ghost" aria-hidden="true">1</span>
        <span class="pin__scramble" aria-hidden="true"></span>
      </span>
      <span class="pin__box">
        <input class="pin__input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="one-time-code" aria-label="Verification code, digit 2">
        <span class="pin__ghost" aria-hidden="true">2</span>
        <span class="pin__scramble" aria-hidden="true"></span>
      </span>
      <span class="pin__box">
        <input class="pin__input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="one-time-code" aria-label="Verification code, digit 3">
        <span class="pin__ghost" aria-hidden="true">3</span>
        <span class="pin__scramble" aria-hidden="true"></span>
      </span>
      <span class="pin__box">
        <input class="pin__input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="one-time-code" aria-label="Verification code, digit 4">
        <span class="pin__ghost" aria-hidden="true">4</span>
        <span class="pin__scramble" aria-hidden="true"></span>
      </span>
      <span class="pin__box">
        <input class="pin__input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="one-time-code" aria-label="Verification code, digit 5">
        <span class="pin__ghost" aria-hidden="true">5</span>
        <span class="pin__scramble" aria-hidden="true"></span>
      </span>
      <span class="pin__box">
        <input class="pin__input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="one-time-code" aria-label="Verification code, digit 6">
        <span class="pin__ghost" aria-hidden="true">6</span>
        <span class="pin__scramble" aria-hidden="true"></span>
      </span>

    </div>
    <div class="pin__timer" aria-hidden="true">
      <span class="pin__timer-n">3</span><span class="pin__timer-n">2</span><span class="pin__timer-n">1</span>
    </div>
    <button type="button" class="pin__resend" disabled>Resend in 60s</button>
  </div>
</main>

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

$duration: $dur-quick;
$easing: $ease-spring;
$color: $subject-ink;
$fg: $subject-cream;

@include stage($stage-orange);

.pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
.pin__row {
  position: relative;
  display: flex;
  gap: 8px;
}
.pin__box {
  position: relative;
  width: 38px;
  height: 46px;
}
.pin__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 2px solid rgba($fg, .28);
  border-radius: $r-control;
  background: rgba($fg, .08);
  color: $fg;
  text-align: center;
  font-weight: 600; font-size: 20px; line-height: 1;
  outline: none;
  transition: border-color $duration $easing;
  -webkit-tap-highlight-color: transparent;
}
.pin__input:focus { border-color: $color; }
.pin__ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: $fg;
  font-weight: 600; font-size: 20px; line-height: 1;
  opacity: 0;
  pointer-events: none;
}
.pin__scramble {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: $color;
  font-weight: 700; font-size: 20px; line-height: 1;
  opacity: 0;
  pointer-events: none;
}
.pin__box.is-scrambling .pin__input { color: transparent; caret-color: transparent; }
.pin__box.is-scrambling .pin__scramble { opacity: 1; }
.pin.is-demo .pin__ghost { animation: pin-ghost-hold $dur-loop linear infinite; }
@for $i from 1 through 6 {
  .pin.is-demo .pin__box:nth-child(#{$i}) .pin__ghost { animation-delay: #{($i - 1) * 60}ms; }
}
@keyframes pin-ghost-hold {
  0%, 100% { opacity: 0; }
  7%  { opacity: 1; }
  88% { opacity: 1; }
  94% { opacity: 0; }
}
.pin__timer { position: relative; width: 26px; height: 26px; }
.pin__timer-n {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: $fg;
  font-weight: 700; font-size: 16px; line-height: 1;
  opacity: 0;
}
.pin.is-demo .pin__timer-n { animation: pin-timer $dur-loop steps(1) infinite; }
.pin.is-demo .pin__timer-n:nth-child(1) { animation-delay: 0ms; }
.pin.is-demo .pin__timer-n:nth-child(2) { animation-delay: 260ms; }
.pin.is-demo .pin__timer-n:nth-child(3) { animation-delay: 520ms; }
@keyframes pin-timer {
  0%, 13%     { opacity: 1; }
  13.1%, 100% { opacity: 0; }
}
.pin__resend {
  border: 0;
  border-radius: $r-pill;
  padding: 8px 18px;
  font-weight: 600; font-size: 13px; line-height: 1;
  background: rgba($fg, .14);
  color: $color;
  opacity: .82;
  transform: scale(.96);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pin.is-demo .pin__resend { animation: pin-resend $dur-loop $easing infinite; }
@keyframes pin-resend {
  0%, 86%   { opacity: .82; transform: scale(.96); }
  94%, 100% { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pin__ghost, .pin__ghost--dot, .pin__ghost--digit, .pin__caret, .pin__signal,
  .pin__row, .pin__timer-n, .pin__resend, .pin__input, .pin__scramble {
    animation: none !important;
    transition: none !important;
  }
  .pin.is-demo .pin__ghost,
  .pin.is-demo .pin__ghost--digit { opacity: 1; }
  .pin.is-demo .pin__ghost--dot { opacity: 0; }
  .pin.is-demo .pin__caret { opacity: .9; transform: translateX(230px); }
  .pin.is-demo .pin__signal { opacity: 1; transform: scale(1); }
  .pin.is-demo .pin__signal--toggle::before { transform: translateX(16px); }
  .pin.is-demo .pin__resend { opacity: 1; transform: scale(1); }
  .pin__box.is-scrambling .pin__input { color: $fg; caret-color: auto; }
  .pin__box.is-scrambling .pin__scramble { opacity: 0; }
}

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

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

.pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.pin__row {
  position: relative;
  display: flex;
  gap: 8px;
}

.pin__box {
  position: relative;
  width: 38px;
  height: 46px;
}

.pin__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 247, 230, 0.28);
  border-radius: 12px;
  background: rgba(255, 247, 230, 0.08);
  color: #fff7e6;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  outline: none;
  transition: border-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.pin__input:focus {
  border-color: #17141a;
}

.pin__ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff7e6;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}

.pin__scramble {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #17141a;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}

.pin__box.is-scrambling .pin__input {
  color: transparent;
  caret-color: transparent;
}

.pin__box.is-scrambling .pin__scramble {
  opacity: 1;
}

.pin.is-demo .pin__ghost {
  animation: pin-ghost-hold 2s linear infinite;
}

.pin.is-demo .pin__box:nth-child(1) .pin__ghost {
  animation-delay: 0ms;
}

.pin.is-demo .pin__box:nth-child(2) .pin__ghost {
  animation-delay: 60ms;
}

.pin.is-demo .pin__box:nth-child(3) .pin__ghost {
  animation-delay: 120ms;
}

.pin.is-demo .pin__box:nth-child(4) .pin__ghost {
  animation-delay: 180ms;
}

.pin.is-demo .pin__box:nth-child(5) .pin__ghost {
  animation-delay: 240ms;
}

.pin.is-demo .pin__box:nth-child(6) .pin__ghost {
  animation-delay: 300ms;
}

@keyframes pin-ghost-hold {
  0%, 100% {
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  94% {
    opacity: 0;
  }
}
.pin__timer {
  position: relative;
  width: 26px;
  height: 26px;
}

.pin__timer-n {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff7e6;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
}

.pin.is-demo .pin__timer-n {
  animation: pin-timer 2s steps(1) infinite;
}

.pin.is-demo .pin__timer-n:nth-child(1) {
  animation-delay: 0ms;
}

.pin.is-demo .pin__timer-n:nth-child(2) {
  animation-delay: 260ms;
}

.pin.is-demo .pin__timer-n:nth-child(3) {
  animation-delay: 520ms;
}

@keyframes pin-timer {
  0%, 13% {
    opacity: 1;
  }
  13.1%, 100% {
    opacity: 0;
  }
}
.pin__resend {
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  background: rgba(255, 247, 230, 0.14);
  color: #17141a;
  opacity: 0.82;
  transform: scale(0.96);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pin.is-demo .pin__resend {
  animation: pin-resend 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes pin-resend {
  0%, 86% {
    opacity: 0.82;
    transform: scale(0.96);
  }
  94%, 100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pin__ghost, .pin__ghost--dot, .pin__ghost--digit, .pin__caret, .pin__signal,
  .pin__row, .pin__timer-n, .pin__resend, .pin__input, .pin__scramble {
    animation: none !important;
    transition: none !important;
  }
  .pin.is-demo .pin__ghost,
  .pin.is-demo .pin__ghost--digit {
    opacity: 1;
  }
  .pin.is-demo .pin__ghost--dot {
    opacity: 0;
  }
  .pin.is-demo .pin__caret {
    opacity: 0.9;
    transform: translateX(230px);
  }
  .pin.is-demo .pin__signal {
    opacity: 1;
    transform: scale(1);
  }
  .pin.is-demo .pin__signal--toggle::before {
    transform: translateX(16px);
  }
  .pin.is-demo .pin__resend {
    opacity: 1;
    transform: scale(1);
  }
  .pin__box.is-scrambling .pin__input {
    color: #fff7e6;
    caret-color: auto;
  }
  .pin__box.is-scrambling .pin__scramble {
    opacity: 0;
  }
}

(function () {
  var pin = document.querySelector('.pin');
  var boxes = [].slice.call(pin.querySelectorAll('.pin__input'));
  var reduceMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
  function wake() { pin.classList.remove('is-demo'); }
  function scrambleSettle(input, finalDigit, delayStart) {
    var boxEl = input.closest('.pin__box');
    var scrambleEl = boxEl.querySelector('.pin__scramble');
    if (!finalDigit || reduceMotionQuery.matches) {
      scrambleEl.textContent = '';
      boxEl.classList.remove('is-scrambling');
      return;
    }
    setTimeout(function start() {
      boxEl.classList.add('is-scrambling');
      var stepsLeft = 9;
      var delay = 24;
      (function spin() {
        if (stepsLeft > 0) {
          scrambleEl.textContent = String(Math.floor(Math.random() * 10));
          stepsLeft--;
          delay = Math.round(delay * 1.34) + 2;
          setTimeout(spin, delay);
        } else {
          scrambleEl.textContent = finalDigit;
          setTimeout(function () { boxEl.classList.remove('is-scrambling'); }, 70);
        }
      })();
    }, delayStart || 0);
  }
  boxes.forEach(function (b, i) {
    b.addEventListener('focus', wake);
    b.addEventListener('input', function () {
      b.value = b.value.replace(/[^0-9]/g, '').slice(-1);
      if (b.value) scrambleSettle(b, b.value, 0);
      if (b.value && boxes[i + 1]) boxes[i + 1].focus({ preventScroll: true });
    });
    b.addEventListener('keydown', function (e) {
      if (e.key === 'Backspace' && !b.value && boxes[i - 1]) boxes[i - 1].focus({ preventScroll: true });
    });
    b.addEventListener('paste', function (e) {
      var t = (e.clipboardData || window.clipboardData).getData('text').replace(/[^0-9]/g, '');
      if (!t) return;
      e.preventDefault();
      t.slice(0, 6).split('').forEach(function (ch, k) {
        if (boxes[k]) { boxes[k].value = ch; scrambleSettle(boxes[k], ch, k * 70); }
      });
      (boxes[Math.min(t.length, 6) - 1] || boxes[0]).focus({ preventScroll: true });
    });
  });
  var resend = pin.querySelector('.pin__resend');
  var left = 60;
  function tick() {
    resend.textContent = left > 0 ? left + 's until resend' : 'Resend';
    resend.disabled = left > 0;
    if (left > 0) { left--; setTimeout(tick, 1000); }
  }
  resend.addEventListener('click', function () { if (!resend.disabled) { left = 60; tick(); } });
})();

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

function siblings(el: any): HTMLInputElement[] {
  var row = el.closest("[data-pin-row]");
  return row ? Array.prototype.slice.call(row.querySelectorAll("input")) : [];
}

export type PinResendTimerProps = {
  /** 칸 수 (기본 6) */
  length?: number;
  /** 6칸이 다 채워지면 호출 */
  onComplete?: (code: string) => void;
  /** 강조 색 */
  color?: string;
  className?: string;
  /** 재전송까지 대기 시간(초). 기본 60 */
  resendSeconds?: number;
  onResend?: () => void;
};

type Vars = CSSProperties & { "--color"?: string };

export default function PinResendTimer({
  length = 6,
  onComplete,
  color = "#2f6df6",
  className = "",
  resendSeconds = 60,
  onResend,
}: PinResendTimerProps) {
  const [values, setValues] = useState<string[]>(Array(length).fill(""));
  const vars: Vars = { "--color": color };
  const [left, setLeft] = useState(resendSeconds);
  const [scrambling, setScrambling] = useState<boolean[]>(Array(length).fill(false));
  const [scrambleDisplay, setScrambleDisplay] = useState<string[]>(Array(length).fill(""));
  useEffect(() => {
    if (left <= 0) return;
    const t = setTimeout(() => setLeft((s) => s - 1), 1000);
    return () => clearTimeout(t);
  }, [left]);

  function runScramble(index: number, finalDigit: string, delayStart = 0) {
    const reduced =
      typeof window !== "undefined" &&
      window.matchMedia &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (!finalDigit || reduced) return;
    window.setTimeout(function start() {
      setScrambling((prev) => {
        const next = prev.slice();
        next[index] = true;
        return next;
      });
      let stepsLeft = 9;
      let delay = 24;
      (function spin() {
        if (stepsLeft > 0) {
          const randomDigit = String(Math.floor(Math.random() * 10));
          setScrambleDisplay((prev) => {
            const next = prev.slice();
            next[index] = randomDigit;
            return next;
          });
          stepsLeft--;
          delay = Math.round(delay * 1.34) + 2;
          window.setTimeout(spin, delay);
        } else {
          setScrambleDisplay((prev) => {
            const next = prev.slice();
            next[index] = finalDigit;
            return next;
          });
          window.setTimeout(() => {
            setScrambling((prev) => {
              const next = prev.slice();
              next[index] = false;
              return next;
            });
          }, 70);
        }
      })();
    }, delayStart);
  }

  function handleChange(e: any, i: number) {
    const el = e.currentTarget;
    const v = String(el.value).replace(/[^0-9]/g, "").slice(-1);
    const next = values.slice();
    next[i] = v;
    setValues(next);
    if (v) {
      runScramble(i, v, 0);
      const boxes = siblings(el);
      if (boxes[i + 1]) boxes[i + 1].focus({ preventScroll: true });
    }
    if (next.every(Boolean)) onComplete?.(next.join(""));
  }

  function handleKeyDown(e: any, i: number) {
    if (e.key === "Backspace" && !values[i]) {
      const boxes = siblings(e.currentTarget);
      if (boxes[i - 1]) boxes[i - 1].focus({ preventScroll: true });
    }
  }

  function handlePaste(e: any) {
    const text = String(e.clipboardData.getData("text")).replace(/[^0-9]/g, "").slice(0, length);
    if (!text) return;
    e.preventDefault();
    const next = text.split("");
    while (next.length < length) next.push("");
    setValues(next);
    next.forEach((ch, k) => {
      if (ch) runScramble(k, ch, k * 70);
    });
    if (text.length === length) onComplete?.(text);
  }

  return (
    <div className={`${styles.pin} ${className}`} style={vars} data-pin-row>
      {values.map((v, i) => (
        <span key={i} className={`${styles.boxWrap} ${scrambling[i] ? styles.scrambling : ""}`}>
          <input
            className={styles.box}
            type="text"
            inputMode="numeric"
            pattern="[0-9]*"
            maxLength={1}
            autoComplete="one-time-code"
            aria-label={`인증번호 ${i + 1}번째 자리`}
            value={v}
            onChange={(e: any) => handleChange(e, i)}
            onKeyDown={(e: any) => handleKeyDown(e, i)}
            onPaste={(e: any) => handlePaste(e)}
          />
          <span className={styles.scramble} aria-hidden="true">
            {scrambling[i] ? scrambleDisplay[i] : ""}
          </span>
        </span>
      ))}
      <button
        type="button"
        className={styles.resend}
        disabled={left > 0}
        onClick={() => {
          setLeft(resendSeconds);
          onResend?.();
        }}
      >
        {left > 0 ? `${left}초 후 재전송` : "재전송"}
      </button>
    </div>
  );
}