02Plus-spin value toggle — when a closed value turns on, a plus shape rotates into a close mark

<main class="stage">
<div class="pc is-demo" id="pc">
  <button type="button" class="pc__btn" id="pcBtn" aria-pressed="false">
    <span class="pc__label">Add item value</span>
    <span class="pc__disc" aria-hidden="true">
      <svg class="pc__icon" viewBox="0 0 24 24" width="22" height="22">
        <!-- 세로 막대 — 닫힘 값이 켜지면 stroke-dashoffset 으로 선분이 그려진 채 사라진다 -->
        <line class="pc__v" x1="12" y1="5" x2="12" y2="19" />
        <!-- 가로 막대 — 원래 있던 선. 두 막대가 같은 중심(12,12)에서 만난다 -->
        <line class="pc__h" x1="5" y1="12" x2="19" y2="12" />
      </svg>
    </span>
  </button>
</div>
</main>

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

// 계산 겹: 아이콘이 SPIN_DEG(135도) 만큼 회전하며 동시에 세로 막대의 stroke-dashoffset 이
// 선분 길이만큼 물러나 path morph 로 닫기 표시가 된다(index.html 주석 참조).
@include stage($stage-yellow);

.pc {
  display: grid;
  gap: $sp-4;
  justify-items: center;
}

.pc__btn {
  display: inline-flex;
  align-items: center;
  gap: $sp-3;
  border: 0;
  border-radius: $r-pill;
  background: $subject-ink;
  color: $subject-cream;
  padding: $sp-3 $sp-5;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background-color $dur-quick $ease-out;
}

.pc__disc {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba($stage-yellow, .18);
}

.pc__icon {
  display: block;
  transition: transform 360ms $ease-elastic;
}

.pc__v, .pc__h {
  stroke: $stage-yellow;
  stroke-width: 2.4;
  stroke-linecap: round;
  fill: none;
}

// 선분 그리기: 세로 막대는 pathLength 1 기준으로 dashoffset 0 → 1 사라진다
.pc__v {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 270ms $ease-out;
}

.pc--closed {
  .pc__icon { transform: rotate(135deg); }
  .pc__v { stroke-dashoffset: 1; }
  .pc__disc { background: rgba($stage-yellow, .32); }
}

@media (max-width: 340px) {
  .pc__btn { padding: $sp-2 $sp-4; font-size: 14px; }
}

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

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

.pc {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.pc__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 999px;
  background: #17141a;
  color: #fff7e6;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 220ms ease-out;
}

.pc__disc {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 210, 63, 0.18);
}

.pc__icon {
  display: block;
  transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pc__v, .pc__h {
  stroke: #ffd23f;
  stroke-width: 2.4;
  stroke-linecap: round;
  fill: none;
}

.pc__v {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 270ms ease-out;
}

.pc--closed .pc__icon {
  transform: rotate(135deg);
}
.pc--closed .pc__v {
  stroke-dashoffset: 1;
}
.pc--closed .pc__disc {
  background: rgba(255, 210, 63, 0.32);
}

@media (max-width: 340px) {
  .pc__btn {
    padding: 8px 16px;
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pc__icon, .pc__v {
    transition: none;
  }
}

(function () {
  var root = document.getElementById('pc');
  var btn = document.getElementById('pcBtn');
  var SPIN_DEG = 135; // 계산 겹: 회전 목표 각도 값 — 90도가 아니라 지나쳤다가 되돌아오는 각도
  var OVER_MS = 90;   // 계산 겹: 목표 각도를 넘겼다 되돌리는 여분 시간

  var closed = false;
  function paint() {
    root.classList.toggle('pc--closed', closed);
    btn.setAttribute('aria-pressed', String(closed));
  }

  function toggle() {
    closed = !closed;
    paint();
  }

  btn.addEventListener('click', function () {
    root.classList.remove('is-demo');
    stopAutoplay();
    toggle();
  });

  var autoTimer = null;
  function stopAutoplay() { if (autoTimer) { clearInterval(autoTimer); autoTimer = null; } }
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (!reduce) { autoTimer = setInterval(toggle, 1100); }
  else { closed = true; paint(); }
})();

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

type Box<T> = { current: T };

const SPIN_DEG = 135; // 계산 겹: 회전 목표 각도 값 — 90도가 아니라 지나쳤다가 되돌아오는 각도
const OVER_MS = 90;   // 계산 겹: 목표 각도를 넘겼다 되돌리는 여분 시간

export default function PlusToClose() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement | null>;

  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const btn = root.querySelector(`.${styles.btn}`) as HTMLButtonElement | null;
    if (!btn) return;

    let closed = false;
    function paint() {
      root!.classList.toggle(styles["root--closed"], closed);
      btn!.setAttribute("aria-pressed", String(closed));
    }
    function toggle() {
      closed = !closed;
      paint();
    }

    function onClick() {
      root!.classList.remove(styles["is-demo"]);
      stopAutoplay();
      toggle();
    }
    btn.addEventListener("click", onClick);

    let autoTimer: number | null = null;
    function stopAutoplay() { if (autoTimer !== null) { window.clearInterval(autoTimer); autoTimer = null; } }
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (!reduce) { autoTimer = window.setInterval(toggle, 1100); }
    else { closed = true; paint(); }

    return () => {
      stopAutoplay();
      btn.removeEventListener("click", onClick);
    };
  }, []);

  return (
    <div ref={rootRef} className={`${styles.stage} ${styles.pc} ${styles["is-demo"]}`}>
      <button type="button" className={styles.btn} aria-pressed="false">
        <span className={styles.label}>항목 값 추가</span>
        <span className={styles.disc} aria-hidden="true">
          <svg className={styles.icon} viewBox="0 0 24 24" width="22" height="22">
            <line className={styles.v} x1="12" y1="5" x2="12" y2="19" />
            <line className={styles.h} x1="5" y1="12" x2="19" y2="12" />
          </svg>
        </span>
      </button>
    </div>
  );
}