02Card number 4-digit grouping

<main class="stage">
  <div class="field is-demo" id="field">
    <div class="field__top">
      <label class="field__label" for="card-input">Card number</label>
      <span class="field__brand" id="brand" aria-hidden="true"></span>
    </div>
    <input class="field__input" id="card-input" type="text" inputmode="numeric" autocomplete="cc-number" placeholder="0000 0000 0000 0000" maxlength="19">
  </div>
</main>

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

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-instant;   // 브랜드 라벨이 나타나는 시간
$easing: $ease-out;
$color: $stage-ink;        // 브랜드 라벨 색

// ── 데모 무대 ──────────────────────────────────────────
@include stage($stage-yellow);

.field {
  box-sizing: border-box;
  width: min(280px, 86vw);
  background: $subject-cream;
  border-radius: $r-card;
  padding: $sp-5;
  box-shadow: $shadow-raised;

  &__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: $sp-2;
    margin: 0 0 $sp-2;
  }

  &__label {
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    font-family: inherit;
    color: $stage-ink;
  }

  &__brand {
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
    font-family: inherit;
    letter-spacing: .04em;
    color: $color;
    opacity: 0;
    transition: opacity $duration $easing;
    &:not(:empty) { opacity: .72; }   // 흐린 글자 알파 하한 .72 — 크림 면 위 6.9:1
  }

  &__input {
    box-sizing: border-box;
    width: 100%;
    border: 2px solid transparent;
    border-radius: $r-control;
    padding: $sp-3 $sp-4;
    font-weight: 600;
    font-size: clamp(14px, 4.4vw, 17px);
    letter-spacing: .04em;
    font-family: inherit;
    color: $stage-ink;
    background: #fff;
    transition: border-color $duration $easing;

    &:focus {
      outline: none;
      border-color: $subject-blue;
    }
  }
}

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

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);
}

.field {
  box-sizing: border-box;
  width: min(280px, 86vw);
  background: #fff7e6;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
}
.field__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}
.field__label {
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
  color: #17141a;
}
.field__brand {
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  font-family: inherit;
  letter-spacing: 0.04em;
  color: #17141a;
  opacity: 0;
  transition: opacity 140ms ease-out;
}
.field__brand:not(:empty) {
  opacity: 0.72;
}
.field__input {
  box-sizing: border-box;
  width: 100%;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  font-size: clamp(14px, 4.4vw, 17px);
  letter-spacing: 0.04em;
  font-family: inherit;
  color: #17141a;
  background: #fff;
  transition: border-color 140ms ease-out;
}
.field__input:focus {
  outline: none;
  border-color: #2f6df6;
}

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

(function () {
  var field = document.getElementById('field');
  var input = document.getElementById('card-input');
  var brand = document.getElementById('brand');

  function brandOf(d) {
    if (d[0] === '4') return 'VISA';
    if (/^5[1-5]/.test(d)) return 'Mastercard';
    if (/^3[47]/.test(d)) return 'AMEX';
    return '';
  }

  function format(v) {
    var d = v.replace(/\D/g, '').slice(0, 16);
    var groups = d.match(/.{1,4}/g) || [];
    brand.textContent = brandOf(d);
    return groups.join(' ');
  }

  input.addEventListener('input', function () {
    input.value = format(input.value);
  });

  function stopDemo() {
    if (!field.classList.contains('is-demo')) return;
    field.classList.remove('is-demo');
    clearInterval(timer);
    input.value = ''; brand.textContent = '';
  }
  input.addEventListener('pointerdown', stopDemo);
  input.addEventListener('keydown', stopDemo);

  var digits = '4539148803436467';
  var i = 0;
  var timer = setInterval(function () {
    if (i > digits.length) { i = 0; input.value = ''; brand.textContent = ''; return; }
    input.value = format(digits.slice(0, i));
    i++;
  }, 110);
})();

import { useRef, useState } from "react";
import styles from "./CardNumber.module.scss";

export type CardNumberProps = {
  label?: string;
};

function brandOf(d: string): string {
  if (d[0] === "4") return "VISA";
  if (/^5[1-5]/.test(d)) return "Mastercard";
  if (/^3[47]/.test(d)) return "AMEX";
  return "";
}

function format(raw: string): { value: string; brand: string } {
  const d = raw.replace(/\D/g, "").slice(0, 16);
  const groups = d.match(/.{1,4}/g) || [];
  return { value: groups.join(" "), brand: brandOf(d) };
}

export default function CardNumber({ label = "카드 번호" }: CardNumberProps) {
  const [value, setValue] = useState("");
  const [brand, setBrand] = useState("");
  const id = useRef("card-input-" + Math.random().toString(36).slice(2)).current;

  return (
    <div className={styles.field}>
      <div className={styles.top}>
        <label className={styles.label} htmlFor={id}>{label}</label>
        <span className={styles.brand}>{brand}</span>
      </div>
      <input
        className={styles.input}
        id={id}
        type="text"
        inputMode="numeric"
        autoComplete="cc-number"
        placeholder="0000 0000 0000 0000"
        maxLength={19}
        value={value}
        onChange={(e: any) => {
          const r = format(e.target.value);
          setValue(r.value);
          setBrand(r.brand);
        }}
      />
    </div>
  );
}