02백스페이스 이전 칸 포커스

<main class="stage">
  <div class="pin is-demo" role="group" aria-label="인증번호 입력">
    <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="인증번호 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="인증번호 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="인증번호 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="인증번호 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="인증번호 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="인증번호 6번째 자리">
        <span class="pin__ghost" aria-hidden="true">6</span>
        <span class="pin__scramble" aria-hidden="true"></span>
      </span>
      <span class="pin__caret" aria-hidden="true"></span>
    </div>
    <span class="pin__signal pin__signal--chevron" aria-hidden="true"></span>
  </div>
</main>

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

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

@include stage($stage-yellow);

.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: 600; font-size: 20px; line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
}
.pin__box.is-scrambling .pin__input { color: transparent; }
.pin__box.is-scrambling .pin__scramble { opacity: 1; }
.pin__caret {
  position: absolute;
  left: 0;
  top: -9px;
  width: 38px;
  height: 3px;
  border-radius: $r-pill;
  background: $color;
  opacity: 0;
}
.pin__signal {
  position: relative;
  width: 22px;
  height: 22px;
  opacity: 0;
  transform: scale(.6);
}
.pin__signal--chevron::before,
.pin__signal--chevron::after {
  content: "";
  position: absolute;
  left: 7px;
  width: 11px;
  height: 3px;
  background: $color;
  border-radius: 2px;
  transform-origin: left center; // 규칙8: 셰브론 막대 왼쪽 꼭짓점 회전
}
.pin__signal--chevron::before { top: 10px; transform: rotate(45deg); }
.pin__signal--chevron::after  { top: 12px; transform: rotate(-45deg); }
.pin.is-demo .pin__ghost { animation: pin-ghost $dur-loop linear infinite; }
@for $i from 1 through 6 {
  .pin.is-demo .pin__box:nth-child(#{$i}) .pin__ghost { animation-delay: #{($i - 1) * 90}ms; }
}
.pin.is-demo .pin__box:nth-child(n + 5) .pin__ghost { animation-name: pin-ghost-erase; }
@keyframes pin-ghost {
  0%, 100% { opacity: 0; }
  7%  { opacity: 1; }
  68% { opacity: 1; }
  76% { opacity: 0; }
}
@keyframes pin-ghost-erase {
  0%, 100% { opacity: 0; }
  7%  { opacity: 1; }
  40% { opacity: 1; }
  47% { opacity: 0; }
}
.pin.is-demo .pin__caret {
  animation: pin-caret-erase $dur-loop steps(1) infinite;
}
@keyframes pin-caret-erase {
  0%   { opacity: .9; transform: translateX(0); }
  5%   { opacity: .9; transform: translateX(46px); }
  9%   { opacity: .9; transform: translateX(92px); }
  14%  { opacity: .9; transform: translateX(138px); }
  18%  { opacity: .9; transform: translateX(184px); }
  23%  { opacity: .9; transform: translateX(230px); }
  40%  { opacity: .9; transform: translateX(230px); }
  47%  { opacity: .9; transform: translateX(184px); }
  54%  { opacity: .9; transform: translateX(138px); }
  76%  { opacity: .9; transform: translateX(138px); }
  84%, 100% { opacity: 0; transform: translateX(138px); }
}
.pin.is-demo .pin__signal--chevron { animation: pin-signal $dur-loop linear infinite; }
@keyframes pin-signal {
  0%, 78%   { opacity: 0; transform: scale(.6); }
  86%       { opacity: 1; transform: scale(1.12); }
  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 {
    animation: none !important;
    transition: none !important;
  }
  .pin__scramble { display: none !important; }
  .pin__box.is-scrambling .pin__input { color: $fg !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); }
}

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

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  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(23, 20, 26, 0.28);
  border-radius: 12px;
  background: rgba(23, 20, 26, 0.08);
  color: #17141a;
  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: #17141a;
  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: 600;
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
}

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

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

.pin__caret {
  position: absolute;
  left: 0;
  top: -9px;
  width: 38px;
  height: 3px;
  border-radius: 999px;
  background: #17141a;
  opacity: 0;
}

.pin__signal {
  position: relative;
  width: 22px;
  height: 22px;
  opacity: 0;
  transform: scale(0.6);
}

.pin__signal--chevron::before,
.pin__signal--chevron::after {
  content: "";
  position: absolute;
  left: 7px;
  width: 11px;
  height: 3px;
  background: #17141a;
  border-radius: 2px;
  transform-origin: left center;
}

.pin__signal--chevron::before {
  top: 10px;
  transform: rotate(45deg);
}

.pin__signal--chevron::after {
  top: 12px;
  transform: rotate(-45deg);
}

.pin.is-demo .pin__ghost {
  animation: pin-ghost 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: 90ms;
}

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

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

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

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

.pin.is-demo .pin__box:nth-child(n+5) .pin__ghost {
  animation-name: pin-ghost-erase;
}

@keyframes pin-ghost {
  0%, 100% {
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  68% {
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
}
@keyframes pin-ghost-erase {
  0%, 100% {
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  47% {
    opacity: 0;
  }
}
.pin.is-demo .pin__caret {
  animation: pin-caret-erase 2s steps(1) infinite;
}

@keyframes pin-caret-erase {
  0% {
    opacity: 0.9;
    transform: translateX(0);
  }
  5% {
    opacity: 0.9;
    transform: translateX(46px);
  }
  9% {
    opacity: 0.9;
    transform: translateX(92px);
  }
  14% {
    opacity: 0.9;
    transform: translateX(138px);
  }
  18% {
    opacity: 0.9;
    transform: translateX(184px);
  }
  23% {
    opacity: 0.9;
    transform: translateX(230px);
  }
  40% {
    opacity: 0.9;
    transform: translateX(230px);
  }
  47% {
    opacity: 0.9;
    transform: translateX(184px);
  }
  54% {
    opacity: 0.9;
    transform: translateX(138px);
  }
  76% {
    opacity: 0.9;
    transform: translateX(138px);
  }
  84%, 100% {
    opacity: 0;
    transform: translateX(138px);
  }
}
.pin.is-demo .pin__signal--chevron {
  animation: pin-signal 2s linear infinite;
}

@keyframes pin-signal {
  0%, 78% {
    opacity: 0;
    transform: scale(0.6);
  }
  86% {
    opacity: 1;
    transform: scale(1.12);
  }
  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 {
    animation: none !important;
    transition: none !important;
  }
  .pin__scramble {
    display: none !important;
  }
  .pin__box.is-scrambling .pin__input {
    color: #17141a !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);
  }
}

(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 cancelScramble(box) {
    if (box._scrambleTimer) {
      clearTimeout(box._scrambleTimer);
      box._scrambleTimer = null;
    }
  }
  function scrambleDigit(box, finalDigit) {
    var display = box.querySelector('.pin__scramble');
    if (!display) return;
    cancelScramble(box);
    if (reduceMotionQuery.matches) {
      box.classList.remove('is-scrambling');
      display.textContent = '';
      return;
    }
    box.classList.add('is-scrambling');
    var startedAt = Date.now();
    var totalMs = 280;   // 스크램블 총 지속시간
    var delay = 24;      // 초기 간격(빠름)
    var growth = 1.35;   // 감속 배율
    var maxDelay = 200;  // 최대 간격(느려짐)
    function tick() {
      var elapsed = Date.now() - startedAt;
      if (elapsed >= totalMs) {
        display.textContent = finalDigit;
        box._scrambleTimer = setTimeout(function () {
          box.classList.remove('is-scrambling');
          display.textContent = '';
          box._scrambleTimer = null;
        }, 70);
        return;
      }
      display.textContent = String(Math.floor(Math.random() * 10));
      delay = Math.min(delay * growth, maxDelay);
      box._scrambleTimer = setTimeout(tick, delay);
    }
    tick();
  }

  boxes.forEach(function (b, i) {
    var box = b.closest('.pin__box');
    b.addEventListener('focus', wake);
    b.addEventListener('input', function () {
      b.value = b.value.replace(/[^0-9]/g, '').slice(-1);
      if (b.value) {
        scrambleDigit(box, b.value);
        if (boxes[i + 1]) boxes[i + 1].focus({ preventScroll: true });
      } else {
        cancelScramble(box);
        box.classList.remove('is-scrambling');
        var display = box.querySelector('.pin__scramble');
        if (display) display.textContent = '';
      }
    });
    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;
          scrambleDigit(boxes[k].closest('.pin__box'), ch);
        }
      });
      (boxes[Math.min(t.length, 6) - 1] || boxes[0]).focus({ preventScroll: true });
    });
  });
})();

import { useEffect, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./PinBackspacePrev.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 PinBackspacePrevProps = {
  /** 칸 수 (기본 6) */
  length?: number;
  /** 6칸이 다 채워지면 호출 */
  onComplete?: (code: string) => void;
  /** 강조 색 */
  color?: string;
  className?: string;
};

type Vars = CSSProperties & { "--color"?: string };
// useRef 는 T | null 을 돌려준다. 값이 항상 있는 상자는 이렇게 좁혀 쓴다 (077 관례)
type Box<T> = { current: T };
type TimerMap = Record<number, ReturnType<typeof setTimeout> | null>;

export default function PinBackspacePrev({
  length = 6,
  onComplete,
  color = "#2f6df6",
  className = "",
}: PinBackspacePrevProps) {
  const [values, setValues] = useState<string[]>(Array(length).fill(""));
  const [scrambleText, setScrambleText] = useState<string[]>(Array(length).fill(""));
  const [scrambling, setScrambling] = useState<boolean[]>(Array(length).fill(false));
  const scrambleTimers = useRef<TimerMap>({}) as Box<TimerMap>;
  const vars: Vars = { "--color": color };

  // 슬롯머신 스크램블: 최종 숫자를 바로 보여주지 않고 무작위 숫자가 지나가다 감속하며 정착한다
  function cancelScramble(i: number) {
    const timer = scrambleTimers.current[i];
    if (timer) {
      clearTimeout(timer);
      scrambleTimers.current[i] = null;
    }
  }
  function setScramblingAt(i: number, on: boolean) {
    setScrambling((prev) => {
      const next = prev.slice();
      next[i] = on;
      return next;
    });
  }
  function setScrambleTextAt(i: number, text: string) {
    setScrambleText((prev) => {
      const next = prev.slice();
      next[i] = text;
      return next;
    });
  }
  function runScramble(i: number, finalDigit: string) {
    cancelScramble(i);
    const reduceMotion =
      typeof window !== "undefined" &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) {
      setScramblingAt(i, false);
      setScrambleTextAt(i, "");
      return;
    }
    setScramblingAt(i, true);
    const startedAt = Date.now();
    const totalMs = 280;   // 스크램블 총 지속시간
    const growth = 1.35;   // 감속 배율
    const maxDelay = 200;  // 최대 간격(느려짐)
    let delay = 24;        // 초기 간격(빠름)
    function tick() {
      const elapsed = Date.now() - startedAt;
      if (elapsed >= totalMs) {
        setScrambleTextAt(i, finalDigit);
        scrambleTimers.current[i] = setTimeout(() => {
          setScramblingAt(i, false);
          setScrambleTextAt(i, "");
          scrambleTimers.current[i] = null;
        }, 70);
        return;
      }
      setScrambleTextAt(i, String(Math.floor(Math.random() * 10)));
      delay = Math.min(delay * growth, maxDelay);
      scrambleTimers.current[i] = setTimeout(tick, delay);
    }
    tick();
  }
  useEffect(() => {
    const timers: TimerMap = scrambleTimers.current;
    return () => {
      Object.keys(timers).forEach((key) => {
        const timer = timers[Number(key)];
        if (timer) clearTimeout(timer);
      });
    };
  }, []);

  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);
      const boxes = siblings(el);
      if (boxes[i + 1]) boxes[i + 1].focus({ preventScroll: true });
    } else {
      cancelScramble(i);
      setScramblingAt(i, false);
      setScrambleTextAt(i, "");
    }
    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);
    text.split("").forEach((ch, k) => runScramble(k, ch));
    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={scrambling[i] ? `${styles.boxWrap} ${styles.isScrambling}` : styles.boxWrap}
        >
          <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">{scrambleText[i]}</span>
        </span>
      ))}
    </div>
  );
}