08Ruler-drawn divider footer

<main class="stage">
  <footer class="footer">
    <div class="footer__col">
      <p class="footer__heading">Product</p>
      <p class="footer__link">Features</p>
    </div>
    <span class="footer__rule is-demo" aria-hidden="true"></span>
    <div class="footer__col">
      <p class="footer__heading">Company</p>
      <p class="footer__link">About</p>
    </div>
    <span class="footer__rule footer__rule--b is-demo" aria-hidden="true"></span>
    <div class="footer__col">
      <p class="footer__heading">Support</p>
      <p class="footer__link">Help center</p>
    </div>
  </footer>
</main>

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

$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-blue-deep; // 첫 칼럼 강조 색 (밝은 면 위 파란 글자는 진한 파랑)

$border: 3px;

@include stage($stage-paper);

.footer {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  width: clamp(260px, 90vw, 420px);
  padding: $sp-4 $sp-3 $sp-3;
  border: 0;
  border-top: $border * 2 solid $subject-ink;
  border-radius: 0;
  background: $subject-cream;
}
.footer__col {
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  padding: 0 $sp-2;
  display: flex;
  flex-direction: column;
  gap: $sp-1;
}
.footer__col:first-child { padding-left: 0; }
.footer__heading {
  margin: 0;
  color: $subject-ink;
  opacity: .72;
  font-weight: 800;
  font-size: clamp(9px, 2.2vw, 10px);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.footer__col:first-child .footer__heading {
  color: $color;
  opacity: 1;
}
.footer__link {
  margin: 0;
  color: $subject-ink;
  font-weight: 700;
  font-size: clamp(11px, 2.6vw, 13px);
}
.footer__rule {
  flex: 0 0 auto;
  width: $border;
  background: $subject-ink;
  transform-origin: top; // 규칙8: 구분선 top에서 그어짐
  transform: scaleY(0);
  animation: drawLine $duration $easing infinite;
}
.footer__rule--b { animation-delay: -.6s; }

// 데모: 세로 구분선이 자로 긋듯 그려졌다 오래 머물고, 다음 바퀴를 위해 짧게 풀린다(이음새 없이 순환)
@keyframes drawLine {
  0%, 100% { transform: scaleY(0); }
  25%, 85% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .footer__rule {
    animation: none !important;
    transform: scaleY(1);
  }
}

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

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

.footer {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  width: clamp(260px, 90vw, 420px);
  padding: 16px 12px 12px;
  border: 0;
  border-top: 6px solid #17141a;
  border-radius: 0;
  background: #fff7e6;
}

.footer__col {
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer__col:first-child {
  padding-left: 0;
}

.footer__heading {
  margin: 0;
  color: #17141a;
  opacity: 0.72;
  font-weight: 800;
  font-size: clamp(9px, 2.2vw, 10px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer__col:first-child .footer__heading {
  color: #0a4fe8;
  opacity: 1;
}

.footer__link {
  margin: 0;
  color: #17141a;
  font-weight: 700;
  font-size: clamp(11px, 2.6vw, 13px);
}

.footer__rule {
  flex: 0 0 auto;
  width: 3px;
  background: #17141a;
  transform-origin: top;
  transform: scaleY(0);
  animation: drawLine 2s ease-out infinite;
}

.footer__rule--b {
  animation-delay: -0.6s;
}

@keyframes drawLine {
  0%, 100% {
    transform: scaleY(0);
  }
  25%, 85% {
    transform: scaleY(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer__rule {
    animation: none !important;
    transform: scaleY(1);
  }
}

import React, { type CSSProperties } from "react";
import styles from "./FooterBrutalist.module.scss";

export type FooterCol = { heading: string; link: string };

export type FooterBrutalistProps = {
  cols?: FooterCol[];
  duration?: number;
  easing?: string;
  color?: string;
};

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

export default function FooterBrutalist({
  cols = [
    { heading: "제품", link: "기능" },
    { heading: "회사", link: "소개" },
    { heading: "고객지원", link: "도움말" },
  ],
  duration = 2000,
  easing = "ease-out",
  color = "#0a4fe8",
}: FooterBrutalistProps) {
  const base: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <footer className={styles.footer} style={base}>
      {cols.map((c, i) => (
        <React.Fragment key={c.heading}>
          {i > 0 && (
            <span
              className={styles.rule}
              style={{ ...base, "--delay": i === 1 ? "0s" : "-.6s" } as Vars}
              aria-hidden="true"
            />
          )}
          <div className={styles.col}>
            <p className={styles.heading}>{c.heading}</p>
            <p className={styles.link}>{c.link}</p>
          </div>
        </React.Fragment>
      ))}
    </footer>
  );
}