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:T3c4c,"use client"; import { Fragment, useEffect, useId, useRef, useState, type ChangeEvent, type ClipboardEvent, type HTMLAttributes, type KeyboardEvent } from "react"; import { Check, CircleAlert, LoaderCircle, MailCheck, RotateCcw, Sparkles } from "lucide-react"; type Status = "idle" | "checking" | "error" | "success"; export interface OtpCodeInputProps extends HTMLAttributes { /** 칸 개수 */ length?: number; /** 코드를 보낸 이메일(안내 문구에 표시) */ email?: string; /** 데모용 정답 코드. verify를 넘기면 쓰지 않습니다. */ demoCode?: string; /** 실제 검증 함수. true를 돌려주면 성공입니다. */ verify?: (code: string) => boolean | Promise; /** 재전송까지 기다리는 시간(초) */ resendSeconds?: number; onResend?: () => void; onVerified?: (code: string) => void; } const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); const clock = (seconds: number) => `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`; export function OtpCodeInput({ length = 6, email = "learner@aicoder.kr", demoCode = "246810", verify, resendSeconds = 30, onResend, onVerified, className = "", ...props }: OtpCodeInputProps) { const id = useId(); const [digits, setDigits] = useState(() => Array(length).fill("")); const [status, setStatus] = useState("idle"); const [seconds, setSeconds] = useState(resendSeconds); const [notice, setNotice] = useState(""); const [focused, setFocused] = useState(-1); const inputs = useRef<(HTMLInputElement | null)[]>([]); const locked = status === "checking" || status === "success"; const nextEmpty = digits.indexOf(""); // 재전송 카운트다운: 1초 뒤 1을 빼는 타이머를 값이 바뀔 때마다 다시 겁니다. useEffect(() => { if (seconds <= 0) return; const timer = setTimeout(() => setSeconds(value => value - 1), 1000); return () => clearTimeout(timer); }, [seconds]); // 틀렸을 때: 흔들림이 끝날 즈음 칸을 비우고 첫 칸으로 돌아갑니다. useEffect(() => { if (status !== "error") return; const timer = setTimeout(() => { setDigits(Array(length).fill("")); inputs.current[0]?.focus(); }, 650); return () => clearTimeout(timer); }, [status, length]); function focusBox(index: number) { const input = inputs.current[Math.max(0, Math.min(length - 1, index))]; input?.focus(); input?.select(); } async function check(code: string) { setStatus("checking"); const ok = await (verify ? verify(code) : wait(700).then(() => code === demoCode)); setStatus(ok ? "success" : "error"); if (ok) onVerified?.(code); } // 한 글자든 붙여 넣은 6글자든 같은 함수로: start 칸부터 차례로 채웁니다. function fill(start: number, text: string) { const chars = text.replace(/\D/g, "").slice(0, length - start).split(""); if (!chars.length || locked) return; const next = [...digits]; chars.forEach((char, offset) => (next[start + offset] = char)); setDigits(next); setStatus("idle"); setNotice(""); if (next.every(Boolean)) check(next.join("")); else focusBox(start + chars.length); } function clear(index: number) { setDigits(current => current.map((digit, i) => (i === index ? "" : digit))); if (status === "error") setStatus("idle"); } function handleKeyDown(event: KeyboardEvent, index: number) { if (locked) return; const { key } = event; if (/^\d$/.test(key)) { // 기본 입력을 막고 직접 채우면, 이미 숫자가 있는 칸도 깔끔하게 덮어써집니다. event.preventDefault(); fill(index, key); } else if (key === "Backspace") { event.preventDefault(); if (digits[index]) clear(index); else if (index > 0) { clear(index - 1); focusBox(index - 1); } } else if (key === "Delete") { event.preventDefault(); clear(index); } else if (key === "ArrowLeft" || key === "ArrowRight" || key === "Home" || key === "End") { event.preventDefault(); focusBox(key === "Home" ? 0 : key === "End" ? length - 1 : index + (key === "ArrowLeft" ? -1 : 1)); } else if (key.length === 1 && !event.ctrlKey && !event.metaKey) { event.preventDefault(); // 숫자가 아닌 글자는 무시 } } // 모바일 키보드나 SMS 자동 완성(one-time-code)은 keydown 없이 값이 바로 들어와서 여기서 처리합니다. function handleChange(event: ChangeEvent, index: number) { const value = event.currentTarget.value.replace(/\D/g, ""); const typed = digits[index] && value.length === 2 ? value.replace(digits[index], "") : value; if (typed) fill(index, typed); else if (!event.currentTarget.value) clear(index); else event.currentTarget.value = digits[index]; } function handlePaste(event: ClipboardEvent, index: number) { event.preventDefault(); const text = event.clipboardData.getData("text").replace(/\D/g, ""); fill(text.length >= length ? 0 : index, text); } function resend() { setSeconds(resendSeconds); setDigits(Array(length).fill("")); setStatus("idle"); setNotice(`${email}로 새 코드를 보냈어요.`); onResend?.(); focusBox(0); } function reset() { setDigits(Array(length).fill("")); setStatus("idle"); setNotice(""); setSeconds(resendSeconds); setTimeout(() => focusBox(0)); } const progress = seconds / resendSeconds; const success = status === "success"; return (

{/* 카드 위쪽에 깔리는 은은한 색 번짐 — 성공하면 초록으로 바뀝니다. */}

{!success && }

{success ? : }

{success ? "인증이 완료됐어요" : "이메일 인증"}

{success ? ( "이제 모든 실습을 이어서 할 수 있어요." ) : ( <> {email}로 보낸 코드를 입력하세요. )}

{digits.map((digit, index) => { const active = !locked && (focused === index || (focused === -1 && index === nextEmpty)); const tone = success ? "border-emerald-400 bg-emerald-50 text-emerald-600 shadow-[0_0_0_4px_rgba(16,185,129,.14),0_10px_24px_-10px_rgba(16,185,129,.7)]" : status === "error" && digit ? "border-rose-400 bg-rose-50 text-rose-600" : focused === index ? "border-indigo-500 bg-white text-slate-900 shadow-[0_0_0_4px_rgba(99,102,241,.16)]" : active ? "border-indigo-200 bg-white text-slate-900" : digit ? "border-slate-300 bg-white text-slate-900" : "border-slate-200 bg-slate-50 text-slate-900 hover:border-slate-300"; return ( {length % 2 === 0 && index === length / 2 && }

{ inputs.current[index] = element; }} value={digit} inputMode="numeric" pattern="[0-9]*" autoComplete={index === 0 ? "one-time-code" : "off"} aria-label={`${length}자리 중 ${index + 1}번째 숫자`} aria-invalid={status === "error" ? true : undefined} readOnly={locked} onKeyDown={event => handleKeyDown(event, index)} onChange={event => handleChange(event, index)} onPaste={event => handlePaste(event, index)} onFocus={event => { setFocused(index); event.currentTarget.select(); }} onBlur={() => setFocused(-1)} style={{ animationDelay: success ? `${index * 70}ms` : undefined }} className={`h-14 w-full rounded-2xl border-2 text-center text-2xl font-bold tabular-nums caret-transparent outline-none transition-[border-color,background-color,box-shadow,color] duration-200 sm:h-16 ${digit ? "otp-code-input-filled" : ""} ${success ? "otp-code-input-wave" : ""} ${tone}`} /> {/* 진짜 커서 대신 그리는 깜빡이는 막대: 다음에 입력될 칸을 알려 줍니다. */} {active && !digit && }

); })}

{status === "checking" && } {status === "error" && } {status === "checking" ? "확인하고 있어요…" : status === "error" ? "코드가 맞지 않아요. 다시 입력해 주세요." : success ? "본인 확인 완료!" : notice || "붙여 넣어도 한 번에 채워져요"}

{success ? ( ) : ( demoCode && !verify && ( 데모 {demoCode} ) )}

코드가 오지 않았나요?

); } export default OtpCodeInput;1e:Tcd30,

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\":\"자동으로 다음 칸으로 넘어가고 붙여넣기까지 되는 6자리 인증 코드 입력\",\"url\":\"https://aicoder.kr/library/otp-code-input\",\"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/otp-code-input\"}]}]}"}}],["$","div",null,{"className":"library_container__grs86","children":["$","$L1c",null,{"item":{"slug":"otp-code-input","tags":["React","Tailwind","키보드 접근성","붙여넣기","inputMode","폼"],"files":[{"name":"otp-code-input.tsx","content":"$1d","language":"tsx"},{"name":"demo.tsx","content":"import { OtpCodeInput } from \"@/components/ui/otp-code-input\";\n\nexport default function Demo() {\n return (\n

\n \n

\n );\n}","language":"tsx"}],"level":"기초","title":"인증 코드 입력","author":"AI Coder 예제","license":"MIT","category":"form","exercise":"length를 4로 바꿔 4자리 PIN 입력으로 만들어 보세요. resendSeconds를 10으로 줄이고, 재전송할 때마다 데모 코드가 바뀌도록 onResend를 확장해 보세요.","sourceUrl":"","objectives":["칸마다 input을 두고 ref 배열로 포커스를 옮겨 자동 이동·Backspace·화살표 키 다루기","한 글자 입력과 붙여넣기·SMS 자동 완성을 같은 fill 함수 하나로 처리하기","inputMode=\"numeric\"과 autoComplete=\"one-time-code\"로 모바일 숫자 키패드와 자동 입력 지원하기","상태(idle·checking·error·success)에 따라 흔들림·초록 빛·카운트다운 링을 바꿔 결과를 또렷하게 보여 주기"],"description":"자동으로 다음 칸으로 넘어가고 붙여넣기까지 되는 6자리 인증 코드 입력","previewHtml":"$1e","dependencies":"React · Tailwind CSS · lucide-react"},"highlighted":[{"name":"otp-code-input.tsx","lines":[[{"content":"\"use client\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"import","color":"#FF7B72"},{"content":" { Fragment, useEffect, useId, useRef, useState, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ChangeEvent, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ClipboardEvent, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" HTMLAttributes, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" KeyboardEvent } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" { Check, CircleAlert, LoaderCircle, MailCheck, RotateCcw, Sparkles } ","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":"\"checking\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"error\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"success\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"OtpCodeInputProps","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"extends","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"HTMLAttributes","color":"#79C0FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLDivElement","color":"#FFA657"},{"content":"> {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 칸 개수 */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"length","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":"email","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 데모용 정답 코드. verify를 넘기면 쓰지 않습니다. */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"demoCode","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 실제 검증 함수. true를 돌려주면 성공입니다. */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"verify","color":"#D2A8FF"},{"content":"?:","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"code","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Promise","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":">;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 재전송까지 기다리는 시간(초) */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"resendSeconds","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onResend","color":"#D2A8FF"},{"content":"?:","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"void","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onVerified","color":"#D2A8FF"},{"content":"?:","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"code","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"void","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"wait","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"ms","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"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, ms));","color":"#E6EDF3"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"clock","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"seconds","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"Math","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"floor","color":"#D2A8FF"},{"content":"(","color":"#A5D6FF"},{"content":"seconds","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"60","color":"#79C0FF"},{"content":")","color":"#A5D6FF"},{"content":"}:${","color":"#A5D6FF"},{"content":"String","color":"#D2A8FF"},{"content":"(","color":"#A5D6FF"},{"content":"seconds","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"%","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"60","color":"#79C0FF"},{"content":").","color":"#A5D6FF"},{"content":"padStart","color":"#D2A8FF"},{"content":"(","color":"#A5D6FF"},{"content":"2","color":"#79C0FF"},{"content":", ","color":"#A5D6FF"},{"content":"\"0\"","color":"#A5D6FF"},{"content":")","color":"#A5D6FF"},{"content":"}`","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"OtpCodeInput","color":"#D2A8FF"},{"content":"({","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"length","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"6","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"email","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"learner@aicoder.kr\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"demoCode","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"246810\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"verify","color":"#FFA657"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"resendSeconds","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"30","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onResend","color":"#FFA657"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onVerified","color":"#FFA657"},{"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":"...","color":"#FF7B72"},{"content":"props","color":"#FFA657"}],[{"content":"}","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"OtpCodeInputProps","color":"#FFA657"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useId","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"digits","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setDigits","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"[]>(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Array","color":"#D2A8FF"},{"content":"(length).","color":"#E6EDF3"},{"content":"fill","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"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":"seconds","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setSeconds","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(resendSeconds);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"notice","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setNotice","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"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":"-","color":"#FF7B72"},{"content":"1","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"inputs","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<(","color":"#E6EDF3"},{"content":"HTMLInputElement","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":")[]>([]);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"locked","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" status ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"checking\"","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":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"nextEmpty","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" digits.","color":"#E6EDF3"},{"content":"indexOf","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 재전송 카운트다운: 1초 뒤 1을 빼는 타이머를 값이 바뀔 때마다 다시 겁니다.","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":" (seconds ","color":"#E6EDF3"},{"content":"<=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"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":"setSeconds","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"value","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" value ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":"), ","color":"#E6EDF3"},{"content":"1000","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":" }, [seconds]);","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":" (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":" ","color":"#E6EDF3"},{"content":"setDigits","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"Array","color":"#D2A8FF"},{"content":"(length).","color":"#E6EDF3"},{"content":"fill","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":"));","color":"#E6EDF3"}],[{"content":" inputs.current[","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"]?.","color":"#E6EDF3"},{"content":"focus","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" }, ","color":"#E6EDF3"},{"content":"650","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":" }, [status, length]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"focusBox","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"index","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":"input","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" inputs.current[Math.","color":"#E6EDF3"},{"content":"max","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", Math.","color":"#E6EDF3"},{"content":"min","color":"#D2A8FF"},{"content":"(length ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", index))];","color":"#E6EDF3"}],[{"content":" input?.","color":"#E6EDF3"},{"content":"focus","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" input?.","color":"#E6EDF3"},{"content":"select","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"async","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"check","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"code","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setStatus","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"checking\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ok","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" (verify ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"verify","color":"#D2A8FF"},{"content":"(code) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"wait","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"700","color":"#79C0FF"},{"content":").","color":"#E6EDF3"},{"content":"then","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" code ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" demoCode));","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setStatus","color":"#D2A8FF"},{"content":"(ok ","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":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (ok) ","color":"#E6EDF3"},{"content":"onVerified","color":"#D2A8FF"},{"content":"?.(code);","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 한 글자든 붙여 넣은 6글자든 같은 함수로: start 칸부터 차례로 채웁니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"start","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"text","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"chars","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" text.","color":"#E6EDF3"},{"content":"replace","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"/","color":"#A5D6FF"},{"content":"\\D","color":"#79C0FF"},{"content":"/","color":"#A5D6FF"},{"content":"g","color":"#FF7B72"},{"content":", ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":").","color":"#E6EDF3"},{"content":"slice","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", length ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" start).","color":"#E6EDF3"},{"content":"split","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"chars.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" locked) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"next","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"digits];","color":"#E6EDF3"}],[{"content":" chars.","color":"#E6EDF3"},{"content":"forEach","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"char","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"offset","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (next[start ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" offset] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" char));","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setDigits","color":"#D2A8FF"},{"content":"(next);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setStatus","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setNotice","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (next.","color":"#E6EDF3"},{"content":"every","color":"#D2A8FF"},{"content":"(Boolean)) ","color":"#E6EDF3"},{"content":"check","color":"#D2A8FF"},{"content":"(next.","color":"#E6EDF3"},{"content":"join","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":"));","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"focusBox","color":"#D2A8FF"},{"content":"(start ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" chars.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"clear","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setDigits","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"current","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" current.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"digit","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (i ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" index ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" digit)));","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (status ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"error\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"setStatus","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":");","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":"HTMLInputElement","color":"#FFA657"},{"content":">, ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (locked) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":" } ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" event;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"/","color":"#A5D6FF"},{"content":"^","color":"#FF7B72"},{"content":"\\d","color":"#79C0FF"},{"content":"$$","color":"#FF7B72"},{"content":"/","color":"#A5D6FF"},{"content":".","color":"#E6EDF3"},{"content":"test","color":"#D2A8FF"},{"content":"(key)) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 기본 입력을 막고 직접 채우면, 이미 숫자가 있는 칸도 깔끔하게 덮어써집니다.","color":"#8B949E"}],[{"content":" event.","color":"#E6EDF3"},{"content":"preventDefault","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#D2A8FF"},{"content":"(index, key);","color":"#E6EDF3"}],[{"content":" } ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (key ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"Backspace\"","color":"#A5D6FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" event.","color":"#E6EDF3"},{"content":"preventDefault","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (digits[index]) ","color":"#E6EDF3"},{"content":"clear","color":"#D2A8FF"},{"content":"(index);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (index ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"clear","color":"#D2A8FF"},{"content":"(index ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"focusBox","color":"#D2A8FF"},{"content":"(index ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[{"content":" } ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (key ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"Delete\"","color":"#A5D6FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" event.","color":"#E6EDF3"},{"content":"preventDefault","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"clear","color":"#D2A8FF"},{"content":"(index);","color":"#E6EDF3"}],[{"content":" } ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (key ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"ArrowLeft\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" key ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"ArrowRight\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" key ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"Home\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" key ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"End\"","color":"#A5D6FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" event.","color":"#E6EDF3"},{"content":"preventDefault","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"focusBox","color":"#D2A8FF"},{"content":"(key ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"Home\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" key ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"End\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" length ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" index ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" (key ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"ArrowLeft\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":"));","color":"#E6EDF3"}],[{"content":" } ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (key.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"event.ctrlKey ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"event.metaKey) {","color":"#E6EDF3"}],[{"content":" event.","color":"#E6EDF3"},{"content":"preventDefault","color":"#D2A8FF"},{"content":"(); ","color":"#E6EDF3"},{"content":"// 숫자가 아닌 글자는 무시","color":"#8B949E"}],[{"content":" }","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 모바일 키보드나 SMS 자동 완성(one-time-code)은 keydown 없이 값이 바로 들어와서 여기서 처리합니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleChange","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ChangeEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLInputElement","color":"#FFA657"},{"content":">, ","color":"#E6EDF3"},{"content":"index","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":"value","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" event.currentTarget.value.","color":"#E6EDF3"},{"content":"replace","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"/","color":"#A5D6FF"},{"content":"\\D","color":"#79C0FF"},{"content":"/","color":"#A5D6FF"},{"content":"g","color":"#FF7B72"},{"content":", ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"typed","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" digits[index] ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" value.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" value.","color":"#E6EDF3"},{"content":"replace","color":"#D2A8FF"},{"content":"(digits[index], ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" value;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (typed) ","color":"#E6EDF3"},{"content":"fill","color":"#D2A8FF"},{"content":"(index, typed);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"event.currentTarget.value) ","color":"#E6EDF3"},{"content":"clear","color":"#D2A8FF"},{"content":"(index);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" event.currentTarget.value ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" digits[index];","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handlePaste","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ClipboardEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLInputElement","color":"#FFA657"},{"content":">, ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" event.","color":"#E6EDF3"},{"content":"preventDefault","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"text","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" event.clipboardData.","color":"#E6EDF3"},{"content":"getData","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":").","color":"#E6EDF3"},{"content":"replace","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"/","color":"#A5D6FF"},{"content":"\\D","color":"#79C0FF"},{"content":"/","color":"#A5D6FF"},{"content":"g","color":"#FF7B72"},{"content":", ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#D2A8FF"},{"content":"(text.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":">=","color":"#FF7B72"},{"content":" length ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" index, text);","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"resend","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setSeconds","color":"#D2A8FF"},{"content":"(resendSeconds);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setDigits","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"Array","color":"#D2A8FF"},{"content":"(length).","color":"#E6EDF3"},{"content":"fill","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":"));","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setStatus","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setNotice","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"email","color":"#E6EDF3"},{"content":"}로 새 코드를 보냈어요.`","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onResend","color":"#D2A8FF"},{"content":"?.();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"focusBox","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"reset","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setDigits","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"Array","color":"#D2A8FF"},{"content":"(length).","color":"#E6EDF3"},{"content":"fill","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":"));","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setStatus","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setNotice","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setSeconds","color":"#D2A8FF"},{"content":"(resendSeconds);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setTimeout","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"focusBox","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"));","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"progress","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" seconds ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" resendSeconds;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"success","color":"#79C0FF"},{"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":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"{...","color":"#FF7B72"},{"content":"props","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`otp-code-input relative w-full max-w-[440px] break-keep ${","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":"`relative overflow-hidden rounded-[28px] border bg-white p-6 shadow-[0_30px_70px_-30px_rgba(67,56,202,.45),0_2px_6px_rgba(15,23,42,.06)] transition-colors duration-500 sm:p-7 ${","color":"#A5D6FF"},{"content":"success","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"border-emerald-200\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"border-slate-200/80\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* 카드 위쪽에 깔리는 은은한 색 번짐 — 성공하면 초록으로 바뀝니다. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","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-24 left-1/2 h-48 w-[120%] -translate-x-1/2 rounded-full blur-3xl transition-colors duration-700 ${","color":"#A5D6FF"},{"content":"success","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"bg-emerald-200/60\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"bg-indigo-200/50\"}`","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":"\"relative flex items-start gap-4\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative shrink-0\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{!","color":"#FF7B72"},{"content":"success ","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":"\"otp-code-input-ping absolute inset-0 rounded-2xl bg-indigo-400/40\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`relative grid size-12 place-items-center rounded-2xl text-white shadow-lg transition-colors duration-500 ${","color":"#A5D6FF"},{"content":"success","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"bg-emerald-500 shadow-emerald-500/30\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"bg-gradient-to-br from-indigo-500 to-violet-500 shadow-indigo-500/30\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"success ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"Check","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"3","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"otp-code-input-pop size-6\"","color":"#A5D6FF"},{"content":" /> ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"MailCheck","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-6\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"min-w-0\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"h2","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"id","color":"#E6EDF3"},{"content":"}-title`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-lg font-bold tracking-tight text-slate-900\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"success ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"인증이 완료됐어요\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"이메일 인증\"","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"id","color":"#E6EDF3"},{"content":"}-desc`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-1 text-sm leading-relaxed text-slate-500\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"success ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"\"이제 모든 실습을 이어서 할 수 있어요.\"","color":"#A5D6FF"}],[{"content":" ) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <>","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"b","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"font-semibold text-slate-700\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"email","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":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"role","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"group\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"aria-labelledby","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"id","color":"#E6EDF3"},{"content":"}-title`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-describedby","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"id","color":"#E6EDF3"},{"content":"}-desc`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`relative mt-5 flex items-center justify-between gap-1.5 sm:gap-2 ${","color":"#A5D6FF"},{"content":"status","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"error\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"otp-code-input-shake\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"digits.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"digit","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"active","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"locked ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" (focused ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" index ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" (focused ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" index ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" nextEmpty));","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"tone","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" success","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"border-emerald-400 bg-emerald-50 text-emerald-600 shadow-[0_0_0_4px_rgba(16,185,129,.14),0_10px_24px_-10px_rgba(16,185,129,.7)]\"","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":"&&","color":"#FF7B72"},{"content":" digit","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"border-rose-400 bg-rose-50 text-rose-600\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" focused ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" index","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"border-indigo-500 bg-white text-slate-900 shadow-[0_0_0_4px_rgba(99,102,241,.16)]\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" active","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"border-indigo-200 bg-white text-slate-900\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" digit","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"border-slate-300 bg-white text-slate-900\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"border-slate-200 bg-slate-50 text-slate-900 hover:border-slate-300\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Fragment","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"index","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"length ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" index ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" length ","color":"#E6EDF3"},{"content":"/","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"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":"\"h-0.5 w-2.5 shrink-0 rounded-full bg-slate-300 sm:w-3\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative min-w-0 flex-1 sm:max-w-14\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"input","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"element","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" inputs.current[index] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" element;","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"value","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"digit","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"inputMode","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"numeric\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"pattern","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"[0-9]*\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"autoComplete","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"index ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"one-time-code\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"off\"","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"length","color":"#E6EDF3"},{"content":"}자리 중 ${","color":"#A5D6FF"},{"content":"index","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-invalid","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"status ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"error\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"readOnly","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"locked","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onKeyDown","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleKeyDown","color":"#D2A8FF"},{"content":"(event, index)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onChange","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleChange","color":"#D2A8FF"},{"content":"(event, index)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPaste","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handlePaste","color":"#D2A8FF"},{"content":"(event, index)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onFocus","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setFocused","color":"#D2A8FF"},{"content":"(index);","color":"#E6EDF3"}],[{"content":" event.currentTarget.","color":"#E6EDF3"},{"content":"select","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onBlur","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setFocused","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"1","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ animationDelay: success ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"70","color":"#79C0FF"},{"content":"}ms`","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`h-14 w-full rounded-2xl border-2 text-center text-2xl font-bold tabular-nums caret-transparent outline-none transition-[border-color,background-color,box-shadow,color] duration-200 sm:h-16 ${","color":"#A5D6FF"},{"content":"digit","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"otp-code-input-filled\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"\"} ${","color":"#A5D6FF"},{"content":"success","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"otp-code-input-wave\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"\"} ${","color":"#A5D6FF"},{"content":"tone","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* 진짜 커서 대신 그리는 깜빡이는 막대: 다음에 입력될 칸을 알려 줍니다. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"active ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"digit ","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":"`otp-code-input-caret pointer-events-none absolute top-1/2 left-1/2 h-6 w-0.5 -translate-1/2 rounded-full bg-indigo-500 ${","color":"#A5D6FF"},{"content":"focused","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":"\"\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"opacity-70\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" />","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":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative mt-3.5 flex min-h-7 flex-wrap items-center justify-between gap-x-3 gap-y-2 text-[13px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","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":"`flex items-center gap-1.5 font-medium ${","color":"#A5D6FF"},{"content":"status","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"error\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"text-rose-600\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"success","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"text-emerald-600\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"text-slate-500\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"status ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"checking\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"LoaderCircle","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-4 animate-spin text-indigo-500\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"status ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"error\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"CircleAlert","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-4\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"status ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"checking\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"확인하고 있어요…\"","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":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"코드가 맞지 않아요. 다시 입력해 주세요.\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" success ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"본인 확인 완료!\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" notice ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"붙여 넣어도 한 번에 채워져요\"","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"success ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"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":"reset","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex items-center gap-1 rounded-full px-2 py-1 font-semibold text-emerald-700 transition hover:bg-emerald-50 focus-visible:outline-2 focus-visible:outline-emerald-500\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"RotateCcw","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5\"","color":"#A5D6FF"},{"content":" /> 다시 해보기","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" demoCode ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"verify ","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":"\"inline-flex items-center gap-1.5 rounded-full bg-indigo-50 px-2.5 py-1 text-xs font-medium text-indigo-600 ring-1 ring-indigo-100\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Sparkles","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5\"","color":"#A5D6FF"},{"content":" /> 데모 <","color":"#E6EDF3"},{"content":"b","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"font-mono tracking-[0.15em]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"demoCode","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":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative mt-4 flex items-center justify-between gap-2 border-t border-slate-100 pt-3.5 text-[13px] sm:text-sm\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-slate-500\"","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":"resend","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"disabled","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"seconds ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" success","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex shrink-0 items-center gap-2 rounded-full px-3 py-1.5 font-semibold whitespace-nowrap text-indigo-600 transition hover:bg-indigo-50 focus-visible:outline-2 focus-visible:outline-indigo-500 disabled:cursor-not-allowed disabled:text-slate-400 disabled:hover:bg-transparent\"","color":"#A5D6FF"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"seconds ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"success ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 남은 시간을 원 둘레로: strokeDashoffset을 1초씩 줄이면 시계처럼 줄어듭니다.","color":"#8B949E"}],[{"content":" <","color":"#E6EDF3"},{"content":"svg","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"viewBox","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0 0 20 20\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-4 -rotate-90\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"circle","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"cx","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"10\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"cy","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"10\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"r","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"8\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"2.5\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"stroke-slate-200\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"circle","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"cx","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"10\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"cy","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"10\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"r","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"8\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"2.5\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeLinecap","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"round\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"pathLength","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"100","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"strokeDasharray","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"100\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeDashoffset","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"100","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" progress ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"100","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"stroke-indigo-500 transition-[stroke-dashoffset] duration-1000 ease-linear\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" )","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"seconds ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"success ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"tabular-nums\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"clock","color":"#D2A8FF"},{"content":"(seconds)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" 후 재전송 ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"코드 다시 보내기\"","color":"#A5D6FF"},{"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":" @keyframes otp-code-input-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }","color":"#A5D6FF"}],[{"content":" @keyframes otp-code-input-filled { 0% { transform: scale(.86); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }","color":"#A5D6FF"}],[{"content":" @keyframes otp-code-input-wave { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } }","color":"#A5D6FF"}],[{"content":" @keyframes otp-code-input-caret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }","color":"#A5D6FF"}],[{"content":" @keyframes otp-code-input-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(1.5); opacity: 0; } }","color":"#A5D6FF"}],[{"content":" @keyframes otp-code-input-pop { 0% { transform: scale(0) rotate(-45deg); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }","color":"#A5D6FF"}],[{"content":" .otp-code-input-shake { animation: otp-code-input-shake .45s ease-in-out; }","color":"#A5D6FF"}],[{"content":" .otp-code-input-filled { animation: otp-code-input-filled .25s ease-out; }","color":"#A5D6FF"}],[{"content":" .otp-code-input-wave { animation: otp-code-input-wave .5s ease-out both; }","color":"#A5D6FF"}],[{"content":" .otp-code-input-caret { animation: otp-code-input-caret 1s steps(1) infinite; }","color":"#A5D6FF"}],[{"content":" .otp-code-input-ping { animation: otp-code-input-ping 2.4s cubic-bezier(0,0,.2,1) infinite; }","color":"#A5D6FF"}],[{"content":" .otp-code-input-pop { animation: otp-code-input-pop .45s cubic-bezier(.2,.9,.3,1.4); }","color":"#A5D6FF"}],[{"content":" @media (prefers-reduced-motion: reduce) {","color":"#A5D6FF"}],[{"content":" .otp-code-input-shake, .otp-code-input-filled, .otp-code-input-wave, .otp-code-input-caret, .otp-code-input-ping, .otp-code-input-pop { 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":"OtpCodeInput;","color":"#E6EDF3"}]]},{"name":"demo.tsx","lines":[[{"content":"import","color":"#FF7B72"},{"content":" { OtpCodeInput } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"@/components/ui/otp-code-input\"","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-[#eef0f8] bg-[radial-gradient(circle_at_15%_20%,#dcd6ff,transparent_40%),radial-gradient(circle_at_85%_85%,#cdeffd,transparent_40%)] p-4 sm:p-8\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"OtpCodeInput","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"email","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"learner@aicoder.kr\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"demoCode","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"246810\"","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":"자동으로 다음 칸으로 넘어가고 붙여넣기까지 되는 6자리 인증 코드 입력"}],["$","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/otp-code-input"}],["$","meta","8",{"name":"naver-site-verification","content":"3347449a2b36f2b5cea3e0cd9fb49ae3959ff348"}],["$","meta","9",{"property":"og:title","content":"인증 코드 입력 · AI Coder"}],["$","meta","10",{"property":"og:description","content":"자동으로 다음 칸으로 넘어가고 붙여넣기까지 되는 6자리 인증 코드 입력"}],["$","meta","11",{"property":"og:url","content":"https://aicoder.kr/library/otp-code-input"}],["$","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":"자동으로 다음 칸으로 넘어가고 붙여넣기까지 되는 6자리 인증 코드 입력"}],["$","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",{}]]

예제에 포함된 파일