03Keyboard-arrow value toggle — each time a direction value changes, a highlighted-cell value moves across the grid

<main class="stage">
<div class="kb is-demo" id="kb">
  <div class="kb__head"><span class="kb__label">March 2026</span></div>
  <div class="kb__weekday" aria-hidden="true">
    <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>
  </div>
  <div class="kb__gridWrap">
    <div class="kb__ring" id="kbRing"></div>
    <div class="kb__grid" id="kbGrid" role="grid" aria-label="Calendar"></div>
  </div>
</div>
</main>

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

// 계산 겹: moveRingTo() 가 포커스된 셀의 getBoundingClientRect 좌표를 읽어
// 링을 그 좌표로 translate 이동시킨다 — 셀 사이를 좌표값으로 보간하며 옮겨간다.
@include stage($stage-orange);

.kb {
  width: 100%;
  max-width: 220px;
  background: $subject-cream;
  border-radius: $r-card;
  padding: $sp-2;
  box-shadow: $shadow-raised;
  box-sizing: border-box;
}

.kb__head {
  text-align: center;
  margin-bottom: $sp-1;
}

.kb__label {
  font-size: 11px;
  font-weight: 700;
  color: $subject-ink;
}

.kb__weekday {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: $sp-1;
}

.kb__weekday span {
  font-size: 9px;
  text-align: center;
  color: rgba($subject-ink, .72);
}

.kb__gridWrap {
  position: relative;
}

.kb__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 21px;
  position: relative;
  z-index: 1;
}

.kb__cell {
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  font-size: 11px;
  color: $subject-ink;
  border-radius: $r-xs;
  cursor: pointer;
}

.kb__cell:focus {
  outline: none;
}

.kb__cell--out {
  visibility: hidden;
}

.kb__ring {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border: 2px solid $subject-blue-deep;
  border-radius: $r-xs;
  box-sizing: border-box;
  transition: transform $dur-base $ease-spring;
  pointer-events: none;
}

@media (max-width: 340px) {
  .kb { max-width: 180px; }
  .kb__grid { grid-auto-rows: 17px; }
  .kb__cell { font-size: 10px; }
  .kb__weekday span { font-size: 8px; }
}

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

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

.kb {
  width: 100%;
  max-width: 220px;
  background: #fff7e6;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  box-sizing: border-box;
}

.kb__head {
  text-align: center;
  margin-bottom: 4px;
}

.kb__label {
  font-size: 11px;
  font-weight: 700;
  color: #17141a;
}

.kb__weekday {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.kb__weekday span {
  font-size: 9px;
  text-align: center;
  color: rgba(23, 20, 26, 0.72);
}

.kb__gridWrap {
  position: relative;
}

.kb__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 21px;
  position: relative;
  z-index: 1;
}

.kb__cell {
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  font-size: 11px;
  color: #17141a;
  border-radius: 4px;
  cursor: pointer;
}

.kb__cell:focus {
  outline: none;
}

.kb__cell--out {
  visibility: hidden;
}

.kb__ring {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border: 2px solid #0a4fe8;
  border-radius: 4px;
  box-sizing: border-box;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

@media (max-width: 340px) {
  .kb {
    max-width: 180px;
  }
  .kb__grid {
    grid-auto-rows: 17px;
  }
  .kb__cell {
    font-size: 10px;
  }
  .kb__weekday span {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kb__ring {
    transition: none;
  }
}

(function () {
  var BASE = { y: 2026, m: 3, d: 14 }; // 계산 겹 상수: 고정 오늘, new Date() 미사용
  var CELL_TOTAL = 42; // 6행 고정
  var FOCUS_SEQ = [14, 15, 16, 23, 22, 21, 14]; // 계산 겹: 자동재생이 훑는 Date 순서

  function isLeap(y) { return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0; }
  function daysInMonth(y, m) {
    var t = [31, isLeap(y) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    return t[m - 1];
  }
  function dow(y, m, d) { // Zeller 합동식 — 0=Sun ~ 6=Sat
    var yy = y, mm = m;
    if (mm < 3) { yy -= 1; mm += 12; }
    var K = yy % 100, J = Math.floor(yy / 100);
    var h = (d + Math.floor(13 * (mm + 1) / 5) + K + Math.floor(K / 4) + Math.floor(J / 4) - 2 * J) % 7;
    h = ((h % 7) + 7) % 7;
    return (h + 6) % 7;
  }

  var kb = document.getElementById('kb');
  var grid = document.getElementById('kbGrid');
  var ring = document.getElementById('kbRing');

  var n = daysInMonth(BASE.y, BASE.m);
  var lead = dow(BASE.y, BASE.m, 1);
  var cellByDay = {};
  var i, cell;
  for (i = 0; i < lead; i++) {
    cell = document.createElement('span');
    cell.className = 'kb__cell kb__cell--out';
    grid.appendChild(cell);
  }
  for (var d = 1; d <= n; d++) {
    cell = document.createElement('button');
    cell.type = 'button';
    cell.className = 'kb__cell';
    cell.textContent = String(d);
    cell.dataset.day = String(d);
    cell.tabIndex = d === BASE.d ? 0 : -1;
    grid.appendChild(cell);
    cellByDay[d] = cell;
  }
  var trail = CELL_TOTAL - lead - n;
  for (i = 0; i < trail; i++) {
    cell = document.createElement('span');
    cell.className = 'kb__cell kb__cell--out';
    grid.appendChild(cell);
  }

  var focusedDay = BASE.d;
  var ringMeasured = false;

  function moveRingTo(cellEl) {
    // 계산 겹: 셀의 실제 렌더 좌표·크기를 실측해 링을 그 자리로 옮긴다(좌표 lerp 이동)
    var cr = cellEl.getBoundingClientRect();
    var gr = grid.getBoundingClientRect();
    if (!ringMeasured) {
      ring.style.width = cr.width + 'px';
      ring.style.height = cr.height + 'px';
      ringMeasured = true;
    }
    ring.style.transform = 'translate(' + (cr.left - gr.left) + 'px,' + (cr.top - gr.top) + 'px)';
  }

  grid.addEventListener('focusin', function (e) {
    var cellEl = e.target.closest('.kb__cell');
    if (!cellEl || !cellEl.dataset.day) return;
    moveRingTo(cellEl);
  });

  function focusDay(target) {
    if (target < 1) target = 1;
    if (target > n) target = n;
    var prev = cellByDay[focusedDay];
    if (prev) prev.tabIndex = -1;
    focusedDay = target;
    var next = cellByDay[focusedDay];
    next.tabIndex = 0;
    next.focus({ preventScroll: true });
  }

  function human() {
    kb.classList.remove('is-demo');
    stopAutoplay();
  }

  grid.addEventListener('keydown', function (e) {
    var delta = 0;
    if (e.key === 'ArrowRight') delta = 1;
    else if (e.key === 'ArrowLeft') delta = -1;
    else if (e.key === 'ArrowDown') delta = 7;
    else if (e.key === 'ArrowUp') delta = -7;
    else return;
    e.preventDefault();
    human();
    focusDay(focusedDay + delta);
  });
  grid.addEventListener('click', function (e) {
    var cellEl = e.target.closest('.kb__cell');
    if (!cellEl || !cellEl.dataset.day) return;
    human();
    focusDay(parseInt(cellEl.dataset.day, 10));
  });

  var seqIdx = 0;
  var autoTimer = null;
  function stopAutoplay() { if (autoTimer) { clearInterval(autoTimer); autoTimer = null; } }
  function tick() {
    seqIdx = (seqIdx + 1) % FOCUS_SEQ.length;
    focusDay(FOCUS_SEQ[seqIdx]);
  }

  cellByDay[BASE.d].focus({ preventScroll: true });
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (!reduce) { autoTimer = setInterval(tick, 500); }
})();

import { useEffect, useRef, useState } from 'react';
import styles from './DatePickerKeyboardArrow.module.scss';

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

const BASE = { y: 2026, m: 3, d: 14 }; // 계산 겹 상수: 고정 오늘, new Date() 미사용
const CELL_TOTAL = 42;
const FOCUS_SEQ = [14, 15, 16, 23, 22, 21, 14]; // 계산 겹: 자동재생이 훑는 날짜 순서
const WEEKDAY = ['일', '월', '화', '수', '목', '금', '토'];

function isLeap(y: number) {
  return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0;
}
function daysInMonth(y: number, m: number) {
  const t = [31, isLeap(y) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  return t[m - 1];
}
function dow(y: number, m: number, d: number) { // Zeller 합동식 — 0=일 ~ 6=토
  let yy = y;
  let mm = m;
  if (mm < 3) { yy -= 1; mm += 12; }
  const K = yy % 100;
  const J = Math.floor(yy / 100);
  let h = (d + Math.floor((13 * (mm + 1)) / 5) + K + Math.floor(K / 4) + Math.floor(J / 4) - 2 * J) % 7;
  h = ((h % 7) + 7) % 7;
  return (h + 6) % 7;
}

const N_DAYS = daysInMonth(BASE.y, BASE.m);
const LEAD = dow(BASE.y, BASE.m, 1);
const TRAIL = CELL_TOTAL - LEAD - N_DAYS;

export default function DatePickerKeyboardArrow() {
  const gridRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const ringRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const cellRefs = useRef({}) as unknown as Box<Record<number, HTMLButtonElement>>;
  const ringMeasuredRef = useRef(false) as unknown as Box<boolean>;
  const [isDemo, setIsDemo] = useState(true);
  const [focusedDay, setFocusedDay] = useState(BASE.d);

  function human() {
    setIsDemo(false);
  }

  function moveRingTo(cellEl: HTMLButtonElement) {
    // 계산 겹: 셀의 실제 렌더 좌표·크기를 실측해 링을 그 자리로 옮긴다(좌표 lerp 이동)
    const grid = gridRef.current;
    const ring = ringRef.current;
    if (!grid || !ring) return;
    const cr = cellEl.getBoundingClientRect();
    const gr = grid.getBoundingClientRect();
    if (!ringMeasuredRef.current) {
      ring.style.width = cr.width + 'px';
      ring.style.height = cr.height + 'px';
      ringMeasuredRef.current = true;
    }
    ring.style.transform = 'translate(' + (cr.left - gr.left) + 'px,' + (cr.top - gr.top) + 'px)';
  }

  function focusDay(target: number) {
    let t = target;
    if (t < 1) t = 1;
    if (t > N_DAYS) t = N_DAYS;
    setFocusedDay(t);
    const el = cellRefs.current[t];
    if (el) el.focus({ preventScroll: true });
  }

  useEffect(() => {
    const el = cellRefs.current[focusedDay];
    if (el) moveRingTo(el);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [focusedDay]);

  useEffect(() => {
    const el = cellRefs.current[BASE.d];
    if (el) el.focus({ preventScroll: true });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (!isDemo || reduce) return;
    let seqIdx = 0;
    const timer = window.setInterval(() => {
      seqIdx = (seqIdx + 1) % FOCUS_SEQ.length;
      focusDay(FOCUS_SEQ[seqIdx]);
    }, 500);
    return () => window.clearInterval(timer);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isDemo]);

  function onKeyDown(e: { key: string; preventDefault: () => void }) {
    let delta = 0;
    if (e.key === 'ArrowRight') delta = 1;
    else if (e.key === 'ArrowLeft') delta = -1;
    else if (e.key === 'ArrowDown') delta = 7;
    else if (e.key === 'ArrowUp') delta = -7;
    else return;
    e.preventDefault();
    human();
    focusDay(focusedDay + delta);
  }

  const lead = Array.from({ length: LEAD }, (_, i) => <span key={'l' + i} className={`${styles.kbCell} ${styles.kbCellOut}`} />);
  const days = Array.from({ length: N_DAYS }, (_, i) => {
    const d = i + 1;
    return (
      <button
        type="button"
        key={'d' + d}
        className={styles.kbCell}
        tabIndex={d === focusedDay ? 0 : -1}
        ref={(el: HTMLButtonElement | null) => { if (el) cellRefs.current[d] = el; }}
        onClick={() => { human(); focusDay(d); }}
      >
        {d}
      </button>
    );
  });
  const trail = Array.from({ length: TRAIL }, (_, i) => <span key={'t' + i} className={`${styles.kbCell} ${styles.kbCellOut}`} />);

  return (
    <div className={`${styles.kb} ${isDemo ? styles.isDemo : ''}`}>
      <div className={styles.kbHead}><span className={styles.kbLabel}>2026년 3월</span></div>
      <div className={styles.kbWeekday} aria-hidden="true">
        {WEEKDAY.map((w) => <span key={w}>{w}</span>)}
      </div>
      <div className={styles.kbGridWrap}>
        <div className={styles.kbRing} ref={ringRef} />
        <div className={styles.kbGrid} ref={gridRef} role="grid" aria-label="달력" onKeyDown={onKeyDown}>
          {lead}{days}{trail}
        </div>
      </div>
    </div>
  );
}