03Feature highlight

<main class="stage">
  <section class="fh">
    <p class="fh__title">Why start now</p>
    <ul class="fh__list" role="list">
      <span class="fh__spot" aria-hidden="true"><span class="fh__spot-fill"></span></span>
      <li class="fh__row is-active" data-i="0" tabindex="0" role="button" aria-pressed="true">
        <span class="fh__icon">◆</span><span class="fh__label">3-min signup, no card needed</span>
      </li>
      <li class="fh__row" data-i="1" tabindex="0" role="button" aria-pressed="false">
        <span class="fh__icon">◆</span><span class="fh__label">First month free</span>
      </li>
      <li class="fh__row" data-i="2" tabindex="0" role="button" aria-pressed="false">
        <span class="fh__icon">◆</span><span class="fh__label">No cancellation fee</span>
      </li>
    </ul>
  </section>
</main>

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

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-base;                                 // 스포트라이트 이동
$easing: $ease-spring;
$color: $subject-blue;

@include stage($stage-orange);

.fh { width: min(360px, 96vw); }
.fh__title { margin: 0 0 $sp-3; font-weight: 800; font-size: 13px; line-height: 1.3; font-family: inherit; color: $subject-ink; }   // 주황 면 위 크림 3.11:1 → 잉크 5.50:1 (패턴 ③)

.fh__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: $r-card;
  background: rgba($subject-ink, .5);
  overflow: hidden;
}
// 행 높이를 고정해야 .fh__spot 의 translateY 계산이 실측과 어긋나지 않는다 (BD19 와 같은 원리 — 세로판)
.fh__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: $sp-2;
  height: 40px;
  box-sizing: border-box;
  padding: 0 $sp-3;
  cursor: pointer;
  outline-offset: -2px;
}
.fh__icon { font-size: 10px; color: rgba(255, 247, 230, .8); transition: color $duration $easing, transform $duration $easing; }
.fh__row.is-active .fh__icon { color: $subject-cream; transform: scale(1.3); }
.fh__label { font-weight: 600; font-size: 12px; line-height: 1.3; font-family: inherit; color: rgba(255, 247, 230, .8); transition: color $duration $easing; }
.fh__row.is-active .fh__label { color: $subject-cream; }

// 위치(JS 의 translateY)와 장식용 펄스(CSS scaleX)를 같은 요소의 transform 에 같이 쓰면
// 펄스 keyframe 이 매 주기마다 transform 전체를 덮어써 translateY 가 0 으로 튄다 — 바깥(위치)·안(펄스) 두 겹으로 나눈다.
.fh__spot {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  transition: transform $duration $easing;
}
.fh__spot-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(47, 109, 246, .3);
  border-left: 3px solid $subject-blue;
  box-sizing: border-box;
  transform-origin: left center; // 규칙8: 스포트라이트 좌변 펄스
  animation: fh-pulse 1.8s ease-in-out infinite;
}
// 진폭을 크게(투명도 + 크기) — .85→1 정도의 미세한 opacity 만으로는 픽셀문턱(12/255) 을 못 넘었다(실측 0.06%)
@keyframes fh-pulse {
  0%, 100% { opacity: .4; transform: scaleX(1); }
  50%      { opacity: 1; transform: scaleX(1.02); }
}

// ── 접근성 ──────────────────────────────────────────
@media (prefers-reduced-motion: reduce) {
  .fh__spot { animation: none !important; transition: none !important; }
  .fh__icon, .fh__label { transition: none !important; }
}

// ── 반응형(320×200) ──────────────────────────────────
@media (max-width: 340px), (max-height: 220px) {
  .fh__row, .fh__spot, .fh__spot-fill { height: 34px; }
  .fh__title { margin-bottom: $sp-2; }
}

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

.fh {
  width: min(360px, 96vw);
}

.fh__title {
  margin: 0 0 12px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.3;
  font-family: inherit;
  color: #17141a;
}

.fh__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 16px;
  background: rgba(23, 20, 26, 0.5);
  overflow: hidden;
}

.fh__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  cursor: pointer;
  outline-offset: -2px;
}

.fh__icon {
  font-size: 10px;
  color: rgba(255, 247, 230, 0.8);
  transition: color 300ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fh__row.is-active .fh__icon {
  color: #fff7e6;
  transform: scale(1.3);
}

.fh__label {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  font-family: inherit;
  color: rgba(255, 247, 230, 0.8);
  transition: color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fh__row.is-active .fh__label {
  color: #fff7e6;
}

.fh__spot {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fh__spot-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(47, 109, 246, 0.3);
  border-left: 3px solid #2f6df6;
  box-sizing: border-box;
  transform-origin: left center;
  animation: fh-pulse 1.8s ease-in-out infinite;
}

@keyframes fh-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fh__spot {
    animation: none !important;
    transition: none !important;
  }
  .fh__icon, .fh__label {
    transition: none !important;
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .fh__row, .fh__spot, .fh__spot-fill {
    height: 34px;
  }
  .fh__title {
    margin-bottom: 8px;
  }
}

// 실제 동작: 1.6초마다 다음 행으로 스포트라이트가 자동 이동하고, 행을 클릭·Enter 하면 그 행으로 바로 이동한다.
var rows = Array.prototype.slice.call(document.querySelectorAll('.fh__row'));
var spot = document.querySelector('.fh__spot');
var current = 0;
function go(i) {
  current = i;
  rows.forEach(function (r, idx) {
    var on = idx === i;
    r.classList.toggle('is-active', on);
    r.setAttribute('aria-pressed', String(on));
  });
  // 실제 렌더 높이를 잰다 — 고정값을 짐작하면 반응형 구간에서 스포트라이트가 어긋난다(BD19 와 같은 병)
  var offset = rows[i].getBoundingClientRect().top - rows[0].getBoundingClientRect().top;
  spot.style.transform = 'translateY(' + offset + 'px)';
}
rows.forEach(function (r) {
  r.addEventListener('click', function () { go(Number(r.getAttribute('data-i'))); resetTimer(); });
  r.addEventListener('keydown', function (e) {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(Number(r.getAttribute('data-i'))); resetTimer(); }
  });
});
var timer;
function resetTimer() {
  clearInterval(timer);
  timer = setInterval(function () { go((current + 1) % rows.length); }, 1600);
}
resetTimer();

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

export type FeatureHighlightProps = { duration?: number; easing?: string; color?: string };
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

const FEATURES = ["가입 3분, 카드 등록 없음", "첫 달 요금 전액 면제", "해지 위약금 없음"];

export default function FeatureHighlight({ duration = 300, easing = "cubic-bezier(.2,.8,.2,1)", color = "#2f6df6" }: FeatureHighlightProps) {
  const [active, setActive] = useState(0);
  const [offset, setOffset] = useState(0);
  const rowRefs = useRef<(HTMLLIElement | null)[]>([]);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  function go(i: number) {
    setActive(i);
  }

  function setRowRef(i: number) {
    return (el: HTMLLIElement | null) => {
      const rows = rowRefs.current || [];
      rows[i] = el;
      rowRefs.current = rows;
    };
  }

  // 실제 렌더 높이를 잰다 — 고정값을 짐작하면 반응형 구간에서 스포트라이트가 어긋난다(BD19 와 같은 병)
  useEffect(() => {
    const rows = rowRefs.current || [];
    const row = rows[active];
    const first = rows[0];
    if (row && first) setOffset(row.getBoundingClientRect().top - first.getBoundingClientRect().top);
  }, [active]);

  useEffect(() => {
    const id = setInterval(() => setActive((i) => (i + 1) % FEATURES.length), 1600);
    return () => clearInterval(id);
  }, []);

  return (
    <section className={styles.fh} style={vars}>
      <p className={styles.title}>왜 지금 시작해야 할까요</p>
      <ul className={styles.list} role="list">
        <span className={styles.spot} style={{ transform: `translateY(${offset}px)` }} aria-hidden="true">
          <span className={styles.spotFill} />
        </span>
        {FEATURES.map((label, i) => (
          <li
            key={label}
            ref={setRowRef(i)}
            className={`${styles.row} ${i === active ? styles.active : ""}`}
            tabIndex={0}
            role="button"
            aria-pressed={i === active}
            onClick={() => go(i)}
            onKeyDown={(e: any) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); go(i); } }}
          >
            <span className={styles.icon}>◆</span><span className={styles.label}>{label}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}