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"] 1d:T5271,"use client"; import { Bot, ChartNoAxesColumnIncreasing, CircleCheck, Flame, GitPullRequest, Globe, Pause, Play, Rocket, Sparkles } from "lucide-react"; import { useId, useRef, useState, type ComponentType, type CSSProperties, type HTMLAttributes, type KeyboardEvent, type ReactNode } from "react"; type Tone = "violet" | "emerald" | "amber" | "sky"; export interface FeatureTab { title: string; description: string; icon: ComponentType<{ className?: string }>; tone?: Tone; /** 오른쪽 미리보기 영역에 들어갈 내용(이미지·목업 등) */ preview: ReactNode; } export interface FeatureTabsProps extends HTMLAttributes { eyebrow?: string; heading?: string; description?: string; tabs?: FeatureTab[]; /** 탭 하나가 머무는 시간(ms) */ interval?: number; } // Tailwind는 완성된 클래스 이름만 찾아내므로, 색마다 쓸 클래스를 통째로 적어 둡니다. const tones: Record = { violet: { chip: "group-aria-selected:bg-violet-600 group-aria-selected:shadow-violet-600/40", bar: "bg-violet-600", panel: "[background:radial-gradient(120%_90%_at_100%_0%,#ddd6fe,transparent_55%),radial-gradient(90%_80%_at_0%_100%,#c7d2fe,transparent_60%),#f5f3ff]", }, emerald: { chip: "group-aria-selected:bg-emerald-600 group-aria-selected:shadow-emerald-600/40", bar: "bg-emerald-600", panel: "[background:radial-gradient(120%_90%_at_100%_0%,#a7f3d0,transparent_55%),radial-gradient(90%_80%_at_0%_100%,#bae6fd,transparent_60%),#ecfdf5]", }, amber: { chip: "group-aria-selected:bg-orange-500 group-aria-selected:shadow-orange-500/40", bar: "bg-orange-500", panel: "[background:radial-gradient(120%_90%_at_100%_0%,#fed7aa,transparent_55%),radial-gradient(90%_80%_at_0%_100%,#fde68a,transparent_60%),#fffbeb]", }, sky: { chip: "group-aria-selected:bg-sky-600 group-aria-selected:shadow-sky-600/40", bar: "bg-sky-600", panel: "[background:radial-gradient(120%_90%_at_100%_0%,#bae6fd,transparent_55%),radial-gradient(90%_80%_at_0%_100%,#c7d2fe,transparent_60%),#f0f9ff]", }, }; // 목업 안 요소들이 순서대로 떠오르도록 지연 순번을 CSS 변수로 넘깁니다. const order = (index: number) => ({ "--i": index }) as CSSProperties; export function FeatureTabs({ eyebrow = "AI CODER 학습 흐름", heading = "질문부터 배포까지, 한 흐름으로", description = "배우는 순간마다 필요한 도구가 자연스럽게 이어져요. 탭을 눌러 살펴보세요.", tabs = defaultTabs, interval = 5000, className = "", ...props }: FeatureTabsProps) { const [active, setActive] = useState(0); const [autoplay, setAutoplay] = useState(true); const tabRefs = useRef<(HTMLButtonElement | null)[]>([]); const id = useId(); // 사용자가 직접 고르면 자동 넘김을 멈추고 그 선택을 존중합니다. function select(index: number, focus = false) { const next = (index + tabs.length) % tabs.length; setActive(next); setAutoplay(false); if (focus) tabRefs.current[next]?.focus(); } function handleKeyDown(event: KeyboardEvent) { const moves: Record = { ArrowDown: active + 1, ArrowRight: active + 1, ArrowUp: active - 1, ArrowLeft: active - 1, Home: 0, End: tabs.length - 1 }; if (!(event.key in moves)) return; event.preventDefault(); select(moves[event.key], true); } return (

{eyebrow}

{heading}

{description}

{tabs.map((tab, index) => { const selected = index === active; const tone = tones[tab.tone ?? "violet"]; const Icon = tab.icon; return ( ); })}

{tabs[active]?.description}

{tabs.map((tab, index) => (

{tab.preview}

))}

); } /* ───────────── 기본 탭에 들어가는 미니 목업들 ───────────── */ function MockWindow({ title, children }: { title: string; children: ReactNode }) { return (

{title}

{children}

); } function TutorMock() { return (

map이랑 forEach는 뭐가 달라요?

map은 새 배열을 돌려줘요. nums.map(n => n * 2)

예제 더 보기 퀴즈 풀기

); } const diff = [ { sign: " ", code: "return (" }, { sign: "-", code: " list.forEach(t => )" }, { sign: "+", code: " list.map(t => (" }, { sign: "+", code: " " }, { sign: " ", code: " ))" }, ]; const diffTone: Record = { "-": "bg-rose-50 text-rose-700", "+": "bg-emerald-50 text-emerald-700", " ": "" }; function ReviewMock() { return (

{diff.map((line, index) => (
{index + 12} {line.sign} {line.code} {line.mark && {line.mark}} {line.rest}
))}
{/* 창 아래쪽 여백에만 살짝 겹쳐서, 코드 줄을 가리지 않고 입체감을 줍니다. */}

key를 넣으면 목록이 안정적으로 그려져요.
반영

); } function DashboardMock() { return (

연속 학습

12일

완료 강의

34개

이번 주 학습 시간 6.5시간 +18%

); } function DeployMock() { return (

터미널

$ aicoder deploy

✓ 빌드 완료 3.2s

✓ 테스트 24개 통과

→ 배포 100%

my-todo.aicoder.app LIVE

); } const defaultTabs: FeatureTab[] = [ { title: "AI 튜터", description: "막힌 코드를 물어보면 단계별로 설명해요.", icon: Bot, tone: "violet", preview: }, { title: "코드 리뷰", description: "더 나은 코드로 고치는 방법을 짚어 줘요.", icon: GitPullRequest, tone: "emerald", preview: }, { title: "학습 기록", description: "공부 시간과 진도를 한눈에 확인해요.", icon: ChartNoAxesColumnIncreasing, tone: "amber", preview: }, { title: "원클릭 배포", description: "완성한 앱을 클릭 한 번으로 공개해요.", icon: Rocket, tone: "sky", preview: }, ]; export default FeatureTabs;1e:T12503,
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/feature-tabs\",\"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/feature-tabs\"}]}]}"}}],["$","div",null,{"className":"library_container__grs86","children":["$","$L1c",null,{"item":{"slug":"feature-tabs","tags":["React","Tailwind","탭","접근성","키보드 탐색","컨테이너 쿼리","CSS 애니메이션"],"files":[{"name":"feature-tabs.tsx","content":"$1d","language":"tsx"},{"name":"demo.tsx","content":"import { FeatureTabs } from \"@/components/ui/feature-tabs\";\n\nexport default function Demo() {\n return (\n
\n \n
\n );\n}","language":"tsx"}],"level":"응용","title":"자동 전환 기능 탭","author":"AI Coder 예제","license":"MIT","category":"feature","exercise":"interval을 3000으로 줄여 보고, 다섯 번째 탭을 추가해 preview에 직접 만든 목업을 넣어 보세요. 마우스를 올려도 멈추지 않게 하려면 style 블록의 어느 줄을 지우면 될까요?","sourceUrl":"","objectives":["role=tablist·tab·tabpanel과 aria 속성으로 화면 낭독기가 이해하는 탭 만들기","방향키·Home·End로 움직이는 키보드 탭 탐색과 tabIndex 순환(roving tabindex) 구현하기","진행 막대의 animationend 이벤트로 타이머 없이 자동 전환하고, 클릭하면 사용자가 주도권을 갖게 하기","패널을 한 칸에 겹쳐 두고 opacity·transform 전환으로 부드러운 크로스페이드 만들기"],"description":"진행 막대와 함께 자동으로 넘어가는 탭과 목업 미리보기","previewHtml":"$1e","dependencies":"React · Tailwind CSS · lucide-react"},"highlighted":[{"name":"feature-tabs.tsx","lines":[[{"content":"\"use client\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"import","color":"#FF7B72"},{"content":" { Bot, ChartNoAxesColumnIncreasing, CircleCheck, Flame, GitPullRequest, Globe, Pause, Play, Rocket, Sparkles } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"lucide-react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" { useId, useRef, useState, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ComponentType, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" CSSProperties, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" HTMLAttributes, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" KeyboardEvent, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ReactNode } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Tone","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"violet\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"emerald\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"amber\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"sky\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"FeatureTab","color":"#FFA657"},{"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":"description","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":"ComponentType","color":"#FFA657"},{"content":"<{ ","color":"#E6EDF3"},{"content":"className","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":" }>;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"tone","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Tone","color":"#FFA657"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 오른쪽 미리보기 영역에 들어갈 내용(이미지·목업 등) */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"preview","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ReactNode","color":"#FFA657"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"FeatureTabsProps","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"extends","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"HTMLAttributes","color":"#79C0FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":"> {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"eyebrow","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"heading","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"description","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"tabs","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"FeatureTab","color":"#FFA657"},{"content":"[];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 탭 하나가 머무는 시간(ms) */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"interval","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"// Tailwind는 완성된 클래스 이름만 찾아내므로, 색마다 쓸 클래스를 통째로 적어 둡니다.","color":"#8B949E"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"tones","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Record","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"Tone","color":"#FFA657"},{"content":", { ","color":"#E6EDF3"},{"content":"chip","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"bar","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"panel","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":" }> ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" violet: {","color":"#E6EDF3"}],[{"content":" chip: ","color":"#E6EDF3"},{"content":"\"group-aria-selected:bg-violet-600 group-aria-selected:shadow-violet-600/40\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" bar: ","color":"#E6EDF3"},{"content":"\"bg-violet-600\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" panel: ","color":"#E6EDF3"},{"content":"\"[background:radial-gradient(120%_90%_at_100%_0%,#ddd6fe,transparent_55%),radial-gradient(90%_80%_at_0%_100%,#c7d2fe,transparent_60%),#f5f3ff]\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" },","color":"#E6EDF3"}],[{"content":" emerald: {","color":"#E6EDF3"}],[{"content":" chip: ","color":"#E6EDF3"},{"content":"\"group-aria-selected:bg-emerald-600 group-aria-selected:shadow-emerald-600/40\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" bar: ","color":"#E6EDF3"},{"content":"\"bg-emerald-600\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" panel: ","color":"#E6EDF3"},{"content":"\"[background:radial-gradient(120%_90%_at_100%_0%,#a7f3d0,transparent_55%),radial-gradient(90%_80%_at_0%_100%,#bae6fd,transparent_60%),#ecfdf5]\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" },","color":"#E6EDF3"}],[{"content":" amber: {","color":"#E6EDF3"}],[{"content":" chip: ","color":"#E6EDF3"},{"content":"\"group-aria-selected:bg-orange-500 group-aria-selected:shadow-orange-500/40\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" bar: ","color":"#E6EDF3"},{"content":"\"bg-orange-500\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" panel: ","color":"#E6EDF3"},{"content":"\"[background:radial-gradient(120%_90%_at_100%_0%,#fed7aa,transparent_55%),radial-gradient(90%_80%_at_0%_100%,#fde68a,transparent_60%),#fffbeb]\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" },","color":"#E6EDF3"}],[{"content":" sky: {","color":"#E6EDF3"}],[{"content":" chip: ","color":"#E6EDF3"},{"content":"\"group-aria-selected:bg-sky-600 group-aria-selected:shadow-sky-600/40\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" bar: ","color":"#E6EDF3"},{"content":"\"bg-sky-600\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" panel: ","color":"#E6EDF3"},{"content":"\"[background:radial-gradient(120%_90%_at_100%_0%,#bae6fd,transparent_55%),radial-gradient(90%_80%_at_0%_100%,#c7d2fe,transparent_60%),#f0f9ff]\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" },","color":"#E6EDF3"}],[{"content":"};","color":"#E6EDF3"}],[],[{"content":"// 목업 안 요소들이 순서대로 떠오르도록 지연 순번을 CSS 변수로 넘깁니다.","color":"#8B949E"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"order","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ({ ","color":"#E6EDF3"},{"content":"\"--i\"","color":"#A5D6FF"},{"content":": index }) ","color":"#E6EDF3"},{"content":"as","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"CSSProperties","color":"#FFA657"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"FeatureTabs","color":"#D2A8FF"},{"content":"({","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"eyebrow","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"AI CODER 학습 흐름\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"heading","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"질문부터 배포까지, 한 흐름으로\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"description","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"배우는 순간마다 필요한 도구가 자연스럽게 이어져요. 탭을 눌러 살펴보세요.\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"tabs","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" defaultTabs,","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"interval","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"5000","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"props","color":"#FFA657"}],[{"content":"}","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"FeatureTabsProps","color":"#FFA657"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"active","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setActive","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"autoplay","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setAutoplay","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":"tabRefs","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<(","color":"#E6EDF3"},{"content":"HTMLButtonElement","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"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":"// 사용자가 직접 고르면 자동 넘김을 멈추고 그 선택을 존중합니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"select","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"focus","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"next","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (index ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" tabs.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" tabs.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setActive","color":"#D2A8FF"},{"content":"(next);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setAutoplay","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (focus) tabRefs.current[next]?.","color":"#E6EDF3"},{"content":"focus","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleKeyDown","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"KeyboardEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLDivElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"moves","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Record","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"> ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ArrowDown: active ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", ArrowRight: active ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", ArrowUp: active ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", ArrowLeft: active ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", Home: ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", End: tabs.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" };","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"(event.key ","color":"#E6EDF3"},{"content":"in","color":"#FF7B72"},{"content":" moves)) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" event.","color":"#E6EDF3"},{"content":"preventDefault","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"select","color":"#D2A8FF"},{"content":"(moves[event.key], ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"section","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"{...","color":"#FF7B72"},{"content":"props","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`feature-tabs-root @container w-full break-keep text-zinc-900 ${","color":"#A5D6FF"},{"content":"className","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid gap-4 @md:grid-cols-[11.25rem_minmax(0,1fr)] @md:gap-4 @3xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] @3xl:items-center @3xl:gap-12\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex min-w-0 flex-col\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex items-center gap-1.5 text-[11px] font-bold tracking-[0.16em] text-violet-600\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Sparkles","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"eyebrow","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"h2","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-2 text-balance text-[26px] font-bold leading-[1.2] tracking-tight @md:mt-1.5 @md:text-[17px] @3xl:text-[34px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"heading","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-[14px] leading-relaxed text-zinc-500 @md:hidden @3xl:mt-3 @3xl:block @3xl:text-[15px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"description","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"role","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"tablist\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"heading","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onKeyDown","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"handleKeyDown","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-5 grid grid-cols-4 gap-1 rounded-2xl bg-zinc-900/[0.04] p-1 @md:mt-3 @md:grid-cols-1 @md:bg-transparent @md:p-0 @3xl:mt-8 @3xl:gap-1.5\"","color":"#A5D6FF"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"tabs.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"tab","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"selected","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" index ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" active;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"tone","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" tones[tab.tone ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"violet\"","color":"#A5D6FF"},{"content":"];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Icon","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" tab.icon;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"tab.title","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"element","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" { tabRefs.current[index] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" element; }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"button\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"role","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"tab\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"id","color":"#E6EDF3"},{"content":"}-tab-${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-selected","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"selected","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-controls","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"id","color":"#E6EDF3"},{"content":"}-panel-${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"tabIndex","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"selected ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":"1","color":"#79C0FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"select","color":"#D2A8FF"},{"content":"(index)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"group relative flex flex-col items-center gap-1 overflow-hidden rounded-xl px-1 py-2 text-center outline-none transition-[background-color,box-shadow] duration-300 hover:bg-white/70 focus-visible:ring-2 focus-visible:ring-violet-500 aria-selected:bg-white aria-selected:shadow-[0_1px_2px_rgba(24,24,27,0.06),0_8px_24px_-12px_rgba(24,24,27,0.25)] aria-selected:ring-1 aria-selected:ring-zinc-900/[0.06] @md:flex-row @md:items-start @md:gap-2.5 @md:px-2.5 @md:py-2 @md:text-left @3xl:gap-3.5 @3xl:px-4 @3xl:py-3.5\"","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-8 shrink-0 place-items-center rounded-lg bg-zinc-900/[0.05] text-zinc-500 transition-colors duration-300 group-aria-selected:text-white group-aria-selected:shadow-md @md:size-7 @3xl:size-9 ${","color":"#A5D6FF"},{"content":"tone","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"chip","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Icon","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-4 @3xl:size-[18px]\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"min-w-0 @md:pt-1 @3xl:pt-1.5\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"block text-[12px] font-semibold text-zinc-500 transition-colors group-aria-selected:text-zinc-900 @md:text-[13px] @3xl:text-[15px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"tab.title","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* grid-rows 0fr → 1fr 전환으로 높이를 몰라도 부드럽게 펼칩니다. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"hidden grid-rows-[0fr] transition-[grid-template-rows] duration-500 ease-out group-aria-selected:grid-rows-[1fr] @md:grid\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"overflow-hidden text-[11.5px] leading-snug text-zinc-500 @3xl:text-[13.5px] @3xl:leading-relaxed\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"block pt-0.5 @3xl:pt-1\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"tab.description","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"selected ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute inset-x-2 bottom-0 h-[3px] overflow-hidden rounded-full bg-zinc-900/[0.06] @md:inset-x-2.5 @3xl:inset-x-4\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* 막대가 다 차면(animationend) 다음 탭으로. 타이머 없이 CSS가 시간을 잽니다. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"active","color":"#E6EDF3"},{"content":"}-${","color":"#A5D6FF"},{"content":"autoplay","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onAnimationEnd","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setActive","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"current","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (current ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" tabs.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`block h-full origin-left rounded-full ${","color":"#A5D6FF"},{"content":"tone","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"bar","color":"#E6EDF3"},{"content":"} ${","color":"#A5D6FF"},{"content":"autoplay","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"feature-tabs-progress\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ animationDuration: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"interval","color":"#E6EDF3"},{"content":"}ms`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" )","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":" })","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-3 min-h-[2.75rem] text-[13.5px] leading-snug text-zinc-500 @md:hidden\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"tabs[active]?.description","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-stage relative grid min-h-[17.5rem] [grid-template-areas:'stack'] @md:min-h-0 @3xl:min-h-[25rem]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"tabs.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"tab","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"tab.title","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"role","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"tabpanel\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"id","color":"#E6EDF3"},{"content":"}-panel-${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-labelledby","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"id","color":"#E6EDF3"},{"content":"}-tab-${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"tabIndex","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"0","color":"#79C0FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"data-state","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"index ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" active ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"active\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"inactive\"","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`relative grid place-items-center overflow-hidden rounded-3xl p-4 outline-none ring-1 ring-zinc-900/[0.06] focus-visible:ring-2 focus-visible:ring-violet-500 transition-[opacity,transform,visibility] duration-500 ease-out [grid-area:stack] @3xl:p-8 ${","color":"#A5D6FF"},{"content":"tones","color":"#E6EDF3"},{"content":"[","color":"#A5D6FF"},{"content":"tab","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"tone","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"??","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"violet\"","color":"#A5D6FF"},{"content":"].","color":"#A5D6FF"},{"content":"panel","color":"#E6EDF3"},{"content":"} ${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"active","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"visible translate-y-0 scale-100 opacity-100\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"`invisible scale-[0.98] opacity-0 ${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"<","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"active","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"-translate-y-4\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"translate-y-4\"}`}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"pointer-events-none absolute inset-0 bg-[radial-gradient(rgba(24,24,27,0.09)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:linear-gradient(to_bottom,black,transparent)]\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative w-full max-w-[22rem]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"tab.preview","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"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":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setAutoplay","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":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"autoplay ","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":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-toggle absolute right-3 top-3 grid size-7 place-items-center rounded-full bg-white/80 text-zinc-600 shadow-sm ring-1 ring-zinc-900/10 backdrop-blur transition hover:bg-white hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500\"","color":"#A5D6FF"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"autoplay ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"Pause","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5\"","color":"#A5D6FF"},{"content":" /> ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"Play","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"`","color":"#A5D6FF"}],[{"content":" .feature-tabs-progress { animation: feature-tabs-progress linear forwards; }","color":"#A5D6FF"}],[{"content":" @keyframes feature-tabs-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }","color":"#A5D6FF"}],[{"content":" /* 읽는 중에는 기다려 줍니다: 포인터를 올리거나 포커스가 안에 있으면 진행 막대가 멈춰요. */","color":"#A5D6FF"}],[{"content":" .feature-tabs-root:hover .feature-tabs-progress, .feature-tabs-root:focus-within .feature-tabs-progress { animation-play-state: paused; }","color":"#A5D6FF"}],[{"content":" [data-state=\"active\"] .feature-tabs-rise { animation: feature-tabs-rise .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }","color":"#A5D6FF"}],[{"content":" [data-state=\"active\"] .feature-tabs-fill { animation: feature-tabs-fill 1.6s cubic-bezier(.6,0,.2,1) .7s both; }","color":"#A5D6FF"}],[{"content":" [data-state=\"active\"] .feature-tabs-draw { stroke-dasharray: 1; animation: feature-tabs-draw 1.2s ease-out .45s both; }","color":"#A5D6FF"}],[{"content":" @keyframes feature-tabs-rise { from { opacity: 0; transform: translateY(10px) scale(.97); } }","color":"#A5D6FF"}],[{"content":" @keyframes feature-tabs-fill { from { transform: scaleX(0); } }","color":"#A5D6FF"}],[{"content":" @keyframes feature-tabs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }","color":"#A5D6FF"}],[{"content":" @media (prefers-reduced-motion: reduce) {","color":"#A5D6FF"}],[{"content":" .feature-tabs-root *, .feature-tabs-root *::before, .feature-tabs-root *::after { animation: none !important; transition: none !important; }","color":"#A5D6FF"}],[{"content":" .feature-tabs-toggle { 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":"/* ───────────── 기본 탭에 들어가는 미니 목업들 ───────────── */","color":"#8B949E"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"MockWindow","color":"#D2A8FF"},{"content":"({ ","color":"#E6EDF3"},{"content":"title","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"children","color":"#FFA657"},{"content":" }","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"title","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"children","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ReactNode","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":"\"feature-tabs-rise overflow-hidden rounded-2xl bg-white shadow-[0_24px_50px_-20px_rgba(24,24,27,0.35)] ring-1 ring-zinc-900/[0.07]\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center gap-1.5 border-b border-zinc-100 px-3 py-2\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-2 rounded-full bg-zinc-200\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-2 rounded-full bg-zinc-200\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-2 rounded-full bg-zinc-200\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ml-1.5 text-[11px] font-medium text-zinc-400\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"title","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"children","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"TutorMock","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"MockWindow","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"title","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"AI 튜터\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"space-y-2 p-3 text-[11.5px] leading-snug @3xl:space-y-3 @3xl:p-4 @3xl:text-[13px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-rise ml-auto w-fit max-w-[88%] rounded-2xl rounded-br-md bg-violet-600 px-3 py-1.5 text-white\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">map이랑 forEach는 뭐가 달라요?","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-rise flex items-start gap-2\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid size-6 shrink-0 place-items-center rounded-full bg-linear-to-br from-violet-500 to-fuchsia-500 text-white\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"Bot","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"min-w-0 rounded-2xl rounded-tl-md bg-zinc-100 px-3 py-2 text-zinc-700\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" map은 <","color":"#E6EDF3"},{"content":"b","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-zinc-900\"","color":"#A5D6FF"},{"content":">새 배열을 돌려줘요.","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"code","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-1.5 block truncate rounded-md bg-zinc-900 px-2 py-1 font-mono text-[10.5px] text-emerald-300 @3xl:text-[11.5px]\"","color":"#A5D6FF"},{"content":">nums.map(n =","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" n * 2)","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":"\"feature-tabs-rise flex flex-wrap gap-1.5 pl-8\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"rounded-full bg-violet-50 px-2.5 py-1 text-[11px] font-medium text-violet-700 ring-1 ring-violet-200\"","color":"#A5D6FF"},{"content":">예제 더 보기","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"rounded-full bg-violet-50 px-2.5 py-1 text-[11px] font-medium text-violet-700 ring-1 ring-violet-200\"","color":"#A5D6FF"},{"content":">퀴즈 풀기","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"diff","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"}],[{"content":" { sign: ","color":"#E6EDF3"},{"content":"\" \"","color":"#A5D6FF"},{"content":", code: ","color":"#E6EDF3"},{"content":"\"return (\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { sign: ","color":"#E6EDF3"},{"content":"\"-\"","color":"#A5D6FF"},{"content":", code: ","color":"#E6EDF3"},{"content":"\" list.forEach(t => )\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { sign: ","color":"#E6EDF3"},{"content":"\"+\"","color":"#A5D6FF"},{"content":", code: ","color":"#E6EDF3"},{"content":"\" list.map(t => (\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { sign: ","color":"#E6EDF3"},{"content":"\"+\"","color":"#A5D6FF"},{"content":", code: ","color":"#E6EDF3"},{"content":"\" \"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { sign: ","color":"#E6EDF3"},{"content":"\" \"","color":"#A5D6FF"},{"content":", code: ","color":"#E6EDF3"},{"content":"\" ))\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":"];","color":"#E6EDF3"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"diffTone","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Record","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"> ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"\"-\"","color":"#A5D6FF"},{"content":": ","color":"#E6EDF3"},{"content":"\"bg-rose-50 text-rose-700\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"+\"","color":"#A5D6FF"},{"content":": ","color":"#E6EDF3"},{"content":"\"bg-emerald-50 text-emerald-700\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\" \"","color":"#A5D6FF"},{"content":": ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":" };","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ReviewMock","color":"#D2A8FF"},{"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":"MockWindow","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"title","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"TodoList.tsx\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"pb-6 pt-1.5 font-mono text-[10.5px] leading-[19px] text-zinc-600 @3xl:pb-7 @3xl:pt-2 @3xl:text-[12px] @3xl:leading-[23px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"diff.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"line","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"index","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`flex whitespace-pre px-3 ${","color":"#A5D6FF"},{"content":"diffTone","color":"#E6EDF3"},{"content":"[","color":"#A5D6FF"},{"content":"line","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"sign","color":"#E6EDF3"},{"content":"]","color":"#A5D6FF"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"w-5 shrink-0 select-none text-zinc-300\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"index ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"12","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"w-3 shrink-0 select-none\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"line.sign","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"truncate\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"line.code","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"line.mark ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"mark","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"rounded bg-emerald-200/80 px-0.5 text-emerald-900\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"line.mark","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"line.rest","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#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":"\"feature-tabs-rise relative -mr-2 -mt-4 ml-6 flex items-center gap-2 rounded-xl bg-white p-2.5 shadow-[0_18px_40px_-16px_rgba(24,24,27,0.45)] ring-1 ring-zinc-900/[0.07]\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid size-6 shrink-0 place-items-center rounded-full bg-emerald-600 text-white\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"GitPullRequest","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"min-w-0 flex-1 text-[11.5px] leading-snug text-zinc-700 @3xl:text-[12.5px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"b","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-zinc-900\"","color":"#A5D6FF"},{"content":">key를 넣으면 목록이 안정적으로 그려져요.","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex shrink-0 items-center gap-0.5 rounded-full bg-emerald-50 px-1.5 py-0.5 text-[10.5px] font-semibold text-emerald-700\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"CircleCheck","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3\"","color":"#A5D6FF"},{"content":" />반영","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DashboardMock","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"MockWindow","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"title","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"내 학습 기록\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid grid-cols-2 gap-2 p-3 @3xl:gap-3 @3xl:p-4\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-rise rounded-xl bg-orange-50 p-2.5 ring-1 ring-orange-100\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":")","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":"\"flex items-center gap-1 text-[11px] font-medium text-orange-700\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"Flame","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5\"","color":"#A5D6FF"},{"content":" />연속 학습","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-0.5 text-[20px] font-bold leading-tight tracking-tight @3xl:text-[24px]\"","color":"#A5D6FF"},{"content":">12<","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-[12px] font-semibold text-zinc-500\"","color":"#A5D6FF"},{"content":">일","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-rise rounded-xl bg-zinc-50 p-2.5 ring-1 ring-zinc-100\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":")","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":"\"flex items-center gap-1 text-[11px] font-medium text-zinc-500\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"CircleCheck","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5\"","color":"#A5D6FF"},{"content":" />완료 강의","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-0.5 text-[20px] font-bold leading-tight tracking-tight @3xl:text-[24px]\"","color":"#A5D6FF"},{"content":">34<","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-[12px] font-semibold text-zinc-500\"","color":"#A5D6FF"},{"content":">개","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-rise col-span-2 rounded-xl p-2.5 ring-1 ring-zinc-100\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-baseline justify-between text-[11px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"font-medium text-zinc-500\"","color":"#A5D6FF"},{"content":">이번 주 학습 시간","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"b","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-[12px] text-zinc-900\"","color":"#A5D6FF"},{"content":">6.5시간 <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-emerald-600\"","color":"#A5D6FF"},{"content":">+18%","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"svg","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"viewBox","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0 0 200 48\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-1.5 h-11 w-full overflow-visible @3xl:h-14\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"preserveAspectRatio","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"none\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"defs","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"linearGradient","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-area\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"x1","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"y1","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"x2","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"y2","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"1\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"stop","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"offset","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"stopColor","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"#f97316\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"stopOpacity","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0.28\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"stop","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"offset","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"1\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"stopColor","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"#f97316\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"stopOpacity","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"path","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"d","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"M0 38 C20 34 30 22 50 26 S80 36 100 24 S140 8 160 14 S190 6 200 4 V48 H0 Z\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"url(#feature-tabs-area)\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* pathLength=1 이면 dasharray 1 하나로 \"선 그리기\" 애니메이션이 됩니다. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"path","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-draw\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"pathLength","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"1","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"d","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"M0 38 C20 34 30 22 50 26 S80 36 100 24 S140 8 160 14 S190 6 200 4\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"stroke","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"#f97316\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"2.5\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeLinecap","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"round\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"vectorEffect","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"non-scaling-stroke\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DeployMock","color":"#D2A8FF"},{"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":"\"feature-tabs-rise overflow-hidden rounded-2xl bg-zinc-950 text-zinc-300 shadow-[0_24px_50px_-18px_rgba(2,6,23,0.6)] ring-1 ring-black/20\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center gap-1.5 border-b border-white/[0.06] px-3 py-2\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-2 rounded-full bg-rose-400/80\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-2 rounded-full bg-amber-300/80\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-2 rounded-full bg-emerald-400/80\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ml-1.5 text-[11px] font-medium text-zinc-500\"","color":"#A5D6FF"},{"content":">터미널","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"space-y-1 p-3 font-mono text-[11px] leading-[18px] @3xl:p-4 @3xl:text-[12.5px] @3xl:leading-[22px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-rise\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"1","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":"\"text-sky-400\"","color":"#A5D6FF"},{"content":">$ aicoder deploy","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-rise text-emerald-400\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"2","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":"\"text-zinc-500\"","color":"#A5D6FF"},{"content":">3.2s","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-rise text-emerald-400\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">✓ 테스트 24개 통과","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-rise flex items-center gap-2 text-sky-300\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"4","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">→ 배포","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"h-1.5 flex-1 overflow-hidden rounded-full bg-white/10\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"feature-tabs-fill block h-full origin-left rounded-full bg-linear-to-r from-sky-400 to-emerald-400\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-zinc-400\"","color":"#A5D6FF"},{"content":">100%","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":"\"feature-tabs-rise mx-3 mb-3 flex items-center gap-2 rounded-xl bg-white/[0.06] px-2.5 py-2 ring-1 ring-white/10 @3xl:mx-4 @3xl:mb-4\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"order","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"6","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Globe","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5 text-sky-300\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"truncate text-[11.5px] font-medium text-white\"","color":"#A5D6FF"},{"content":">my-todo.aicoder.app","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ml-auto inline-flex items-center gap-1 rounded-full bg-emerald-400/15 px-1.5 py-0.5 text-[10.5px] font-bold text-emerald-300\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-1.5 rounded-full bg-emerald-400\"","color":"#A5D6FF"},{"content":" />LIVE","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"defaultTabs","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"FeatureTab","color":"#FFA657"},{"content":"[] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"}],[{"content":" { title: ","color":"#E6EDF3"},{"content":"\"AI 튜터\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"막힌 코드를 물어보면 단계별로 설명해요.\"","color":"#A5D6FF"},{"content":", icon: Bot, tone: ","color":"#E6EDF3"},{"content":"\"violet\"","color":"#A5D6FF"},{"content":", preview: <","color":"#E6EDF3"},{"content":"TutorMock","color":"#7EE787"},{"content":" /> },","color":"#E6EDF3"}],[{"content":" { title: ","color":"#E6EDF3"},{"content":"\"코드 리뷰\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"더 나은 코드로 고치는 방법을 짚어 줘요.\"","color":"#A5D6FF"},{"content":", icon: GitPullRequest, tone: ","color":"#E6EDF3"},{"content":"\"emerald\"","color":"#A5D6FF"},{"content":", preview: <","color":"#E6EDF3"},{"content":"ReviewMock","color":"#7EE787"},{"content":" /> },","color":"#E6EDF3"}],[{"content":" { title: ","color":"#E6EDF3"},{"content":"\"학습 기록\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"공부 시간과 진도를 한눈에 확인해요.\"","color":"#A5D6FF"},{"content":", icon: ChartNoAxesColumnIncreasing, tone: ","color":"#E6EDF3"},{"content":"\"amber\"","color":"#A5D6FF"},{"content":", preview: <","color":"#E6EDF3"},{"content":"DashboardMock","color":"#7EE787"},{"content":" /> },","color":"#E6EDF3"}],[{"content":" { title: ","color":"#E6EDF3"},{"content":"\"원클릭 배포\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"완성한 앱을 클릭 한 번으로 공개해요.\"","color":"#A5D6FF"},{"content":", icon: Rocket, tone: ","color":"#E6EDF3"},{"content":"\"sky\"","color":"#A5D6FF"},{"content":", preview: <","color":"#E6EDF3"},{"content":"DeployMock","color":"#7EE787"},{"content":" /> },","color":"#E6EDF3"}],[{"content":"];","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"FeatureTabs;","color":"#E6EDF3"}]]},{"name":"demo.tsx","lines":[[{"content":"import","color":"#FF7B72"},{"content":" { FeatureTabs } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"@/components/ui/feature-tabs\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"Demo","color":"#D2A8FF"},{"content":"() ","color":"#FFA657"},{"content":"{","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid min-h-screen place-items-center bg-[radial-gradient(ellipse_at_20%_0%,#ede9fe,transparent_55%),#f8f8fb] p-4 sm:p-8\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"FeatureTabs","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"max-w-5xl\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}]]}]}]}]]}]

예제에 포함된 파일