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:T4d7e,"use client"; import { useEffect, useId, useRef, useState, type HTMLAttributes, type InputHTMLAttributes, type ReactNode, type Ref, type SyntheticEvent } from "react"; import { ArrowRight, Check, Eye, EyeOff, GitBranch, LoaderCircle, LockKeyhole, Mail, MessageCircle, Sparkles } from "lucide-react"; export type LoginData = { email: string; password: string; remember: boolean }; type Status = "idle" | "loading" | "success"; export interface GlowLoginCardProps extends Omit, "onSubmit"> { title?: string; subtitle?: string; defaultEmail?: string; /** "비밀번호 찾기" 링크 주소 */ forgotHref?: string; /** 실제 로그인 요청. 넘기지 않으면 1.4초 뒤 성공하는 가짜 요청으로 흉내 냅니다. */ onLogin?: (data: LoginData) => Promise | void; /** 소셜 버튼을 눌렀을 때 호출됩니다. ("google" · "github" · "kakao") */ onSocialLogin?: (provider: string) => Promise | void; } const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); function validateEmail(value: string) { if (!value.trim()) return "이메일을 입력해 주세요."; return EMAIL_PATTERN.test(value.trim()) ? "" : "이메일 형식을 확인해 주세요. 예) you@aicoder.kr"; } function validatePassword(value: string) { if (!value) return "비밀번호를 입력해 주세요."; return value.length >= 8 ? "" : "비밀번호는 8자 이상이에요."; } // 규칙을 하나 통과할 때마다 1점. 0~4점이 강도 막대 4칸과 그대로 대응합니다. function getStrength(password: string) { if (!password) return 0; const rules = [password.length >= 8, /[a-z]/i.test(password) && /\d/.test(password), /[^a-z0-9]/i.test(password), password.length >= 12]; return Math.max(1, rules.filter(Boolean).length); } const STRENGTH = [ { label: "8자 이상 · 숫자 포함", bar: "bg-white/10", text: "text-slate-400" }, { label: "약함", bar: "bg-rose-400", text: "text-rose-300" }, { label: "보통", bar: "bg-amber-400", text: "text-amber-200" }, { label: "강함", bar: "bg-emerald-400", text: "text-emerald-300" }, { label: "매우 강함", bar: "bg-cyan-300", text: "text-cyan-200" }, ]; // 브랜드 로고 대신 이니셜·일반 아이콘으로 만든 표시입니다. 실제 서비스에선 각 사 가이드의 로고를 쓰세요. const PROVIDERS = [ { id: "google", name: "Google", style: "bg-white text-slate-900 hover:bg-slate-100", mark: G }, { id: "github", name: "GitHub", style: "bg-[#24292f] text-white ring-1 ring-white/15 ring-inset hover:bg-[#30363d]", mark: }, { id: "kakao", name: "카카오", style: "bg-[#fee500] text-[#191600] hover:bg-[#ffeb3b]", mark: }, ]; type FieldProps = InputHTMLAttributes & { id: string; label: string; icon: ReactNode; value: string; error?: string; describedBy?: string; trailing?: ReactNode; inputRef?: Ref; }; // 떠오르는 라벨 입력칸: 포커스되거나 값이 있으면 라벨이 작아지며 위로 올라갑니다. function Field({ id, label, icon, value, error, describedBy, trailing, inputRef, ...input }: FieldProps) { const errorId = `${id}-error`; const floated = value ? "-translate-y-[118%] scale-[.78]" : "-translate-y-1/2"; return (

svg]:size-4 ${error ? "text-rose-300" : "text-slate-500 group-focus-within/field:text-violet-300"}`}>{icon} {label} {trailing}

{error &&

{error}

}

); } export function GlowLoginCard({ title = "다시 오신 걸 환영해요", subtitle = "어제 하던 실습을 이어서 만들어 봐요.", defaultEmail = "", forgotHref = "#", onLogin, onSocialLogin, className = "", ...props }: GlowLoginCardProps) { const id = useId(); const [email, setEmail] = useState(defaultEmail); const [password, setPassword] = useState(""); const [remember, setRemember] = useState(true); const [showPassword, setShowPassword] = useState(false); const [touched, setTouched] = useState({ email: false, password: false }); const [status, setStatus] = useState("idle"); const [provider, setProvider] = useState(""); const [message, setMessage] = useState(""); const [failed, setFailed] = useState(false); const emailRef = useRef(null); const passwordRef = useRef(null); // 오류는 칸을 한 번 벗어난 뒤(touched)부터 보여 줘야 입력 중에 혼나지 않습니다. const emailError = touched.email ? validateEmail(email) : ""; const passwordError = touched.password ? validatePassword(password) : ""; const strength = getStrength(password); const tone = status === "success" ? "success" : emailError || passwordError || failed ? "error" : "idle"; // 성공 화면은 잠시 보여 준 뒤 되돌립니다. 실제 서비스라면 여기서 페이지를 이동하세요. useEffect(() => { if (status !== "success") return; const timer = setTimeout(() => setStatus("idle"), 2800); return () => clearTimeout(timer); }, [status]); async function run(task: () => Promise | void, doneMessage: string) { setStatus("loading"); setFailed(false); setMessage(""); try { await task(); setStatus("success"); setMessage(doneMessage); } catch { setStatus("idle"); setFailed(true); setMessage("로그인하지 못했어요. 잠시 후 다시 시도해 주세요."); } } // 폼 제출 대신 '제출 버튼의 클릭'에서 처리합니다. Enter 키를 눌러도 브라우저가 이 버튼을 // 대신 클릭해 주므로 같은 길로 들어오고, 폼 제출이 막힌 샌드박스 미리보기에서도 동작합니다. function handleSubmit(event: SyntheticEvent) { event.preventDefault(); if (status !== "idle") return; setTouched({ email: true, password: true }); // 첫 번째로 틀린 칸에 포커스를 옮기면 스크린 리더가 연결된 오류 문구를 바로 읽어 줍니다. if (validateEmail(email)) return emailRef.current?.focus(); if (validatePassword(password)) return passwordRef.current?.focus(); const data = { email: email.trim(), password, remember }; run(() => (onLogin ? onLogin(data) : wait(1400)), `${data.email} 님, 환영해요!`); } async function handleSocial(item: (typeof PROVIDERS)[number]) { if (status !== "idle") return; setProvider(item.id); await run(() => (onSocialLogin ? onSocialLogin(item.id) : wait(1200)), `${item.name} 계정으로 로그인했어요.`); setProvider(""); } return (

{/* 같은 회전 그라데이션을 두 번 씁니다: 뒤에서 흐리게 번지는 빛 + 1.5px 테두리 */}

AI CODER

{title}

{subtitle}

간편 로그인

{/* 소셜 줄 자체도 컨테이너라서, 칸이 넓을 때만 서비스 이름을 함께 보여 줍니다. */}

{PROVIDERS.map(item => ( ))}

또는 이메일로

} type="email" inputMode="email" autoComplete="email" value={email} error={emailError} onChange={event => setEmail(event.currentTarget.value)} onBlur={() => setTouched(current => ({ ...current, email: true }))} />

} type={showPassword ? "text" : "password"} autoComplete="current-password" value={password} error={passwordError} describedBy={`${id}-strength`} onChange={event => setPassword(event.currentTarget.value)} onBlur={() => setTouched(current => ({ ...current, password: true }))} trailing={ } />

{[0, 1, 2, 3].map(index => ( ))}

{strength > 0 && 비밀번호 강도 } {STRENGTH[strength].label}

setRemember(event.currentTarget.checked)} className="peer sr-only" /> 로그인 상태 유지 비밀번호 찾기

{failed &&

{message}

}

{status === "loading" ? "로그인 중입니다." : status === "success" ? message : ""}

); } export default GlowLoginCard;1e:T1052e,

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\":\"빛이 테두리를 도는 로그인 카드 — 떠오르는 라벨·강도 표시·소셜 로그인\",\"url\":\"https://aicoder.kr/library/glow-login-card\",\"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/glow-login-card\"}]}]}"}}],["$","div",null,{"className":"library_container__grs86","children":["$","$L1c",null,{"item":{"slug":"glow-login-card","tags":["React","Tailwind","폼 검증","접근성","컨테이너 쿼리","CSS @property"],"files":[{"name":"glow-login-card.tsx","content":"$1d","language":"tsx"},{"name":"demo.tsx","content":"import { GlowLoginCard } from \"@/components/ui/glow-login-card\";\n\nexport default function Demo() {\n return (\n

\n \n

\n );\n}","language":"tsx"}],"level":"응용","title":"글로우 로그인 카드","author":"AI Coder 예제","license":"MIT","category":"form","exercise":"강도 규칙에 '대문자 포함'을 추가해 5칸 막대로 늘려 보세요. onLogin에 일부러 실패하는 함수(throw)를 넘겨 오류 상태의 빨간 테두리를 확인해 보세요.","sourceUrl":"","objectives":[":placeholder-shown 대신 상태값과 peer-focus로 떠오르는 라벨 만들기","칸을 벗어난 뒤(touched)부터 오류를 보여 주고 aria-invalid·aria-describedby로 오류 문구 연결하기","규칙 점수로 비밀번호 강도 막대를 채우고 aria-live로 변화를 알려 주기","@container 쿼리로 카드 너비에 따라 1단·2단 레이아웃을 바꾸고, @property 색 변수로 상태별 테두리 빛을 부드럽게 전환하기"],"description":"빛이 테두리를 도는 로그인 카드 — 떠오르는 라벨·강도 표시·소셜 로그인","previewHtml":"$1e","dependencies":"React · Tailwind CSS · lucide-react"},"highlighted":[{"name":"glow-login-card.tsx","lines":[[{"content":"\"use client\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"import","color":"#FF7B72"},{"content":" { useEffect, useId, useRef, useState, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" HTMLAttributes, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" InputHTMLAttributes, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ReactNode, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" Ref, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" SyntheticEvent } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" { ArrowRight, Check, Eye, EyeOff, GitBranch, LoaderCircle, LockKeyhole, Mail, MessageCircle, Sparkles } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"lucide-react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"LoginData","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"email","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"password","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"remember","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":" };","color":"#E6EDF3"}],[{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Status","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"loading\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"success\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"GlowLoginCardProps","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"extends","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Omit","color":"#79C0FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLAttributes","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLDivElement","color":"#FFA657"},{"content":">, ","color":"#E6EDF3"},{"content":"\"onSubmit\"","color":"#A5D6FF"},{"content":"> {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"title","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"subtitle","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"defaultEmail","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** \"비밀번호 찾기\" 링크 주소 */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"forgotHref","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 실제 로그인 요청. 넘기지 않으면 1.4초 뒤 성공하는 가짜 요청으로 흉내 냅니다. */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"onLogin","color":"#D2A8FF"},{"content":"?:","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"data","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"LoginData","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Promise","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"void","color":"#79C0FF"},{"content":"> ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"void","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 소셜 버튼을 눌렀을 때 호출됩니다. (\"google\" · \"github\" · \"kakao\") */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"onSocialLogin","color":"#D2A8FF"},{"content":"?:","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"provider","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Promise","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"void","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":"EMAIL_PATTERN","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" /","color":"#A5D6FF"},{"content":"^","color":"#FF7B72"},{"content":"[","color":"#79C0FF"},{"content":"^","color":"#FF7B72"},{"content":"\\s@]","color":"#79C0FF"},{"content":"+","color":"#FF7B72"},{"content":"@","color":"#A5D6FF"},{"content":"[","color":"#79C0FF"},{"content":"^","color":"#FF7B72"},{"content":"\\s@]","color":"#79C0FF"},{"content":"+","color":"#FF7B72"},{"content":"\\.","color":"#7EE787"},{"content":"[","color":"#79C0FF"},{"content":"^","color":"#FF7B72"},{"content":"\\s@]","color":"#79C0FF"},{"content":"{2,}$","color":"#FF7B72"},{"content":"/","color":"#A5D6FF"},{"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":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"validateEmail","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"value","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"value.","color":"#E6EDF3"},{"content":"trim","color":"#D2A8FF"},{"content":"()) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"이메일을 입력해 주세요.\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"EMAIL_PATTERN","color":"#79C0FF"},{"content":".","color":"#E6EDF3"},{"content":"test","color":"#D2A8FF"},{"content":"(value.","color":"#E6EDF3"},{"content":"trim","color":"#D2A8FF"},{"content":"()) ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"이메일 형식을 확인해 주세요. 예) you@aicoder.kr\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"validatePassword","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"value","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"value) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"비밀번호를 입력해 주세요.\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" value.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":">=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"8","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"비밀번호는 8자 이상이에요.\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"// 규칙을 하나 통과할 때마다 1점. 0~4점이 강도 막대 4칸과 그대로 대응합니다.","color":"#8B949E"}],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"getStrength","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"password","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"password) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"rules","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [password.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":">=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"8","color":"#79C0FF"},{"content":",","color":"#E6EDF3"},{"content":" /","color":"#A5D6FF"},{"content":"[a-z]","color":"#79C0FF"},{"content":"/","color":"#A5D6FF"},{"content":"i","color":"#FF7B72"},{"content":".","color":"#E6EDF3"},{"content":"test","color":"#D2A8FF"},{"content":"(password) ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" /","color":"#A5D6FF"},{"content":"\\d","color":"#79C0FF"},{"content":"/","color":"#A5D6FF"},{"content":".","color":"#E6EDF3"},{"content":"test","color":"#D2A8FF"},{"content":"(password),","color":"#E6EDF3"},{"content":" /","color":"#A5D6FF"},{"content":"[","color":"#79C0FF"},{"content":"^","color":"#FF7B72"},{"content":"a-z0-9]","color":"#79C0FF"},{"content":"/","color":"#A5D6FF"},{"content":"i","color":"#FF7B72"},{"content":".","color":"#E6EDF3"},{"content":"test","color":"#D2A8FF"},{"content":"(password), password.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":">=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"12","color":"#79C0FF"},{"content":"];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"max","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", rules.","color":"#E6EDF3"},{"content":"filter","color":"#D2A8FF"},{"content":"(Boolean).","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"STRENGTH","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"}],[{"content":" { label: ","color":"#E6EDF3"},{"content":"\"8자 이상 · 숫자 포함\"","color":"#A5D6FF"},{"content":", bar: ","color":"#E6EDF3"},{"content":"\"bg-white/10\"","color":"#A5D6FF"},{"content":", text: ","color":"#E6EDF3"},{"content":"\"text-slate-400\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { label: ","color":"#E6EDF3"},{"content":"\"약함\"","color":"#A5D6FF"},{"content":", bar: ","color":"#E6EDF3"},{"content":"\"bg-rose-400\"","color":"#A5D6FF"},{"content":", text: ","color":"#E6EDF3"},{"content":"\"text-rose-300\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { label: ","color":"#E6EDF3"},{"content":"\"보통\"","color":"#A5D6FF"},{"content":", bar: ","color":"#E6EDF3"},{"content":"\"bg-amber-400\"","color":"#A5D6FF"},{"content":", text: ","color":"#E6EDF3"},{"content":"\"text-amber-200\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { label: ","color":"#E6EDF3"},{"content":"\"강함\"","color":"#A5D6FF"},{"content":", bar: ","color":"#E6EDF3"},{"content":"\"bg-emerald-400\"","color":"#A5D6FF"},{"content":", text: ","color":"#E6EDF3"},{"content":"\"text-emerald-300\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { label: ","color":"#E6EDF3"},{"content":"\"매우 강함\"","color":"#A5D6FF"},{"content":", bar: ","color":"#E6EDF3"},{"content":"\"bg-cyan-300\"","color":"#A5D6FF"},{"content":", text: ","color":"#E6EDF3"},{"content":"\"text-cyan-200\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":"];","color":"#E6EDF3"}],[],[{"content":"// 브랜드 로고 대신 이니셜·일반 아이콘으로 만든 표시입니다. 실제 서비스에선 각 사 가이드의 로고를 쓰세요.","color":"#8B949E"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"PROVIDERS","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"}],[{"content":" { id: ","color":"#E6EDF3"},{"content":"\"google\"","color":"#A5D6FF"},{"content":", name: ","color":"#E6EDF3"},{"content":"\"Google\"","color":"#A5D6FF"},{"content":", style: ","color":"#E6EDF3"},{"content":"\"bg-white text-slate-900 hover:bg-slate-100\"","color":"#A5D6FF"},{"content":", mark: <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bg-[conic-gradient(from_-45deg,#ea4335_0_25%,#fbbc05_0_50%,#34a853_0_75%,#4285f4_0)] bg-clip-text text-[17px] leading-none font-black text-transparent\"","color":"#A5D6FF"},{"content":">G },","color":"#E6EDF3"}],[{"content":" { id: ","color":"#E6EDF3"},{"content":"\"github\"","color":"#A5D6FF"},{"content":", name: ","color":"#E6EDF3"},{"content":"\"GitHub\"","color":"#A5D6FF"},{"content":", style: ","color":"#E6EDF3"},{"content":"\"bg-[#24292f] text-white ring-1 ring-white/15 ring-inset hover:bg-[#30363d]\"","color":"#A5D6FF"},{"content":", mark: <","color":"#E6EDF3"},{"content":"GitBranch","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-[17px]\"","color":"#A5D6FF"},{"content":" /> },","color":"#E6EDF3"}],[{"content":" { id: ","color":"#E6EDF3"},{"content":"\"kakao\"","color":"#A5D6FF"},{"content":", name: ","color":"#E6EDF3"},{"content":"\"카카오\"","color":"#A5D6FF"},{"content":", style: ","color":"#E6EDF3"},{"content":"\"bg-[#fee500] text-[#191600] hover:bg-[#ffeb3b]\"","color":"#A5D6FF"},{"content":", mark: <","color":"#E6EDF3"},{"content":"MessageCircle","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-[17px] fill-current\"","color":"#A5D6FF"},{"content":" /> },","color":"#E6EDF3"}],[{"content":"];","color":"#E6EDF3"}],[],[{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"FieldProps","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"InputHTMLAttributes","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLInputElement","color":"#FFA657"},{"content":"> ","color":"#E6EDF3"},{"content":"&","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"label","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"icon","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ReactNode","color":"#FFA657"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"value","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"error","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"describedBy","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"trailing","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ReactNode","color":"#FFA657"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"inputRef","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Ref","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLInputElement","color":"#FFA657"},{"content":">;","color":"#E6EDF3"}],[{"content":"};","color":"#E6EDF3"}],[],[{"content":"// 떠오르는 라벨 입력칸: 포커스되거나 값이 있으면 라벨이 작아지며 위로 올라갑니다.","color":"#8B949E"}],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Field","color":"#D2A8FF"},{"content":"({ ","color":"#E6EDF3"},{"content":"id","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"label","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"icon","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"value","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"error","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"describedBy","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"trailing","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"inputRef","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"input","color":"#FFA657"},{"content":" }","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"FieldProps","color":"#FFA657"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"errorId","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"id","color":"#E6EDF3"},{"content":"}-error`","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"floated","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" value ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"-translate-y-[118%] scale-[.78]\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"-translate-y-1/2\"","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":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"group/field relative\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`pointer-events-none absolute top-1/2 left-3.5 -translate-y-1/2 transition-colors [&>svg]:size-4 ${","color":"#A5D6FF"},{"content":"error","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"text-rose-300\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"text-slate-500 group-focus-within/field:text-violet-300\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"icon","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"input","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"{...","color":"#FF7B72"},{"content":"input","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"id","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"inputRef","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"value","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"value","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"placeholder","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\" \"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-invalid","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"error ","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":"aria-describedby","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"[error ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" errorId, describedBy].","color":"#E6EDF3"},{"content":"filter","color":"#D2A8FF"},{"content":"(Boolean).","color":"#E6EDF3"},{"content":"join","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\" \"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`peer h-[52px] w-full rounded-xl border bg-white/[0.04] pt-[18px] pl-10 text-[15px] text-white outline-none transition-[border-color,background-color,box-shadow] duration-200 focus:bg-white/[0.07] ${","color":"#A5D6FF"},{"content":"trailing","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"pr-12\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"pr-4\"} ${","color":"#A5D6FF"},{"content":"error","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"border-rose-400/70 focus:ring-4 focus:ring-rose-500/20\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"border-white/10 hover:border-white/20 focus:border-violet-400/80 focus:ring-4 focus:ring-violet-500/20\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"label","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"htmlFor","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"id","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`pointer-events-none absolute top-1/2 left-10 origin-left text-sm transition-[translate,scale,color] duration-200 peer-focus:-translate-y-[118%] peer-focus:scale-[.78] peer-autofill:-translate-y-[118%] peer-autofill:scale-[.78] ${","color":"#A5D6FF"},{"content":"floated","color":"#E6EDF3"},{"content":"} ${","color":"#A5D6FF"},{"content":"error","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"text-rose-300\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"text-slate-400 peer-focus:text-violet-300\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"label","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"trailing","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"error ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"errorId","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-1.5 pl-1 text-xs text-rose-300\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"error","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"GlowLoginCard","color":"#D2A8FF"},{"content":"({","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"title","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"다시 오신 걸 환영해요\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"subtitle","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"어제 하던 실습을 이어서 만들어 봐요.\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"defaultEmail","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"forgotHref","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"#\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onLogin","color":"#FFA657"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"onSocialLogin","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":"GlowLoginCardProps","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":"email","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setEmail","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(defaultEmail);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"password","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setPassword","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":"remember","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setRemember","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"showPassword","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setShowPassword","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"touched","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setTouched","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"({ email: ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":", password: ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"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":"provider","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setProvider","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":"message","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setMessage","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":"failed","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setFailed","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"emailRef","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":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"passwordRef","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":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 오류는 칸을 한 번 벗어난 뒤(touched)부터 보여 줘야 입력 중에 혼나지 않습니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"emailError","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" touched.email ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"validateEmail","color":"#D2A8FF"},{"content":"(email) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"passwordError","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" touched.password ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"validatePassword","color":"#D2A8FF"},{"content":"(password) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"strength","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"getStrength","color":"#D2A8FF"},{"content":"(password);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"tone","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":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"success\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" emailError ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" passwordError ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" failed ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"error\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 성공 화면은 잠시 보여 준 뒤 되돌립니다. 실제 서비스라면 여기서 페이지를 이동하세요.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (status ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"success\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"timer","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setTimeout","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setStatus","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":"), ","color":"#E6EDF3"},{"content":"2800","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]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"async","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"run","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"task","color":"#D2A8FF"},{"content":":","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Promise","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"unknown","color":"#79C0FF"},{"content":"> ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"void","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"doneMessage","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":"\"loading\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setFailed","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setMessage","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"try","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"task","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setStatus","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"success\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setMessage","color":"#D2A8FF"},{"content":"(doneMessage);","color":"#E6EDF3"}],[{"content":" } ","color":"#E6EDF3"},{"content":"catch","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setStatus","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setFailed","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setMessage","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"로그인하지 못했어요. 잠시 후 다시 시도해 주세요.\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 폼 제출 대신 '제출 버튼의 클릭'에서 처리합니다. Enter 키를 눌러도 브라우저가 이 버튼을","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 대신 클릭해 주므로 같은 길로 들어오고, 폼 제출이 막힌 샌드박스 미리보기에서도 동작합니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleSubmit","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"SyntheticEvent","color":"#FFA657"},{"content":") {","color":"#E6EDF3"}],[{"content":" event.","color":"#E6EDF3"},{"content":"preventDefault","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (status ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setTouched","color":"#D2A8FF"},{"content":"({ email: ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":", password: ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":" });","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 첫 번째로 틀린 칸에 포커스를 옮기면 스크린 리더가 연결된 오류 문구를 바로 읽어 줍니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"validateEmail","color":"#D2A8FF"},{"content":"(email)) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" emailRef.current?.","color":"#E6EDF3"},{"content":"focus","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"validatePassword","color":"#D2A8FF"},{"content":"(password)) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" passwordRef.current?.","color":"#E6EDF3"},{"content":"focus","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"data","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { email: email.","color":"#E6EDF3"},{"content":"trim","color":"#D2A8FF"},{"content":"(), password, remember };","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"run","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (onLogin ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"onLogin","color":"#D2A8FF"},{"content":"(data) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"wait","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"1400","color":"#79C0FF"},{"content":")), ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"data","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"email","color":"#E6EDF3"},{"content":"} 님, 환영해요!`","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"async","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleSocial","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"item","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"typeof","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"PROVIDERS","color":"#79C0FF"},{"content":")[","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"]) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (status ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setProvider","color":"#D2A8FF"},{"content":"(item.id);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"run","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (onSocialLogin ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"onSocialLogin","color":"#D2A8FF"},{"content":"(item.id) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"wait","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"1200","color":"#79C0FF"},{"content":")), ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"item","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"name","color":"#E6EDF3"},{"content":"} 계정으로 로그인했어요.`","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setProvider","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"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":"data-tone","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"tone","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`glow-login-card group/card @container relative isolate w-full max-w-[720px] break-keep ${","color":"#A5D6FF"},{"content":"className","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* 같은 회전 그라데이션을 두 번 씁니다: 뒤에서 흐리게 번지는 빛 + 1.5px 테두리 */","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":"\"glow-login-card-beam absolute -inset-2 -z-10 rounded-[34px] opacity-50 blur-2xl transition-opacity duration-500 group-focus-within/card:opacity-80\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"glow-login-card-beam rounded-[28px] p-[1.5px] shadow-[0_30px_80px_-30px_rgba(0,0,0,.9)]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid gap-5 rounded-[26.5px] bg-[#0b0d19] bg-[radial-gradient(120%_70%_at_0%_0%,rgba(139,92,246,.16),transparent_60%),radial-gradient(90%_60%_at_100%_100%,rgba(34,211,238,.08),transparent_60%)] p-5 @min-[460px]:grid-cols-[minmax(0,2fr)_auto_minmax(0,3fr)] @min-[460px]:gap-5 @min-[560px]:gap-7 @min-[560px]:p-7\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex flex-col\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex w-fit items-center gap-2 rounded-full border border-white/10 bg-white/5 py-1 pr-3 pl-1 text-xs font-semibold tracking-wide text-slate-200\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid size-6 place-items-center rounded-full bg-gradient-to-br from-violet-500 to-cyan-400 text-white\"","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":" ","color":"#E6EDF3"}],[{"content":" AI CODER","color":"#E6EDF3"}],[{"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":"\"mt-4 text-[22px] leading-snug font-bold tracking-tight text-balance text-white @min-[560px]:text-2xl\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"title","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-2 text-[13px] leading-relaxed text-pretty text-slate-400\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"subtitle","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-5 mb-2 text-[11px] font-medium tracking-wide text-slate-500 @min-[460px]:mt-auto @min-[460px]:pt-4\"","color":"#A5D6FF"},{"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":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"@container flex gap-2\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"PROVIDERS","color":"#79C0FF"},{"content":".","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"item","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"item.id","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"button\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"item","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"name","color":"#E6EDF3"},{"content":"}로 로그인`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"title","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"item","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"name","color":"#E6EDF3"},{"content":"}로 로그인`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"disabled","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"status ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleSocial","color":"#D2A8FF"},{"content":"(item)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`flex h-11 flex-1 items-center justify-center gap-2 rounded-xl text-[13px] font-semibold transition duration-200 hover:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-300 active:translate-y-0 disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:translate-y-0 ${","color":"#A5D6FF"},{"content":"item","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"style","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"provider ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" item.id ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"LoaderCircle","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-[17px] animate-spin\"","color":"#A5D6FF"},{"content":" /> ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" item.mark","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":"\"hidden @min-[280px]:inline\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"item.name","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":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center gap-3 text-[11px] font-medium text-slate-500 @min-[460px]:flex-col @min-[460px]:gap-0\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"h-px flex-1 bg-gradient-to-r from-transparent to-white/15 @min-[460px]:w-px @min-[460px]:bg-gradient-to-b\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"@min-[460px]:hidden\"","color":"#A5D6FF"},{"content":">또는 이메일로","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"h-px flex-1 bg-gradient-to-l from-transparent to-white/15 @min-[460px]:w-px @min-[460px]:bg-gradient-to-t\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"form","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"noValidate","color":"#79C0FF"},{"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":"onSubmit","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"handleSubmit","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex flex-col gap-3\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Field","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"id","color":"#E6EDF3"},{"content":"}-email`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"inputRef","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"emailRef","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"이메일\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"icon","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"<","color":"#E6EDF3"},{"content":"Mail","color":"#7EE787"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"email\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"inputMode","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"email\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"autoComplete","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"email\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"value","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"email","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"error","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"emailError","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":"setEmail","color":"#D2A8FF"},{"content":"(event.currentTarget.value)","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":"setTouched","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"current","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ({ ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"current, email: ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":" }))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Field","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"id","color":"#E6EDF3"},{"content":"}-password`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"inputRef","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"passwordRef","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"비밀번호\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"icon","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"<","color":"#E6EDF3"},{"content":"LockKeyhole","color":"#7EE787"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"showPassword ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"password\"","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"autoComplete","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"current-password\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"value","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"password","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"error","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"passwordError","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"describedBy","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"id","color":"#E6EDF3"},{"content":"}-strength`","color":"#A5D6FF"},{"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":"setPassword","color":"#D2A8FF"},{"content":"(event.currentTarget.value)","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":"setTouched","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"current","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ({ ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"current, password: ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":" }))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"trailing","color":"#79C0FF"},{"content":"={","color":"#FF7B72"}],[{"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":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"showPassword ","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":"aria-pressed","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"showPassword","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setShowPassword","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"value","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"value)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute top-1/2 right-1.5 grid size-10 -translate-y-1/2 place-items-center rounded-lg text-slate-400 transition hover:bg-white/5 hover:text-white focus-visible:outline-2 focus-visible:outline-violet-300\"","color":"#A5D6FF"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"showPassword ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"EyeOff","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-[18px]\"","color":"#A5D6FF"},{"content":" /> ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"Eye","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-[18px]\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"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":"\"mt-2 flex items-center gap-3 px-1\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"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":"\"grid flex-1 grid-cols-4 gap-1.5\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"[","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":"].","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"index","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ transitionDelay: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"50","color":"#79C0FF"},{"content":"}ms`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`h-1 rounded-full transition-colors duration-300 ${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"<","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"strength","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"STRENGTH","color":"#79C0FF"},{"content":"[","color":"#A5D6FF"},{"content":"strength","color":"#E6EDF3"},{"content":"].","color":"#A5D6FF"},{"content":"bar","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"bg-white/10\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"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":"}-strength`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-live","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"polite\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`shrink-0 text-[11px] font-medium ${","color":"#A5D6FF"},{"content":"STRENGTH","color":"#79C0FF"},{"content":"[","color":"#A5D6FF"},{"content":"strength","color":"#E6EDF3"},{"content":"].","color":"#A5D6FF"},{"content":"text","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"strength ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"sr-only\"","color":"#A5D6FF"},{"content":">비밀번호 강도 ","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"STRENGTH","color":"#79C0FF"},{"content":"[strength].label","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":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center justify-between gap-2 text-[13px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"label","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex cursor-pointer items-center gap-2 text-slate-300 select-none\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"input","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"checkbox\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"checked","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"remember","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":"setRemember","color":"#D2A8FF"},{"content":"(event.currentTarget.checked)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"peer sr-only\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid size-[18px] place-items-center rounded-[6px] border border-white/20 bg-white/5 text-white transition peer-checked:border-transparent peer-checked:bg-gradient-to-br peer-checked:from-violet-500 peer-checked:to-cyan-400 peer-focus-visible:ring-2 peer-focus-visible:ring-violet-300 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-[#0b0d19]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Check","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"3.5","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`size-3 transition duration-200 ${","color":"#A5D6FF"},{"content":"remember","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"scale-100 opacity-100\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"scale-50 opacity-0\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" 로그인 상태 유지","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"a","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"href","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"forgotHref","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"rounded text-slate-400 underline-offset-4 transition hover:text-white hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-300\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" 비밀번호 찾기","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"failed ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"role","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"alert\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"rounded-lg bg-rose-500/10 px-3 py-2 text-xs text-rose-200\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"message","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"submit\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"handleSubmit","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"disabled","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"status ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"loading\"","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`group/submit relative mt-1 flex h-12 items-center justify-center gap-2 overflow-hidden rounded-xl text-[15px] font-semibold text-white transition-[background-color,box-shadow,transform] duration-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-300 active:scale-[.98] disabled:cursor-wait ${","color":"#A5D6FF"},{"content":"status","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"success\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"bg-emerald-500 shadow-[0_10px_30px_-8px_rgba(16,185,129,.8)]\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"bg-violet-600 bg-gradient-to-r from-violet-600 via-indigo-500 to-cyan-500 shadow-[0_10px_30px_-10px_rgba(124,58,237,.9)] hover:shadow-[0_12px_36px_-8px_rgba(124,58,237,1)]\"}`","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":"\"idle\"","color":"#A5D6FF"},{"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":"\"glow-login-card-sheen absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-transparent via-white/35 to-transparent\"","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":"\"loading\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <>","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"LoaderCircle","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-[18px] animate-spin\"","color":"#A5D6FF"},{"content":" /> 로그인 중…","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" status ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"success\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <>","color":"#E6EDF3"}],[{"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":"\"glow-login-card-pop size-[18px]\"","color":"#A5D6FF"},{"content":" /> 로그인 완료","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <>","color":"#E6EDF3"}],[{"content":" 로그인 <","color":"#E6EDF3"},{"content":"ArrowRight","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-[18px] transition-transform duration-200 group-hover/submit:translate-x-1\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" )","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"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":"\"sr-only\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"status ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"loading\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"로그인 중입니다.\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" status ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"success\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" message ","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":" <","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"`","color":"#A5D6FF"}],[{"content":" @property --glow-login-card-angle { syntax: \"\"; initial-value: 0deg; inherits: false; }","color":"#A5D6FF"}],[{"content":" @property --glow-login-card-c1 { syntax: \"\"; initial-value: #a78bfa; inherits: true; }","color":"#A5D6FF"}],[{"content":" @property --glow-login-card-c2 { syntax: \"\"; initial-value: #22d3ee; inherits: true; }","color":"#A5D6FF"}],[{"content":" @keyframes glow-login-card-spin { to { --glow-login-card-angle: 360deg; } }","color":"#A5D6FF"}],[{"content":" @keyframes glow-login-card-sheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(420%); } }","color":"#A5D6FF"}],[{"content":" @keyframes glow-login-card-pop { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }","color":"#A5D6FF"}],[{"content":" /* 등록된(@property) 색 변수라서 상태가 바뀔 때 테두리 색이 부드럽게 넘어갑니다. */","color":"#A5D6FF"}],[{"content":" .glow-login-card { transition: --glow-login-card-c1 .6s, --glow-login-card-c2 .6s; }","color":"#A5D6FF"}],[{"content":" .glow-login-card[data-tone=\"error\"] { --glow-login-card-c1: #fb7185; --glow-login-card-c2: #fb923c; }","color":"#A5D6FF"}],[{"content":" .glow-login-card[data-tone=\"success\"] { --glow-login-card-c1: #34d399; --glow-login-card-c2: #a3e635; }","color":"#A5D6FF"}],[{"content":" .glow-login-card-beam {","color":"#A5D6FF"}],[{"content":" background: conic-gradient(from var(--glow-login-card-angle), transparent 0deg, var(--glow-login-card-c1) 60deg, var(--glow-login-card-c2) 110deg, transparent 160deg, transparent 180deg, #f0abfc 240deg, var(--glow-login-card-c1) 290deg, transparent 340deg), rgb(255 255 255 / .09);","color":"#A5D6FF"}],[{"content":" animation: glow-login-card-spin 7s linear infinite;","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" .glow-login-card-sheen { animation: glow-login-card-sheen 3.4s ease-in-out infinite; }","color":"#A5D6FF"}],[{"content":" .glow-login-card-pop { animation: glow-login-card-pop .45s cubic-bezier(.2,.9,.3,1.4); }","color":"#A5D6FF"}],[{"content":" /* 자동 완성 때 브라우저가 칠하는 밝은 배경을 아주 느린 전환으로 사실상 막습니다. */","color":"#A5D6FF"}],[{"content":" .glow-login-card input:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff; transition: background-color 99999s; }","color":"#A5D6FF"}],[{"content":" @media (prefers-reduced-motion: reduce) {","color":"#A5D6FF"}],[{"content":" .glow-login-card-beam, .glow-login-card-sheen, .glow-login-card-pop { animation: none; }","color":"#A5D6FF"}],[{"content":" .glow-login-card-sheen { display: 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":"GlowLoginCard;","color":"#E6EDF3"}]]},{"name":"demo.tsx","lines":[[{"content":"import","color":"#FF7B72"},{"content":" { GlowLoginCard } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"@/components/ui/glow-login-card\"","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 overflow-hidden bg-[#05060d] bg-[radial-gradient(ellipse_at_20%_0%,#251c5c,transparent_55%),radial-gradient(ellipse_at_90%_100%,#0b3a4a,transparent_50%)] p-4 sm:p-8\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"GlowLoginCard","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"defaultEmail","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"learner@aicoder.kr\"","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":"빛이 테두리를 도는 로그인 카드 — 떠오르는 라벨·강도 표시·소셜 로그인"}],["$","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/glow-login-card"}],["$","meta","8",{"name":"naver-site-verification","content":"3347449a2b36f2b5cea3e0cd9fb49ae3959ff348"}],["$","meta","9",{"property":"og:title","content":"글로우 로그인 카드 · AI Coder"}],["$","meta","10",{"property":"og:description","content":"빛이 테두리를 도는 로그인 카드 — 떠오르는 라벨·강도 표시·소셜 로그인"}],["$","meta","11",{"property":"og:url","content":"https://aicoder.kr/library/glow-login-card"}],["$","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":"빛이 테두리를 도는 로그인 카드 — 떠오르는 라벨·강도 표시·소셜 로그인"}],["$","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",{}]]

예제에 포함된 파일