02Two-icon segmented toggle

<main class="stage">
  <fieldset class="iv is-demo">
    <legend class="sr-only">View mode</legend>
    <input type="radio" name="iv1" id="iv1-1" class="iv__radio" checked>
    <input type="radio" name="iv1" id="iv1-2" class="iv__radio">
    <div class="iv__track">
      <span class="iv__pill" aria-hidden="true"></span>
      <label class="iv__tab" for="iv1-1" aria-label="List view">
        <svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true"><rect x="3" y="4" width="14" height="2.4" rx="1.2" fill="currentColor"/><rect x="3" y="8.8" width="14" height="2.4" rx="1.2" fill="currentColor"/><rect x="3" y="13.6" width="14" height="2.4" rx="1.2" fill="currentColor"/></svg>
      </label>
      <label class="iv__tab" for="iv1-2" aria-label="Grid view">
        <svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true"><rect x="3" y="3" width="6" height="6" rx="1.4" fill="currentColor"/><rect x="11" y="3" width="6" height="6" rx="1.4" fill="currentColor"/><rect x="3" y="11" width="6" height="6" rx="1.4" fill="currentColor"/><rect x="11" y="11" width="6" height="6" rx="1.4" fill="currentColor"/></svg>
      </label>
    </div>
  </fieldset>
</main>

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

// ── 변수 3개 ──────────────────────────────
$duration: $dur-quick;
$easing: $ease-pop;
$color: $subject-cream;
$ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

@include stage($stage-yellow);

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.iv { border: 0; margin: 0; padding: 0; }
.iv__radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.iv__track {
  position: relative;
  display: flex;
  padding: $sp-1;
  background: rgba($subject-ink, .1);
  border-radius: $r-control;
}
.iv__tab {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: $sp-12; height: $sp-12;
  border-radius: $r-sm;
  color: rgba($subject-ink, .45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color $duration $easing;
}
.iv__pill {
  position: absolute; top: $sp-1; left: $sp-1; bottom: $sp-1;
  width: $sp-12;
  border-radius: $r-sm;
  background: $color;
  box-shadow: $shadow-press;
  transform: translateX(0);
  transform-origin: center;
  transition: transform $duration $ease-bounce;
}

// ── 실제 동작: :checked 만으로 필이 절반(자기 폭만큼)을 옮겨가고, 선택된 아이콘만 짙어진다 ──────────────
#iv1-2:checked ~ .iv__track .iv__pill { transform: translateX(100%); }
#iv1-1:checked ~ .iv__track .iv__tab:nth-child(2) { color: $subject-ink; }
#iv1-2:checked ~ .iv__track .iv__tab:nth-child(3) { color: $subject-ink; }

// ── 데모 루프: 클릭 전까지 두 칸을 스스로 오간다 ──────────────
.iv.is-demo .iv__pill { animation: iv-loop-jelly $dur-loop $easing infinite; }
@keyframes iv-loop {
  0%, 20%  { transform: translateX(0); }
  50%, 70% { transform: translateX(100%); }
  100%     { transform: translateX(0); }
}
// 젤리 스트레치 + 스프링 오버슛 보강: 정지 구간 값은 iv-loop 과 동일, 이동 구간에 scaleX·도착 오버슛 삽입
@keyframes iv-loop-jelly {
  0%, 20%  { transform: translateX(0%) scaleX(1); }
  32%      { transform: translateX(58%) scaleX(1.25); }
  44%      { transform: translateX(104%) scaleX(1.05); }
  50%, 70% { transform: translateX(100%) scaleX(1); }
  82%      { transform: translateX(42%) scaleX(1.25); }
  92%      { transform: translateX(-4%) scaleX(1.05); }
  100%     { transform: translateX(0%) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .iv__pill { transition: none; }
  .iv.is-demo .iv__pill { 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);
}

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

.iv {
  border: 0;
  margin: 0;
  padding: 0;
}

.iv__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.iv__track {
  position: relative;
  display: flex;
  padding: 4px;
  background: rgba(23, 20, 26, 0.1);
  border-radius: 12px;
}

.iv__tab {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  color: rgba(23, 20, 26, 0.45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 220ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.iv__pill {
  position: absolute;
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 48px;
  border-radius: 8px;
  background: #fff7e6;
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
  transform: translateX(0);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#iv1-2:checked ~ .iv__track .iv__pill {
  transform: translateX(100%);
}

#iv1-1:checked ~ .iv__track .iv__tab:nth-child(2) {
  color: #17141a;
}

#iv1-2:checked ~ .iv__track .iv__tab:nth-child(3) {
  color: #17141a;
}

.iv.is-demo .iv__pill {
  animation: iv-loop-jelly 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}

@keyframes iv-loop {
  0%, 20% {
    transform: translateX(0);
  }
  50%, 70% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes iv-loop-jelly {
  0%, 20% {
    transform: translateX(0%) scaleX(1);
  }
  32% {
    transform: translateX(58%) scaleX(1.25);
  }
  44% {
    transform: translateX(104%) scaleX(1.05);
  }
  50%, 70% {
    transform: translateX(100%) scaleX(1);
  }
  82% {
    transform: translateX(42%) scaleX(1.25);
  }
  92% {
    transform: translateX(-4%) scaleX(1.05);
  }
  100% {
    transform: translateX(0%) scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .iv__pill {
    transition: none;
  }
  .iv.is-demo .iv__pill {
    animation: none !important;
  }
}

// .is-demo 자동 순환 (실제 클릭이 오면 멈춘다, 7줄)
var iv = document.querySelector('.iv');
var radios = iv.querySelectorAll('.iv__radio'); var i = 0;
var t = setInterval(function () { radios[i % radios.length].checked = true; i++; }, 700);
radios.forEach(function (r) { r.addEventListener('pointerdown', function () { iv.classList.remove('is-demo'); clearInterval(t); }); });

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

export type SegmentedControlIconViewToggleProps = {
  legend?: string;
  duration?: number;
  easing?: string;
  pillColor?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--pill"?: string };

export default function SegmentedControlIconViewToggle({
  legend = "View mode",
  duration = 180,
  easing = "cubic-bezier(.2,1.4,.4,1)",
  pillColor = "#fff7e6",
}: SegmentedControlIconViewToggleProps) {
  const [isGrid, setIsGrid] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--pill": pillColor };

  return (
    <fieldset className={styles.iv} style={vars}>
      <legend className={styles.srOnly}>{legend}</legend>
      <div className={styles.track}>
        <span className={styles.pill} style={{ transform: `translateX(${isGrid ? 100 : 0}%)` }} aria-hidden="true" />
        <label className={styles.tab} data-active={!isGrid} aria-label="List view">
          <input type="radio" name="iv" className={styles.srInput} checked={!isGrid} onChange={() => setIsGrid(false)} />
          <svg viewBox="0 0 20 20" width={18} height={18} aria-hidden="true">
            <rect x={3} y={4} width={14} height={2.4} rx={1.2} fill="currentColor" />
            <rect x={3} y={8.8} width={14} height={2.4} rx={1.2} fill="currentColor" />
            <rect x={3} y={13.6} width={14} height={2.4} rx={1.2} fill="currentColor" />
          </svg>
        </label>
        <label className={styles.tab} data-active={isGrid} aria-label="Grid view">
          <input type="radio" name="iv" className={styles.srInput} checked={isGrid} onChange={() => setIsGrid(true)} />
          <svg viewBox="0 0 20 20" width={18} height={18} aria-hidden="true">
            <rect x={3} y={3} width={6} height={6} rx={1.4} fill="currentColor" />
            <rect x={11} y={3} width={6} height={6} rx={1.4} fill="currentColor" />
            <rect x={3} y={11} width={6} height={6} rx={1.4} fill="currentColor" />
            <rect x={11} y={11} width={6} height={6} rx={1.4} fill="currentColor" />
          </svg>
        </label>
      </div>
    </fieldset>
  );
}