07Input error shake

<main class="stage">
  <div class="field is-demo">
    <div class="field__frame">
      <input class="field__input" type="email" placeholder="Email" readonly>
      <span class="field__ring" aria-hidden="true"></span>
    </div>
    <p class="field__msg" role="alert">That email address doesn't look right.</p>
  </div>
</main>

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

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-enter;                              // 흔들리는 시간
$easing: cubic-bezier(.36, .07, .19, .97);          // 흔들림 전용 이징 (요동)
$amount: 6px;                                        // 흔들리는 폭

// ── 데모 무대 ──────────────────────────────────────────
@include stage($stage-orange);

.field {
  width: min(230px, 82vw);
  cursor: pointer;

  &__frame { position: relative; }

  &__input {
    box-sizing: border-box;
    width: 100%;
    border: 2.5px solid transparent;
    border-radius: $r-control;
    padding: clamp(10px, 3.4vw, 14px) clamp(12px, 4vw, 16px);
    font-weight: 500;
    font-size: clamp(13px, 3.8vw, 15px);
    line-height: 1;
    font-family: inherit;
    color: $stage-ink;
    background: $subject-cream;
    pointer-events: none;
  }

  // 빨간 테두리는 별도 링으로 겹쳐 opacity 만 움직인다 (border-color 는 애니메이션하지 않는다)
  &__ring {
    position: absolute; inset: 0;
    border: 2.5px solid $error;
    border-radius: $r-control;
    opacity: 0;
    pointer-events: none;
  }

  &__msg {
    margin: 8px 0 0;
    color: $subject-cream;
    font-weight: 700;
    font-size: clamp(11px, 3.2vw, 13px);
    line-height: 1.3;
    font-family: inherit;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity $duration $easing, transform $duration $easing;
  }

  &.is-error &__frame { animation: shake $duration $easing both; }
  &.is-error &__ring  { opacity: 1; }
  &.is-error &__msg   { opacity: 1; transform: translateY(0); }

  &.is-demo &__frame { animation: shake-loop $dur-loop $easing infinite; }
  &.is-demo &__ring  { animation: ring-loop $dur-loop $easing infinite; }
  &.is-demo &__msg   { animation: msg-loop $dur-loop $easing infinite; }
}

@keyframes shake {
  10%, 90% { transform: translateX(-$amount * .5); }
  20%, 80% { transform: translateX($amount); }
  30%, 70% { transform: translateX(-$amount); }
  40%, 60% { transform: translateX($amount * .7); }
  50%      { transform: translateX(-$amount * .7); }
}
@keyframes shake-loop {
  0%, 55%   { transform: translateX(0); }
  60%, 90%  { transform: translateX(-$amount * .5); }
  65%       { transform: translateX($amount); }
  70%       { transform: translateX(-$amount); }
  75%       { transform: translateX($amount * .7); }
  80%       { transform: translateX(-$amount * .7); }
  90%, 100% { transform: translateX(0); }
}
@keyframes ring-loop {
  0%, 55%   { opacity: 0; }
  60%, 90%  { opacity: 1; }
  100%      { opacity: 0; }
}
@keyframes msg-loop {
  0%, 55%   { opacity: 0; transform: translateY(-4px); }
  65%, 92%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(-4px); }
}

// ── 접근성: 움직임 줄이기 설정이면 흔들림 대신 색으로만 알린다 ────
@media (prefers-reduced-motion: reduce) {
  .field__ring, .field__msg { transition: none; }
  .field.is-error .field__frame,
  .field.is-demo .field__frame { animation: none !important; }
  .field.is-demo .field__ring,
  .field.is-demo .field__msg { animation: none !important; }
  .field.is-error .field__ring { opacity: 1; }
  .field.is-error .field__msg  { opacity: 1; transform: none; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.field {
  width: min(230px, 82vw);
  cursor: pointer;
}
.field__frame {
  position: relative;
}
.field__input {
  box-sizing: border-box;
  width: 100%;
  border: 2.5px solid transparent;
  border-radius: 12px;
  padding: clamp(10px, 3.4vw, 14px) clamp(12px, 4vw, 16px);
  font-weight: 500;
  font-size: clamp(13px, 3.8vw, 15px);
  line-height: 1;
  font-family: inherit;
  color: #17141a;
  background: #fff7e6;
  pointer-events: none;
}
.field__ring {
  position: absolute;
  inset: 0;
  border: 2.5px solid #c2361a;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
}
.field__msg {
  margin: 8px 0 0;
  color: #fff7e6;
  font-weight: 700;
  font-size: clamp(11px, 3.2vw, 13px);
  line-height: 1.3;
  font-family: inherit;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97), transform 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.field.is-error .field__frame {
  animation: shake 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.field.is-error .field__ring {
  opacity: 1;
}
.field.is-error .field__msg {
  opacity: 1;
  transform: translateY(0);
}
.field.is-demo .field__frame {
  animation: shake-loop 2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
.field.is-demo .field__ring {
  animation: ring-loop 2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
.field.is-demo .field__msg {
  animation: msg-loop 2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}

@keyframes shake {
  10%, 90% {
    transform: translateX(-3px);
  }
  20%, 80% {
    transform: translateX(6px);
  }
  30%, 70% {
    transform: translateX(-6px);
  }
  40%, 60% {
    transform: translateX(4.2px);
  }
  50% {
    transform: translateX(-4.2px);
  }
}
@keyframes shake-loop {
  0%, 55% {
    transform: translateX(0);
  }
  60%, 90% {
    transform: translateX(-3px);
  }
  65% {
    transform: translateX(6px);
  }
  70% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(4.2px);
  }
  80% {
    transform: translateX(-4.2px);
  }
  90%, 100% {
    transform: translateX(0);
  }
}
@keyframes ring-loop {
  0%, 55% {
    opacity: 0;
  }
  60%, 90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes msg-loop {
  0%, 55% {
    opacity: 0;
    transform: translateY(-4px);
  }
  65%, 92% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .field__ring, .field__msg {
    transition: none;
  }
  .field.is-error .field__frame,
  .field.is-demo .field__frame {
    animation: none !important;
  }
  .field.is-demo .field__ring,
  .field.is-demo .field__msg {
    animation: none !important;
  }
  .field.is-error .field__ring {
    opacity: 1;
  }
  .field.is-error .field__msg {
    opacity: 1;
    transform: none;
  }
}

// 실제 제출 실패 시 이 클래스를 켠다. 데모(.is-demo) 루프는 클릭하면 멈추고 수동 재생으로 바뀐다.
document.querySelector('.field').addEventListener('click', function (e) {
  var f = e.currentTarget;
  f.classList.remove('is-demo');
  f.classList.remove('is-error');
  void f.offsetWidth;
  f.classList.add('is-error');
});

import { useEffect, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./InputErrorShake.module.scss";

export type InputErrorShakeProps = {
  error: boolean;
  message: string;
  duration?: number;
  easing?: string;
  amount?: number;
  /** 실제 input 에 얹을 값 — placeholder·value·onChange 등만 최소로 받는다 */
  inputProps?: { placeholder?: string; value?: string; type?: string; onChange?: (e: { target: { value: string } }) => void };
};

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

export default function InputErrorShake({
  error,
  message,
  duration = 600,
  easing = "cubic-bezier(.36,.07,.19,.97)",
  amount = 6,
  inputProps,
}: InputErrorShakeProps) {
  const [shaking, setShaking] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--amount": `${amount}px` };

  useEffect(() => {
    if (!error) return;
    setShaking(true);
    const t = setTimeout(() => setShaking(false), duration);
    return () => clearTimeout(t);
  }, [error, duration]);

  return (
    <div className={styles.field} style={vars}>
      <div className={shaking ? `${styles.frame} ${styles.shaking}` : styles.frame}>
        <input className={styles.input} {...inputProps} />
        <span className={error ? `${styles.ring} ${styles.ringOn}` : styles.ring} aria-hidden="true" />
      </div>
      <p className={error ? `${styles.msg} ${styles.msgOn}` : styles.msg} role="alert">{message}</p>
    </div>
  );
}