03ウェッジバッジのカードグリッド

<main class="stage">
  <div class="gridcitrus">
    <div class="gridcitrus__card gridcitrus__card--org">
      <span class="gridcitrus__badge">NEW</span>
      <span class="gridcitrus__dot" aria-hidden="true"></span>
      <p class="gridcitrus__name">オレンジアラート</p>
    </div>
    <div class="gridcitrus__card gridcitrus__card--lim">
      <span class="gridcitrus__badge">無料</span>
      <span class="gridcitrus__dot" aria-hidden="true"></span>
      <p class="gridcitrus__name">ライムウィジェット</p>
    </div>
    <div class="gridcitrus__card gridcitrus__card--grp">
      <span class="gridcitrus__badge">人気</span>
      <span class="gridcitrus__dot" aria-hidden="true"></span>
      <p class="gridcitrus__name">グレープフルーツカード</p>
    </div>
    <div class="gridcitrus__card gridcitrus__card--lem">
      <span class="gridcitrus__badge">NEW</span>
      <span class="gridcitrus__dot" aria-hidden="true"></span>
      <p class="gridcitrus__name">レモンログ</p>
    </div>
  </div>
</main>

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

$duration: $dur-loop;       // 카드 네 장이 한 바퀴 튀어 오르는 주기
$easing: $ease-spring;
$color: $stage-ink;

$citrus-cream:      #fffaf0;
$citrus-orange:      #d8c1b1;
$citrus-orange-deep:  #bd967a;
$citrus-lime:        #c4ce9c;
$citrus-grapefruit:  #ebd6da;
$citrus-grapefruit-deep: #d1a3ad;
$citrus-lemon:       #dfd8be;
$citrus-ink:         #204a17;

// 무대 — 자몽 물색
@include stage(mix($citrus-grapefruit, $stage-paper, 24%));

.gridcitrus {
  box-sizing: border-box;
  width: clamp(280px, 92vw, 430px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 40vw, 160px), 1fr));
  gap: $sp-3;
}
.gridcitrus__card {
  position: relative;
  box-sizing: border-box;
  min-height: clamp(92px, 26vw, 116px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: $sp-2;
  padding: $sp-4;
  border-radius: $r-card;
  animation: cardPop $duration $easing infinite;
}
.gridcitrus__card--org { background: $citrus-orange; box-shadow: 0 10px 20px rgba($citrus-orange-deep, .45); }
.gridcitrus__card--lim { background: $citrus-lime; box-shadow: 0 10px 20px rgba($citrus-lime, .8); animation-delay: calc($duration / -4); }
.gridcitrus__card--grp { background: $citrus-grapefruit; box-shadow: 0 10px 20px rgba($citrus-grapefruit-deep, .4); animation-delay: calc($duration / -2); }
.gridcitrus__card--lem { background: $citrus-lemon; box-shadow: 0 10px 20px rgba($citrus-lemon, .85); animation-delay: calc($duration / -4 * 3); }
// 웨지 배지 — 카드 모서리에 붙는 과일 조각 모양(삼각형 위쪽을 둥글린 모양)
.gridcitrus__badge {
  position: absolute;
  top: calc($sp-2 * -1);
  right: $sp-3;
  padding: $sp-1 $sp-2;
  border-radius: $sp-1 $r-pill $r-pill $r-pill;
  background: $stage-paper;
  color: $citrus-ink;
  font-weight: 700; font-size: clamp(9px, 2.2vw, 11px); line-height: 1;
  font-family: inherit;
  box-shadow: 0 4px 10px rgba($citrus-orange-deep, .35);
}
.gridcitrus__dot {
  width: $sp-6;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, $stage-paper, rgba($stage-paper, .4) 75%);
}
.gridcitrus__name {
  margin: 0;
  color: $citrus-ink;
  font-weight: 700; font-size: clamp(12px, 3vw, 14px); line-height: 1.3;
  font-family: inherit;
}

// 데모: 네 카드가 시작 시각을 1/4 주기씩 어긋내 순서대로 톡톡 튀어 오른다
@keyframes cardPop {
  0%, 100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-8px) scale(1.02); }
}

// 반응형: 320×200 처럼 세로가 짧은 화면에선 카드 속을 줄인다(BD9)
@media (max-width: 340px), (max-height: 220px) {
  .gridcitrus { gap: $sp-2; }
  .gridcitrus__card { min-height: 64px; padding: $sp-2 $sp-3; gap: $sp-1; }
  .gridcitrus__badge { display: none; }
  .gridcitrus__dot { width: $sp-4; }
  .gridcitrus__name { font-size: 11px; }
}

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

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

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

.gridcitrus {
  box-sizing: border-box;
  width: clamp(280px, 92vw, 430px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 40vw, 160px), 1fr));
  gap: 12px;
}

.gridcitrus__card {
  position: relative;
  box-sizing: border-box;
  min-height: clamp(92px, 26vw, 116px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  animation: cardPop 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.gridcitrus__card--org {
  background: #d8c1b1;
  box-shadow: 0 10px 20px rgba(189, 150, 122, 0.45);
}

.gridcitrus__card--lim {
  background: #c4ce9c;
  box-shadow: 0 10px 20px rgba(196, 206, 156, 0.8);
  animation-delay: -0.5s;
}

.gridcitrus__card--grp {
  background: #ebd6da;
  box-shadow: 0 10px 20px rgba(209, 163, 173, 0.4);
  animation-delay: -1s;
}

.gridcitrus__card--lem {
  background: #dfd8be;
  box-shadow: 0 10px 20px rgba(223, 216, 190, 0.85);
  animation-delay: -1.5s;
}

.gridcitrus__badge {
  position: absolute;
  top: -8px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 4px 999px 999px 999px;
  background: #ffffff;
  color: #204a17;
  font-weight: 700;
  font-size: clamp(9px, 2.2vw, 11px);
  line-height: 1;
  font-family: inherit;
  box-shadow: 0 4px 10px rgba(189, 150, 122, 0.35);
}

.gridcitrus__dot {
  width: 24px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, rgba(255, 255, 255, 0.4) 75%);
}

.gridcitrus__name {
  margin: 0;
  color: #204a17;
  font-weight: 700;
  font-size: clamp(12px, 3vw, 14px);
  line-height: 1.3;
  font-family: inherit;
}

@keyframes cardPop {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-8px) scale(1.02);
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .gridcitrus {
    gap: 8px;
  }
  .gridcitrus__card {
    min-height: 64px;
    padding: 8px 12px;
    gap: 4px;
  }
  .gridcitrus__badge {
    display: none;
  }
  .gridcitrus__dot {
    width: 16px;
  }
  .gridcitrus__name {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gridcitrus__card {
    animation: none !important;
    transform: none;
  }
}

import type { CSSProperties } from "react";
import styles from "./CardGridCitrus.module.scss";

export type CardGridCitrusItem = { badge: string; name: string; tone: "org" | "lim" | "grp" | "lem" };

export type CardGridCitrusProps = {
  items?: CardGridCitrusItem[];
  duration?: number;
  easing?: string;
  color?: string;
};

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

const DEFAULT_ITEMS: CardGridCitrusItem[] = [
  { badge: "NEW", name: "오렌지 알림", tone: "org" },
  { badge: "무료", name: "라임 위젯", tone: "lim" },
  { badge: "인기", name: "자몽 카드", tone: "grp" },
  { badge: "신규", name: "레몬 기록", tone: "lem" },
];

const TONE_CLASS: Record<CardGridCitrusItem["tone"], string> = {
  org: "cardOrg", lim: "cardLim", grp: "cardGrp", lem: "cardLem",
};

export default function CardGridCitrus({
  items = DEFAULT_ITEMS,
  duration = 2000,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#ff9a52",
}: CardGridCitrusProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <div className={styles.gridcitrus} style={vars}>
      {items.map((it, i) => (
        <div
          key={it.name}
          className={`${styles.card} ${styles[TONE_CLASS[it.tone]]}`}
          style={{ animationDelay: `${(-duration / 4) * i}ms` } as CSSProperties}
        >
          <span className={styles.badge}>{it.badge}</span>
          <span className={styles.dot} aria-hidden="true" />
          <p className={styles.name}>{it.name}</p>
        </div>
      ))}
    </div>
  );
}