05Read-receipt merge — a label computing its merge moment from a time gap

<main class="stage">
<section class="panel">
  <div class="thread">
    <div class="dots" id="dots">
      <span class="dot"></span><span class="dot"></span><span class="dot"></span>
    </div>
    <div class="msgRow" id="msgRow">
      <span class="msg">Message received</span>
      <span class="receipt" id="receipt">Read</span>
    </div>
  </div>
  <span class="sr" id="live" role="status" aria-live="polite"></span>
</section>
</main>

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

@include stage($stage-ink);

.panel { display: flex; flex-direction: column; align-items: center; gap: $sp-3; }
.thread { display: flex; flex-direction: column; align-items: flex-end; gap: $sp-2; min-height: 40px; }

.dots {
  display: inline-flex;
  align-items: center;
  gap: $sp-2;
  padding: $sp-2 $sp-3;
  border-radius: $r-card;
  background: $subject-cream;
  transition: opacity $dur-base $ease-out;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: $subject-ink; }

.msgRow {
  display: inline-flex;
  align-items: center;
  gap: $sp-2;
  opacity: 0;
  transition: opacity $dur-base $ease-out;
}

.msg {
  padding: $sp-2 $sp-3;
  border-radius: $r-card;
  background: $subject-blue-deep;
  color: $subject-cream;
  font-size: 13px;
}

.receipt {
  font-size: 11px;
  color: $subject-blue-light;
}

.receipt.is-merged {
  margin-left: -$sp-1;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 340px) {
  .msg { font-size: 12px; }
}

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

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.thread {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-height: 40px;
}

.dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 16px;
  background: #fff7e6;
  transition: opacity 300ms ease-out;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #17141a;
}

.msgRow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.msg {
  padding: 8px 12px;
  border-radius: 16px;
  background: #0a4fe8;
  color: #fff7e6;
  font-size: 13px;
}

.receipt {
  font-size: 11px;
  color: #5b8cf8;
}

.receipt.is-merged {
  margin-left: -4px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 340px) {
  .msg {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dots, .msgRow {
    transition: none;
  }
}

// Read 표시 병합 — 입력 표시가 사라진 시각과 메시지가 도착한 시각의 차를 재어 병합 여부를 판정한다.
// 계산 겹: Date.now() 두 시점의 차 → 기준값과 비교 → classList 로 병합 상태 반영. 자동 재생만, 실사용자 리스너 없음.
(function () {
  var dots = document.getElementById('dots');
  var msgRow = document.getElementById('msgRow');
  var receipt = document.getElementById('receipt');
  var live = document.getElementById('live');
  if (!dots || !msgRow || !receipt || !live) return;

  var MERGE_GAP_MS = 400;
  var CYCLE_MS = 2000;
  var VANISH_AT = 900;
  var ARRIVE_DELAY_MS = 180;
  var timer1 = null, timer2 = null;

  function runCycle() {
    dots.style.opacity = '1';
    msgRow.style.opacity = '0';
    receipt.classList.remove('is-merged');
    timer1 = setTimeout(function () {
      dots.style.opacity = '0';
      var vanishAt = Date.now();
      timer2 = setTimeout(function () {
        var arrivedAt = Date.now();
        var gap = arrivedAt - vanishAt;
        var merged = gap < MERGE_GAP_MS;
        msgRow.style.opacity = '1';
        receipt.classList.toggle('is-merged', merged);
        live.textContent = merged ? 'Merged indicator' : 'Separate indicator';
      }, ARRIVE_DELAY_MS);
    }, VANISH_AT);
  }

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) {
    dots.style.opacity = '0';
    msgRow.style.opacity = '1';
    receipt.classList.add('is-merged');
    return;
  }
  runCycle();
  setInterval(function () {
    clearTimeout(timer1);
    clearTimeout(timer2);
    runCycle();
  }, CYCLE_MS);
})();

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

// 읽음 표시 병합 — 입력 표시가 사라진 시각과 메시지가 도착한 시각의 차를 재어 병합 여부를 판정한다.
// 계산 겹: Date.now() 두 시점의 차 → 기준값과 비교 → classList 로 병합 상태 반영. 자동 재생만, 실사용자 리스너 없음.
const MERGE_GAP_MS = 400;
const CYCLE_MS = 2000;
const VANISH_AT = 900;
const ARRIVE_DELAY_MS = 180;

export default function TypingReadReceiptMerge() {
  const dotsRef = useRef<HTMLDivElement>(null);
  const msgRowRef = useRef<HTMLDivElement>(null);
  const receiptRef = useRef<HTMLSpanElement>(null);
  const liveRef = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    const dots = dotsRef.current;
    const msgRow = msgRowRef.current;
    const receipt = receiptRef.current;
    const live = liveRef.current;
    if (!dots || !msgRow || !receipt || !live) return;

    let timer1: ReturnType<typeof setTimeout> | null = null;
    let timer2: ReturnType<typeof setTimeout> | null = null;

    function runCycle() {
      dots!.style.opacity = "1";
      msgRow!.style.opacity = "0";
      receipt!.classList.remove(styles["is-merged"]);
      timer1 = setTimeout(function () {
        dots!.style.opacity = "0";
        const vanishAt = Date.now();
        timer2 = setTimeout(function () {
          const arrivedAt = Date.now();
          const gap = arrivedAt - vanishAt;
          const merged = gap < MERGE_GAP_MS;
          msgRow!.style.opacity = "1";
          receipt!.classList.toggle(styles["is-merged"], merged);
          live!.textContent = merged ? "합쳐진 표시" : "별도 표시";
        }, ARRIVE_DELAY_MS);
      }, VANISH_AT);
    }

    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) {
      dots.style.opacity = "0";
      msgRow.style.opacity = "1";
      receipt.classList.add(styles["is-merged"]);
      return;
    }
    runCycle();
    const id = setInterval(function () {
      if (timer1) clearTimeout(timer1);
      if (timer2) clearTimeout(timer2);
      runCycle();
    }, CYCLE_MS);
    return () => {
      clearInterval(id);
      if (timer1) clearTimeout(timer1);
      if (timer2) clearTimeout(timer2);
    };
  }, []);

  return (
    <div className={styles.stage}>
      <section className={styles.panel}>
        <div className={styles.thread}>
          <div ref={dotsRef} className={styles.dots}>
            <span className={styles.dot} />
            <span className={styles.dot} />
            <span className={styles.dot} />
          </div>
          <div ref={msgRowRef} className={styles.msgRow}>
            <span className={styles.msg}>메시지 도착</span>
            <span ref={receiptRef} className={styles.receipt}>읽음</span>
          </div>
        </div>
        <span ref={liveRef} className={styles.sr} role="status" aria-live="polite" />
      </section>
    </div>
  );
}