1b: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"] 1c:T2d31,"use client"; import { useEffect, useRef, useState, type ButtonHTMLAttributes, type CSSProperties, type MouseEvent } from "react"; import { Rocket } from "lucide-react"; type Status = "idle" | "loading" | "success" | "error"; type Piece = { x: number; y: number; spin: number; size: number; color: string; round: boolean; delay: number }; export interface SuccessBurstButtonProps extends Omit, "children"> { label?: string; loadingLabel?: string; successLabel?: string; errorLabel?: string; /** 클릭하면 실행할 비동기 작업. 성공하면 resolve, 실패하면 reject 하세요. */ action?: () => Promise; /** 성공·실패 표시 후 처음 상태로 돌아가기까지 걸리는 시간(ms) */ resetAfter?: number; /** 데모용: 스스로 버튼을 눌러 상태 변화를 반복해 보여 줍니다. */ autoPlay?: boolean; } const COLORS = ["#a5b4fc", "#f0abfc", "#fcd34d", "#6ee7b7", "#7dd3fc", "#fda4af"]; const fakeDeploy = () => new Promise(resolve => setTimeout(resolve, 1600)); // 위쪽으로 치우친 부채꼴 방향으로 조각들을 흩뿌립니다. (렌더 중이 아니라 이벤트 뒤에 호출해야 해요) function makeConfetti(count = 30): Piece[] { return Array.from({ length: count }, () => { const angle = (-90 + (Math.random() - 0.5) * 220) * (Math.PI / 180); const distance = 60 + Math.random() * 80; return { x: Math.cos(angle) * distance * 1.5, y: Math.sin(angle) * distance, spin: (Math.random() - 0.5) * 720, size: 5 + Math.random() * 5, color: COLORS[Math.floor(Math.random() * COLORS.length)], round: Math.random() > 0.6, delay: Math.random() * 80, }; }); } export function SuccessBurstButton({ label = "배포하기", loadingLabel = "배포 중…", successLabel = "배포 완료!", errorLabel = "다시 시도", action = fakeDeploy, resetAfter = 2200, autoPlay = false, className = "", onClick, ...props }: SuccessBurstButtonProps) { const [status, setStatus] = useState("idle"); const [burst, setBurst] = useState<{ id: number; pieces: Piece[] } | null>(null); const buttonRef = useRef(null); // 성공·실패는 잠깐 보여 준 뒤 idle로 돌아갑니다. 상태가 바뀌면 이전 타이머는 정리돼요. useEffect(() => { if (status !== "success" && status !== "error") return; const timer = setTimeout(() => setStatus("idle"), resetAfter); return () => clearTimeout(timer); }, [status, resetAfter]); // 데모 모드: idle이 되면 잠시 뒤 사람 대신 버튼을 눌러 줍니다. 동작 줄이기 설정이면 멈춰요. useEffect(() => { if (!autoPlay || status !== "idle" || matchMedia("(prefers-reduced-motion: reduce)").matches) return; const timer = setTimeout(() => buttonRef.current?.click(), 1300); return () => clearTimeout(timer); }, [autoPlay, status]); async function handleClick(event: MouseEvent) { onClick?.(event); // disabled 대신 상태로 막아야 로딩 중에도 키보드 포커스가 버튼에 남습니다. if (status === "loading" || status === "success" || event.defaultPrevented) return; setStatus("loading"); try { await action(); setStatus("success"); setBurst({ id: Date.now(), pieces: makeConfetti() }); } catch { setStatus("error"); } } const message = { idle: "", loading: loadingLabel, success: successLabel, error: `실패했어요. ${errorLabel}` }[status]; return ( <> {message} ); } export default SuccessBurstButton;1d:T8dbf,
12:["$","main",null,{"id":"main-content","tabIndex":-1,"className":"library_page__IxXwj","children":[["$","div",null,{"className":"library_headerSpace__cyKqF","children":"$L1a"}],["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"LearningResource\",\"name\":\"성공 폭죽 버튼\",\"description\":\"로딩 원으로 줄었다가 체크와 폭죽으로 터지는 상태 버튼\",\"url\":\"https://aicoder.kr/library/success-burst-button\",\"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/success-burst-button\"}]}]}"}}],["$","div",null,{"className":"library_container__grs86","children":["$","$L1b",null,{"item":{"slug":"success-burst-button","tags":["React","Tailwind","상태 머신","async","CSS 변수","마이크로 인터랙션"],"files":[{"name":"success-burst-button.tsx","content":"$1c","language":"tsx"},{"name":"demo.tsx","content":"import { SuccessBurstButton } from \"@/components/ui/success-burst-button\";\n\nexport default function Demo() {\n return (\n
\n
\n
SUCCESS BURST BUTTON
\n
첫 배포, 버튼 하나로
\n
클릭 → 로딩 → 성공까지 한 번에 보여 줘요
\n \n
\n
\n );\n}","language":"tsx"}],"level":"응용","title":"성공 폭죽 버튼","author":"AI Coder 예제","license":"MIT","category":"button","exercise":"action에 일부러 reject 하는 Promise를 넘겨 error 상태(흔들림)를 확인해 보세요. makeConfetti의 개수와 각도 범위를 바꿔 폭죽 모양을 바꿔 보세요.","sourceUrl":"","objectives":["idle → loading → success/error 상태를 하나의 status 값과 data-status 속성으로 관리하기","grid-template-columns 0fr ↔ 1fr 전환으로 글자 칸을 접어 버튼을 원형 로딩으로 변신시키기","pathLength와 stroke-dashoffset으로 체크 표시가 스스로 그려지게 만들기","CSS 변수로 방향을 넘겨 받은 조각들이 버튼 뒤에서 터지는 폭죽 애니메이션 만들기"],"description":"로딩 원으로 줄었다가 체크와 폭죽으로 터지는 상태 버튼","previewHtml":"$1d","dependencies":"React · Tailwind CSS · lucide-react"},"highlighted":[{"name":"success-burst-button.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":" ButtonHTMLAttributes, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" CSSProperties, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" MouseEvent } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" { Rocket } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"lucide-react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Status","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"loading\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"success\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"error\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Piece","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"x","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"y","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"spin","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"size","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"color","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"round","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"delay","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":" };","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"SuccessBurstButtonProps","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"extends","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Omit","color":"#79C0FF"},{"content":"<","color":"#E6EDF3"},{"content":"ButtonHTMLAttributes","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLButtonElement","color":"#FFA657"},{"content":">, ","color":"#E6EDF3"},{"content":"\"children\"","color":"#A5D6FF"},{"content":"> {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"label","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"loadingLabel","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"successLabel","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"errorLabel","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 클릭하면 실행할 비동기 작업. 성공하면 resolve, 실패하면 reject 하세요. */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"action","color":"#D2A8FF"},{"content":"?:","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Promise","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"unknown","color":"#79C0FF"},{"content":">;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 성공·실패 표시 후 처음 상태로 돌아가기까지 걸리는 시간(ms) */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"resetAfter","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 데모용: 스스로 버튼을 눌러 상태 변화를 반복해 보여 줍니다. */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"autoPlay","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"COLORS","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"\"#a5b4fc\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"#f0abfc\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"#fcd34d\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"#6ee7b7\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"#7dd3fc\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"#fda4af\"","color":"#A5D6FF"},{"content":"];","color":"#E6EDF3"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"fakeDeploy","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"new","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Promise","color":"#79C0FF"},{"content":"(","color":"#E6EDF3"},{"content":"resolve","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setTimeout","color":"#D2A8FF"},{"content":"(resolve, ","color":"#E6EDF3"},{"content":"1600","color":"#79C0FF"},{"content":"));","color":"#E6EDF3"}],[],[{"content":"// 위쪽으로 치우친 부채꼴 방향으로 조각들을 흩뿌립니다. (렌더 중이 아니라 이벤트 뒤에 호출해야 해요)","color":"#8B949E"}],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"makeConfetti","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"count","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"30","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Piece","color":"#FFA657"},{"content":"[] {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" Array.","color":"#E6EDF3"},{"content":"from","color":"#D2A8FF"},{"content":"({ length: count }, () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"angle","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"90","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" (Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.5","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"220","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" (Math.","color":"#E6EDF3"},{"content":"PI","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"180","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"distance","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"60","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"80","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" x: Math.","color":"#E6EDF3"},{"content":"cos","color":"#D2A8FF"},{"content":"(angle) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" distance ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1.5","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" y: Math.","color":"#E6EDF3"},{"content":"sin","color":"#D2A8FF"},{"content":"(angle) ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" distance,","color":"#E6EDF3"}],[{"content":" spin: (Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.5","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"720","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" size: ","color":"#E6EDF3"},{"content":"5","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"5","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" color: ","color":"#E6EDF3"},{"content":"COLORS","color":"#79C0FF"},{"content":"[Math.","color":"#E6EDF3"},{"content":"floor","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"COLORS","color":"#79C0FF"},{"content":".","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":")],","color":"#E6EDF3"}],[{"content":" round: Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.6","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" delay: Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"80","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" };","color":"#E6EDF3"}],[{"content":" });","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"SuccessBurstButton","color":"#D2A8FF"},{"content":"({","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"label","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"배포하기\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"loadingLabel","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"배포 중…\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"successLabel","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"배포 완료!\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"errorLabel","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"다시 시도\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"action","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" fakeDeploy,","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"resetAfter","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2200","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"autoPlay","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","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":"onClick","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":"SuccessBurstButtonProps","color":"#FFA657"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"status","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setStatus","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"Status","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"burst","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setBurst","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"<{ ","color":"#E6EDF3"},{"content":"id","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"pieces","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Piece","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":"buttonRef","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLButtonElement","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 성공·실패는 잠깐 보여 준 뒤 idle로 돌아갑니다. 상태가 바뀌면 이전 타이머는 정리돼요.","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":" (status ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"success\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" status ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"error\"","color":"#A5D6FF"},{"content":") ","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":"setStatus","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":"), resetAfter);","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":" }, [status, resetAfter]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 데모 모드: idle이 되면 잠시 뒤 사람 대신 버튼을 눌러 줍니다. 동작 줄이기 설정이면 멈춰요.","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":"autoPlay ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" status ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"matchMedia","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"(prefers-reduced-motion: reduce)\"","color":"#A5D6FF"},{"content":").matches) ","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":" buttonRef.current?.","color":"#E6EDF3"},{"content":"click","color":"#D2A8FF"},{"content":"(), ","color":"#E6EDF3"},{"content":"1300","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":" }, [autoPlay, status]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"async","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleClick","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"MouseEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLButtonElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#D2A8FF"},{"content":"?.(event);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// disabled 대신 상태로 막아야 로딩 중에도 키보드 포커스가 버튼에 남습니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (status ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"loading\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" status ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"success\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" event.defaultPrevented) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setStatus","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"loading\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"try","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"action","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setStatus","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"success\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setBurst","color":"#D2A8FF"},{"content":"({ id: Date.","color":"#E6EDF3"},{"content":"now","color":"#D2A8FF"},{"content":"(), pieces: ","color":"#E6EDF3"},{"content":"makeConfetti","color":"#D2A8FF"},{"content":"() });","color":"#E6EDF3"}],[{"content":" } ","color":"#E6EDF3"},{"content":"catch","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setStatus","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"error\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"message","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { idle: ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":", loading: loadingLabel, success: successLabel, error: ","color":"#E6EDF3"},{"content":"`실패했어요. ${","color":"#A5D6FF"},{"content":"errorLabel","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":" }[status];","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"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":"{...","color":"#FF7B72"},{"content":"props","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"buttonRef","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"handleClick","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"data-status","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"status","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-disabled","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"status ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"loading\"","color":"#A5D6FF"},{"content":" ","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":"`success-burst group relative isolate inline-flex h-14 items-center rounded-full text-[15px] font-semibold tracking-tight focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-indigo-300 ${","color":"#A5D6FF"},{"content":"className","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* 배경은 별도 층: 색은 transition으로 바뀌고, 그 아래(-z)에 파티클이 깔려 버튼 뒤에서 터져 나옵니다. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"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":"\"success-burst-surface absolute inset-0 rounded-full\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"burst ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"burst.id","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"pointer-events-none absolute left-1/2 top-1/2 -z-10\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"burst.pieces.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"piece","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","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":"\"success-burst-piece absolute\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ ","color":"#E6EDF3"},{"content":"\"--x\"","color":"#A5D6FF"},{"content":": ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"piece","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"x","color":"#E6EDF3"},{"content":"}px`","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"--y\"","color":"#A5D6FF"},{"content":": ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"piece","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"y","color":"#E6EDF3"},{"content":"}px`","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"--spin\"","color":"#A5D6FF"},{"content":": ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"piece","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"spin","color":"#E6EDF3"},{"content":"}deg`","color":"#A5D6FF"},{"content":", width: piece.size, height: piece.round ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" piece.size ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" piece.size ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.45","color":"#79C0FF"},{"content":", background: piece.color, borderRadius: piece.round ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"50%\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":", animationDelay: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"piece","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"delay","color":"#E6EDF3"},{"content":"}ms`","color":"#A5D6FF"},{"content":" } ","color":"#E6EDF3"},{"content":"as","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"CSSProperties","color":"#FFA657"},{"content":"}","color":"#FF7B72"}],[{"content":" />","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" )","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[],[{"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":"\"relative grid size-6 shrink-0 place-items-center\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Rocket","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"success-burst-face success-burst-rocket size-5\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"data-for","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"svg","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"viewBox","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0 0 24 24\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"stroke","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"currentColor\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"3","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"strokeLinecap","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"round\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"success-burst-face success-burst-spinner size-6\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"data-for","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"loading\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"circle","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"cx","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"12\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"cy","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"12\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"r","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"9\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeOpacity","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"0.25","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"path","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"d","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"M21 12a9 9 0 0 0-9-9\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"svg","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"viewBox","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0 0 24 24\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"stroke","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"currentColor\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"3","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"strokeLinecap","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"round\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeLinejoin","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"round\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"success-burst-face size-6\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"data-for","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"success\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* pathLength=1로 정규화하면 dashoffset 1→0 만으로 선이 그려집니다. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"path","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"success-burst-check\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"d","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"M5 12.5l4.5 4.5L19 7.5\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"pathLength","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"1","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"svg","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"viewBox","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0 0 24 24\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"stroke","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"currentColor\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"3","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"strokeLinecap","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"round\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"success-burst-face size-5\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"data-for","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"error\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"path","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"d","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"M6 6l12 12M18 6L6 18\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* 상태마다 글자 칸이 0fr ↔ 1fr로 접히고 펴져서, 버튼 너비가 원형 로딩과 각 문구 길이 사이를 부드럽게 오갑니다. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"([[","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":", label], [","color":"#E6EDF3"},{"content":"\"success\"","color":"#A5D6FF"},{"content":", successLabel], [","color":"#E6EDF3"},{"content":"\"error\"","color":"#A5D6FF"},{"content":", errorLabel]] ","color":"#E6EDF3"},{"content":"as","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":").","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(([","color":"#E6EDF3"},{"content":"face","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"text","color":"#FFA657"},{"content":"]) ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"face","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"success-burst-fold relative grid\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"data-fold","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"face","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":"\"min-w-0 overflow-hidden\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"success-burst-face block whitespace-nowrap pl-2.5\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"data-for","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"face","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"text","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"role","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"status\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"sr-only\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"message","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"`","color":"#A5D6FF"}],[{"content":" .success-burst { padding-inline: 1.5rem 1.75rem; color: #fff; transition: padding .45s cubic-bezier(.3,1.4,.5,1), color .3s, transform .2s; }","color":"#A5D6FF"}],[{"content":" .success-burst:hover { transform: translateY(-1px); }","color":"#A5D6FF"}],[{"content":" .success-burst:active { transform: scale(.97); }","color":"#A5D6FF"}],[{"content":" .success-burst-surface {","color":"#A5D6FF"}],[{"content":" background-color: #5b5bf6;","color":"#A5D6FF"}],[{"content":" background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%), linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);","color":"#A5D6FF"}],[{"content":" background-size: 100% 100%, 250% 100%;","color":"#A5D6FF"}],[{"content":" box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 12px 32px -10px var(--burst-glow, #6366f1);","color":"#A5D6FF"}],[{"content":" transition: background-color .35s, box-shadow .35s;","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" .success-burst:hover .success-burst-surface { animation: success-burst-shine 1.1s ease; }","color":"#A5D6FF"}],[{"content":" .success-burst-fold { grid-template-columns: 0fr; transition: grid-template-columns .45s cubic-bezier(.3,1.2,.5,1); }","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"idle\"] [data-fold=\"idle\"],","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"success\"] [data-fold=\"success\"],","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"error\"] [data-fold=\"error\"] { grid-template-columns: 1fr; }","color":"#A5D6FF"}],[],[{"content":" .success-burst[data-status=\"loading\"] { padding-inline: 1rem; cursor: progress; }","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"loading\"] .success-burst-surface { background-color: #4338ca; }","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"success\"] { color: #022c22; animation: success-burst-pop .5s cubic-bezier(.3,1.6,.5,1); }","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"success\"] .success-burst-surface { background-color: #34d399; --burst-glow: #10b981; }","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"error\"] { animation: success-burst-shake .4s; }","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"error\"] .success-burst-surface { background-color: #e11d48; --burst-glow: #f43f5e; }","color":"#A5D6FF"}],[{"content":" /* 성공하는 순간 바깥으로 퍼지는 고리 */","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"success\"]::after {","color":"#A5D6FF"}],[{"content":" content: \"\"; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #6ee7b7; pointer-events: none;","color":"#A5D6FF"}],[{"content":" animation: success-burst-ring .7s ease-out forwards;","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[],[{"content":" /* data-for가 현재 상태와 같은 조각만 보이게 합니다. */","color":"#A5D6FF"}],[{"content":" .success-burst-face { opacity: 0; transform: translateY(8px) scale(.6); transition: opacity .25s, transform .35s cubic-bezier(.3,1.5,.5,1); }","color":"#A5D6FF"}],[{"content":" .success-burst svg[data-for] { grid-area: 1 / 1; }","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"idle\"] [data-for=\"idle\"],","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"loading\"] [data-for=\"loading\"],","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"success\"] [data-for=\"success\"],","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"error\"] [data-for=\"error\"] { opacity: 1; transform: none; }","color":"#A5D6FF"}],[{"content":" /* 로딩이 시작되면 로켓은 오른쪽 위로 발사돼 사라집니다. */","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"loading\"] .success-burst-rocket { transform: translate(14px, -14px) scale(.6); }","color":"#A5D6FF"}],[{"content":" /* 원 전체가 아니라 호(path)만 돌려야 바깥 face의 등장 transform과 충돌하지 않아요. */","color":"#A5D6FF"}],[{"content":" .success-burst-spinner path { transform-origin: 12px 12px; animation: success-burst-spin .8s linear infinite; }","color":"#A5D6FF"}],[{"content":" .success-burst-check { stroke-dasharray: 1; stroke-dashoffset: 1; }","color":"#A5D6FF"}],[{"content":" .success-burst[data-status=\"success\"] .success-burst-check { stroke-dashoffset: 0; transition: stroke-dashoffset .4s .12s ease-out; }","color":"#A5D6FF"}],[],[{"content":" .success-burst-piece {","color":"#A5D6FF"}],[{"content":" left: 0; top: 0; opacity: 0;","color":"#A5D6FF"}],[{"content":" animation: success-burst-confetti 1.3s cubic-bezier(.12,.8,.3,1) forwards;","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" @keyframes success-burst-confetti {","color":"#A5D6FF"}],[{"content":" 0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); }","color":"#A5D6FF"}],[{"content":" 60% { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(calc(var(--spin) * .7)); }","color":"#A5D6FF"}],[{"content":" 100% { opacity: 0; transform: translate(calc(-50% + var(--x) * 1.15), calc(-50% + var(--y) + 46px)) rotate(var(--spin)); }","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" @keyframes success-burst-spin { to { transform: rotate(360deg); } }","color":"#A5D6FF"}],[{"content":" @keyframes success-burst-pop { 0% { transform: scale(.94); } 50% { transform: scale(1.07); } 100% { transform: scale(1); } }","color":"#A5D6FF"}],[{"content":" @keyframes success-burst-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.35, 1.7); } }","color":"#A5D6FF"}],[{"content":" @keyframes success-burst-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }","color":"#A5D6FF"}],[{"content":" @keyframes success-burst-shine { from { background-position: 0 0, 130% 0; } to { background-position: 0 0, -30% 0; } }","color":"#A5D6FF"}],[{"content":" @media (prefers-reduced-motion: reduce) {","color":"#A5D6FF"}],[{"content":" .success-burst, .success-burst *, .success-burst::after { animation: none !important; transition: none !important; }","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":"SuccessBurstButton;","color":"#E6EDF3"}]]},{"name":"demo.tsx","lines":[[{"content":"import","color":"#FF7B72"},{"content":" { SuccessBurstButton } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"@/components/ui/success-burst-button\"","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":"\"grid min-h-screen place-items-center bg-[#0a0a14] bg-[radial-gradient(ellipse_60%_50%_at_50%_60%,rgba(91,91,246,.22),transparent_70%)] p-8\"","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-center gap-3 text-center\"","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-medium tracking-[0.3em] text-indigo-200/60\"","color":"#A5D6FF"},{"content":">SUCCESS BURST BUTTON","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"h2","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-[26px] font-bold tracking-tight text-white sm:text-4xl\"","color":"#A5D6FF"},{"content":">첫 배포, 버튼 하나로","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mb-7 text-sm text-slate-400\"","color":"#A5D6FF"},{"content":">클릭 → 로딩 → 성공까지 한 번에 보여 줘요","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"SuccessBurstButton","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"autoPlay","color":"#79C0FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}]]}]}]}]]}]

예제에 포함된 파일