https://utilzip.com/_next/static/chunks/2355.86e55c24af305194.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2355],{92355:(e,t,c)=>{c.r(t),c.d(t,{default:()=>i});var s=c(95155),a=c(12115);let r=[[{t:"Esc",c:"Escape"},{gap:.6},{t:"F1",c:"F1"},{t:"F2",c:"F2"},{t:"F3",c:"F3"},{t:"F4",c:"F4"},{gap:.6},{t:"F5",c:"F5"},{t:"F6",c:"F6"},{t:"F7",c:"F7"},{t:"F8",c:"F8"},{gap:.6},{t:"F9",c:"F9"},{t:"F10",c:"F10"},{t:"F11",c:"F11"},{t:"F12",c:"F12"}],[{t:"`",c:"Backquote",sub:"~"},{t:"1",c:"Digit1",sub:"!"},{t:"2",c:"Digit2",sub:"@"},{t:"3",c:"Digit3",sub:"#"},{t:"4",c:"Digit4",sub:"$"},{t:"5",c:"Digit5",sub:"%"},{t:"6",c:"Digit6",sub:"^"},{t:"7",c:"Digit7",sub:"&"},{t:"8",c:"Digit8",sub:"*"},{t:"9",c:"Digit9",sub:"("},{t:"0",c:"Digit0",sub:")"},{t:"-",c:"Minus",sub:"_"},{t:"=",c:"Equal",sub:"+"},{t:"⌫",c:"Backspace",w:2}],[{t:"Tab",c:"Tab",w:1.5},{t:"Q",c:"KeyQ"},{t:"W",c:"KeyW"},{t:"E",c:"KeyE"},{t:"R",c:"KeyR"},{t:"T",c:"KeyT"},{t:"Y",c:"KeyY"},{t:"U",c:"KeyU"},{t:"I",c:"KeyI"},{t:"O",c:"KeyO"},{t:"P",c:"KeyP"},{t:"[",c:"BracketLeft",sub:"{"},{t:"]",c:"BracketRight",sub:"}"},{t:"\\",c:"Backslash",sub:"|",w:1.5}],[{t:"Caps",c:"CapsLock",w:1.75},{t:"A",c:"KeyA"},{t:"S",c:"KeyS"},{t:"D",c:"KeyD"},{t:"F",c:"KeyF"},{t:"G",c:"KeyG"},{t:"H",c:"KeyH"},{t:"J",c:"KeyJ"},{t:"K",c:"KeyK"},{t:"L",c:"KeyL"},{t:";",c:"Semicolon",sub:":"},{t:"'",c:"Quote",sub:'"'},{t:"Enter",c:"Enter",w:2.25}],[{t:"Shift",c:"ShiftLeft",w:2.25},{t:"Z",c:"KeyZ"},{t:"X",c:"KeyX"},{t:"C",c:"KeyC"},{t:"V",c:"KeyV"},{t:"B",c:"KeyB"},{t:"N",c:"KeyN"},{t:"M",c:"KeyM"},{t:",",c:"Comma",sub:"<"},{t:".",c:"Period",sub:">"},{t:"/",c:"Slash",sub:"?"},{t:"Shift",c:"ShiftRight",w:2.75}],[{t:"Ctrl",c:"ControlLeft",w:1.25},{t:"⊞",c:"MetaLeft",w:1.25},{t:"Alt",c:"AltLeft",w:1.25},{t:"한자",c:"Lang2",w:1.25},{t:"Space",c:"Space",w:3.75},{t:"한/영",c:"Lang1",w:1.25},{t:"Alt",c:"AltRight",w:1.25},{t:"⊞",c:"MetaRight",w:1.25},{t:"≡",c:"ContextMenu",w:1.25},{t:"Ctrl",c:"ControlRight",w:1.25}]],l=[[{t:"PrtSc",c:"PrintScreen"},{t:"ScrLk",c:"ScrollLock"},{t:"Pause",c:"Pause"}],[{t:"Ins",c:"Insert"},{t:"Home",c:"Home"},{t:"PgUp",c:"PageUp"}],[{t:"Del",c:"Delete"},{t:"End",c:"End"},{t:"PgDn",c:"PageDown"}],[null,null,null],[null,{t:"↑",c:"ArrowUp"},null],[{t:"←",c:"ArrowLeft"},{t:"↓",c:"ArrowDown"},{t:"→",c:"ArrowRight"}]],n=[{t:"Num",c:"NumLock",col:1,row:2},{t:"/",c:"NumpadDivide",col:2,row:2},{t:"*",c:"NumpadMultiply",col:3,row:2},{t:"-",c:"NumpadSubtract",col:4,row:2},{t:"7",c:"Numpad7",col:1,row:3},{t:"8",c:"Numpad8",col:2,row:3},{t:"9",c:"Numpad9",col:3,row:3},{t:"+",c:"NumpadAdd",col:4,row:3,ch:2},{t:"4",c:"Numpad4",col:1,row:4},{t:"5",c:"Numpad5",col:2,row:4},{t:"6",c:"Numpad6",col:3,row:4},{t:"1",c:"Numpad1",col:1,row:5},{t:"2",c:"Numpad2",col:2,row:5},{t:"3",c:"Numpad3",col:3,row:5},{t:"Enter",c:"NumpadEnter",col:4,row:5,ch:2},{t:"0",c:"Numpad0",col:1,row:6,cw:2},{t:".",c:"NumpadDecimal",col:3,row:6}];function o(e){let{label:t,sub:c,w:a=1,h:r=1,u:l,uh:n,on:o,done:i}=e,d=Math.max(2,.07*l),u=t.length>=4?.26*l:.34*l;return(0,s.jsx)("div",{style:{width:a*l,height:r*n,padding:d},className:"shrink-0",children:(0,s.jsxs)("div",{style:{fontSize:u},className:`flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-[6px] border leading-none font-medium transition-colors ${o?"border-accent bg-accent text-white shadow-sm":i?"border-accent/40 bg-accent-sub text-accent-hover":"border-warm-200 bg-white text-warm-600"}`,children:[c&&l>20&&(0,s.jsx)("span",{style:{fontSize:.82*u},className:"opacity-60",children:c}),(0,s.jsx)("span",{className:"max-w-full truncate px-0.5",children:t})]})})}function i(){let e=(0,a.useRef)(null),[t,c]=(0,a.useState)(36),[i,d]=(0,a.useState)(new Set),[u,w]=(0,a.useState)(new Set),[m,h]=(0,a.useState)(null);(0,a.useEffect)(()=>{let t=e.current;if(!t)return;let s=()=>{c(Math.max(30,Math.min(50,(t.clientWidth-24)/22)))};s();let a=new ResizeObserver(s);return a.observe(t),()=>a.disconnect()},[]);let p=e=>{if(!e||!e.tagName)return!1;let t=e.tagName.toLowerCase();return"input"===t||"textarea"===t||"select"===t||e.isContentEditable},x=new Set(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","PageUp","PageDown","Home","End","Backspace","F1","F3","F5","F7","F10","F11"]);(0,a.useEffect)(()=>{let e=e=>{p(e.target)||(!x.has(e.code)||e.metaKey||e.ctrlKey||e.altKey||e.preventDefault(),h({key:e.key,code:e.code,keyCode:e.keyCode,location:e.location,modifiers:[e.ctrlKey&&"Ctrl",e.shiftKey&&"Shift",e.altKey&&"Alt",e.metaKey&&"Meta"].filter(

1Boolean).join(" + ")}),d(t=>t.has(e.code)?t:new Set(t).add(e.code)),w(t=>t.has(e.code)?t:new Set(t).add(e.code)))},t=e=>{p(e.target)||d(t=>{if("Meta"===e.key)return new Set;let c=new Set(t);return c.delete(e.code),c})},c=()=>d(new Set);return window.addEventListener("keydown",e),window.addEventListener("keyup",t),window.addEventListener("blur",c),()=>{window.removeEventListener("keydown",e),window.removeEventListener("keyup",t),window.removeEventListener("blur",c)}},[]);let b=1.3*t;return(0,s.jsxs)("div",{className:"w-full pt-1",children:[(0,s.jsxs)("div",{className:"relative w-full rounded-2xl border border-warm-200 bg-warm-50/60 p-3 sm:p-6",children:[i.size>1&&(0,s.jsxs)("span",{className:"rounded-full bg-accent-sub px-2.5 py-0.5 text-xs font-semibold text-accent-deep",children:["동시 입력 ",i.size,"개"]}),u.size>0&&(0,s.jsx)("button",{type:"button",onClick:()=>{w(new Set),d(new Set),h(null)},className:"absolute right-3 top-3 z-10 rounded-md px-2.5 py-1 text-xs font-medium text-gray-500 transition hover:bg-white hover:text-gray-700",children:"다시 테스트"}),(0,s.jsxs)("div",{className:"mb-4 rounded-xl border border-warm-200 bg-white px-4 py-3",children:[(0,s.jsx)("p",{className:"mb-2 text-[11px] font-bold uppercase tracking-wide text-warm-400",children:"마지막으로 누른 키"}),m?(0,s.jsx)("dl",{className:"grid grid-cols-2 gap-x-4 gap-y-2 sm:grid-cols-4",children:[["key"," "===m.key?"(스페이스)":m.key],["code",m.code],["keyCode",String(m.keyCode)],["조합키",m.modifiers||"—"]].map(e=>{let[t,c]=e;return(0,s.jsxs)("div",{className:"min-w-0",children:[(0,s.jsx)("dt",{className:"text-[11px] text-warm-400",children:t}),(0,s.jsx)("dd",{className:"truncate font-mono text-sm font-semibold text-warm-800",title:c,children:c})]},t)})}):(0,s.jsx)("p",{className:"text-sm text-warm-400",children:"아무 키나 눌러 보세요 — key\xb7code\xb7keyCode 값이 여기에 표시됩니다."})]}),(0,s.jsx)("div",{ref:e,className:"overflow-x-auto",children:(0,s.jsxs)("div",{className:"mx-auto flex w-max select-none items-start",style:{gap:12},children:[(0,s.jsx)("div",{className:"flex flex-col",children:r.map((e,c)=>(0,s.jsx)("div",{className:"flex",children:e.map((e,c)=>"gap"in e?(0,s.jsx)("div",{style:{width:e.gap*t,height:b},className:"shrink-0"},c):(0,s.jsx)(o,{label:e.t,sub:e.sub,w:e.w,u:t,uh:b,on:i.has(e.c),done:u.has(e.c)},c))},c))}),(0,s.jsx)("div",{className:"flex flex-col",children:l.map((e,c)=>(0,s.jsx)("div",{className:"flex",style:{height:b},children:e.map((e,c)=>e?(0,s.jsx)(o,{label:e.t,sub:e.sub,u:t,uh:b,on:i.has(e.c),done:u.has(e.c)},c):(0,s.jsx)("div",{style:{width:t,height:b},className:"shrink-0"},c))},c))}),(0,s.jsx)("div",{className:"grid",style:{gridTemplateColumns:`repeat(4, ${t}px)`,gridAutoRows:`${b}px`},children:n.map((e,c)=>(0,s.jsx)("div",{style:{gridColumn:`${e.col} / span ${e.cw??1}`,gridRow:`${e.row} / span ${e.ch??1}`},children:(0,s.jsx)(o,{label:e.t,sub:e.sub,w:e.cw??1,h:e.ch??1,u:t,uh:b,on:i.has(e.c),done:u.has(e.c)})},c))})]})})]}),(0,s.jsx)("div",{className:"mt-3 border-t border-dashed border-warm-300","aria-hidden":"true"})]})}}}]);