1c:I[88678,["8500","static/chunks/8500-01a63dafd809e317.js","3725","static/chunks/3725-1271f26d54bf6b57.js","7645","static/chunks/7645-1ca8d29f22f0cbd8.js","9695","static/chunks/9695-49a7c029c38ce6ae.js","2555","static/chunks/2555-08f52e68208a57e8.js","2395","static/chunks/2395-5e305d89191e3da6.js","294","static/chunks/app/library/%5Bslug%5D/page-2dadb29d2213cdf3.js"],"LibraryDetail"] 1f:I[86869,[],"IconMark"] 1d:T332d,"use client"; import { useEffect, useRef, useState, type CSSProperties, type HTMLAttributes, type KeyboardEvent, type PointerEvent } from "react"; import { ArrowLeft, ArrowRight } from "lucide-react"; export type StackStory = { name: string; role: string; quote: string; /** 카드 위에 붙는 짧은 성과 배지 */ tag?: string; }; export interface TestimonialStackProps extends HTMLAttributes { stories?: StackStory[]; eyebrow?: string; heading?: string; description?: string; /** 자동으로 다음 카드로 넘어가는 간격(ms) */ interval?: number; } const DEFAULT_STORIES: StackStory[] = [ { name: "김서연", role: "직장인 · 6주 과정 수료", quote: "퇴근 후 한 시간씩. 6주 뒤, 제 이름으로 된 서비스가 생겼어요.", tag: "첫 배포까지 6주" }, { name: "박준호", role: "컴퓨터공학 2학년", quote: "과제용 코드가 아니라 친구들이 실제로 쓰는 앱을 처음 만들었어요.", tag: "실사용자 120명" }, { name: "이하은", role: "스타트업 마케터", quote: "개발팀에 부탁하던 랜딩 페이지를 이제 하루 만에 직접 고쳐요.", tag: "랜딩 제작 1일" }, { name: "정민재", role: "창업 준비생", quote: "AI에게 묻는 법을 배우니 막혀 있는 시간이 절반으로 줄었어요.", tag: "디버깅 시간 -50%" }, { name: "최유나", role: "UI 디자이너", quote: "시안만 그리던 제가 인터랙션까지 만들어 포트폴리오에 넣었어요.", tag: "포트폴리오 완성" }, ]; const THEMES = [ "linear-gradient(145deg,#4f46e5,#7c3aed)", "linear-gradient(145deg,#e11d48,#ea580c)", "linear-gradient(145deg,#0f766e,#0e7490)", "linear-gradient(145deg,#1c1917,#44403c)", "linear-gradient(145deg,#2563eb,#4338ca)", ]; const TILT = [-4, 3, -2.5, 4.5, -3.5]; const SWIPE_DISTANCE = 90; type Leaving = { card: number; dir: number }; export function TestimonialStack({ stories = DEFAULT_STORIES, eyebrow = "STUDENT STORIES", heading = "작은 성공이 쌓이는 이야기", description = "AI CODER 수강생들이 직접 들려준 변화의 순간들이에요.", interval = 5500, className = "", onKeyDown, ...props }: TestimonialStackProps) { const total = stories.length; const [index, setIndex] = useState(0); const [dragX, setDragX] = useState(0); const [dragging, setDragging] = useState(false); const [leaving, setLeaving] = useState(null); const [entering, setEntering] = useState(null); const [focused, setFocused] = useState(false); const rootRef = useRef(null); const start = useRef<{ x: number; time: number } | null>(null); // 날아간 카드는 잠깐 맨 위에 남아 퇴장 애니메이션을 마친 뒤 덱 맨 뒤로 돌아갑니다. useEffect(() => { if (!leaving) return; const timer = setTimeout(() => setLeaving(null), 450); return () => clearTimeout(timer); }, [leaving]); // 돌아오는 카드는 한 프레임 동안 화면 왼쪽 밖에 그려 둔 뒤 제자리로 보내야 transition이 보입니다. useEffect(() => { if (entering === null) return; let frame = requestAnimationFrame(() => { frame = requestAnimationFrame(() => setEntering(null)); }); return () => cancelAnimationFrame(frame); }, [entering]); // 포커스가 안에 있을 때만 바뀐 카드를 스크린 리더에 읽어 줍니다(자동 넘김 중에는 조용히). useEffect(() => { const root = rootRef.current; if (!root) return; const enter = () => setFocused(true); const leave = (event: FocusEvent) => setFocused(root.contains(event.relatedTarget as Node | null)); root.addEventListener("focusin", enter); root.addEventListener("focusout", leave); return () => { root.removeEventListener("focusin", enter); root.removeEventListener("focusout", leave); }; }, []); /** 맨 위 카드를 dir 방향으로 던지고 다음 카드를 보여 줍니다. */ function next(dir = -1) { setLeaving({ card: index, dir }); setIndex((index + 1) % total); } /** 이전 버튼·점 버튼: 고른 카드가 옆에서 날아와 맨 위에 놓입니다. */ function show(card: number) { if (card === index) return; setLeaving(null); setEntering(card); setIndex(card); } function handleKeyDown(event: KeyboardEvent) { if (event.key === "ArrowRight") next(); if (event.key === "ArrowLeft") show((index - 1 + total) % total); onKeyDown?.(event); } function handlePointerDown(event: PointerEvent) { if (event.button !== 0) return; event.currentTarget.setPointerCapture(event.pointerId); start.current = { x: event.clientX, time: performance.now() }; setDragging(true); } function handlePointerMove(event: PointerEvent) { if (start.current) setDragX(event.clientX - start.current.x); } function handlePointerUp(event: PointerEvent) { if (!start.current) return; const dx = event.clientX - start.current.x; // 멀리 끌었거나, 짧아도 빠르게 튕기면(px/ms) 카드를 던진 것으로 봅니다. const speed = Math.abs(dx) / (performance.now() - start.current.time); start.current = null; setDragging(false); setDragX(0); if (Math.abs(dx) > SWIPE_DISTANCE || (speed > 0.6 && Math.abs(dx) > 24)) next(Math.sign(dx)); } function cardStyle(card: number): CSSProperties { if (entering === card) { return { zIndex: total + 1, opacity: 0, transform: "translateX(-115%) rotate(-14deg)", transition: "none" }; } if (leaving?.card === card) { return { zIndex: total + 1, opacity: 0, transform: `translateX(${leaving.dir * 115}%) rotate(${leaving.dir * 14}deg)` }; } const position = (card - index + total) % total; // 맨 위 카드를 끄는 만큼 뒤 카드들이 한 칸씩 앞으로 다가옵니다(depth가 연속값). const pull = Math.min(Math.abs(dragX) / 160, 1); const depth = position === 0 ? 0 : position - pull; const tilt = position === 0 ? dragX * 0.05 : TILT[card % TILT.length] * Math.min(depth, 1); return { zIndex: total - position, opacity: depth > 2.2 ? 0 : 1, transform: `translate(${position === 0 ? dragX : 0}px, ${depth * -16}px) scale(${1 - depth * 0.06}) rotate(${tilt}deg)`, transition: position === 0 && dragging ? "none" : undefined, }; } return (

{eyebrow}

{heading}

{description &&

{description}

}

{stories.map((story, card) => { const top = card === index && leaving?.card !== card; return (

” {story.tag && {story.tag}}

{story.quote}

); })}

{stories.map((story, dot) => ( ))}

); } export default TestimonialStack;1e:Ta74b,

13:["$","main",null,{"id":"main-content","tabIndex":-1,"className":"library_page__IxXwj","children":[["$","div",null,{"className":"library_headerSpace__cyKqF","children":"$L1b"}],["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"LearningResource\",\"name\":\"스와이프 후기 카드 덱\",\"description\":\"쌓인 후기 카드를 손으로 던져 넘기는 3D 카드 덱\",\"url\":\"https://aicoder.kr/library/testimonial-stack\",\"inLanguage\":\"ko-KR\",\"learningResourceType\":\"코드 예제 및 실습\",\"educationalLevel\":\"응용\"},{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"홈\",\"item\":\"https://aicoder.kr/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"라이브러리\",\"item\":\"https://aicoder.kr/library\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"스와이프 후기 카드 덱\",\"item\":\"https://aicoder.kr/library/testimonial-stack\"}]}]}"}}],["$","div",null,{"className":"library_container__grs86","children":["$","$L1c",null,{"item":{"slug":"testimonial-stack","tags":["React","Tailwind","Pointer Events","스와이프","캐러셀","접근성"],"files":[{"name":"testimonial-stack.tsx","content":"$1d","language":"tsx"},{"name":"demo.tsx","content":"import { TestimonialStack } from \"@/components/ui/testimonial-stack\";\n\nexport default function Demo() {\n return (\n

\n \n

\n );\n}","language":"tsx"}],"level":"응용","title":"스와이프 후기 카드 덱","author":"AI Coder 예제","license":"MIT","category":"testimonial","exercise":"SWIPE_DISTANCE를 40과 160으로 바꿔 던지기 감도를 비교해 보세요. 오른쪽으로 던지면 이전 카드로 돌아가도록 go 함수를 바꿔 보세요.","sourceUrl":"","objectives":["카드의 덱 위치(0, 1, 2…)를 transform 값으로 바꿔 겹쳐 쌓인 입체감 만들기","Pointer Events와 setPointerCapture로 마우스·터치를 한 번에 처리하는 스와이프 구현하기","끈 거리와 속도로 '던졌는지'를 판정하고, 끄는 만큼 뒤 카드가 다가오게 보간하기","진행 막대의 animationend로 자동 넘김을 만들고 hover·focus 때 CSS만으로 멈추기"],"description":"쌓인 후기 카드를 손으로 던져 넘기는 3D 카드 덱","previewHtml":"$1e","dependencies":"React · Tailwind CSS · lucide-react"},"highlighted":[{"name":"testimonial-stack.tsx","lines":[[{"content":"\"use client\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"import","color":"#FF7B72"},{"content":" { useEffect, useRef, useState, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" CSSProperties, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" HTMLAttributes, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" KeyboardEvent, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" PointerEvent } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" { ArrowLeft, ArrowRight } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"lucide-react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"StackStory","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"name","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"role","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"quote","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 카드 위에 붙는 짧은 성과 배지 */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"tag","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"};","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"TestimonialStackProps","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"extends","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"HTMLAttributes","color":"#79C0FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":"> {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"stories","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"StackStory","color":"#FFA657"},{"content":"[];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"eyebrow","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"heading","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"description","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 자동으로 다음 카드로 넘어가는 간격(ms) */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"interval","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DEFAULT_STORIES","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"StackStory","color":"#FFA657"},{"content":"[] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"}],[{"content":" { name: ","color":"#E6EDF3"},{"content":"\"김서연\"","color":"#A5D6FF"},{"content":", role: ","color":"#E6EDF3"},{"content":"\"직장인 · 6주 과정 수료\"","color":"#A5D6FF"},{"content":", quote: ","color":"#E6EDF3"},{"content":"\"퇴근 후 한 시간씩. 6주 뒤, 제 이름으로 된 서비스가 생겼어요.\"","color":"#A5D6FF"},{"content":", tag: ","color":"#E6EDF3"},{"content":"\"첫 배포까지 6주\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { name: ","color":"#E6EDF3"},{"content":"\"박준호\"","color":"#A5D6FF"},{"content":", role: ","color":"#E6EDF3"},{"content":"\"컴퓨터공학 2학년\"","color":"#A5D6FF"},{"content":", quote: ","color":"#E6EDF3"},{"content":"\"과제용 코드가 아니라 친구들이 실제로 쓰는 앱을 처음 만들었어요.\"","color":"#A5D6FF"},{"content":", tag: ","color":"#E6EDF3"},{"content":"\"실사용자 120명\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { name: ","color":"#E6EDF3"},{"content":"\"이하은\"","color":"#A5D6FF"},{"content":", role: ","color":"#E6EDF3"},{"content":"\"스타트업 마케터\"","color":"#A5D6FF"},{"content":", quote: ","color":"#E6EDF3"},{"content":"\"개발팀에 부탁하던 랜딩 페이지를 이제 하루 만에 직접 고쳐요.\"","color":"#A5D6FF"},{"content":", tag: ","color":"#E6EDF3"},{"content":"\"랜딩 제작 1일\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { name: ","color":"#E6EDF3"},{"content":"\"정민재\"","color":"#A5D6FF"},{"content":", role: ","color":"#E6EDF3"},{"content":"\"창업 준비생\"","color":"#A5D6FF"},{"content":", quote: ","color":"#E6EDF3"},{"content":"\"AI에게 묻는 법을 배우니 막혀 있는 시간이 절반으로 줄었어요.\"","color":"#A5D6FF"},{"content":", tag: ","color":"#E6EDF3"},{"content":"\"디버깅 시간 -50%\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { name: ","color":"#E6EDF3"},{"content":"\"최유나\"","color":"#A5D6FF"},{"content":", role: ","color":"#E6EDF3"},{"content":"\"UI 디자이너\"","color":"#A5D6FF"},{"content":", quote: ","color":"#E6EDF3"},{"content":"\"시안만 그리던 제가 인터랙션까지 만들어 포트폴리오에 넣었어요.\"","color":"#A5D6FF"},{"content":", tag: ","color":"#E6EDF3"},{"content":"\"포트폴리오 완성\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":"];","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"THEMES","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"\"linear-gradient(145deg,#4f46e5,#7c3aed)\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"\"linear-gradient(145deg,#e11d48,#ea580c)\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"\"linear-gradient(145deg,#0f766e,#0e7490)\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"\"linear-gradient(145deg,#1c1917,#44403c)\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"\"linear-gradient(145deg,#2563eb,#4338ca)\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":"];","color":"#E6EDF3"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"TILT","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"4","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"2.5","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"4.5","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"3.5","color":"#79C0FF"},{"content":"];","color":"#E6EDF3"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"SWIPE_DISTANCE","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"90","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Leaving","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"card","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"dir","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":" };","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"TestimonialStack","color":"#D2A8FF"},{"content":"({","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"stories","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DEFAULT_STORIES","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"eyebrow","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"STUDENT STORIES\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"heading","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"작은 성공이 쌓이는 이야기\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"description","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"AI CODER 수강생들이 직접 들려준 변화의 순간들이에요.\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"interval","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"5500","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onKeyDown","color":"#FFA657"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"props","color":"#FFA657"}],[{"content":"}","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"TestimonialStackProps","color":"#FFA657"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"total","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" stories.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"index","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setIndex","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"dragX","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setDragX","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"dragging","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setDragging","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"leaving","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setLeaving","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"Leaving","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"entering","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setEntering","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"focused","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setFocused","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"rootRef","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"start","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<{ ","color":"#E6EDF3"},{"content":"x","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"time","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":" } ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 날아간 카드는 잠깐 맨 위에 남아 퇴장 애니메이션을 마친 뒤 덱 맨 뒤로 돌아갑니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"leaving) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"timer","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setTimeout","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setLeaving","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":"), ","color":"#E6EDF3"},{"content":"450","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"clearTimeout","color":"#D2A8FF"},{"content":"(timer);","color":"#E6EDF3"}],[{"content":" }, [leaving]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 돌아오는 카드는 한 프레임 동안 화면 왼쪽 밖에 그려 둔 뒤 제자리로 보내야 transition이 보입니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (entering ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" frame ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"requestAnimationFrame","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" frame ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"requestAnimationFrame","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setEntering","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":"));","color":"#E6EDF3"}],[{"content":" });","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"cancelAnimationFrame","color":"#D2A8FF"},{"content":"(frame);","color":"#E6EDF3"}],[{"content":" }, [entering]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 포커스가 안에 있을 때만 바뀐 카드를 스크린 리더에 읽어 줍니다(자동 넘김 중에는 조용히).","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"root","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" rootRef.current;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"root) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"enter","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setFocused","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"leave","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"FocusEvent","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setFocused","color":"#D2A8FF"},{"content":"(root.","color":"#E6EDF3"},{"content":"contains","color":"#D2A8FF"},{"content":"(event.relatedTarget ","color":"#E6EDF3"},{"content":"as","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Node","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":"));","color":"#E6EDF3"}],[{"content":" root.","color":"#E6EDF3"},{"content":"addEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"focusin\"","color":"#A5D6FF"},{"content":", enter);","color":"#E6EDF3"}],[{"content":" root.","color":"#E6EDF3"},{"content":"addEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"focusout\"","color":"#A5D6FF"},{"content":", leave);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" root.","color":"#E6EDF3"},{"content":"removeEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"focusin\"","color":"#A5D6FF"},{"content":", enter);","color":"#E6EDF3"}],[{"content":" root.","color":"#E6EDF3"},{"content":"removeEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"focusout\"","color":"#A5D6FF"},{"content":", leave);","color":"#E6EDF3"}],[{"content":" };","color":"#E6EDF3"}],[{"content":" }, []);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"/** 맨 위 카드를 dir 방향으로 던지고 다음 카드를 보여 줍니다. */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"next","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"dir","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"1","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setLeaving","color":"#D2A8FF"},{"content":"({ card: index, dir });","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setIndex","color":"#D2A8FF"},{"content":"((index ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" total);","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"/** 이전 버튼·점 버튼: 고른 카드가 옆에서 날아와 맨 위에 놓입니다. */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"show","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"card","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (card ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" index) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setLeaving","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setEntering","color":"#D2A8FF"},{"content":"(card);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setIndex","color":"#D2A8FF"},{"content":"(card);","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleKeyDown","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"KeyboardEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (event.key ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"ArrowRight\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"next","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (event.key ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"ArrowLeft\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"show","color":"#D2A8FF"},{"content":"((index ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" total) ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" total);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onKeyDown","color":"#D2A8FF"},{"content":"?.(event);","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handlePointerDown","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"PointerEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (event.button ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" event.currentTarget.","color":"#E6EDF3"},{"content":"setPointerCapture","color":"#D2A8FF"},{"content":"(event.pointerId);","color":"#E6EDF3"}],[{"content":" start.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { x: event.clientX, time: performance.","color":"#E6EDF3"},{"content":"now","color":"#D2A8FF"},{"content":"() };","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setDragging","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handlePointerMove","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"PointerEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (start.current) ","color":"#E6EDF3"},{"content":"setDragX","color":"#D2A8FF"},{"content":"(event.clientX ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" start.current.x);","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handlePointerUp","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"PointerEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"start.current) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"dx","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" event.clientX ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" start.current.x;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 멀리 끌었거나, 짧아도 빠르게 튕기면(px/ms) 카드를 던진 것으로 봅니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"speed","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"abs","color":"#D2A8FF"},{"content":"(dx) ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" (performance.","color":"#E6EDF3"},{"content":"now","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" start.current.time);","color":"#E6EDF3"}],[{"content":" start.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setDragging","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setDragX","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (Math.","color":"#E6EDF3"},{"content":"abs","color":"#D2A8FF"},{"content":"(dx) ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"SWIPE_DISTANCE","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" (speed ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.6","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"abs","color":"#D2A8FF"},{"content":"(dx) ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"24","color":"#79C0FF"},{"content":")) ","color":"#E6EDF3"},{"content":"next","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"sign","color":"#D2A8FF"},{"content":"(dx));","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"cardStyle","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"card","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"CSSProperties","color":"#FFA657"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (entering ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" card) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" { zIndex: total ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", opacity: ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", transform: ","color":"#E6EDF3"},{"content":"\"translateX(-115%) rotate(-14deg)\"","color":"#A5D6FF"},{"content":", transition: ","color":"#E6EDF3"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" };","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (leaving?.card ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" card) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" { zIndex: total ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", opacity: ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", transform: ","color":"#E6EDF3"},{"content":"`translateX(${","color":"#A5D6FF"},{"content":"leaving","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"dir","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"115","color":"#79C0FF"},{"content":"}%) rotate(${","color":"#A5D6FF"},{"content":"leaving","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"dir","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"14","color":"#79C0FF"},{"content":"}deg)`","color":"#A5D6FF"},{"content":" };","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"position","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (card ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" index ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" total) ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" total;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 맨 위 카드를 끄는 만큼 뒤 카드들이 한 칸씩 앞으로 다가옵니다(depth가 연속값).","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"pull","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"min","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"abs","color":"#D2A8FF"},{"content":"(dragX) ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"160","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"depth","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" position ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" position ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" pull;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"tilt","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" position ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" dragX ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.05","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"TILT","color":"#79C0FF"},{"content":"[card ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"TILT","color":"#79C0FF"},{"content":".","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"min","color":"#D2A8FF"},{"content":"(depth, ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" zIndex: total ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" position,","color":"#E6EDF3"}],[{"content":" opacity: depth ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2.2","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" transform: ","color":"#E6EDF3"},{"content":"`translate(${","color":"#A5D6FF"},{"content":"position","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"dragX","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"0","color":"#79C0FF"},{"content":"}px, ${","color":"#A5D6FF"},{"content":"depth","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"-","color":"#FF7B72"},{"content":"16","color":"#79C0FF"},{"content":"}px) scale(${","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#A5D6FF"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"depth","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"0.06","color":"#79C0FF"},{"content":"}) rotate(${","color":"#A5D6FF"},{"content":"tilt","color":"#E6EDF3"},{"content":"}deg)`","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" transition: position ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" dragging ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" };","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"section","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"{...","color":"#FF7B72"},{"content":"props","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"rootRef","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onKeyDown","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"handleKeyDown","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"data-dragging","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"dragging","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-roledescription","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"carousel\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"heading","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`testimonial-stack @container w-full ${","color":"#A5D6FF"},{"content":"className","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid gap-x-8 gap-y-6 @md:grid-cols-[minmax(10rem,0.75fr)_minmax(0,1fr)]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex flex-col items-start gap-3 @md:self-end\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-[11px] font-bold tracking-[0.22em] text-stone-500\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"eyebrow","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"h2","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-balance break-keep text-[26px] font-bold leading-[1.2] tracking-tight text-stone-900 @2xl:text-4xl\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"heading","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"description ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"break-keep text-[14px] leading-relaxed text-stone-600\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"description","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"tabIndex","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"0","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"후기 카드 덱. 좌우 화살표 키로 넘길 수 있어요\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"aria-live","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"focused ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"polite\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"off\"","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative mt-7 h-[13.5rem] w-full max-w-[26rem] justify-self-center rounded-[28px] @md:col-start-2 @md:row-span-2 @md:row-start-1 @md:self-center outline-none focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-4 focus-visible:ring-offset-[#f4efe7]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"stories.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"story","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"card","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"top","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" card ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" index ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" leaving?.card ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" card;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"article","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"story.name ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" card","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"role","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"group\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-roledescription","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"slide\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"card","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":"} / ${","color":"#A5D6FF"},{"content":"total","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":"={!","color":"#FF7B72"},{"content":"top","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerDown","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"top ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" handlePointerDown ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerMove","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"top ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" handlePointerMove ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerUp","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"top ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" handlePointerUp ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerCancel","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"top ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" handlePointerUp ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`testimonial-stack-card @container absolute inset-0 flex touch-pan-y select-none flex-col overflow-hidden rounded-[28px] p-5 text-white ${","color":"#A5D6FF"},{"content":"top","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"cursor-grab active:cursor-grabbing\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"pointer-events-none\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ backgroundImage: ","color":"#E6EDF3"},{"content":"THEMES","color":"#79C0FF"},{"content":"[card ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"THEMES","color":"#79C0FF"},{"content":".","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":"], ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"cardStyle","color":"#D2A8FF"},{"content":"(card) }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"pointer-events-none absolute -top-3 right-4 font-serif text-[120px] leading-none text-white/15\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"”","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"story.tag ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"self-start rounded-full bg-white/15 px-2.5 py-1 text-[11px] font-semibold ring-1 ring-white/20\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"story.tag","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"blockquote","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-3 break-keep text-[17px] font-semibold leading-snug @2xs:text-[19px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"story.quote","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"footer","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-auto flex items-center gap-3 pt-3\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid size-9 place-items-center rounded-full bg-white/20 text-[12px] font-bold ring-1 ring-white/30\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"story.name.","color":"#E6EDF3"},{"content":"slice","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"2","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"leading-tight\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"block text-[14px] font-semibold\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"story.name","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"block text-[12px] text-white/75\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"story.role","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":" })","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center gap-2 @md:col-start-1 @md:row-start-2 @md:self-start\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"button\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"show","color":"#D2A8FF"},{"content":"((index ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" total) ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" total)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"이전 후기\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"testimonial-stack-nav\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"ArrowLeft","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-4\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"button\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"next","color":"#D2A8FF"},{"content":"()","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"다음 후기\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"testimonial-stack-nav\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"ArrowRight","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-4\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ml-2 flex items-center\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"stories.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"story","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"dot","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"story.name ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" dot","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"button\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"show","color":"#D2A8FF"},{"content":"(dot)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"dot","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":"}번째 후기 보기`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-current","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"dot ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" index ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"group grid h-6 place-items-center px-[3px] focus-visible:outline-none\"","color":"#A5D6FF"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`relative block h-2 overflow-hidden rounded-full bg-stone-300 transition-all duration-300 group-hover:bg-stone-400 group-focus-visible:ring-2 group-focus-visible:ring-stone-900 group-focus-visible:ring-offset-2 ${","color":"#A5D6FF"},{"content":"dot","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"w-7\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"w-2\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"dot ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" index ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 진행 막대가 끝나는 순간(animationend) 다음 카드로 넘어갑니다. 멈춤도 CSS가 담당해요.","color":"#8B949E"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"index","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"testimonial-stack-fill absolute inset-0 rounded-full bg-stone-900\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ animationDuration: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"interval","color":"#E6EDF3"},{"content":"}ms`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"onAnimationEnd","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"next","color":"#D2A8FF"},{"content":"()","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" )","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"`","color":"#A5D6FF"}],[{"content":" .testimonial-stack-card {","color":"#A5D6FF"}],[{"content":" box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 18px 40px -18px rgba(28,25,23,.55);","color":"#A5D6FF"}],[{"content":" transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s ease;","color":"#A5D6FF"}],[{"content":" will-change: transform;","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" .testimonial-stack-nav {","color":"#A5D6FF"}],[{"content":" display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px;","color":"#A5D6FF"}],[{"content":" border: 1px solid #d6d3d1; background: #fff; color: #1c1917; transition: background .2s, color .2s, transform .2s;","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" .testimonial-stack-nav:hover { background: #1c1917; color: #fff; }","color":"#A5D6FF"}],[{"content":" .testimonial-stack-nav:active { transform: scale(.92); }","color":"#A5D6FF"}],[{"content":" .testimonial-stack-nav:focus-visible { outline: 2px solid #1c1917; outline-offset: 3px; }","color":"#A5D6FF"}],[{"content":" @keyframes testimonial-stack-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }","color":"#A5D6FF"}],[{"content":" .testimonial-stack-fill { transform-origin: left; animation: testimonial-stack-fill linear forwards; }","color":"#A5D6FF"}],[{"content":" /* 마우스를 올리거나, 포커스가 들어오거나, 끄는 중에는 진행 막대가 멈추고 자동 넘김도 멈춥니다. */","color":"#A5D6FF"}],[{"content":" .testimonial-stack:hover .testimonial-stack-fill,","color":"#A5D6FF"}],[{"content":" .testimonial-stack:focus-within .testimonial-stack-fill,","color":"#A5D6FF"}],[{"content":" .testimonial-stack[data-dragging=\"true\"] .testimonial-stack-fill { animation-play-state: paused; }","color":"#A5D6FF"}],[{"content":" @media (prefers-reduced-motion: reduce) {","color":"#A5D6FF"}],[{"content":" .testimonial-stack-card { transition: none; }","color":"#A5D6FF"}],[{"content":" .testimonial-stack-fill { animation: none; }","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" `","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"TestimonialStack;","color":"#E6EDF3"}]]},{"name":"demo.tsx","lines":[[{"content":"import","color":"#FF7B72"},{"content":" { TestimonialStack } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"@/components/ui/testimonial-stack\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"Demo","color":"#D2A8FF"},{"content":"() ","color":"#FFA657"},{"content":"{","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex min-h-screen items-center justify-center bg-[#f4efe7] bg-[radial-gradient(circle_at_80%_20%,rgba(124,58,237,.10),transparent_40%),radial-gradient(circle_at_10%_90%,rgba(234,88,12,.10),transparent_40%)] px-5 py-6\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"TestimonialStack","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"max-w-3xl\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}]]}]}]}]]}] 16:null 1a:[["$","title","0",{"children":"스와이프 후기 카드 덱 · AI Coder"}],["$","meta","1",{"name":"description","content":"쌓인 후기 카드를 손으로 던져 넘기는 3D 카드 덱"}],["$","meta","2",{"name":"application-name","content":"AI Coder"}],["$","link","3",{"rel":"manifest","href":"/manifest.webmanifest","crossOrigin":"$undefined"}],["$","meta","4",{"name":"referrer","content":"strict-origin-when-cross-origin"}],["$","meta","5",{"name":"robots","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","6",{"name":"category","content":"education"}],["$","link","7",{"rel":"canonical","href":"https://aicoder.kr/library/testimonial-stack"}],["$","meta","8",{"name":"naver-site-verification","content":"3347449a2b36f2b5cea3e0cd9fb49ae3959ff348"}],["$","meta","9",{"property":"og:title","content":"스와이프 후기 카드 덱 · AI Coder"}],["$","meta","10",{"property":"og:description","content":"쌓인 후기 카드를 손으로 던져 넘기는 3D 카드 덱"}],["$","meta","11",{"property":"og:url","content":"https://aicoder.kr/library/testimonial-stack"}],["$","meta","12",{"property":"og:site_name","content":"AI Coder"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://aicoder.kr/social-card.png"}],["$","meta","15",{"property":"og:image:width","content":"1200"}],["$","meta","16",{"property":"og:image:height","content":"630"}],["$","meta","17",{"property":"og:image:alt","content":"AI Coder · AI 코딩 교육과 실전 프로젝트"}],["$","meta","18",{"property":"og:type","content":"website"}],["$","meta","19",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","20",{"name":"twitter:title","content":"스와이프 후기 카드 덱 · AI Coder"}],["$","meta","21",{"name":"twitter:description","content":"쌓인 후기 카드를 손으로 던져 넘기는 3D 카드 덱"}],["$","meta","22",{"name":"twitter:image","content":"https://aicoder.kr/social-card.png"}],["$","link","23",{"rel":"icon","href":"/favicon.ico?766d9da6178db116","type":"image/x-icon","sizes":"16x16"}],["$","link","24",{"rel":"icon","href":"/icon.png?96c6ddf66156e856","type":"image/png","sizes":"64x64"}],["$","link","25",{"rel":"apple-touch-icon","href":"/apple-icon.png?87c64c22e9bd6762","type":"image/png","sizes":"180x180"}],["$","$L1f","26",{}]]

예제에 포함된 파일