04アバターアイコングリッドピッカー

<main class="stage">
  <div class="ava is-demo">
    <div class="ava__preview"><span id="pvEmoji">🐱</span><span id="pvName">ココ</span></div>
    <div class="ava__grid" role="radiogroup" aria-label="アバターを選択">
      <button type="button" class="ava__item" role="radio" aria-checked="true" tabindex="0" data-emoji="🐱" data-name="ココ" data-c="pink"></button>
      <button type="button" class="ava__item" role="radio" aria-checked="false" tabindex="-1" data-emoji="🐰" data-name="トリ" data-c="lilac"></button>
      <button type="button" class="ava__item" role="radio" aria-checked="false" tabindex="-1" data-emoji="🐻" data-name="ボリ" data-c="mint"></button>
      <button type="button" class="ava__item" role="radio" aria-checked="false" tabindex="-1" data-emoji="🦊" data-name="ヨウル" data-c="sky"></button>
      <button type="button" class="ava__item" role="radio" aria-checked="false" tabindex="-1" data-emoji="🐼" data-name="パンダ" data-c="pink"></button>
      <button type="button" class="ava__item" role="radio" aria-checked="false" tabindex="-1" data-emoji="🐨" data-name="コアル" data-c="lilac"></button>
    </div>
  </div>
</main>

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

// ── 변수 3개 ──────────────────────────────
$duration: $dur-quick;
$easing: $ease-pop;
$color: $subject-pink;

@include stage($stage-yellow);

.ava {
  --sub-pink: #{$subject-pink}; --sub-mint: #{$subject-mint};
  --sub-lilac: #{$subject-lilac}; --sub-sky: #{$subject-sky};
  display: flex; flex-direction: column; align-items: center; gap: $sp-4;
}
.ava__preview {
  display: flex; align-items: center; gap: $sp-2; font-weight: 700; font-size: 14px; color: $subject-ink;
}
.ava__preview span:first-child { font-size: 22px; }
.ava__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: $sp-3; }
.ava__item {
  appearance: none; border: 2px solid transparent; background: rgba($subject-ink, .06);
  width: 48px; height: 48px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
  transition: transform $duration $easing, border-color $duration $easing, box-shadow $duration $easing;
}
.ava__item:focus-visible { outline: 2px solid $subject-ink; outline-offset: 2px; }
.ava__item.is-on {
  border-color: var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent);
  transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .ava__item { 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);
}

.ava {
  --sub-pink: #ff9ebb;
  --sub-mint: #4cd4a6;
  --sub-lilac: #b9a0ff;
  --sub-sky: #6ec8ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ava__preview {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: #17141a;
}

.ava__preview span:first-child {
  font-size: 22px;
}

.ava__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ava__item {
  appearance: none;
  border: 2px solid transparent;
  background: rgba(23, 20, 26, 0.06);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1), border-color 220ms cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 220ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.ava__item:focus-visible {
  outline: 2px solid #17141a;
  outline-offset: 2px;
}

.ava__item.is-on {
  border-color: var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent);
  transform: scale(1.1);
}

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

(function () {
  var ava = document.querySelector('.ava');
  var items = Array.prototype.slice.call(ava.querySelectorAll('.ava__item'));
  items.forEach(function (b) { b.textContent = b.dataset.emoji; b.style.setProperty('--c', 'var(--sub-' + b.dataset.c + ')'); });
  var pvEmoji = document.getElementById('pvEmoji'), pvName = document.getElementById('pvName');
  var cur = 0;
  function select(idx) {
    cur = idx;
    items.forEach(function (b, i) {
      var on = i === idx;
      b.setAttribute('aria-checked', on ? 'true' : 'false');
      b.tabIndex = on ? 0 : -1;
      b.classList.toggle('is-on', on);
    });
    pvEmoji.textContent = items[idx].dataset.emoji;
    pvName.textContent = items[idx].dataset.name;
  }
  items.forEach(function (b, i) {
    b.addEventListener('click', function () { stop(); select(i); });
    b.addEventListener('keydown', function (e) {
      var d = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[e.key];
      if (d !== undefined) { e.preventDefault(); stop(); var n = (i + d + items.length) % items.length; select(n); items[n].focus({ preventScroll: true }); }
    });
  });
  var t = setInterval(function () { select((cur + 1) % items.length); }, 650);
  function stop() { ava.classList.remove('is-demo'); clearInterval(t); }
}());

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./AvatarIconPickerGridSelect.module.scss";

type Avatar = { emoji: string; name: string; c: string };

export type AvatarIconPickerGridSelectProps = {
  label?: string;
  avatars?: Avatar[];
  duration?: number;
  easing?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--c"?: string };

const DEFAULT_AVATARS: Avatar[] = [
  { emoji: "🐱", name: "Coco", c: "#ff9ebb" },
  { emoji: "🐰", name: "Tori", c: "#b9a0ff" },
  { emoji: "🐻", name: "Bori", c: "#4cd4a6" },
  { emoji: "🦊", name: "Yeoul", c: "#6ec8ff" },
  { emoji: "🐼", name: "Panda", c: "#ff9ebb" },
  { emoji: "🐨", name: "Koal", c: "#b9a0ff" },
];

export default function AvatarIconPickerGridSelect({
  label = "Select an avatar",
  avatars = DEFAULT_AVATARS,
  duration = 220,
  easing = "cubic-bezier(.2,1.4,.4,1)",
}: AvatarIconPickerGridSelectProps) {
  const [cur, setCur] = useState(0);
  const active = avatars[cur];
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--c": active?.c ?? "#ff9ebb" };

  function move(i: number, d: number) {
    const n = (i + d + avatars.length) % avatars.length;
    setCur(n);
    document.getElementById(`avatar-item-${n}`)?.focus();
  }

  return (
    <div className={styles.ava} style={vars}>
      <div className={styles.preview}>
        <span>{active?.emoji}</span><span>{active?.name}</span>
      </div>
      <div className={styles.grid} role="radiogroup" aria-label={label}>
        {avatars.map((a, i) => (
          <button
            key={a.name}
            id={`avatar-item-${i}`}
            type="button"
            className={styles.item}
            role="radio"
            aria-checked={cur === i}
            data-on={cur === i}
            style={{ "--item-c": a.c } as CSSProperties}
            tabIndex={cur === i ? 0 : -1}
            onClick={() => setCur(i)}
            onKeyDown={(e: any) => {
              const d = ({ ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 } as Record<string, number>)[e.key];
              if (d !== undefined) { e.preventDefault(); move(i, d); }
            }}
          >
            {a.emoji}
          </button>
        ))}
      </div>
    </div>
  );
}