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"] 20:I[86869,[],"IconMark"] 1d:T2874,"use client"; import { useEffect, useRef, useState, type HTMLAttributes, type KeyboardEvent } from "react"; import { ArrowUpRight } from "lucide-react"; export type ExpandGalleryItem = { title: string; /** 접혔을 때 세로로 보이는 짧은 이름 */ tag: string; description?: string; /** 이미지 주소. 없으면 accent 색 그라데이션으로 채웁니다. */ image?: string; accent?: string; }; const defaultItems: ExpandGalleryItem[] = [ { tag: "웹사이트", title: "스터디 랜딩 페이지", description: "Next.js와 Tailwind로 만든 반응형 소개 페이지", accent: "#8b5cf6" }, { tag: "AI 챗봇", title: "공부 도우미 챗봇", description: "질문하면 단계별로 풀어 설명해 주는 학습 챗봇", accent: "#ec4899" }, { tag: "피트니스", title: "운동 기록 앱", description: "링 차트로 하루 목표를 채워 가는 헬스 트래커", accent: "#10b981" }, { tag: "뮤직", title: "집중 음악 플레이어", description: "공부할 때 듣는 플레이리스트와 파형 플레이어", accent: "#f97316" }, { tag: "자동화", title: "업무 자동화 플로우", description: "메일·슬랙·시트를 잇는 노코드 자동화", accent: "#22d3ee" }, ]; export interface ExpandGalleryProps extends HTMLAttributes { items?: ExpandGalleryItem[]; /** 처음 펼쳐 둘 패널 */ defaultIndex?: number; /** 가만히 있을 때 다음 패널로 넘어가는 간격(ms). 0이면 자동 순환을 끕니다. */ interval?: number; } export function ExpandGallery({ items = defaultItems, defaultIndex = 0, interval = 3800, className = "", ...props }: ExpandGalleryProps) { const [active, setActive] = useState(defaultIndex); const [paused, setPaused] = useState(false); const rootRef = useRef(null); const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]); // active가 바뀔 때마다 타이머를 새로 걸어, 직접 고른 패널도 한 박자 동안 머물게 합니다. useEffect(() => { if (!interval || paused || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const id = setTimeout(() => setActive(i => (i + 1) % items.length), interval); return () => clearTimeout(id); }, [active, paused, interval, items.length]); // 키보드 포커스가 안에 있는 동안은 멈춥니다. (focusin/focusout은 버블링되어 React·Preact 모두 동작) useEffect(() => { const root = rootRef.current; if (!root) return; const onIn = () => setPaused(true); const onOut = (event: FocusEvent) => !root.contains(event.relatedTarget as Node | null) && setPaused(false); root.addEventListener("focusin", onIn); root.addEventListener("focusout", onOut); return () => { root.removeEventListener("focusin", onIn); root.removeEventListener("focusout", onOut); }; }, []); function handleKeyDown(event: KeyboardEvent) { const last = items.length - 1; const next = { ArrowRight: active + 1, ArrowDown: active + 1, ArrowLeft: active - 1, ArrowUp: active - 1, Home: 0, End: last }[event.key]; if (next === undefined) return; event.preventDefault(); const index = (next + items.length) % items.length; setActive(index); buttonRefs.current[index]?.focus(); } return (

event.pointerType === "mouse" && setActive(i)} >

); } export default ExpandGallery;1e:T653,import { ExpandGallery, type ExpandGalleryItem } from "@/components/ui/expand-gallery"; const projects: ExpandGalleryItem[] = [ { tag: "웹사이트", title: "스터디 랜딩 페이지", description: "Next.js와 Tailwind로 만든 반응형 소개 페이지", image: "/images/library/expand-gallery/web-landing.webp", accent: "#8b5cf6" }, { tag: "AI 챗봇", title: "공부 도우미 챗봇", description: "질문하면 단계별로 풀어 설명해 주는 학습 챗봇", image: "/images/library/expand-gallery/app-chat.webp", accent: "#ec4899" }, { tag: "피트니스", title: "운동 기록 앱", description: "링 차트로 하루 목표를 채워 가는 헬스 트래커", image: "/images/library/expand-gallery/app-fitness.webp", accent: "#10b981" }, { tag: "뮤직", title: "집중 음악 플레이어", description: "공부할 때 듣는 플레이리스트와 파형 플레이어", image: "/images/library/expand-gallery/app-music.webp", accent: "#f97316" }, { tag: "자동화", title: "업무 자동화 플로우", description: "메일·슬랙·시트를 잇는 노코드 자동화", image: "/images/library/expand-gallery/automation-flow.webp", accent: "#22d3ee" }, ]; export default function Demo() { return (

AI CODER SHOWCASE · 수강생 프로젝트

); }1f:T17eff,

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/expand-gallery\",\"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/expand-gallery\"}]}]}"}}],["$","div",null,{"className":"library_container__grs86","children":["$","$L1c",null,{"item":{"slug":"expand-gallery","tags":["React","Tailwind","flex-grow","아코디언","자동 순환","반응형"],"files":[{"name":"expand-gallery.tsx","content":"$1d","language":"tsx"},{"name":"demo.tsx","content":"$1e","language":"tsx"}],"level":"기초","title":"익스팬드 아코디언 갤러리","author":"AI Coder 예제","license":"MIT","category":"gallery-3d","exercise":"펼친 패널의 flexGrow 값을 5에서 3이나 8로 바꿔 느낌을 비교해 보세요. items에서 image를 하나 지워 그라데이션 대체 화면이 나오는지 확인하고, interval을 0으로 바꿔 자동 순환을 꺼 보세요.","sourceUrl":"","objectives":["flex-grow 값을 transition해 펼친 패널은 넓히고 나머지는 좁히는 아코디언 만들기","writing-mode와 미디어 쿼리로 가로 모드에서는 세로쓰기 라벨, 좁은 화면에서는 세로로 쌓이는 레이아웃 만들기","setTimeout을 active에 묶어 자동 순환하고, 호버·포커스 중에는 멈추게 하기","로빙 tabindex와 화살표 키로 키보드만으로도 패널을 넘기는 접근성 챙기기"],"description":"고른 패널이 부드럽게 펼쳐지고 나머지는 세로 라벨로 접히는 이미지 갤러리","previewHtml":"$1f","dependencies":"React · Tailwind CSS · lucide-react"},"highlighted":[{"name":"expand-gallery.tsx","lines":[[{"content":"\"use client\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"import","color":"#FF7B72"},{"content":" { useEffect, useRef, useState, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" HTMLAttributes, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" KeyboardEvent } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" { ArrowUpRight } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"lucide-react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ExpandGalleryItem","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"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":"/** 접혔을 때 세로로 보이는 짧은 이름 */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"tag","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"description","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 이미지 주소. 없으면 accent 색 그라데이션으로 채웁니다. */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"image","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"accent","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"};","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"defaultItems","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ExpandGalleryItem","color":"#FFA657"},{"content":"[] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"}],[{"content":" { tag: ","color":"#E6EDF3"},{"content":"\"웹사이트\"","color":"#A5D6FF"},{"content":", title: ","color":"#E6EDF3"},{"content":"\"스터디 랜딩 페이지\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"Next.js와 Tailwind로 만든 반응형 소개 페이지\"","color":"#A5D6FF"},{"content":", accent: ","color":"#E6EDF3"},{"content":"\"#8b5cf6\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { tag: ","color":"#E6EDF3"},{"content":"\"AI 챗봇\"","color":"#A5D6FF"},{"content":", title: ","color":"#E6EDF3"},{"content":"\"공부 도우미 챗봇\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"질문하면 단계별로 풀어 설명해 주는 학습 챗봇\"","color":"#A5D6FF"},{"content":", accent: ","color":"#E6EDF3"},{"content":"\"#ec4899\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { tag: ","color":"#E6EDF3"},{"content":"\"피트니스\"","color":"#A5D6FF"},{"content":", title: ","color":"#E6EDF3"},{"content":"\"운동 기록 앱\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"링 차트로 하루 목표를 채워 가는 헬스 트래커\"","color":"#A5D6FF"},{"content":", accent: ","color":"#E6EDF3"},{"content":"\"#10b981\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { tag: ","color":"#E6EDF3"},{"content":"\"뮤직\"","color":"#A5D6FF"},{"content":", title: ","color":"#E6EDF3"},{"content":"\"집중 음악 플레이어\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"공부할 때 듣는 플레이리스트와 파형 플레이어\"","color":"#A5D6FF"},{"content":", accent: ","color":"#E6EDF3"},{"content":"\"#f97316\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { tag: ","color":"#E6EDF3"},{"content":"\"자동화\"","color":"#A5D6FF"},{"content":", title: ","color":"#E6EDF3"},{"content":"\"업무 자동화 플로우\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"메일·슬랙·시트를 잇는 노코드 자동화\"","color":"#A5D6FF"},{"content":", accent: ","color":"#E6EDF3"},{"content":"\"#22d3ee\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":"];","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ExpandGalleryProps","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"extends","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"HTMLAttributes","color":"#79C0FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLDivElement","color":"#FFA657"},{"content":"> {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"items","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ExpandGalleryItem","color":"#FFA657"},{"content":"[];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 처음 펼쳐 둘 패널 */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"defaultIndex","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 가만히 있을 때 다음 패널로 넘어가는 간격(ms). 0이면 자동 순환을 끕니다. */","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":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ExpandGallery","color":"#D2A8FF"},{"content":"({ ","color":"#E6EDF3"},{"content":"items","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" defaultItems, ","color":"#E6EDF3"},{"content":"defaultIndex","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"interval","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"3800","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"className","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"props","color":"#FFA657"},{"content":" }","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ExpandGalleryProps","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":"(defaultIndex);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"paused","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setPaused","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"rootRef","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLDivElement","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"buttonRefs","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":"// active가 바뀔 때마다 타이머를 새로 걸어, 직접 고른 패널도 한 박자 동안 머물게 합니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"interval ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" paused ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" window.","color":"#E6EDF3"},{"content":"matchMedia","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"(prefers-reduced-motion: reduce)\"","color":"#A5D6FF"},{"content":").matches) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setTimeout","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setActive","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (i ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" items.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":"), interval);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"clearTimeout","color":"#D2A8FF"},{"content":"(id);","color":"#E6EDF3"}],[{"content":" }, [active, paused, interval, items.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":"]);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"// 키보드 포커스가 안에 있는 동안은 멈춥니다. (focusin/focusout은 버블링되어 React·Preact 모두 동작)","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"root","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" rootRef.current;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"root) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"onIn","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setPaused","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"onOut","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"FocusEvent","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"root.","color":"#E6EDF3"},{"content":"contains","color":"#D2A8FF"},{"content":"(event.relatedTarget ","color":"#E6EDF3"},{"content":"as","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Node","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setPaused","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":" root.","color":"#E6EDF3"},{"content":"addEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"focusin\"","color":"#A5D6FF"},{"content":", onIn);","color":"#E6EDF3"}],[{"content":" root.","color":"#E6EDF3"},{"content":"addEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"focusout\"","color":"#A5D6FF"},{"content":", onOut);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" root.","color":"#E6EDF3"},{"content":"removeEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"focusin\"","color":"#A5D6FF"},{"content":", onIn);","color":"#E6EDF3"}],[{"content":" root.","color":"#E6EDF3"},{"content":"removeEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"focusout\"","color":"#A5D6FF"},{"content":", onOut);","color":"#E6EDF3"}],[{"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":"HTMLUListElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"last","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" items.","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":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"next","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ArrowRight: active ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", ArrowDown: 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":", ArrowUp: active ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", Home: ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", End: last }[event.key];","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (next ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" event.","color":"#E6EDF3"},{"content":"preventDefault","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"index","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (next ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" items.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" items.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"setActive","color":"#D2A8FF"},{"content":"(index);","color":"#E6EDF3"}],[{"content":" buttonRefs.current[index]?.","color":"#E6EDF3"},{"content":"focus","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"rootRef","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"{...","color":"#FF7B72"},{"content":"props","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`xg-root w-full ${","color":"#A5D6FF"},{"content":"className","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"ul","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"프로젝트 갤러리\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"onKeyDown","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"handleKeyDown","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerEnter","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" event.pointerType ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"mouse\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setPaused","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerLeave","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" event.pointerType ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"mouse\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setPaused","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 좁은 화면에서는 세로로 쌓고, 480px 이상에서는 가로 아코디언이 됩니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex h-[min(560px,calc(100svh-120px))] min-h-[420px] flex-col gap-2 min-[480px]:h-[clamp(230px,48vw,420px)] min-[480px]:min-h-0 min-[480px]:flex-row\"","color":"#A5D6FF"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"items.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"item","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"i","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"open","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" i ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" active;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"accent","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" item.accent ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"#8b5cf6\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"li","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"item.title ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" i","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 핵심 트릭: 펼친 패널은 flex-grow 5, 나머지는 1. flex-grow 값을 transition하면 폭이 부드럽게 바뀝니다.","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"xg-panel relative min-h-0 min-w-0 basis-0 overflow-hidden rounded-[22px] bg-[#0d0f1c]\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ flexGrow: open ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"5","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", boxShadow: open ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`0 24px 60px -24px ${","color":"#A5D6FF"},{"content":"accent","color":"#E6EDF3"},{"content":"}, inset 0 0 0 1px rgba(255,255,255,.14)`","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"inset 0 0 0 1px rgba(255,255,255,.08)\"","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerEnter","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" event.pointerType ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"mouse\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setActive","color":"#D2A8FF"},{"content":"(i)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"el","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" buttonRefs.current[i] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" el;","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"button\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"tabIndex","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"open ","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":"aria-expanded","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"open","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"item","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"tag","color":"#E6EDF3"},{"content":"} · ${","color":"#A5D6FF"},{"content":"item","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"title","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setActive","color":"#D2A8FF"},{"content":"(i)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onFocus","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setActive","color":"#D2A8FF"},{"content":"(i)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"group absolute inset-0 text-left text-white outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/80\"","color":"#A5D6FF"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"item.image ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"img","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"src","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"item.image","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"alt","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"draggable","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"false","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`xg-media absolute inset-0 size-full object-cover ${","color":"#A5D6FF"},{"content":"open","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"xg-dim\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ) ","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":"`xg-media absolute inset-0 ${","color":"#A5D6FF"},{"content":"open","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"xg-dim\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ background: ","color":"#E6EDF3"},{"content":"`radial-gradient(circle at 30% 20%, ${","color":"#A5D6FF"},{"content":"accent","color":"#E6EDF3"},{"content":"}cc, transparent 60%), radial-gradient(circle at 80% 90%, ${","color":"#A5D6FF"},{"content":"accent","color":"#E6EDF3"},{"content":"}66, transparent 55%), linear-gradient(160deg, #1b1d33, #090a14)`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" )","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`absolute inset-0 transition-opacity duration-500 ${","color":"#A5D6FF"},{"content":"open","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"bg-[linear-gradient(to_top,rgba(6,7,16,.92),rgba(6,7,16,.25)_55%,transparent)]\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"bg-[linear-gradient(to_top,rgba(6,7,16,.85),rgba(6,7,16,.45))]\"}`","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":"`xg-index absolute text-[11px] font-bold tabular-nums transition-colors duration-300 ${","color":"#A5D6FF"},{"content":"open","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"xg-index-open text-white\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"text-white/55\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"String","color":"#D2A8FF"},{"content":"(i ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":").","color":"#E6EDF3"},{"content":"padStart","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"0\"","color":"#A5D6FF"},{"content":")","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":"`xg-arrow absolute right-3 top-3 grid size-9 place-items-center rounded-full bg-white text-[#0b0c18] shadow-lg ${","color":"#A5D6FF"},{"content":"open","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"xg-arrow-on\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"ArrowUpRight","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-4 transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"2.5","color":"#79C0FF"},{"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":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`xg-label absolute flex items-center gap-2 text-[13px] font-semibold tracking-wide text-white/90 ${","color":"#A5D6FF"},{"content":"open","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"xg-label-on\"}`","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":"\"size-1.5 shrink-0 rounded-full\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ background: accent, boxShadow: ","color":"#E6EDF3"},{"content":"`0 0 10px ${","color":"#A5D6FF"},{"content":"accent","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"item.tag","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* 펼친 상태: 폭이 거의 다 늘어난 뒤에 캡션이 올라옵니다. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`xg-caption absolute inset-x-0 bottom-0 p-4 sm:p-5 ${","color":"#A5D6FF"},{"content":"open","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"xg-caption-on\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"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":"\"block min-w-0\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-2.5 py-0.5 text-[11px] font-semibold backdrop-blur\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-1.5 rounded-full\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ background: accent }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"item.tag","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":"\"mt-2 block truncate text-lg font-bold leading-snug tracking-tight sm:text-xl\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"item.title","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"item.description ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-0.5 line-clamp-2 block break-keep text-xs leading-relaxed text-white/75 sm:text-[13px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"item.description","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"open ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" interval ","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":"paused ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"active","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"xg-progress absolute inset-x-0 top-0 h-[3px] origin-left\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ background: accent, 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":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":" })","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"`","color":"#A5D6FF"}],[{"content":" .xg-panel { transition: flex-grow .7s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; }","color":"#A5D6FF"}],[{"content":" .xg-media { transform: scale(1.04); transition: transform .9s cubic-bezier(.22,1,.36,1), filter .6s ease; }","color":"#A5D6FF"}],[{"content":" .xg-media.xg-dim { transform: scale(1.18); filter: brightness(.62) saturate(.75); }","color":"#A5D6FF"}],[{"content":" .xg-index { right: 16px; top: 18px; }","color":"#A5D6FF"}],[{"content":" .xg-index-open { right: auto; left: 14px; top: 14px; }","color":"#A5D6FF"}],[{"content":" .xg-arrow { opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .2s ease; }","color":"#A5D6FF"}],[{"content":" .xg-arrow-on { opacity: 1; transform: none; transition: opacity .3s ease .3s, transform .5s cubic-bezier(.34,1.56,.64,1) .3s; }","color":"#A5D6FF"}],[{"content":" .xg-label { left: 16px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .15s ease; }","color":"#A5D6FF"}],[{"content":" .xg-label-on { opacity: 1; transition: opacity .35s ease .25s; }","color":"#A5D6FF"}],[{"content":" .xg-caption { opacity: 0; transform: translateY(14px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }","color":"#A5D6FF"}],[{"content":" .xg-caption-on { opacity: 1; transform: none; transition: opacity .45s ease .28s, transform .55s cubic-bezier(.22,1,.36,1) .28s; }","color":"#A5D6FF"}],[{"content":" .xg-progress { animation: xg-progress linear forwards; opacity: .9; }","color":"#A5D6FF"}],[{"content":" @keyframes xg-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }","color":"#A5D6FF"}],[{"content":" @media (min-width: 480px) {","color":"#A5D6FF"}],[{"content":" .xg-index { left: 14px; right: auto; top: 14px; }","color":"#A5D6FF"}],[{"content":" /* 세로쓰기에서는 글자 진행 방향이 위→아래라서, 점이 글자 위에 놓입니다. */","color":"#A5D6FF"}],[{"content":" .xg-label { left: 50%; top: auto; bottom: 18px; transform: translateX(-50%); writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .08em; }","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" @media (prefers-reduced-motion: reduce) {","color":"#A5D6FF"}],[{"content":" .xg-panel, .xg-media, .xg-label, .xg-label-on, .xg-caption, .xg-caption-on, .xg-arrow, .xg-arrow-on { transition: none; }","color":"#A5D6FF"}],[{"content":" .xg-progress { display: none; }","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" `","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"ExpandGallery;","color":"#E6EDF3"}]]},{"name":"demo.tsx","lines":[[{"content":"import","color":"#FF7B72"},{"content":" { ExpandGallery, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ExpandGalleryItem } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"@/components/ui/expand-gallery\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"projects","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ExpandGalleryItem","color":"#FFA657"},{"content":"[] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"}],[{"content":" { tag: ","color":"#E6EDF3"},{"content":"\"웹사이트\"","color":"#A5D6FF"},{"content":", title: ","color":"#E6EDF3"},{"content":"\"스터디 랜딩 페이지\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"Next.js와 Tailwind로 만든 반응형 소개 페이지\"","color":"#A5D6FF"},{"content":", image: ","color":"#E6EDF3"},{"content":"\"/images/library/expand-gallery/web-landing.webp\"","color":"#A5D6FF"},{"content":", accent: ","color":"#E6EDF3"},{"content":"\"#8b5cf6\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { tag: ","color":"#E6EDF3"},{"content":"\"AI 챗봇\"","color":"#A5D6FF"},{"content":", title: ","color":"#E6EDF3"},{"content":"\"공부 도우미 챗봇\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"질문하면 단계별로 풀어 설명해 주는 학습 챗봇\"","color":"#A5D6FF"},{"content":", image: ","color":"#E6EDF3"},{"content":"\"/images/library/expand-gallery/app-chat.webp\"","color":"#A5D6FF"},{"content":", accent: ","color":"#E6EDF3"},{"content":"\"#ec4899\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { tag: ","color":"#E6EDF3"},{"content":"\"피트니스\"","color":"#A5D6FF"},{"content":", title: ","color":"#E6EDF3"},{"content":"\"운동 기록 앱\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"링 차트로 하루 목표를 채워 가는 헬스 트래커\"","color":"#A5D6FF"},{"content":", image: ","color":"#E6EDF3"},{"content":"\"/images/library/expand-gallery/app-fitness.webp\"","color":"#A5D6FF"},{"content":", accent: ","color":"#E6EDF3"},{"content":"\"#10b981\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { tag: ","color":"#E6EDF3"},{"content":"\"뮤직\"","color":"#A5D6FF"},{"content":", title: ","color":"#E6EDF3"},{"content":"\"집중 음악 플레이어\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"공부할 때 듣는 플레이리스트와 파형 플레이어\"","color":"#A5D6FF"},{"content":", image: ","color":"#E6EDF3"},{"content":"\"/images/library/expand-gallery/app-music.webp\"","color":"#A5D6FF"},{"content":", accent: ","color":"#E6EDF3"},{"content":"\"#f97316\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { tag: ","color":"#E6EDF3"},{"content":"\"자동화\"","color":"#A5D6FF"},{"content":", title: ","color":"#E6EDF3"},{"content":"\"업무 자동화 플로우\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"메일·슬랙·시트를 잇는 노코드 자동화\"","color":"#A5D6FF"},{"content":", image: ","color":"#E6EDF3"},{"content":"\"/images/library/expand-gallery/automation-flow.webp\"","color":"#A5D6FF"},{"content":", accent: ","color":"#E6EDF3"},{"content":"\"#22d3ee\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"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_50%_0%,#1a1b3d,#06070e_70%)] p-4 sm:p-8\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"w-full max-w-4xl\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mb-3 text-[11px] font-semibold tracking-[0.25em] text-indigo-200/70\"","color":"#A5D6FF"},{"content":">AI CODER SHOWCASE · 수강생 프로젝트","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"ExpandGallery","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"items","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"projects","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}]]}]}]}]]}] 16:null 1a:[["$","title","0",{"children":"익스팬드 아코디언 갤러리 · AI Coder"}],["$","meta","1",{"name":"description","content":"고른 패널이 부드럽게 펼쳐지고 나머지는 세로 라벨로 접히는 이미지 갤러리"}],["$","meta","2",{"name":"application-name","content":"AI Coder"}],["$","link","3",{"rel":"manifest","href":"/manifest.webmanifest","crossOrigin":"$undefined"}],["$","meta","4",{"name":"referrer","content":"strict-origin-when-cross-origin"}],["$","meta","5",{"name":"robots","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","6",{"name":"category","content":"education"}],["$","link","7",{"rel":"canonical","href":"https://aicoder.kr/library/expand-gallery"}],["$","meta","8",{"name":"naver-site-verification","content":"3347449a2b36f2b5cea3e0cd9fb49ae3959ff348"}],["$","meta","9",{"property":"og:title","content":"익스팬드 아코디언 갤러리 · AI Coder"}],["$","meta","10",{"property":"og:description","content":"고른 패널이 부드럽게 펼쳐지고 나머지는 세로 라벨로 접히는 이미지 갤러리"}],["$","meta","11",{"property":"og:url","content":"https://aicoder.kr/library/expand-gallery"}],["$","meta","12",{"property":"og:site_name","content":"AI Coder"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://aicoder.kr/social-card.png"}],["$","meta","15",{"property":"og:image:width","content":"1200"}],["$","meta","16",{"property":"og:image:height","content":"630"}],["$","meta","17",{"property":"og:image:alt","content":"AI Coder · AI 코딩 교육과 실전 프로젝트"}],["$","meta","18",{"property":"og:type","content":"website"}],["$","meta","19",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","20",{"name":"twitter:title","content":"익스팬드 아코디언 갤러리 · AI Coder"}],["$","meta","21",{"name":"twitter:description","content":"고른 패널이 부드럽게 펼쳐지고 나머지는 세로 라벨로 접히는 이미지 갤러리"}],["$","meta","22",{"name":"twitter:image","content":"https://aicoder.kr/social-card.png"}],["$","link","23",{"rel":"icon","href":"/favicon.ico?766d9da6178db116","type":"image/x-icon","sizes":"16x16"}],["$","link","24",{"rel":"icon","href":"/icon.png?96c6ddf66156e856","type":"image/png","sizes":"64x64"}],["$","link","25",{"rel":"apple-touch-icon","href":"/apple-icon.png?87c64c22e9bd6762","type":"image/png","sizes":"180x180"}],["$","$L20","26",{}]]

예제에 포함된 파일