04후기 임베드 위젯
별 다섯 개가 왼쪽부터 순서대로 튀어 오르며 채워지고, 도움이 됐어요 버튼을 실제로 누르면 카운트가 오른다.
쓰임후기 모음 페이지의 카드형 리뷰, 랜딩의 고객 후기 섹션
staggered scale poparia-pressed counterquote + star icon
<main class="stage is-demo">
<div class="tcard">
<span class="tcard__quote" aria-hidden="true">
<svg viewBox="0 0 256 256" width="20" height="20"><g fill="currentColor"><path d="M108 72v72H40a8 8 0 0 1-8-8V72a8 8 0 0 1 8-8h60a8 8 0 0 1 8 8m108-8h-60a8 8 0 0 0-8 8v64a8 8 0 0 0 8 8h68V72a8 8 0 0 0-8-8" opacity=".2"/><path d="M100 56H40a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h60v8a32 32 0 0 1-32 32a8 8 0 0 0 0 16a48.05 48.05 0 0 0 48-48V72a16 16 0 0 0-16-16m0 80H40V72h60Zm116-80h-60a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h60v8a32 32 0 0 1-32 32a8 8 0 0 0 0 16a48.05 48.05 0 0 0 48-48V72a16 16 0 0 0-16-16m0 80h-60V72h60Z"/></g></svg>
</span>
<div class="tcard__stars" aria-label="별점 5점 만점에 5점">
<svg viewBox="0 0 256 256" width="15" height="15"><g fill="currentColor"><path d="m229.06 108.79l-48.7 42l14.88 62.79a8.4 8.4 0 0 1-12.52 9.17L128 189.09l-54.72 33.65a8.4 8.4 0 0 1-12.52-9.17l14.88-62.79l-48.7-42A8.46 8.46 0 0 1 31.73 94l63.91-5.2l24.62-59.6a8.36 8.36 0 0 1 15.48 0l24.62 59.6l63.91 5.2a8.46 8.46 0 0 1 4.79 14.79" opacity=".2"/><path d="M239.18 97.26A16.38 16.38 0 0 0 224.92 86l-59-4.76l-22.78-55.09a16.36 16.36 0 0 0-30.27 0L90.11 81.23L31.08 86a16.46 16.46 0 0 0-9.37 28.86l45 38.83L53 211.75a16.38 16.38 0 0 0 24.5 17.82l50.5-31.08l50.53 31.08A16.4 16.4 0 0 0 203 211.75l-13.76-58.07l45-38.83a16.43 16.43 0 0 0 4.94-17.59Z"/></g></svg>
<svg viewBox="0 0 256 256" width="15" height="15"><g fill="currentColor"><path d="m229.06 108.79l-48.7 42l14.88 62.79a8.4 8.4 0 0 1-12.52 9.17L128 189.09l-54.72 33.65a8.4 8.4 0 0 1-12.52-9.17l14.88-62.79l-48.7-42A8.46 8.46 0 0 1 31.73 94l63.91-5.2l24.62-59.6a8.36 8.36 0 0 1 15.48 0l24.62 59.6l63.91 5.2a8.46 8.46 0 0 1 4.79 14.79" opacity=".2"/><path d="M239.18 97.26A16.38 16.38 0 0 0 224.92 86l-59-4.76l-22.78-55.09a16.36 16.36 0 0 0-30.27 0L90.11 81.23L31.08 86a16.46 16.46 0 0 0-9.37 28.86l45 38.83L53 211.75a16.38 16.38 0 0 0 24.5 17.82l50.5-31.08l50.53 31.08A16.4 16.4 0 0 0 203 211.75l-13.76-58.07l45-38.83a16.43 16.43 0 0 0 4.94-17.59Z"/></g></svg>
<svg viewBox="0 0 256 256" width="15" height="15"><g fill="currentColor"><path d="m229.06 108.79l-48.7 42l14.88 62.79a8.4 8.4 0 0 1-12.52 9.17L128 189.09l-54.72 33.65a8.4 8.4 0 0 1-12.52-9.17l14.88-62.79l-48.7-42A8.46 8.46 0 0 1 31.73 94l63.91-5.2l24.62-59.6a8.36 8.36 0 0 1 15.48 0l24.62 59.6l63.91 5.2a8.46 8.46 0 0 1 4.79 14.79" opacity=".2"/><path d="M239.18 97.26A16.38 16.38 0 0 0 224.92 86l-59-4.76l-22.78-55.09a16.36 16.36 0 0 0-30.27 0L90.11 81.23L31.08 86a16.46 16.46 0 0 0-9.37 28.86l45 38.83L53 211.75a16.38 16.38 0 0 0 24.5 17.82l50.5-31.08l50.53 31.08A16.4 16.4 0 0 0 203 211.75l-13.76-58.07l45-38.83a16.43 16.43 0 0 0 4.94-17.59Z"/></g></svg>
<svg viewBox="0 0 256 256" width="15" height="15"><g fill="currentColor"><path d="m229.06 108.79l-48.7 42l14.88 62.79a8.4 8.4 0 0 1-12.52 9.17L128 189.09l-54.72 33.65a8.4 8.4 0 0 1-12.52-9.17l14.88-62.79l-48.7-42A8.46 8.46 0 0 1 31.73 94l63.91-5.2l24.62-59.6a8.36 8.36 0 0 1 15.48 0l24.62 59.6l63.91 5.2a8.46 8.46 0 0 1 4.79 14.79" opacity=".2"/><path d="M239.18 97.26A16.38 16.38 0 0 0 224.92 86l-59-4.76l-22.78-55.09a16.36 16.36 0 0 0-30.27 0L90.11 81.23L31.08 86a16.46 16.46 0 0 0-9.37 28.86l45 38.83L53 211.75a16.38 16.38 0 0 0 24.5 17.82l50.5-31.08l50.53 31.08A16.4 16.4 0 0 0 203 211.75l-13.76-58.07l45-38.83a16.43 16.43 0 0 0 4.94-17.59Z"/></g></svg>
<svg viewBox="0 0 256 256" width="15" height="15"><g fill="currentColor"><path d="m229.06 108.79l-48.7 42l14.88 62.79a8.4 8.4 0 0 1-12.52 9.17L128 189.09l-54.72 33.65a8.4 8.4 0 0 1-12.52-9.17l14.88-62.79l-48.7-42A8.46 8.46 0 0 1 31.73 94l63.91-5.2l24.62-59.6a8.36 8.36 0 0 1 15.48 0l24.62 59.6l63.91 5.2a8.46 8.46 0 0 1 4.79 14.79" opacity=".2"/><path d="M239.18 97.26A16.38 16.38 0 0 0 224.92 86l-59-4.76l-22.78-55.09a16.36 16.36 0 0 0-30.27 0L90.11 81.23L31.08 86a16.46 16.46 0 0 0-9.37 28.86l45 38.83L53 211.75a16.38 16.38 0 0 0 24.5 17.82l50.5-31.08l50.53 31.08A16.4 16.4 0 0 0 203 211.75l-13.76-58.07l45-38.83a16.43 16.43 0 0 0 4.94-17.59Z"/></g></svg>
</div>
<p class="tcard__text">"비번 zip 하나로 데모가 그대로 붙었어요. 코드를 몰라도 됐습니다."</p>
<div class="tcard__who">
<span class="tcard__avatar" aria-hidden="true">민</span>
<span class="tcard__name">민지 · 1인 쇼핑몰 운영</span>
</div>
<button class="tcard__helpful" type="button" aria-pressed="false">
<span class="tcard__helpful-label">도움이 됐어요</span>
<span class="tcard__helpful-count">18</span>
</button>
</div>
</main>@use "../../../../site/static/demo-tokens" as *;
// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-loop; // 2s — 별 다섯 개가 순서대로 뜨는 한 주기
$easing: $ease-pop;
$color: $subject-pink;
@include stage($stage-yellow);
.tcard {
position: relative;
width: 256px;
box-sizing: border-box;
padding: $sp-2 $sp-4;
border-radius: $r-card;
background: $subject-cream;
box-shadow: $shadow-raised;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
.tcard__quote { color: $color; display: block; }
.tcard__stars { display: flex; gap: $sp-1; margin: $sp-1 0; color: $color; }
.tcard__stars svg { transform: scale(0); opacity: 0; }
.tcard__text { margin: 0 0 $sp-2; font-size: 13px; line-height: 1.4; color: #3a2f1f; }
.tcard__who { display: flex; align-items: center; gap: $sp-2; }
.tcard__avatar {
width: 28px; height: 28px;
border-radius: 50%;
display: grid; place-items: center;
background: $subject-lilac;
color: $subject-ink; font-size: 11px; font-weight: 700; // 파스텔 면 위 흰 글자는 2.20:1 — 잉크로 8.28:1
flex: 0 0 auto;
}
.tcard__name { font-size: 12px; color: #5a4a2c; }
.tcard__helpful {
margin-top: $sp-2;
display: inline-flex; align-items: center; gap: $sp-2;
border: 1px solid rgba($color, .4);
border-radius: $r-pill;
background: #fff;
padding: $sp-1 $sp-3;
font-size: 11px; color: #5a4a2c;
cursor: pointer;
}
.tcard__helpful.is-active { background: $color; color: #fff; border-color: $color; }
// 자동 재생 루프 — 별 다섯 개가 순서대로 팝업
.stage.is-demo .tcard__stars svg { animation: tcard-star $duration $easing infinite; }
.stage.is-demo .tcard__stars svg:nth-child(1) { animation-delay: 0s; }
.stage.is-demo .tcard__stars svg:nth-child(2) { animation-delay: .08s; }
.stage.is-demo .tcard__stars svg:nth-child(3) { animation-delay: .16s; }
.stage.is-demo .tcard__stars svg:nth-child(4) { animation-delay: .24s; }
.stage.is-demo .tcard__stars svg:nth-child(5) { animation-delay: .32s; }
@keyframes tcard-star {
0% { transform: scale(0); opacity: 0; }
12% { transform: scale(1.3); opacity: 1; }
20%, 90% { transform: scale(1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.stage.is-demo .tcard__stars svg { animation: none; transform: scale(1); opacity: 1; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #ffd23f;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.tcard {
position: relative;
width: 256px;
box-sizing: border-box;
padding: 8px 16px;
border-radius: 16px;
background: #fff7e6;
box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
.tcard__quote {
color: #ff9ebb;
display: block;
}
.tcard__stars {
display: flex;
gap: 4px;
margin: 4px 0;
color: #ff9ebb;
}
.tcard__stars svg {
transform: scale(0);
opacity: 0;
}
.tcard__text {
margin: 0 0 8px;
font-size: 13px;
line-height: 1.4;
color: #3a2f1f;
}
.tcard__who {
display: flex;
align-items: center;
gap: 8px;
}
.tcard__avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
background: #b9a0ff;
color: #17141a;
font-size: 11px;
font-weight: 700;
flex: 0 0 auto;
}
.tcard__name {
font-size: 12px;
color: #5a4a2c;
}
.tcard__helpful {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(255, 158, 187, 0.4);
border-radius: 999px;
background: #fff;
padding: 4px 12px;
font-size: 11px;
color: #5a4a2c;
cursor: pointer;
}
.tcard__helpful.is-active {
background: #ff9ebb;
color: #fff;
border-color: #ff9ebb;
}
.stage.is-demo .tcard__stars svg {
animation: tcard-star 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}
.stage.is-demo .tcard__stars svg:nth-child(1) {
animation-delay: 0s;
}
.stage.is-demo .tcard__stars svg:nth-child(2) {
animation-delay: 0.08s;
}
.stage.is-demo .tcard__stars svg:nth-child(3) {
animation-delay: 0.16s;
}
.stage.is-demo .tcard__stars svg:nth-child(4) {
animation-delay: 0.24s;
}
.stage.is-demo .tcard__stars svg:nth-child(5) {
animation-delay: 0.32s;
}
@keyframes tcard-star {
0% {
transform: scale(0);
opacity: 0;
}
12% {
transform: scale(1.3);
opacity: 1;
}
20%, 90% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.stage.is-demo .tcard__stars svg {
animation: none;
transform: scale(1);
opacity: 1;
}
}// 실제 동작: 도움이 됐어요를 누르면 카운트가 오르고 버튼이 눌림 상태로 바뀐다.
var btn = document.querySelector('.tcard__helpful');
var count = document.querySelector('.tcard__helpful-count');
btn.addEventListener('click', function () {
var pressed = btn.getAttribute('aria-pressed') === 'true';
btn.setAttribute('aria-pressed', String(!pressed));
btn.classList.toggle('is-active', !pressed);
count.textContent = parseInt(count.textContent, 10) + (pressed ? -1 : 1);
});import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./TestimonialCard.module.scss";
export type TestimonialCardProps = {
duration?: number;
easing?: string;
color?: string;
quote?: string;
};
const STAR = (
<g fill="currentColor">
<path opacity=".2" d="m229.06 108.79l-48.7 42l14.88 62.79a8.4 8.4 0 0 1-12.52 9.17L128 189.09l-54.72 33.65a8.4 8.4 0 0 1-12.52-9.17l14.88-62.79l-48.7-42A8.46 8.46 0 0 1 31.73 94l63.91-5.2l24.62-59.6a8.36 8.36 0 0 1 15.48 0l24.62 59.6l63.91 5.2a8.46 8.46 0 0 1 4.79 14.79" />
<path d="M239.18 97.26A16.38 16.38 0 0 0 224.92 86l-59-4.76l-22.78-55.09a16.36 16.36 0 0 0-30.27 0L90.11 81.23L31.08 86a16.46 16.46 0 0 0-9.37 28.86l45 38.83L53 211.75a16.38 16.38 0 0 0 24.5 17.82l50.5-31.08l50.53 31.08A16.4 16.4 0 0 0 203 211.75l-13.76-58.07l45-38.83a16.43 16.43 0 0 0 4.94-17.59Z" />
</g>
);
export default function TestimonialCard({ duration = 2000, easing = "cubic-bezier(.2,1.4,.4,1)", color = "#ff9ebb", quote = '"비번 zip 하나로 데모가 그대로 붙었어요. 코드를 몰라도 됐습니다."' }: TestimonialCardProps) {
const vars: CSSProperties = { "--duration": `${duration}ms`, "--easing": easing, "--color": color } as CSSProperties;
const [helpful, setHelpful] = useState(false);
const [count, setCount] = useState(18);
return (
<div className={styles.card} style={vars}>
<span className={styles.quoteIcon} aria-hidden="true">
<svg viewBox="0 0 256 256" width="20" height="20"><g fill="currentColor">
<path opacity=".2" d="M108 72v72H40a8 8 0 0 1-8-8V72a8 8 0 0 1 8-8h60a8 8 0 0 1 8 8m108-8h-60a8 8 0 0 0-8 8v64a8 8 0 0 0 8 8h68V72a8 8 0 0 0-8-8" />
<path d="M100 56H40a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h60v8a32 32 0 0 1-32 32a8 8 0 0 0 0 16a48.05 48.05 0 0 0 48-48V72a16 16 0 0 0-16-16m0 80H40V72h60Zm116-80h-60a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h60v8a32 32 0 0 1-32 32a8 8 0 0 0 0 16a48.05 48.05 0 0 0 48-48V72a16 16 0 0 0-16-16m0 80h-60V72h60Z" />
</g></svg>
</span>
<div className={styles.stars} aria-label="별점 5점 만점에 5점">
{[0, 1, 2, 3, 4].map((i) => (
<svg key={i} className={styles.star} style={{ animationDelay: `${i * 0.08}s` }} viewBox="0 0 256 256" width="15" height="15">{STAR}</svg>
))}
</div>
<p className={styles.text}>{quote}</p>
<div className={styles.who}>
<span className={styles.avatar} aria-hidden="true">민</span>
<span className={styles.name}>민지 · 1인 쇼핑몰 운영</span>
</div>
<button
className={`${styles.helpfulBtn} ${helpful ? styles.active : ""}`}
type="button" aria-pressed={helpful}
onClick={() => { setHelpful((v) => !v); setCount((n) => n + (helpful ? -1 : 1)); }}
>
<span>도움이 됐어요</span>
<span>{count}</span>
</button>
</div>
);
}04 후기 임베드 위젯 — 측정 누적면적 0.689% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 블로그 위젯 디자인 9종 — 공유·후기·지도 임베드 카드
이 데모가 속한 글
블로그 위젯 디자인 9종 — 공유·후기·지도 임베드 카드블로그 위젯 디자인은 본문 옆이나 아래에 따로 붙어 공유·후기·문의 같은 한 가지 일을 대신하는 작은 카드다. 실제 유튜브·X·구글맵 API 를 불러오지 않고도 그 모양만 CSS 로 흉내 내면, 코드를 몰라도 복붙 이 글의 데모 전부 보기
