JavaScript 없는 CSS 타이머

// app/css-timer/page.tsx
import styles from "./Timer.module.css";

export default function CssTimerPage() {
  return (
    <main className={styles.wrap}>
      <h1 className={styles.title}>CSS Timer</h1>

      {/* 체크박스가 상태를 담당 */}
      <section className={styles.controls} aria-label="Timer controls">
        <input
          id="timer-running"
          className={styles.srOnly}
          type="checkbox"
          defaultChecked
        />
        <label className={styles.toggle} htmlFor="timer-running">
          <span className={styles.toggleText}>Play / Pause</span>
        </label>

        {/* :active로 초기화 트리거 */}
        <button className={styles.reset} type="button">
          Reset
        </button>
      </section>

      {/* 버튼/체크박스와 sibling selector로 연결하기 위해 controls 뒤에 배치 */}
      <section className={styles.dial} aria-label="Timer face">
        <div className={styles.hand} aria-hidden="true" />
        <div className={styles.centerDot} aria-hidden="true" />
        <p className={styles.hint}>
          Play/Pause는 토글, Reset은 누르는 동안 0으로 되감습니다.
        </p>
      </section>
    </main>
  );
}

/* app/css-timer/Timer.module.css */

.wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: 24px;
}

.title {
  margin: 0;
  font-size: 20px;
}

.controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 접근성: display:none 대신 screen-reader only 패턴 */
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.toggle,
.reset {
  border: 1px solid #ccc;
  background: white;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}

.toggle:focus-visible,
.reset:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.toggleText {
  font-size: 14px;
}

.dial {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  border: 1px solid #ddd;
  display: grid;
  place-items: center;
}

.hand {
  position: absolute;
  width: 2px;
  height: 90px;
  top: 20px;
  left: 50%;
  transform-origin: 50% 100%;

  /* 기본 회전 애니메이션 */
  animation: tick 60s linear infinite;
  animation-play-state: running;
}

/* 체크박스 상태로 재생/정지 전환 */
#timer-running:not(:checked) ~ .dial .hand {
  animation-play-state: paused;
}
#timer-running:checked ~ .dial .hand {
  animation-play-state: running;
}

/* Reset 버튼을 누르는 동안만 초기화 */
.reset:active ~ .dial .hand {
  animation: none;
  transform: rotate(0deg);
}

.centerDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #111;
}

.hint {
  position: absolute;
  bottom: -28px;
  font-size: 12px;
  color: #555;
  margin: 0;
}

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  .hand {
    animation: none;
    transform: rotate(0deg);
  }
}

@keyframes tick {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}