08Short-post card wall

<main class="stage">
  <section class="pw is-demo" aria-label="Short review cards">
    <div class="pw__wall">
      <article class="pw__card pw__card--a">
        <header class="pw__top">
          <span class="pw__ini" aria-hidden="true">D</span>
          <a class="pw__who" href="#">
            <span class="pw__name">Design studio</span>
            <span class="pw__role">Brand designer</span>
          </a>
        </header>
        <p class="pw__body">Fixing one button no longer takes all night</p>
        <p class="pw__likes" role="img" aria-label="128 likes">
          <svg viewBox="0 0 256 256" width="14" height="14" aria-hidden="true" focusable="false" fill="currentColor"><path d="M232,102c0,66-104,122-104,122S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32A54,54,0,0,1,232,102Z" opacity="0.2"/><path d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z"/></svg><span class="pw__count">128</span>
        </p>
      </article>

      <article class="pw__card pw__card--b">
        <header class="pw__top">
          <span class="pw__ini" aria-hidden="true">S</span>
          <a class="pw__who" href="#">
            <span class="pw__name">Small dev team</span>
            <span class="pw__role">Frontend engineer</span>
          </a>
        </header>
        <p class="pw__body">Changed one border line and support tickets fell</p>
        <p class="pw__likes" role="img" aria-label="86 likes">
          <svg viewBox="0 0 256 256" width="14" height="14" aria-hidden="true" focusable="false" fill="currentColor"><path d="M232,102c0,66-104,122-104,122S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32A54,54,0,0,1,232,102Z" opacity="0.2"/><path d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z"/></svg><span class="pw__count">86</span>
        </p>
      </article>

      <article class="pw__card pw__card--c">
        <header class="pw__top">
          <span class="pw__ini" aria-hidden="true">C</span>
          <a class="pw__who" href="#">
            <span class="pw__name">Copy editor</span>
            <span class="pw__role">Content operations</span>
          </a>
        </header>
        <p class="pw__body">Pasted it in as-is, no manual needed</p>
        <p class="pw__likes" role="img" aria-label="47 likes">
          <svg viewBox="0 0 256 256" width="14" height="14" aria-hidden="true" focusable="false" fill="currentColor"><path d="M232,102c0,66-104,122-104,122S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32A54,54,0,0,1,232,102Z" opacity="0.2"/><path d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z"/></svg><span class="pw__count">47</span>
        </p>
      </article>
    </div>
  </section>
</main>

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

// 276 후기·소셜 프루프 팔레트 — 아홉 항목이 같은 값을 쓴다
$pf-ink:    #1c1b22;
$pf-slate:  #242230;   // 잉크 무대 위 카드 면 (크림 글자 14.6:1 · 민트 글자 10.45:1)
$pf-cream:  #fbf7ef;
$pf-teal:   #479089;
$pf-violet: #a49cce;   // 오로라·네온용 — 글자색으로는 안 쓴다 (어두운 면에서 2.55:1)
$pf-mint:   #b3dad5;

$duration: $dur-loop;      // 세 장이 떠올랐다 앉는 한 바퀴 = 오로라가 한 바퀴 도는 시간
$easing:   $ease-spring;   // 떠오름의 감속
$color:    $stage-ink;     // 무대

@include stage($stage-ink);

// 오로라 각도 — inherits:false 로 등록하면 그 요소 자신의 값이어야 한다.
// 그래서 트랙·부모가 아니라 카드 A 자신에 건다
@property --pw-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.pw {
  box-sizing: border-box;
  width: 100%;
  max-width: 432px;
}

.pw__wall {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: $sp-2;
  align-items: start;
}

// 어긋난 높이 — 세 장이 서로 다른 높이에서 시작한다
.pw__card {
  box-sizing: border-box;
  min-width: 0;
  display: grid;
  gap: $sp-1;
  padding: $sp-2;
  border-radius: $r-card;
  background: $pf-slate;
  color: $pf-cream;
}
.pw__card--b { margin-top: $sp-4; }
.pw__card--c { margin-top: $sp-2; }

// 카드 A — 오로라 그라디언트 테두리. 안쪽 면은 padding-box, 도는 빛은 border-box
.pw__card--a {
  border: 2px solid transparent;
  background:
    linear-gradient($pf-slate, $pf-slate) padding-box,
    conic-gradient(from var(--pw-angle), $pf-violet, $pf-mint, $pf-teal, $pf-violet) border-box;
}

// 카드 B — 다크 네온 테. 숨 쉬듯 밝기가 오갔다 돌아온다
.pw__card--b {
  border: 2px solid rgba($pf-mint, .45);
  box-shadow: 0 0 6px rgba($pf-mint, .18), inset 0 0 8px rgba($pf-violet, .18);
}

// 카드 C — 담백한 잉크 카드 (대조군)
.pw__card--c { border: 2px solid rgba($pf-cream, .18); }

.pw__top {
  display: flex;
  align-items: center;
  gap: $sp-1;
  min-width: 0;
}

.pw__ini {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba($pf-mint, .18);
  color: $pf-mint;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
}

.pw__who {
  min-width: 0;
  display: grid;
  color: inherit;
  text-decoration: none;
}
.pw__who:focus-visible {
  outline: 2px solid $pf-mint;
  outline-offset: 2px;
  border-radius: $r-xs;
}

.pw__name {
  color: $pf-cream;
  font-weight: 700;
  font-size: clamp(9px, 2.3vw, 11px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pw__role {
  color: $pf-mint;
  font-weight: 500;
  font-size: clamp(8px, 2vw, 10px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// p·figure 의 기본 margin 은 0 으로 명시한다
.pw__body {
  margin: 0;
  color: $pf-cream;
  font-weight: 500;
  font-size: clamp(9px, 2.3vw, 12px);
  line-height: 1.4;
}

.pw__likes {
  display: flex;
  align-items: center;
  gap: $sp-1;
  margin: 0;
  color: $pf-mint;
}
.pw__count {
  font-weight: 700;
  font-size: clamp(9px, 2.2vw, 11px);
  line-height: 1.2;
}

// ── 자동 재생 ─────────────────────────────────────────────
// 세 장이 어긋난 시점에 떠올랐다 앉고, 그 위에서 A 의 오로라가 한 바퀴 돌고
// B 의 네온이 숨 쉰다. animation 단축은 delay·fill-mode 를 리셋하므로 낱개 속성으로 쓴다
.pw.is-demo .pw__card {
  animation-name: pwFloat;
  animation-duration: $duration;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.pw.is-demo .pw__card--a {
  animation-name: pwFloat, pwSpin;
  animation-duration: $duration, $duration;
  animation-timing-function: $easing, linear;
  animation-iteration-count: infinite, infinite;
  animation-fill-mode: backwards, backwards;
  animation-delay: 0s, 0s;
}
.pw.is-demo .pw__card--b {
  animation-name: pwFloat, pwNeon;
  animation-duration: $duration, $duration;
  animation-timing-function: $easing, $ease-out;
  animation-iteration-count: infinite, infinite;
  animation-fill-mode: backwards, backwards;
  animation-delay: .16s, 0s;
}
.pw.is-demo .pw__card--c { animation-delay: .32s; }

@keyframes pwFloat {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-10px); }
  66%      { transform: translateY(3px); }
}

@keyframes pwSpin {
  from { --pw-angle: 0deg; }
  to   { --pw-angle: 360deg; }
}

// 복귀는 90% 안에 끝낸다 — 24프레임의 마지막 장은 95.8% 지점이다
@keyframes pwNeon {
  0%, 88%, 100% {
    border-color: rgba($pf-mint, .45);
    box-shadow: 0 0 6px rgba($pf-mint, .18), inset 0 0 8px rgba($pf-violet, .18);
  }
  46% {
    border-color: $pf-mint;
    box-shadow: 0 0 16px rgba($pf-mint, .6), 0 0 30px rgba($pf-violet, .45), inset 0 0 14px rgba($pf-violet, .38);
  }
}

// 좁은 화면 — 세 칸을 유지하고 여백·아바타만 줄인다
@media (max-width: 340px), (max-height: 220px) {
  .pw__wall { gap: $sp-1; }
  .pw__card { padding: $sp-1; gap: 0; }
  .pw__card--b { margin-top: $sp-3; }
  .pw__card--c { margin-top: $sp-1; }
  .pw__ini { width: 18px; height: 18px; font-size: 9px; }
  .pw__likes svg { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  // .pw.is-demo .pw__card (0,3,0) 를 이기려면 !important 가 필요하다
  .pw__card { animation: none !important; }
}

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

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

@property --pw-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.pw {
  box-sizing: border-box;
  width: 100%;
  max-width: 432px;
}

.pw__wall {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-items: start;
}

.pw__card {
  box-sizing: border-box;
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 16px;
  background: #242230;
  color: #fbf7ef;
}

.pw__card--b {
  margin-top: 16px;
}

.pw__card--c {
  margin-top: 8px;
}

.pw__card--a {
  border: 2px solid transparent;
  background: linear-gradient(#242230, #242230) padding-box, conic-gradient(from var(--pw-angle), #a49cce, #b3dad5, #479089, #a49cce) border-box;
}

.pw__card--b {
  border: 2px solid rgba(179, 218, 213, 0.45);
  box-shadow: 0 0 6px rgba(179, 218, 213, 0.18), inset 0 0 8px rgba(164, 156, 206, 0.18);
}

.pw__card--c {
  border: 2px solid rgba(251, 247, 239, 0.18);
}

.pw__top {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.pw__ini {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(179, 218, 213, 0.18);
  color: #b3dad5;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
}

.pw__who {
  min-width: 0;
  display: grid;
  color: inherit;
  text-decoration: none;
}

.pw__who:focus-visible {
  outline: 2px solid #b3dad5;
  outline-offset: 2px;
  border-radius: 4px;
}

.pw__name {
  color: #fbf7ef;
  font-weight: 700;
  font-size: clamp(9px, 2.3vw, 11px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pw__role {
  color: #b3dad5;
  font-weight: 500;
  font-size: clamp(8px, 2vw, 10px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pw__body {
  margin: 0;
  color: #fbf7ef;
  font-weight: 500;
  font-size: clamp(9px, 2.3vw, 12px);
  line-height: 1.4;
}

.pw__likes {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: #b3dad5;
}

.pw__count {
  font-weight: 700;
  font-size: clamp(9px, 2.2vw, 11px);
  line-height: 1.2;
}

.pw.is-demo .pw__card {
  animation-name: pwFloat;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

.pw.is-demo .pw__card--a {
  animation-name: pwFloat, pwSpin;
  animation-duration: 2s, 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), linear;
  animation-iteration-count: infinite, infinite;
  animation-fill-mode: backwards, backwards;
  animation-delay: 0s, 0s;
}

.pw.is-demo .pw__card--b {
  animation-name: pwFloat, pwNeon;
  animation-duration: 2s, 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), ease-out;
  animation-iteration-count: infinite, infinite;
  animation-fill-mode: backwards, backwards;
  animation-delay: 0.16s, 0s;
}

.pw.is-demo .pw__card--c {
  animation-delay: 0.32s;
}

@keyframes pwFloat {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
  66% {
    transform: translateY(3px);
  }
}
@keyframes pwSpin {
  from {
    --pw-angle: 0deg;
  }
  to {
    --pw-angle: 360deg;
  }
}
@keyframes pwNeon {
  0%, 88%, 100% {
    border-color: rgba(179, 218, 213, 0.45);
    box-shadow: 0 0 6px rgba(179, 218, 213, 0.18), inset 0 0 8px rgba(164, 156, 206, 0.18);
  }
  46% {
    border-color: #b3dad5;
    box-shadow: 0 0 16px rgba(179, 218, 213, 0.6), 0 0 30px rgba(164, 156, 206, 0.45), inset 0 0 14px rgba(164, 156, 206, 0.38);
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .pw__wall {
    gap: 4px;
  }
  .pw__card {
    padding: 4px;
    gap: 0;
  }
  .pw__card--b {
    margin-top: 12px;
  }
  .pw__card--c {
    margin-top: 4px;
  }
  .pw__ini {
    width: 18px;
    height: 18px;
    font-size: 9px;
  }
  .pw__likes svg {
    width: 12px;
    height: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pw__card {
    animation: none !important;
  }
}

(function () {
  var root = document.querySelector('.pw');
  var links = [].slice.call(root.querySelectorAll('.pw__who'));

  function stopLoop() { root.classList.remove('is-demo'); }

  // 카드 사이를 좌우 화살표로 옮겨 다닌다 (Home·End 는 양 끝)
  links.forEach(function (a, i) {
    a.addEventListener('keydown', function (e) {
      var to = -1;
      if (e.key === 'ArrowRight') { to = (i + 1) % links.length; }
      if (e.key === 'ArrowLeft') { to = (i - 1 + links.length) % links.length; }
      if (e.key === 'Home') { to = 0; }
      if (e.key === 'End') { to = links.length - 1; }
      if (to < 0) { return; }
      e.preventDefault();
      stopLoop();
      links[to].focus({ preventScroll: true });
    });
  });

  root.addEventListener('pointerenter', stopLoop);
  root.addEventListener('touchstart', stopLoop, { passive: true });
  root.addEventListener('focusin', stopLoop);
})();

import { useRef, useState } from "react";
import type { CSSProperties, ReactNode } from "react";
import styles from "./PostCardWall.module.scss";

/* ambient 에 KeyboardEvent 가 없어 파일 안에 필요한 만큼만 선언한다 */
type KeyEvt = { key: string; preventDefault(): void };
type Box<T> = { current: T };

export type PostCard = {
  /** 아바타 원에 얹는 이니셜 한 글자 */
  initial: string;
  /** 일반 명사 이름 */
  name: string;
  /** 「@」 손잡이 대신 직함 한 줄 */
  role: string;
  body: string;
  likes: number;
  /** 하트 수를 읽어 줄 문장 */
  likesLabel: string;
};

export type PostCardWallProps = {
  label?: string;
  cards?: PostCard[];
  /** 세 장이 떠올랐다 앉는 한 바퀴 = 오로라가 한 바퀴 도는 시간(ms) */
  duration?: number;
  easing?: string;
  /** 무대 색 */
  color?: string;
};

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

const HeartIcon = (): ReactNode => (
  <svg viewBox="0 0 256 256" width="14" height="14" aria-hidden="true" focusable="false" fill="currentColor">
    <path d="M232,102c0,66-104,122-104,122S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32A54,54,0,0,1,232,102Z" opacity="0.2" />
    <path d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z" />
  </svg>
);

const DEFAULT_CARDS: PostCard[] = [
  { initial: "디", name: "디자인 스튜디오", role: "브랜드 디자이너", body: "버튼 하나 고치는 데 새벽까지 안 걸렸다", likes: 128, likesLabel: "좋아요 128개" },
  { initial: "소", name: "소규모 개발팀", role: "프런트엔드 담당", body: "테두리 한 줄 바꿨더니 문의가 줄었다", likes: 86, likesLabel: "좋아요 86개" },
  { initial: "문", name: "문구 편집자", role: "콘텐츠 운영", body: "설명서 없이 그대로 붙여 썼다", likes: 47, likesLabel: "좋아요 47개" },
];

const TONE = [styles.cardA, styles.cardB, styles.cardC];

export default function PostCardWall({
  label = "짧은 후기 카드 모음",
  cards = DEFAULT_CARDS,
  duration = 2000,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#17141a",
}: PostCardWallProps): ReactNode {
  const [loop, setLoop] = useState<boolean>(true);
  const refs = useRef<Array<HTMLAnchorElement | null>>([]) as Box<Array<HTMLAnchorElement | null>>;

  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  /* 카드 사이를 좌우 화살표로 옮겨 다닌다 (Home·End 는 양 끝) */
  const onKey = (e: KeyEvt, i: number): void => {
    const list = refs.current;
    let to = -1;
    if (e.key === "ArrowRight") { to = (i + 1) % cards.length; }
    if (e.key === "ArrowLeft") { to = (i - 1 + cards.length) % cards.length; }
    if (e.key === "Home") { to = 0; }
    if (e.key === "End") { to = cards.length - 1; }
    if (to < 0) { return; }
    e.preventDefault();
    setLoop(false);
    const next = list[to];
    if (next) { next.focus({ preventScroll: true }); }
  };

  return (
    <section
      className={loop ? `${styles.pw} ${styles.isDemo}` : styles.pw}
      style={vars}
      aria-label={label}
      onPointerEnter={() => setLoop(false)}
      onFocus={() => setLoop(false)}
    >
      <div className={styles.wall}>
        {cards.map((c: PostCard, i: number) => (
          <article className={`${styles.card} ${TONE[i % TONE.length]}`} key={c.name}>
            <header className={styles.top}>
              <span className={styles.ini} aria-hidden="true">{c.initial}</span>
              <a
                className={styles.who}
                href="#"
                ref={(el: HTMLAnchorElement | null) => { refs.current[i] = el; }}
                onKeyDown={(e: KeyEvt) => onKey(e, i)}
              >
                <span className={styles.name}>{c.name}</span>
                <span className={styles.role}>{c.role}</span>
              </a>
            </header>
            <p className={styles.body}>{c.body}</p>
            <p className={styles.likes} role="img" aria-label={c.likesLabel}>
              <HeartIcon />
              <span className={styles.count}>{c.likes}</span>
            </p>
          </article>
        ))}
      </div>
    </section>
  );
}