02Schedule timeline

<main class="stage">
  <section class="tl is-demo" data-active="0">
    <span class="tl__track" aria-hidden="true"><span class="tl__fill"></span></span>
    <ol class="tl__list">
      <li><button class="tl__stop" type="button" data-i="0" aria-current="step">
        <span class="tl__dot" aria-hidden="true"></span>
        <span class="tl__time">09:00</span><span class="tl__label">Check-in & coffee</span>
      </button></li>
      <li><button class="tl__stop" type="button" data-i="1">
        <span class="tl__dot" aria-hidden="true"></span>
        <span class="tl__time">10:00</span><span class="tl__label">Keynote</span>
      </button></li>
      <li><button class="tl__stop" type="button" data-i="2">
        <span class="tl__dot" aria-hidden="true"></span>
        <span class="tl__time">13:00</span><span class="tl__label">Networking lunch</span>
      </button></li>
      <li><button class="tl__stop" type="button" data-i="3">
        <span class="tl__dot" aria-hidden="true"></span>
        <span class="tl__time">15:00</span><span class="tl__label">Panel talk</span>
      </button></li>
    </ol>
  </section>
</main>

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

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-base;                             // 진행바가 채워지는 시간
$easing: $ease-spring;
$color: $subject-ink;                              // 진행바·점 색

@include stage($stage-yellow);

.tl {
  position: relative;
  width: min(300px, 88vw);
  padding-left: $sp-6;
}

.tl__track {
  position: absolute;
  left: 5px; top: $sp-1; bottom: $sp-1;
  width: 2px;
  background: rgba(23, 20, 26, .16);
  border-radius: $r-pill;
  overflow: hidden;
}
.tl__fill {
  position: absolute; inset: 0;
  transform: scaleY(.25);
  transform-origin: top; // 규칙8: 타임라인 세로 채움 위에서
  background: $color;
  transition: transform $duration $easing;
}

.tl__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: $sp-4; }
.tl__stop {
  display: flex; align-items: center; gap: $sp-3;
  background: none; border: 0; padding: 0;
  text-align: left; cursor: pointer;
  font: inherit; color: rgba($subject-ink, .72);
  -webkit-tap-highlight-color: transparent;
}
.tl__dot {
  width: $sp-2; height: $sp-2;
  border-radius: 50%;
  background: rgba(23, 20, 26, .3);
  flex: 0 0 auto;
  position: relative;
  transition: background $duration $easing, transform $duration $easing;
}
.tl__time { font-weight: 700; font-size: clamp(11px, 3vw, 12px); line-height: 1; font-family: inherit; flex: 0 0 auto; }
.tl__label { font-weight: 600; font-size: clamp(12px, 3.4vw, 13px); line-height: 1.3; font-family: inherit; }

.tl__stop[aria-current="step"] { color: $subject-ink; }
.tl__stop[aria-current="step"] .tl__dot {
  background: $color;
  transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(23, 20, 26, .14);
}

// ── 데모 루프: 진행바가 정류장 순서대로 흐르고, 그 순간의 점이 함께 펄스 ──────────────
.tl.is-demo .tl__fill { animation: tl-fill $dur-loop $easing infinite; }
@keyframes tl-fill {
  0%, 8%   { transform: scaleY(.25); }
  25%, 33% { transform: scaleY(.5); }
  50%, 58% { transform: scaleY(.75); }
  75%, 83% { transform: scaleY(1); }
  100%     { transform: scaleY(.25); }
}
.tl.is-demo li:nth-child(1) .tl__dot { animation: tl-pulse $dur-loop $easing infinite; }
.tl.is-demo li:nth-child(2) .tl__dot { animation: tl-pulse $dur-loop $easing infinite; animation-delay: calc($dur-loop * .25); }
.tl.is-demo li:nth-child(3) .tl__dot { animation: tl-pulse $dur-loop $easing infinite; animation-delay: calc($dur-loop * .5); }
.tl.is-demo li:nth-child(4) .tl__dot { animation: tl-pulse $dur-loop $easing infinite; animation-delay: calc($dur-loop * .75); }
@keyframes tl-pulse {
  0%, 92%, 100% { background: rgba(23, 20, 26, .3); transform: scale(1); box-shadow: 0 0 0 0 rgba(23, 20, 26, 0); }
  4%            { background: $color; transform: scale(1.3); box-shadow: 0 0 0 4px rgba(23, 20, 26, .14); }
  20%           { background: $color; transform: scale(1.3); box-shadow: 0 0 0 4px rgba(23, 20, 26, .14); }
}

// ── 접근성 ──────────────────────────────────────────
@media (prefers-reduced-motion: reduce) {
  .tl__fill, .tl__dot { transition: none; }
  .tl.is-demo .tl__fill,
  .tl.is-demo .tl__stop .tl__dot { animation: none !important; }
}

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

.tl {
  position: relative;
  width: min(300px, 88vw);
  padding-left: 24px;
}

.tl__track {
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: rgba(23, 20, 26, 0.16);
  border-radius: 999px;
  overflow: hidden;
}

.tl__fill {
  position: absolute;
  inset: 0;
  transform: scaleY(0.25);
  transform-origin: top;
  background: #17141a;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tl__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tl__stop {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: rgba(23, 20, 26, 0.72);
  -webkit-tap-highlight-color: transparent;
}

.tl__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(23, 20, 26, 0.3);
  flex: 0 0 auto;
  position: relative;
  transition: background 300ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tl__time {
  font-weight: 700;
  font-size: clamp(11px, 3vw, 12px);
  line-height: 1;
  font-family: inherit;
  flex: 0 0 auto;
}

.tl__label {
  font-weight: 600;
  font-size: clamp(12px, 3.4vw, 13px);
  line-height: 1.3;
  font-family: inherit;
}

.tl__stop[aria-current=step] {
  color: #17141a;
}

.tl__stop[aria-current=step] .tl__dot {
  background: #17141a;
  transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(23, 20, 26, 0.14);
}

.tl.is-demo .tl__fill {
  animation: tl-fill 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes tl-fill {
  0%, 8% {
    transform: scaleY(0.25);
  }
  25%, 33% {
    transform: scaleY(0.5);
  }
  50%, 58% {
    transform: scaleY(0.75);
  }
  75%, 83% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.25);
  }
}
.tl.is-demo li:nth-child(1) .tl__dot {
  animation: tl-pulse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.tl.is-demo li:nth-child(2) .tl__dot {
  animation: tl-pulse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  animation-delay: 0.5s;
}

.tl.is-demo li:nth-child(3) .tl__dot {
  animation: tl-pulse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  animation-delay: 1s;
}

.tl.is-demo li:nth-child(4) .tl__dot {
  animation: tl-pulse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  animation-delay: 1.5s;
}

@keyframes tl-pulse {
  0%, 92%, 100% {
    background: rgba(23, 20, 26, 0.3);
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(23, 20, 26, 0);
  }
  4% {
    background: #17141a;
    transform: scale(1.3);
    box-shadow: 0 0 0 4px rgba(23, 20, 26, 0.14);
  }
  20% {
    background: #17141a;
    transform: scale(1.3);
    box-shadow: 0 0 0 4px rgba(23, 20, 26, 0.14);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tl__fill, .tl__dot {
    transition: none;
  }
  .tl.is-demo .tl__fill,
  .tl.is-demo .tl__stop .tl__dot {
    animation: none !important;
  }
}

// 실제 동작: 정류장을 클릭하면 진행바가 그 지점까지 실제로 채워지고 aria-current 가 옮겨간다.
var root = document.querySelector('.tl');
var stops = root.querySelectorAll('.tl__stop');
stops.forEach(function (btn) {
  btn.addEventListener('click', function () {
    root.classList.remove('is-demo');
    var i = btn.getAttribute('data-i');
    root.setAttribute('data-active', i);
    root.querySelector('.tl__fill').style.transform = 'scaleY(' + ((Number(i) + 1) / 4) + ')';
    stops.forEach(function (s) { s.removeAttribute('aria-current'); });
    btn.setAttribute('aria-current', 'step');
  });
});

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

const STOPS = [
  { time: "09:00", label: "등록·웰컴 커피" },
  { time: "10:00", label: "기조연설" },
  { time: "13:00", label: "네트워킹 런치" },
  { time: "15:00", label: "패널 토론" },
];

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

export default function ScheduleTimeline({ duration = 300, easing = "cubic-bezier(.2,.8,.2,1)", color = "#17141a" }: ScheduleTimelineProps) {
  const [active, setActive] = useState(0);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <section className={styles.tl} style={vars}>
      <span className={styles.track} aria-hidden="true">
        <span className={styles.fill} style={{ transform: `scaleY(${(active + 1) / STOPS.length})` }} />
      </span>
      <ol className={styles.list}>
        {STOPS.map((s, i) => (
          <li key={s.time}>
            <button
              type="button"
              className={styles.stop}
              aria-current={i === active ? "step" : undefined}
              onClick={() => setActive(i)}
            >
              <span className={styles.dot} aria-hidden="true" />
              <span className={styles.time}>{s.time}</span>
              <span className={styles.label}>{s.label}</span>
            </button>
          </li>
        ))}
      </ol>
    </section>
  );
}