02プラス回転切替 — 閉じる値がオンになるとプラス記号が回転して閉じる記号に変わる方式

<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">項目値を追加</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>
  );
}