https://utilzip.com/_next/static/chunks/app/page-9b409e0f5e16d101.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8974],{3676:(e,t,s)=>{"use strict";s.d(t,{default:()=>$});var r=s(95155),i=s(52619),l=s.n(i),a=s(12115),o=s(28712),n=s(1944),c=s(47308),d=s(14544),x=s(75468),h=s(73290),p=s(54889),u=s(40645),m=s(74937);function g(e){let{icon:t,size:s=19}=e,i=u.Y[t]??x.zt;return(0,r.jsx)(i,{size:s,className:"text-accent-deep"})}let f=(0,a.memo)(function(e){let{tool:t}=e;return(0,r.jsxs)("div",{className:"group relative h-full",children:[(0,r.jsxs)(p.default,{href:`/tools/${t.slug}`,className:"tool-card relative flex h-full flex-col rounded-2xl bg-white p-4 ring-1 ring-warm-200 sm:p-5 shadow-card transition-all duration-200 ease-out hover:-translate-y-1 hover:ring-accent hover:shadow-card-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",children:[(0,r.jsx)("span",{className:"tool-card-icon mb-3 grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-accent-sub sm:mb-4 sm:h-12 sm:w-12 transition-all duration-200 ease-out group-hover:scale-105 group-hover:bg-accent-tint",children:(0,r.jsx)(g,{icon:t.icon})}),(0,r.jsx)("h3",{className:"tool-card-name pr-7 text-[14px] font-bold sm:pr-8 sm:text-[15px] leading-snug tracking-[-0.01em] text-warm-800 transition-colors group-hover:text-accent-deep",children:t.name}),(0,r.jsx)("p",{className:"tool-card-desc mt-1.5 line-clamp-3 sm:line-clamp-2 text-[13px] font-normal leading-[1.65] text-warm-400",children:t.description})]}),(0,r.jsx)(m.A,{slug:t.slug,name:t.name,size:18,className:"absolute right-3 top-3 h-8 w-8 rounded-lg transition-colors hover:bg-accent-tint"})]})});var j=s(84690);function b(e){let{item:t,headingLevel:s="h3"}=e,i=u.Y[t.icon]??x.zt,l=t.slug in j.x;return(0,r.jsx)("div",{className:"group relative h-full",children:(0,r.jsxs)(p.default,{href:`/play/${t.slug}`,className:"relative flex h-full flex-col items-center rounded-2xl bg-white p-4 text-center ring-1 ring-warm-200 sm:p-5 shadow-card transition-all duration-200 ease-out hover:-translate-y-1 hover:ring-accent hover:shadow-card-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",children:[l?(0,r.jsx)("span",{className:"mb-3 grid h-[72px] w-full shrink-0 place-items-center overflow-hidden rounded-xl bg-accent-sub transition-transform duration-200 ease-out group-hover:scale-[1.03] sm:mb-4 sm:h-[84px]",children:(0,r.jsx)(j.A,{slug:t.slug,className:"h-14 w-auto sm:h-16"})}):(0,r.jsx)("span",{className:"mb-3 grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-accent-sub sm:mb-4 sm:h-12 sm:w-12",children:(0,r.jsx)(i,{size:19,className:"text-accent-deep"})}),(0,r.jsx)(s,{className:"text-[14px] font-bold leading-snug tracking-[-0.01em] text-warm-800 transition-colors group-hover:text-accent-deep sm:text-[15px]",children:t.name}),(0,r.jsx)("p",{className:"mt-1.5 line-clamp-3 text-[13px] leading-[1.65] text-warm-400 sm:line-clamp-2",children:t.description})]})})}var v=s(32100);function y(e){let{x:t,y:s,size:i,rotate:l,float:a,opacity:o=1,children:n}=e,c=.27*i,d=i-2*c;return(0,r.jsx)("g",{className:`float-${a}`,opacity:o,children:(0,r.jsxs)("g",{transform:`translate(${t} ${s}) rotate(${l})`,filter:"url(#tileShadow)",children:[(0,r.jsx)("rect",{width:i,height:i,rx:.3*i,fill:"#fff"}),(0,r.jsx)("rect",{width:i,height:i,rx:.3*i,stroke:"#E0E7FF",strokeWidth:"1.6"}),(0,r.jsx)("path",{d:`M0 ${.3*i}A${.3*i} ${.3*i} 0 0 1 ${.3*i} 0h${.4*i}a${.3*i} ${.3*i} 0 0 1 ${.3*i} ${.3*i}v${.12*i}H0Z`,fill:"#F8FAFF"}),(0,r.jsx)("g",{transform:`translate(${c} ${c}) scale(${d/24})`,stroke:"#4338CA",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"none",children:n})]})})}function w(e){let{className:t=""}=e;return(0,r.jsxs)("svg",{viewBox:"0 0 540 330",fill:"none",role:"presentation","aria-hidden":"true",className:t,children:[(0,r.jsxs)("defs",{children:[(0,r.jsxs)("radialGradient",{id:"heroBlob",cx:"50%",cy:"42%",r:"62%",children:[(0,r.jsx)("stop",{offset:"0%",stopColor:"#F6F8FF"}),(0,r.jsx)("stop",{offset:"100%",stopColor:"#E3E8FF"})]}),(0,r.jsxs)("radialGradient",{id:"mouthGlow",cx:"50%",cy:"50%",r:"50%",children:[(0,r.jsx)("stop",{offset:"0%",stopColor:"#EEF2FF",stopOpacity:".95"}),(0,r.jsx)("stop",{offset:"55%",stopColor:"#C7D2FE",stopOpacity:".55"}

1),(0,r.jsx)("stop",{offset:"100%",stopColor:"#A5B4FC",stopOpacity:"0"})]}),(0,r.jsxs)("linearGradient",{id:"faceL",x1:"0",y1:"0",x2:"1",y2:"1",children:[(0,r.jsx)("stop",{offset:"0%",stopColor:"#B4BEFD"}),(0,r.jsx)("stop",{offset:"100%",stopColor:"#818CF8"})]}),(0,r.jsxs)("linearGradient",{id:"faceR",x1:"1",y1:"0",x2:"0",y2:"1",children:[(0,r.jsx)("stop",{offset:"0%",stopColor:"#6366F1"}),(0,r.jsx)("stop",{offset:"100%",stopColor:"#4F46E5"})]}),(0,r.jsxs)("linearGradient",{id:"flapL",x1:"0",y1:"1",x2:"0.6",y2:"0",children:[(0,r.jsx)("stop",{offset:"0%",stopColor:"#C7D2FE"}),(0,r.jsx)("stop",{offset:"100%",stopColor:"#EEF2FF"})]}),(0,r.jsxs)("linearGradient",{id:"flapR",x1:"1",y1:"1",x2:"0.4",y2:"0",children:[(0,r.jsx)("stop",{offset:"0%",stopColor:"#A5B4FC"}),(0,r.jsx)("stop",{offset:"100%",stopColor:"#E0E7FF"})]}),(0,r.jsxs)("linearGradient",{id:"inside",x1:"0.5",y1:"0",x2:"0.5",y2:"1",children:[(0,r.jsx)("stop",{offset:"0%",stopColor:"#312E81"}),(0,r.jsx)("stop",{offset:"100%",stopColor:"#4338CA"})]}),(0,r.jsx)("filter",{id:"tileShadow",x:"-60%",y:"-60%",width:"220%",height:"220%",children:(0,r.jsx)("feDropShadow",{dx:"0",dy:"7",stdDeviation:"7",floodColor:"#4338CA",floodOpacity:".22"})}),(0,r.jsx)("filter",{id:"boxShadow",x:"-40%",y:"-40%",width:"180%",height:"180%",children:(0,r.jsx)("feDropShadow",{dx:"0",dy:"10",stdDeviation:"10",floodColor:"#4338CA",floodOpacity:".18"})})]}),(0,r.jsxs)("g",{stroke:"#C7D2FE",strokeWidth:"1.8",strokeLinecap:"round",strokeDasharray:"3 9",fill:"none",children:[(0,r.jsx)("path",{d:"M286 192c-38 6-72 18-104 34",opacity:".9"}),(0,r.jsx)("path",{d:"M190 232c-30 6-56 14-78 24",opacity:".7"}),(0,r.jsx)("path",{d:"M96 268c-20 4-36 8-50 14",opacity:".5"})]}),(0,r.jsxs)(y,{x:150,y:104,size:52,rotate:-9,float:"a",opacity:.95,children:[(0,r.jsx)("rect",{x:"2",y:"2",width:"8",height:"8",rx:"1.5"}),(0,r.jsx)("rect",{x:"14",y:"2",width:"8",height:"8",rx:"1.5"}),(0,r.jsx)("rect",{x:"2",y:"14",width:"8",height:"8",rx:"1.5"}),(0,r.jsx)("path",{d:"M15 15h2M20 15h2M15 20h2M20 20h2"})]}),(0,r.jsx)(y,{x:72,y:172,size:44,rotate:-16,float:"b",opacity:.8,children:(0,r.jsx)("path",{d:"m8 7-6 6 6 6M16 7l6 6-6 6"})}),(0,r.jsx)(y,{x:12,y:232,size:36,rotate:-23,float:"a",opacity:.62,children:(0,r.jsx)("path",{d:"M4 5h16M12 5v15"})}),(0,r.jsx)("circle",{cx:"128",cy:"88",r:"3.2",fill:"#C7D2FE"}),(0,r.jsx)("circle",{cx:"56",cy:"146",r:"2.6",fill:"#DDD6FE"}),(0,r.jsx)("circle",{cx:"150",cy:"216",r:"2.4",fill:"#DDD6FE",opacity:".8"}),(0,r.jsxs)("g",{transform:"translate(180 -6)",children:[(0,r.jsx)("ellipse",{cx:"180",cy:"192",rx:"170",ry:"140",fill:"url(#heroBlob)"}),(0,r.jsx)("ellipse",{cx:"180",cy:"192",rx:"132",ry:"108",stroke:"#C7D2FE",strokeWidth:"1.6",strokeDasharray:"4 9",opacity:".8"}),(0,r.jsx)("path",{d:"M84 190 180 158 150 106 54 136Z",fill:"url(#flapL)"}),(0,r.jsx)("path",{d:"M84 190 180 158 150 106 54 136Z",stroke:"#818CF8",strokeWidth:"1.8",strokeLinejoin:"round"}),(0,r.jsx)("path",{d:"M180 158 276 190 306 136 210 106Z",fill:"url(#flapR)"}),(0,r.jsx)("path",{d:"M180 158 276 190 306 136 210 106Z",stroke:"#6366F1",strokeWidth:"1.8",strokeLinejoin:"round"}),(0,r.jsx)("ellipse",{cx:"180",cy:"176",rx:"118",ry:"86",fill:"url(#mouthGlow)"}),(0,r.jsxs)("g",{stroke:"#C7D2FE",strokeWidth:"1.8",strokeLinecap:"round",strokeDasharray:"3 8",opacity:".85",children:[(0,r.jsx)("path",{d:"M168 176c-14-24-38-38-58-44"}),(0,r.jsx)("path",{d:"M180 174c0-30 0-52-2-70"}),(0,r.jsx)("path",{d:"M192 176c14-22 34-34 54-40"})]}),(0,r.jsxs)(y,{x:36,y:126,size:48,rotate:-15,float:"b",children:[(0,r.jsx)("rect",{x:"4",y:"10",width:"16",height:"12",rx:"3"}),(0,r.jsx)("path",{d:"M8 10V7a4 4 0 0 1 8 0v3"})]}),(0,r.jsxs)(y,{x:82,y:64,size:60,rotate:-9,float:"a",children:[(0,r.jsx)("path",{d:"M4 1h11l6 6v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2Z"}),(0,r.jsx)("path",{d:"M15 1v6h6M7 15h9M7 20h6"})]}),(0,r.jsx)(y,{x:141,y:12,size:78,rotate:-2,float:"b",children:(0,r.jsx)("path",{d:"M21 4.5a5.6 5.6 0 0 1-7.4 7.4l-8 8a2.6 2.6 0 0 1-3.7-3.7l8-8A5.6 5.6 0 0 1 17.3.8l-3.6 3.6 2.9 2.9L20.2.9c.5.9.8 2 .8 3.6Z"})}),(0,r.jsxs)(y,{x:234,y:60,size:62,rotate:10,float:"a",children:[(0,r.jsx)("rect",{x:"2",y:"4",width:"20",height:"17",rx:"3"}),(0,r.jsx)("circle",{cx:"8.5",cy:"10.5",r:"2"}),(0,r.jsx)("path",{d:"m3 18 6-5 5 4 3-3 5 4"})]}),(0,r.jsxs)(y,{x:288,y:124,size:50,rotate:16,float:"b",children:[(0,r.jsx)("path",{d:"M12 2a10 10 0 1 0 0 20c1.7 0 2-1.4 1.2-2.4-.8-1 .1-2.6 1.5-2.6H18a4 4 0 0 0 4-4A10 10 0 0 0 12 2Z"}),(0,r.jsx)("circle",{cx:"8",cy:"9",r:"1.5",fill:"#4338CA",stroke:"none"}),(0,r.jsx)("circle",{cx:"13",cy:"7",r:"1.5",fill:"#4338CA",stroke:"none"})]}

1),(0,r.jsxs)("g",{filter:"url(#boxShadow)",children:[(0,r.jsx)("path",{d:"M84 190 180 214l96-24-96-32Z",fill:"url(#inside)"}),(0,r.jsx)("ellipse",{cx:"180",cy:"196",rx:"52",ry:"13",fill:"#A5B4FC",opacity:".5"}),(0,r.jsx)("ellipse",{cx:"180",cy:"198",rx:"30",ry:"7",fill:"#E0E7FF",opacity:".55"}),(0,r.jsx)("path",{d:"M84 190v64l96 34v-74Z",fill:"url(#faceL)"}),(0,r.jsx)("path",{d:"M276 190v64l-96 34v-74Z",fill:"url(#faceR)"}),(0,r.jsx)("path",{d:"M180 214v74",stroke:"#E0E7FF",strokeWidth:"2",opacity:".5"}),(0,r.jsx)("path",{d:"M84 190 180 214l96-24",stroke:"#EEF2FF",strokeWidth:"2",strokeLinejoin:"round",opacity:".7"}),(0,r.jsx)("path",{d:"M84 190 180 158l96 32",stroke:"#EEF2FF",strokeWidth:"2",strokeLinejoin:"round",opacity:".55"}),(0,r.jsx)("path",{d:"M84 190v64l96 34 96-34v-64",stroke:"#4338CA",strokeWidth:"2",strokeLinejoin:"round",opacity:".45"})]}),(0,r.jsx)("ellipse",{cx:"180",cy:"298",rx:"80",ry:"12",fill:"#A5B4FC",opacity:".5"}),(0,r.jsxs)("g",{stroke:"#818CF8",strokeLinecap:"round",children:[(0,r.jsx)("path",{d:"M246 22v13M240 28.5h13",strokeWidth:"2.4"}),(0,r.jsx)("path",{d:"M60 92v9M55.5 96.5h9",strokeWidth:"2",opacity:".8"})]}),(0,r.jsx)("circle",{cx:"326",cy:"196",r:"4.5",fill:"#A5B4FC"}),(0,r.jsx)("circle",{cx:"30",cy:"204",r:"3.4",fill:"#A5B4FC"}),(0,r.jsx)("circle",{cx:"300",cy:"252",r:"2.8",fill:"#A5B4FC"})]})]})}function k(e){let{size:t=18,className:s=""}=e;return(0,r.jsxs)("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.2",strokeLinecap:"round",strokeLinejoin:"round",className:s,"aria-hidden":"true",children:[(0,r.jsx)("circle",{cx:"11",cy:"11",r:"7"}),(0,r.jsx)("path",{d:"m20 20-3.6-3.6"})]})}function N(e){let{tools:t}=e;return(0,r.jsx)("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 lg:grid-cols-4",children:t.map(e=>(0,n.O2)(e)?(0,r.jsx)(b,{item:e},e.slug):(0,r.jsx)(f,{tool:e},e.slug))})}function C(e){let{id:t,children:s}=e;return(0,r.jsx)("h2",{id:t,className:"text-[26px] font-extrabold leading-tight tracking-[-0.025em] text-warm-900",children:s})}function F(e){let{value:t,onChange:s,size:i="sm"}=e,l="lg"===i;return(0,r.jsxs)("div",{className:`group relative rounded-2xl bg-white ring-2 ring-accent
2                  shadow-[0_1px_2px_rgba(15,23,42,0.04),0_10px_28px_-18px_rgba(79,70,229,0.30)]
3                  transition-all duration-200
4                  focus-within:ring-[3px] focus-within:ring-accent
5                  focus-within:shadow-[0_0_0_5px_rgba(79,70,229,0.20),0_16px_34px_-16px_rgba(79,70,229,0.48)]`,children:[(0,r.jsx)(k,{size:l?19:17,className:`pointer-events-none absolute top-1/2 -translate-y-1/2 text-accent transition-colors
6                    group-focus-within:text-accent-deep ${l?"left-5":"left-4"}`}),(0,r.jsx)("input",{type:"text",value:t,onChange:e=>s(e.target.value),placeholder:n.xD,"aria-label":"도구\xb7놀이터 검색",className:`w-full rounded-2xl bg-transparent font-medium text-warm-900 placeholder-gray-400
7                    outline-none ${l?"h-14 pl-14 pr-5 text-[15px]":"h-11 pl-11 pr-4 text-sm"}`})]})}function _(e){let{tabs:t,active:s,onChange:i}=e,{ref:l,edge:a}=(0,d.B)();return(0,r.jsx)("div",{ref:l,"data-edge":a,className:"home-tabs -mx-5 mb-7 flex flex-nowrap gap-2 overflow-x-auto px-5 pb-1 sm:mx-0 sm:flex-wrap sm:overflow-visible sm:px-0 sm:pb-0",role:"tablist","aria-label":"도구 분류",children:t.map(e=>

7{let t=s===e.key,l=h.QG[e.key];return(0,r.jsxs)("button",{type:"button",role:"tab","aria-selected":t,onClick:()=>i(e.key),className:`flex h-10 shrink-0 items-center gap-2 rounded-full pl-3.5 pr-2.5 text-[13px] font-semibold tracking-[-0.01em]
8                        transition-all duration-200 ease-out
9                        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 ${t?"bg-brand-cta text-white shadow-cta":"bg-white text-warm-500 ring-1 ring-warm-200 shadow-card hover:-translate-y-0.5 hover:text-accent-deep hover:ring-accent hover:shadow-card-hover"}`,children:[l&&(0,r.jsx)(l,{size:14}),(0,r.jsx)("span",{children:e.title}),(0,r.jsx)("span",{className:`grid h-5 min-w-5 place-items-center rounded-full px-1.5 text-[11px] font-bold tabular-nums ${t?"bg-white/25 text-white":"bg-accent-sub text-accent-deep"}`,children:e.count})]},e.key)})})}function M(e){let{showingPlay:t,onToggle:s}=e;return t?(0,r.jsxs)("button",{type:"button",onClick:s,"aria-pressed":!0,className:"flex h-10 shrink-0 items-center gap-2 rounded-full bg-white px-4 text-[13.5px] font-bold tracking-[-0.01em] text-warm-700 ring-1 ring-warm-200 shadow-card transition-all duration-200 ease-out hover:-translate-y-0.5 hover:text-accent-deep hover:ring-accent hover:shadow-card-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",children:[(0,r.jsx)(x.zt,{size:15}),"도구 목록으로"]}):(0,r.jsxs)("button",{type:"button",onClick:s,"aria-pressed":!1,className:"group flex h-10 shrink-0 -rotate-2 items-center gap-2 rounded-xl border-2 border-accent-deep bg-white px-3.5 text-[13.5px] font-extrabold tracking-[-0.01em] text-accent-deep shadow-[3px_3px_0_0_#3730a3] transition-all duration-150 ease-out hover:translate-x-[2px] hover:translate-y-[2px] hover:rotate-0 hover:shadow-[1px_1px_0_0_#3730a3] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",children:[(0,r.jsx)(v.A,{size:16,className:"transition-transform duration-300 ease-out group-hover:-rotate-12"}),"놀이터도 구경해보세요!"]})}function E(e){let{total:t,page:s,onChange:i}=e;if(t<=1)return null;let l=Array.from({length:t},(e,t)=>t+1),a=(e,l,a)=>{let o=s+e,n=o<1||o>t;return(0,r.jsx)("button",{type:"button",onClick:()=>!n&&i(o),disabled:n,"aria-label":l,className:"grid h-11 w-11 place-items-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-warm-800 disabled:opacity-30 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",children:(0,r.jsx)("svg",{width:"17",height:"17",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.4",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:(0,r.jsx)("path",{d:a})})})};return(0,r.jsxs)("nav",{className:"mt-10 flex items-center justify-center gap-1","aria-label":"도구 목록 페이지",children:[a(-1,"이전 페이지","m15 18-6-6 6-6"),l.map(e=>(0,r.jsx)("button",{type:"button",onClick:()=>i(e),"aria-current":e===s?"page":void 0,"aria-label":`${e}페이지`,className:`grid h-11 min-w-11 place-items-center rounded-full px-1 text-[14px] font-bold tabular-nums
10                      transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent ${e===s?"bg-warm-800 text-white":"text-gray-500 hover:bg-gray-100 hover:text-warm-800"}`,children:e},e)),a(1,"다음 페이지","m9 18 6-6-6-6")]})}function $(e){let{bottom:t,playPicks:s}=e,[i,d]=(0,a.useState)(""),[h,p]=(0,a.useState)("tools"),[u,m]=(0,a.useState)("all"),[g,f]=(0,a.useState)(1),j=i.trim().toLowerCase();(0,a.useEffect)(()=>{let e=window.location.hash.slice(1);if(e.startsWith(n.aN)){d(`#${function(e){try{return decodeURIComponent(e)}catch{return e}}(e.slice(n.aN.length))}`),window.scrollTo(0,0);return}let t=new URLSearchParams(window.location.search).get("q");t&&d(t)},[]);let y=(0,a.useMemo)(()=>{let e=new Set(s.map(e=>e.slug));return c.Nu.filter(t=>!e.has(t.slug))},[s]),k=(0,a.useMemo)(()=>(0,o.gp)(),[]),$=(0,a.useMemo)(()=>(0,o._G)(),[]),L=(0,a.useMemo)(()=>[{key:"all",title:"전체",count:$.length},...k.map(e=>({key:e.key,title:e.title,count:e.tools.length}))],[k,$]),A="all"===u?$:k.find(e=>e.key===u)?.tools??[],z=(0,a.useMemo)(()=>{let e=[];for(let t=0;t<$.length;t+=24)e.push($.slice(t,t+24));return e},[$]),D=(0,a.useMemo)(()=>(0,n.Ds)((0,n.fv)($),j),[$,j]);return(0,r.jsxs)("div",{className:"home-shell",children:[(0,r.jsxs)("div",{className:"home-mobile-top border-b border-gray-100 bg-white px-5 py-4 lg:hidden",children:[(0,r.jsxs)(l(),{href:"/",className:"flex items-center gap-2.5","aria-label":"UtilZip 홈",children:[(0,r.jsx)("span",{className:"grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-accent-sub",children:(0,r.jsx)(x.zt,{size:19,className:"text-accent"})}),(0,r.jsx)("span",{className:"text-[19px] font-extrabold leading-none tracking-[-0.02em] text-warm-900",children:"UtilZip"})]}),(0,r.jsx)("h1",{className:"mt-4 break-keep text-[24px] font-extrabold leading-[1.25] tracking-[-0.03em] text-warm-900",children:"필요한 무료 온라인 도구를 바로 찾으세요"}),(0,r.jsxs)("p",{className:"mb-3.5 mt-1.5 text-[13px] leading-[1.6] text-gray-500",children:["설치도 회원가입도 없이, 브라우저에서 바로 쓰는 무료 도구 ",$.length,"개"]}),(0,r.jsx)(F,{value:i,onChange:d})]}),(0,r.jsxs)("div",{className:"home-main-inner mx-auto max-w-[1160px] px-5 pb-16 pt-6 sm:px-6 lg:px-10 lg:pb-24 lg:pt-8",children:[(0,r.jsxs)("div",{className:"home-top-search mb-6 hidden items-center gap-6 lg:grid lg:grid-cols-[minmax(0,1fr)_408px] xl:gap-8",children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"max-w-[22ch] text-[40px] font-extrabold leading-[1.15] tracking-[-0.035em] text-warm-900",children:"필요한 무료 온라인 도구를 바로 찾으세요"}),(0,r.jsxs)("p",{className:"mt-4 text-[15px] font-normal leading-[1.7] tracking-[0.01em] text-gray-500",children:["설치도 회원가입도 없이, 브라우저에서 바로 쓰는 무료 도구 ",$.length,"개"]}),(0,r.jsx)("div",{className:"mt-7 max-w-[560px]",children:(0,r.jsx)(F,{value:i,onChange:d,size:"lg"})})]}),(0,r.jsx)(w,{className:"h-auto w-full max-w-[408px] justify-self-end"})]}),j?(0,r.jsxs)("section",{className:"home-section",children:[(0,r.jsx)(C,{children:`검색 ê²°ê

10³¼ (${D.length})`}),(0,r.jsx)("div",{className:"mt-7",children:D.length>0?(0,r.jsx)(N,{tools:D}):(0,r.jsxs)("div",{className:"rounded-2xl bg-white px-5 py-10 text-center ring-1 ring-warm-200 shadow-card sm:py-12",children:[(0,r.jsxs)("p",{className:"text-[15px] font-semibold text-warm-800",children:["‘",i.trim(),"’ 로는 찾지 못했습니다"]}),(0,r.jsx)("p",{className:"mx-auto mt-2 max-w-[34ch] text-[13px] leading-[1.7] text-gray-500",children:"이름 대신 하려는 일로 검색해 보세요. 아래 분류에서 골라 봐도 됩니다."}),(0,r.jsxs)("div",{className:"mt-6 flex flex-wrap items-center justify-center gap-2",children:[L.map(e=>(0,r.jsxs)("button",{type:"button",onClick:()=>{d(""),p("tools"),m(e.key)},className:"flex min-h-[44px] items-center gap-1.5 rounded-full border border-warm-200 bg-white px-3.5 text-[13px] font-semibold text-warm-700 transition-all duration-200 hover:-translate-y-0.5 hover:border-accent hover:bg-accent-sub hover:text-accent-deep hover:shadow-card-hover",children:[e.title,(0,r.jsx)("span",{className:"text-[12px] font-medium text-gray-400",children:e.count})]},e.key)),(0,r.jsxs)(l(),{href:"/play",className:"ml-1 flex min-h-[44px] shrink-0 items-center gap-1.5 rounded-full bg-accent px-4 text-[13px] font-bold text-white shadow-card transition-all duration-200 hover:-translate-y-0.5 hover:bg-accent-deep hover:shadow-card-hover",children:[(0,r.jsx)(v.A,{size:15}),"놀이터",(0,r.jsx)("span",{className:"text-[12px] font-semibold tabular-nums text-white/70",children:c.Nu.length}),(0,r.jsx)("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.6",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:(0,r.jsx)("path",{d:"m9 18 6-6-6-6"})})]})]})]})})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("section",{id:"home-list-top",className:"home-section","aria-labelledby":"home-list-heading",children:[(0,r.jsx)(C,{id:"home-list-heading",children:"play"===h?"유틸집 놀이터":"도구 리스트"}),(0,r.jsxs)("div",{className:"mb-5 mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-3",children:[(0,r.jsx)("p",{className:"text-sm font-normal tracking-[0.01em] text-gray-500",children:"play"===h?"일상에 작은 재미를 더해줄 놀거리 모음입니다.":"분류를 골라 필요한 도구만 모아 보세요."}),(0,r.jsx)(M,{showingPlay:"play"===h,onToggle:()=>p("play"===h?"tools":"play")})]}),"tools"===h&&(0,r.jsx)(_,{tabs:L,active:u,onChange:e=>{m(e),f(1)}}),"tools"===h&&"all"===u&&(0,r.jsxs)(r.Fragment,{children:[z.map((e,t)=>(0,r.jsx)("div",{hidden:t+1!==g,children:(0,r.jsx)(N,{tools:e})},t)),(0,r.jsx)(E,{total:z.length,page:g,onChange:e=>{f(e),document.getElementById("home-list-top")?.scrollIntoView({block:"start",behavior:"smooth"})}})]}),"tools"===h&&"all"!==u&&(0,r.jsx)(N,{tools:A}),(0,r.jsxs)("div",{hidden:"play"!==h,children:[(0,r.jsx)("ul",{className:"grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 lg:grid-cols-4",children:s.map(e=>(0,r.jsx)("li",{children:(0,r.jsx)(b,{item:e})},e.slug))}),y.length>0&&(0,r.jsxs)("div",{className:"mt-6 border-t border-warm-100 pt-5",children:[(0,r.jsx)("p",{className:"mb-3 text-[13px] font-bold text-warm-500",children:"놀거리 더 보기"}),(0,r.jsx)("ul",{className:"flex flex-wrap gap-2",children:y.map(e=>(0,r.jsx)("li",{children:(0,r.jsx)(l(),{href:`/play/${e.slug}`,className:"flex min-h-[36px] items-center rounded-full border border-warm-200 bg-white px-3.5 text-[13px] font-bold text-warm-600 transition-colors hover:border-accent hover:bg-accent-sub hover:text-accent-deep focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",children:e.name})},e.slug))})]}),(0,r.jsx)("div",{className:"mt-8 flex justify-center",children:(0,r.jsxs)(l(),{href:"/play",className:"flex min-h-[44px] items-center gap-2 rounded-full bg-accent px-5 text-[14px] font-bold text-white shadow-card transition-all duration-200 hover:-translate-y-0.5 hover:bg-accent-hover hover:shadow-card-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",children:[(0,r.jsx)(v.A,{size:16}),"놀이터 목록으로",(0,r.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.6",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:(0,r.jsx)("path",{d:"m9 18 6-6-6-6"})})]})})]})]}),t]})]})]})}},14544:(e,t,s)=>{"use strict";s.d(t,{B:()=>i});var r=s(12115);function i(){let e=(0,r.useRef)(null),[t,s]=(0,r.useState)("none");return(0,r.useEffect)(()=>{let t=e.current;if(!t)return;let r=()=>{let e=t.scrollWidth-t.clientWidth;if(e<=20)return s("none");let r=t.scrollLeft>1,i=t.scrollLeft<e-1;s(r&&i?"both":r?"start":i?"end":"none")};r(),t.addEventListener("scroll",r,{passive:!0});let i=new ResizeObserver(r);return i.observe(t),()=>{t.removeEventListener("scroll",r),i.disconnect()}},[]),{ref:e,edge:t}}},43800:(e,t,s)=>{"use strict";s.d(t,{default:()=>c});var r=s(95155),i=s(52619),l=s.n(i),a=s(12115),o=s(73290),n=s(14544);function c(e){let{groups:t}=e,[s,i]=(0,a.useState)(t[0]?.key??""),c=(0,a.useRef)({}),{ref:d,edge:x}=(0,n.B)(),h=function(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];i(e);let s=c.current[e];

10t&&s?.focus(),s?.scrollIntoView({block:"nearest",inline:"nearest"})};return(0,r.jsxs)("section",{className:"home-guide","aria-labelledby":"home-guide-heading",children:[(0,r.jsx)("h2",{id:"home-guide-heading",className:"text-[26px] font-extrabold leading-tight tracking-[-0.025em] text-warm-900",children:"이럴 땐 이 도구"}),(0,r.jsx)("p",{className:"mt-2.5 text-sm font-normal leading-[1.7] tracking-[0.01em] text-gray-500",children:"도구 이름이 기억나지 않을 때, 하려는 일로 찾아보세요"}),(0,r.jsx)("div",{ref:d,"data-edge":x,role:"tablist","aria-label":"상황 주제",className:"home-tabs mt-6 flex flex-nowrap gap-2 overflow-x-auto pb-1 md:flex-wrap md:overflow-visible md:pb-0",children:t.map((e,i)=>{let l=o.QG[e.icon],a=s===e.key,n=e.rows.reduce((e,t)=>e+t.tools.length,0);return(0,r.jsxs)("button",{type:"button",role:"tab",id:`home-guide-tab-${e.key}`,"aria-selected":a,"aria-controls":`home-guide-panel-${e.key}`,tabIndex:a?0:-1,ref:t=>{c.current[e.key]=t},onClick:()=>h(e.key),onKeyDown:e=>((e,s)=>{let r="ArrowRight"===e.key?1:"ArrowLeft"===e.key?-1:0;0!==r&&(e.preventDefault(),h(t[(s+r+t.length)%t.length].key,!0))})(e,i),className:`flex h-10 shrink-0 items-center gap-2 rounded-full pl-3.5 pr-2.5 text-[13px] font-semibold tracking-[-0.01em]
11                          transition-all duration-200 ease-out
12                          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 ${a?"bg-warm-800 text-white shadow-[0_8px_20px_-10px_rgba(30,45,61,0.7)]":"bg-white text-gray-600 ring-1 ring-gray-200/80 shadow-[0_1px_2px_rgba(16,24,40,0.04)] hover:-translate-y-0.5 hover:text-warm-800 hover:ring-gray-300 hover:shadow-[0_8px_18px_-12px_rgba(16,24,40,0.25)]"}`,children:[l&&(0,r.jsx)(l,{size:14}),(0,r.jsx)("span",{className:"whitespace-nowrap",children:e.title}),(0,r.jsx)("span",{className:`grid h-5 min-w-5 place-items-center rounded-full px-1.5 text-[11px] font-bold tabular-nums ${a?"bg-white/20 text-white":"bg-gray-100 text-gray-600"}`,children:n})]},e.key)})}),t.map(e=>

12{let t=s===e.key;return(0,r.jsx)("div",{role:"tabpanel",id:`home-guide-panel-${e.key}`,"aria-labelledby":`home-guide-tab-${e.key}`,hidden:!t,className:t?"home-guide-panel mt-5 rounded-2xl bg-white p-5 ring-1 ring-gray-200/60 shadow-[0_1px_2px_rgba(16,24,40,0.03)] sm:p-7":void 0,children:(0,r.jsx)("ul",{className:"grid gap-y-7 sm:gap-y-8 lg:grid-cols-2 lg:gap-x-12",children:e.rows.map(e=>(0,r.jsxs)("li",{children:[(0,r.jsx)("p",{className:"text-[14px] font-semibold leading-[1.5] tracking-[-0.01em] text-warm-800 sm:text-[15px]",children:e.situation}),(0,r.jsx)("span",{className:"mt-2.5 flex flex-wrap gap-2",children:e.tools.map(e=>(0,r.jsx)(l(),{href:`/tools/${e.slug}`,className:"inline-flex items-center rounded-full bg-accent-sub px-3 py-1.5 text-[12.5px] font-semibold leading-[1.4] text-accent-deep ring-1 ring-transparent transition-all duration-200 ease-out hover:-translate-y-0.5 hover:bg-accent hover:text-white hover:shadow-[0_8px_16px_-10px_rgba(79,70,229,0.85)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 sm:text-[13px]",children:e.name},e.slug))})]},e.situation))})},e.key)})]})}},70498:()=>{},71182:(e,t,s)=>{Promise.resolve().then(s.t.bind(s,52619,23)),Promise.resolve().then(s.t.bind(s,70498,23)),Promise.resolve().then(s.bind(s,53645)),Promise.resolve().then(s.bind(s,3676)),Promise.resolve().then(s.bind(s,43800))}},e=>{e.O(0,[8829,2619,3501,302,2836,4122,8441,1255,7358],()=>e(e.s=71182)),_N_E=e.O()}]);