06ふきだしラベル切替 — 指している星の順番の値に合わせてラベル文言の値が変わって現れる方式

<main class="stage">
<div class="sr is-demo" id="sr">
  <div class="sr__tip" id="srTip">普通</div>
  <div class="sr__row" id="srRow">
    <span class="sr__star" data-i="1"><svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 19.771l-7.416 3.642 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg></span>
    <span class="sr__star" data-i="2"><svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 19.771l-7.416 3.642 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg></span>
    <span class="sr__star" data-i="3"><svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 19.771l-7.416 3.642 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg></span>
    <span class="sr__star" data-i="4"><svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 19.771l-7.416 3.642 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg></span>
    <span class="sr__star" data-i="5"><svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 19.771l-7.416 3.642 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg></span>
  </div>
</div>
</main>

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

// 계산 겹: 별의 실제 렌더 중심 좌표(getBoundingClientRect)를 말풍선 translateX 값으로 옮기고,
// 인덱스 변경은 40ms 지연(debounce) 뒤에만 문구를 바꿔 스쳐 지나갈 때의 깜빡임을 막는다.
@include stage($stage-orange);

.sr {
  position: relative;
  display: grid;
  place-items: center;
  gap: $sp-8;
}

.sr__tip {
  position: absolute;
  top: 2px;
  left: 0;
  transform: translateX(0) translateX(-50%);
  background: $subject-ink;
  color: $stage-paper;
  padding: $sp-1 $sp-3;
  border-radius: $r-sm;
  font: 600 13px/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  white-space: nowrap;
  opacity: 0;
  transition: opacity $dur-instant $ease-out, transform $dur-quick $ease-out;

  &::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: $subject-ink;
  }

  &--show { opacity: 1; }
}

.sr__row { display: flex; gap: $sp-2; margin-top: 40px; }

.sr__star {
  width: 40px;
  height: 40px;
  color: $subject-orange-deep;
  opacity: .45;
  transition: color $dur-quick $ease-out, opacity $dur-quick $ease-out;

  svg { display: block; width: 100%; height: 100%; fill: currentColor; }

  &--filled { color: $subject-blue-deep; opacity: 1; }
}

@media (max-width: 340px) {
  .sr__star { width: 32px; height: 32px; }
  .sr__row { gap: $sp-1; }
  .sr__tip { font-size: 12px; top: 0; }
}

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

.sr {
  position: relative;
  display: grid;
  place-items: center;
  gap: 32px;
}

.sr__tip {
  position: absolute;
  top: 2px;
  left: 0;
  transform: translateX(0) translateX(-50%);
  background: #17141a;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 8px;
  font: 600 13px/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 140ms ease-out, transform 220ms ease-out;
}
.sr__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #17141a;
}
.sr__tip--show {
  opacity: 1;
}

.sr__row {
  display: flex;
  gap: 8px;
  margin-top: 40px;
}

.sr__star {
  width: 40px;
  height: 40px;
  color: #c93000;
  opacity: 0.45;
  transition: color 220ms ease-out, opacity 220ms ease-out;
}
.sr__star svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.sr__star--filled {
  color: #0a4fe8;
  opacity: 1;
}

@media (max-width: 340px) {
  .sr__star {
    width: 32px;
    height: 32px;
  }
  .sr__row {
    gap: 4px;
  }
  .sr__tip {
    font-size: 12px;
    top: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sr__tip, .sr__star {
    transition: none;
  }
}

(function () {
  var root = document.getElementById('sr');
  var row = document.getElementById('srRow');
  var tip = document.getElementById('srTip');
  var stars = Array.prototype.slice.call(row.querySelectorAll('.sr__star'));
  var LABELS = { 1: '非常に悪い', 2: '悪い', 3: '普通', 4: '良い', 5: '最高' };
  var pendingTimer = null;
  var shownIndex = 0;

  // 계산 겹: 별의 실제 렌더 위치(getBoundingClientRect 중심 x)를 말풍선의 translateX 값으로
  // 그대로 옮기고, 인덱스 변경은 짧은 지연(debounce)을 거친 뒤에만 이름표 문구를 바꾼다 —
  // 빠르게 스쳐 지나갈 때 문구가 매 별마다 깜빡이지 않게 하는 타이밍 계산이다.
  function positionTip(i) {
    var star = stars[i - 1];
    var sr = star.getBoundingClientRect();
    var rr = row.getBoundingClientRect();
    var cx = sr.left + sr.width / 2 - rr.left;
    tip.style.transform = 'translateX(' + cx.toFixed(1) + 'px) translateX(-50%)';
  }

  function commit(i) {
    shownIndex = i;
    tip.textContent = LABELS[i];
    positionTip(i);
    tip.classList.add('sr__tip--show');
    stars.forEach(function (s, idx) { s.classList.toggle('sr__star--filled', idx < i); });
  }

  function requestSwap(i) {
    if (pendingTimer) clearTimeout(pendingTimer);
    pendingTimer = setTimeout(function () { commit(i); }, 40);
  }

  function hide() {
    if (pendingTimer) { clearTimeout(pendingTimer); pendingTimer = null; }
    tip.classList.remove('sr__tip--show');
    stars.forEach(function (s) { s.classList.remove('sr__star--filled'); });
  }

  stars.forEach(function (s) {
    var i = Number(s.getAttribute('data-i'));
    s.addEventListener('pointerenter', function () { root.classList.remove('is-demo'); stopAutoplay(); requestSwap(i); });
  });
  row.addEventListener('pointerleave', hide);

  // 자동 루프: 1부터 5까지 순서대로 머무르며 이름표 문구가 바뀌는 것을 보여주고 끝에서 감춘다.
  var step = 0;
  var autoTimer = null;
  function autoTick() {
    if (step < 5) { commit(step + 1); } else { hide(); }
    step = (step + 1) % 7;
  }
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  function stopAutoplay() { if (autoTimer) { clearInterval(autoTimer); autoTimer = null; } }
  if (!reduce) { autoTimer = setInterval(autoTick, 340); autoTick(); }
})();

import { useEffect, useRef } from "react";
import styles from "./TooltipLabelSwap.module.scss";

const STAR_PATH =
  "M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 19.771l-7.416 3.642 1.48-8.279-6.064-5.828 8.332-1.151z";
const LABELS: Record<number, string> = { 1: "매우 별로", 2: "별로", 3: "보통", 4: "좋음", 5: "최고" };

export default function TooltipLabelSwap() {
  const rootRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const row = root.querySelector<HTMLDivElement>(`.${styles.row}`);
    const tip = root.querySelector<HTMLDivElement>(`.${styles.tip}`);
    if (!row || !tip) return;
    const stars = Array.prototype.slice.call(
      row.querySelectorAll(`.${styles.star}`)
    ) as HTMLElement[];
    let pendingTimer: number | null = null;

    // 계산 겹: 별의 실제 렌더 위치(getBoundingClientRect 중심 x)를 말풍선의 translateX 값으로
    // 그대로 옮기고, 인덱스 변경은 짧은 지연(debounce)을 거친 뒤에만 이름표 문구를 바꾼다 —
    // 빠르게 스쳐 지나갈 때 문구가 매 별마다 깜빡이지 않게 하는 타이밍 계산이다.
    function positionTip(i: number) {
      const star = stars[i - 1];
      const sr = star.getBoundingClientRect();
      const rr = row!.getBoundingClientRect();
      const cx = sr.left + sr.width / 2 - rr.left;
      tip!.style.transform = "translateX(" + cx.toFixed(1) + "px) translateX(-50%)";
    }

    function commit(i: number) {
      tip!.textContent = LABELS[i];
      positionTip(i);
      tip!.classList.add(styles.show);
      stars.forEach((s, idx) => s.classList.toggle(styles.filled, idx < i));
    }

    function requestSwap(i: number) {
      if (pendingTimer !== null) window.clearTimeout(pendingTimer);
      pendingTimer = window.setTimeout(() => commit(i), 40);
    }

    function hide() {
      if (pendingTimer !== null) { window.clearTimeout(pendingTimer); pendingTimer = null; }
      tip!.classList.remove(styles.show);
      stars.forEach((s) => s.classList.remove(styles.filled));
    }

    const enterHandlers: Array<() => void> = [];
    stars.forEach((s, idx) => {
      const i = idx + 1;
      const handler = () => { stopAutoplay(); requestSwap(i); };
      enterHandlers.push(handler);
      s.addEventListener("pointerenter", handler);
    });
    row.addEventListener("pointerleave", hide);

    // 자동 루프: 1부터 5까지 순서대로 머무르며 이름표 문구가 바뀌는 것을 보여주고 끝에서 감춘다.
    let step = 0;
    let autoTimer: number | null = null;
    function autoTick() {
      if (step < 5) { commit(step + 1); } else { hide(); }
      step = (step + 1) % 7;
    }
    function stopAutoplay() { if (autoTimer !== null) { window.clearInterval(autoTimer); autoTimer = null; } }
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (!reduce) { autoTimer = window.setInterval(autoTick, 340); autoTick(); }

    return () => {
      stopAutoplay();
      if (pendingTimer !== null) window.clearTimeout(pendingTimer);
      stars.forEach((s, idx) => s.removeEventListener("pointerenter", enterHandlers[idx]));
      row.removeEventListener("pointerleave", hide);
    };
  }, []);

  return (
    <div ref={rootRef} className={styles.stage}>
      <div className={styles.sr}>
        <div className={styles.tip}>보통</div>
        <div className={styles.row}>
          {[1, 2, 3, 4, 5].map((i) => (
            <span key={i} className={styles.star}>
              <svg viewBox="0 0 24 24"><path d={STAR_PATH} /></svg>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}