https://naemo.ai/_next/static/chunks/3285.4690a123bbfcabf0.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3285],{13285:function(e,t,a){a.r(t),a.d(t,{default:function(){return j}});var n=a(57437),r=a(29),s=a.n(r),o=a(90982),i=a(2265),l=a(48736),c=a(17625),d=a(93448),m=a(4908),f=a(96214),b=a(64954);let p=[{value:"sans",label:"고딕",fontStack:'Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif'},{value:"serif",label:"명조",fontStack:'"Noto Serif KR", "Batang", "BatangChe", serif'},{value:"round",label:"주아",fontStack:'"Jua", sans-serif'},{value:"cursive",label:"나눔펜",fontStack:'"Nanum Pen Script", cursive'},{value:"batang",label:"고운바탕",fontStack:'"Gowun Batang", serif'},{value:"black",label:"한산스",fontStack:'"Black Han Sans", sans-serif'},{value:"flower",label:"감자꽃",fontStack:'"Gamja Flower", cursive'},{value:"stylish",label:"스타일",fontStack:'"Stylish", sans-serif'}],x=[{value:"#ffffff",label:"White"},{value:"#f9fafb",label:"Gray"},{value:"#fff1f2",label:"Rose"},{value:"#fff7ed",label:"Orange"},{value:"#fefce8",label:"Yellow"},{value:"#f0fdf4",label:"Green"},{value:"#eff6ff",label:"Blue"},{value:"#faf5ff",label:"Purple"}],h=(e,t)=>{let a=e.number,n=e.classNum||0,r=e.grade||0;switch(t.numberFormat){case"2-digit":return String(a).padStart(2,"0");case"4-digit":return"".concat(r).concat(n).concat(String(a).padStart(2,"0"));case"5-digit":return"".concat(r).concat(String(n).padStart(2,"0")).concat(String(a).padStart(2,"0"));default:return String(a)}},u=(0,i.memo)(e=>{let{pages:t,config:a,safeRows:r,safeCols:s}=e,o=(0,i.useRef)(null),[l,c]=(0,i.useState)(1),m=(0,i.useCallback)(()=>{let e=o.current;if(e)c(Math.min((e.clientWidth-48)/793.700787411,(e.clientHeight-48)/1122.5196850527,1))},[]);return(0,i.useEffect)(()=>{m();let e=o.current;if(!e)return;let t=new ResizeObserver(m);return t.observe(e),()=>t.disconnect()},[m]),(0,n.jsx)("div",{ref:o,className:"flex-1 bg-[#111] overflow-y-auto overflow-x-hidden flex flex-col items-center nametag-preview",style:{padding:24},children:(0,n.jsx)("div",{className:"flex flex-col items-center print:block",style:{gap:24*l},children:0===t.length||1===t.length&&0===t[0].length?(0,n.jsx)("div",{className:"bg-white shadow-2xl print:shadow-none box-border flex flex-col items-center justify-center p-8 print:hidden",style:{width:"210mm",height:"297mm",transform:"scale(".concat(l,")"),transformOrigin:"top center"},children:(0,n.jsx)(b.Z,{size:"lg",title:"표시할 학생이 없습니다",description:"담임 학급 학생 명단을 먼저 등록해 주세요."})}):t.map((e,t)=>(0,n.jsx)("div",{className:"bg-white shadow-2xl box-border nametag-page relative group",style:{width:"210mm",height:"297mm",padding:"".concat(a.padding,"mm"),transform:"scale(".concat(l,")"),transformOrigin:"top center",marginBottom:"".concat(1122.5196850527*(l-1),"px")},children:(0,n.jsx)("div",{className:"w-full h-full grid",style:{gridTemplateColumns:"repeat(".concat(s,", 1fr)"),gridTemplateRows:"repeat(".concat(r,", 1fr)"),gap:"".concat(a.gap,"mm")},children:e.map((e,t)=>{var r;return(0,n.jsx)("div",{className:(0,d.cn)("flex items-center justify-center text-black break-inside-avoid overflow-hidden relative border border-gray-400"),style:{fontSize:"".concat(a.fontSize,"pt"),borderRadius:"".concat(a.borderRadius,"mm"),fontFamily:null===(r=p.find(e=>e.value===a.fontFamily))||void 0===r?void 0:r.fontStack,backgroundColor:a.backgroundColor},children:(0,n.jsxs)("div",{className:(0,d.cn)("flex gap-[0.2em] items-center justify-center w-full h-full","above"===a.numberPosition?"flex-col":"flex-row"),children:[a.showNumber&&(0,n.jsx)("div",{className:"font-bold leading-none opacity-80",style:{fontSize:"0.5em"},children:h(e,a)}),a.showName&&(0,n.jsx)("div",{className:"font-bold leading-none whitespace-nowrap",style:{writingMode:"vertical"===a.orientation?"vertical-rl":"horizontal-tb",textOrientation:"vertical"===a.orientation?"upright":void 0},children:e.name})]})},e.id)})})},t))})})},(e,t)=>e.config===t.config&&e.pages===t.pages);u.displayName="NameTagPreview";let g=(0,i.memo)(e=>{let{options:t,value:a,onChange:r,labels:s,disabled:o=!1}=e;return(0,n.jsx)("div",{className:(0,d.cn)("flex bg-[#111] rounded-lg p-1 border border-[#222] w-full h-[36px]",o&&"opacity-30 pointer-events-none"),children:t.map(e=>(0,n.jsx)("button",{onClick:()=>r(e),className:(0,d.cn)("flex-1 px-3 text-xs font-bold rounded transition duration-200 h-full flex items-center justify-center whitespace-nowrap nametag-toggle-btn",a===e?"text-white":"text-[#444] hover:text-[#666]"),children:s[e]},e))})});g.displayName="SegmentedControl";let w=(0,i.memo)(e=>{let{options:t}=e;return(0,n.jsx)("div",{className:"flex bg-[#111] rounded-lg p-1 border border-[#222] w-full h-[36px]",children:t.map((e,t)=>(0,n.jsx)("button",{onClick:e.onChange,className:(0,d.cn)("flex-1 px-3 text-xs font-bold rounded transition duration-200 h-full flex items-center justify-center whitespace-nowrap nametag-toggle-btn",e.checked?"text-white":"text-[#444] hover:text-[#666]"),children:e.label},t))})});w.displayName="MultiToggleGroup";let v=(0,i.memo)(e=>{let{label:t,value:a,onChange:r,min:o,max:i,step:l=1,formatValue:c}=e,d=i===o?0:(a-o)/(i-o)*100;return(0,n.jsxs)("div",{className:"jsx-8f2c0640cd85d973 flex items-center justify-between gap-4 h-[32px]",children:[(0,n.jsx)("label",{className:"jsx-8f2c0640cd85d973 text-xs text-[#888] font-medium shrink-0 w-16 text-left",children:t}),(0,n.jsxs)("div",{className:"jsx-8f2c0640cd85d973 flex-1 flex items-center gap-3 relative",children:[(0,n.jsx)("input",{type:"range","aria-label":t,min:o,max:i,step:l,value:a,onChange:e=>r(parseFloat(e.target.value)),style:{background:"linear-gradient(to right, var(--slider-fill, #666) 0%, var(--slider-fill, #666) ".concat(d,"%, var(--slider-empty, #222) ").concat(d,"%, var(--slider-empty, #222) 100%)")},className:"jsx-8f2c0640cd85d973 w-full h-1.5 bg-[#222] rounded-lg appearance-none cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-white slider-thumb-styles"}),(0,n.jsx)("span",{className:"jsx-8f2c0640cd85d973 text-sm text-white w-6 text-right font-mono font-bold nametag-slider-value",children:c?c(a):a})]}),(0,n.jsx)(s(),{id:"8f2c0640cd85d973",children:".slider-thumb-styles.jsx-8f2c0640cd85d973::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;width:16px;height:16px;background:#e0e0e0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;cursor:pointer;border:2px solid#333;-webkit-transition:-webkit-transform.1s ease,background.2s;-moz-transition:-moz-transform.1s ease,background.2s;-o-transition:-o-transform.1s ease,background.2s;transition:-webkit-transform.1s ease,background.2s;transition:-moz-transform.1s ease,background.2s;transition:-o-transform.1s ease,background.2s;transition:transform.1s ease,background.2s}.slider-thumb-styles.jsx-8f2c0640cd85d973::-webkit-slider-thumb:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);

1-o-transform:scale(1.2);transform:scale(1.2);background:white}.slider-thumb-styles.jsx-8f2c0640cd85d973::-moz-range-thumb{width:16px;height:16px;background:#e0e0e0;border:none;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;cursor:pointer;border:2px solid#333;-webkit-transition:-webkit-transform.1s ease,background.2s;-moz-transition:-moz-transform.1s ease,background.2s;-o-transition:-o-transform.1s ease,background.2s;transition:-webkit-transform.1s ease,background.2s;transition:-moz-transform.1s ease,background.2s;transition:-o-transform.1s ease,background.2s;transition:transform.1s ease,background.2s}.slider-thumb-styles.jsx-8f2c0640cd85d973::-moz-range-thumb:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);background:white}"})]})});function j(){let{students:e,isLoading:t}=(0,m.AF)(),a=(0,i.useMemo)(()=>[...e.filter(e=>"담임 학급"===e.homeClassId)].sort((e,t)=>e.number-t.number),[e]),[r,b]=(0,i.useState)(()=>{{let e=localStorage.getItem("saemo-nametag-config");if(e)try{return JSON.parse(e)}catch(e){console.error("Failed to parse nametag config",e)}}return f.DEMO_NAMETAG_CONFIG}),j=(0,i.useDeferredValue)(r);(0,i.useEffect)(()=>{localStorage.setItem("saemo-nametag-config",JSON.stringify(j))},[j]);let y=Math.max(1,Math.round(j.rows)),N=Math.max(1,Math.round(j.cols)),S=(0,i.useMemo)(()=>{let e=y*N,t=[];if(0===a.length)t.push([]);else for(let n=0;n<a.length;n+=e)t.push(a.slice(n,n+e));return t},[a,y,N]);return t&&0===e.length?(0,n.jsx)(o.ContentLoadingState,{variant:"zones",label:"학생 명단을 불러오고 있어요"}):(0,n.jsxs)("div",{className:"jsx-c5b6f16ec328d378 h-full flex flex-col md:flex-row bg-[#0D0D0D] overflow-hidden text-white nametag-root",children:[(0,n.jsx)(s(),{id:"e7fa976f9aec1f3",children:'@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gamja+Flower&family=Gowun+Batang&family=Jua&family=Nanum+Pen+Script&family=Noto+Serif+KR:wght@400;700&family=Stylish&display=swap");'}),(0,n.jsxs)("div",{className:"jsx-c5b6f16ec328d378 order-2 md:order-none min-h-0 flex-1 md:flex-none w-full md:w-80 border-b md:border-b-0 md:border-r border-[#1a1a1a] flex flex-col bg-[#0D0D0D] shrink-0 print:hidden overflow-y-auto custom-scrollbar nav-rail-shadow sub-sidebar-enter",children:[(0,n.jsxs)("div",{className:"jsx-c5b6f16ec328d378 p-6 space-y-8 mt-4",children:[(0,n.jsx)("div",{className:"jsx-c5b6f16ec328d378 space-y-4 text-left",children:(0,n.jsxs)("div",{className:"jsx-c5b6f16ec328d378 space-y-2",children:[(0,n.jsx)(v,{label:"행",value:r.rows,onChange:e=>b(t=>({...t,rows:e})),min:1,max:20,step:1}),(0,n.jsx)(v,{label:"열",value:r.cols,onChange:e=>b(t=>({...t,cols:e})),min:1,max:10,step:1}),(0,n.jsx)(v,{label:"곡률 (mm)",value:r.borderRadius,onChange:e=>b(t=>({...t,borderRadius:e})),min:0,max:20,step:1}),(0,n.jsx)(v,{label:"글자 크기",value:r.fontSize,onChange:e=>b(t=>({...t,fontSize:e})),min:10,max:150,step:1})]})}),(0,n.jsxs)("div",{className:"jsx-c5b6f16ec328d378 space-y-4",children:[(0,n.jsxs)("div",{className:"jsx-c5b6f16ec328d378 flex items-center gap-4",children:[(0,n.jsx)("span",{className:"jsx-c5b6f16ec328d378 text-xs text-[#888] font-medium shrink-0 w-16 text-left",children:"구성 요소"}),(0,n.jsx)("div",{className:"jsx-c5b6f16ec328d378 flex-1",children:(0,n.jsx)(w,{options:[{label:"학번",checked:r.showNumber,onChange:()=>b(e=>({...e,showNumber:!e.showNumber}))},{label:"이름",checked:r.showName,onChange:()=>b(e=>({...e,showName:!e.showName}))}]})})]}),(0,n.jsxs)("div",{className:"jsx-c5b6f16ec328d378 flex items-center gap-4",children:[(0,n.jsx)("span",{className:"jsx-c5b6f16ec328d378 text-xs text-[#888] font-medium shrink-0 w-16 text-left",children:"텍스트 방향"}),(0,n.jsx)("div",{className:"jsx-c5b6f16ec328d378 flex-1",children:(0,n.jsx)(g,{options:["horizontal","vertical"],value:r.orientation,onChange:e=>b(t=>({...t,orientation:e})),labels:{horizontal:"가로",vertical:"세로"}})})]}),(0,n.jsxs)("div",{className:"jsx-c5b6f16ec328d378 "+((0,d.cn)("flex items-center gap-4 transition-opacity duration-200",!r.showNumber&&"opacity-30")||""),children:[(0,n.jsx)("span",{className:"jsx-c5b6f16ec328d378 text-xs text-[#888] font-medium shrink-0 w-16 text-left",children:"학번 형식"}),(0,n.jsx)("div",{className:"jsx-c5b6f16ec328d378 flex-1",children:(0,n.jsx)(g,{options:["2-digit","4-digit","5-digit"],value:r.numberFormat,onChange:e=>b(t=>({...t,numberFormat:e})),labels:{"2-digit":"2자리","4-digit":"4자리","5-digit":"5자리"},disabled:!r.showNumber})})]}),(0,n.jsxs)("div",{className:"jsx-c5b6f16ec328d378 "+((0,d.cn)("flex items-center gap-4 transition-opacity duration-200",!r.showNumber&&"opacity-30")||""),children:[(0,n.jsx)("span",{className:"jsx-c5b6f16ec328d378 text-xs text-[#888] font-medium shrink-0 w-16 text-left",children:"학번 위치"}),(0,n.jsx)("div",{className:"jsx-c5b6f16ec328d378 flex-1",children:(0,n.jsx)(g,{options:["above","left"],value:r.numberPosition,onChange:e=>b(t=>({...t,numberPosition:e})),labels:{above:"이름 위",left:"이름 왼쪽"},disabled:!r.showNumber})})]}),(0,n.jsxs)("div",{className:"jsx-c5b6f16ec328d378 flex items-start gap-4",children:[(0,n.jsx)("span",{className:"jsx-c5b6f16ec328d378 text-xs text-[#888] font-medium shrink-0 w-16 text-left mt-2",children:"글꼴"}),(0,n.jsx)("div",{className:"jsx-c5b6f16ec328d378 flex-1 grid grid-cols-4 gap-2",children:p.map(e=>(0,n.jsx)("button",{onClick:()=>b(t=>({...t,fontFamily:e.value})),title:e.label,style:{fontFamily:e.fontStack},className:"jsx-c5b6f16ec328d378 "+((0,d.cn)("flex flex-col items-center justify-center rounded-lg border text-xs transition w-10 h-10 font-choice-btn",r.fontFamily===e.value?"bg-[#1A1A1A] border-white text-white":"bg-[#111] border-[#222] text-[#666] hover:border-[#444]")||""),children:(0,n.jsx)("span",{className:"jsx-c5b6f16ec328d378 text-base font-medium leading-none",children:"가"})},e.value))})]}),(0,n.jsxs)("div",{className:"jsx-c5b6f16ec328d378 flex items-start gap-4",children:[(0,n.jsx)("span",{className:"jsx-c5b6f16ec328d378 text-xs text-[#888] font-medium shrink-0 w-16 text-left mt-2",children:"배경색"}),(0,n.jsx)("div",{className:"jsx-c5b6f16ec328d378 flex-1 grid grid-cols-4 gap-2",children:x.map(e=>(0,n.jsx)("button",{onClick:()=>b(t=>({...t,backgroundColor:e.value})),style:{backgroundColor:e.value},title:e.label,className:"jsx-c5b6f16ec328d378 "+((0,d.cn)("w-10 h-10 rounded-lg border-2 transition hover:scale-105 color-choice-btn",r.backgroundColor===e.value?"border-blue-500 shadow-lg scale-105":"border-transparent")||"")},e.value))})]})]})]}),(0,n.jsxs)("div",{className:"jsx-c5b6f16ec328d378 mt-auto p-6 flex gap-3",children:[(0,n.jsxs)("button",{onClick:()=>k({...r,rows:y,cols:N},S,e=>h(e,r),p),className:"jsx-c5b6f16ec328d378 flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-[#333] hover:bg-[#444] text-white text-sm font-medium rounded-lg transition active:scale-95 border border-[#444]",children:[(0,n.jsx)(l.Z,{size:16}),(0,n.jsx)("span",{className:"jsx-c5b6f16ec328d378",children:"한글 파일"})]}),(0,n.jsxs)("button",{onClick:()=>{window.print()},className:"jsx-c5b6f16ec328d378 flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-[#333] hover:bg-[#444] text-white text-sm font-medium rounded-lg transition active:scale-95 border border-[#444]",children:[(0,n.jsx)(c.Z,{size:16}),(0,n.jsx)("span",{className:"jsx-c5b6f16ec328d378",children:"인쇄하기"})]})]})]}),(0,n.jsx)("div",{className:"jsx-c5b6f16ec328d378 print:contents flex flex-col order-1 md:order-none h-[42%] min-h-[180px] md:h-full md:min-h-0 md:flex-1 overflow-hidden shrink-0",children:(0,n.jsx)(u,{pages:S,config:j,safeRows:y,safeCols:N})}),(0,n.jsx)(s(),{id:"4713eb2a2ce3606c",children:"@media print{@page{size:A4 portrait;margin:0}html,body{margin:0!important;padding:0!important;height:auto!important;overflow:visible!important;background:white!important;-webkit-print-color-adjust:exact;color-adjust:exact;print-color-adjust:exact}main,section{height:auto!important;overflow:visible!important}.nametag-root{display:block!important;height:auto!important;overflow:visible!important;background:white!important}.nametag-preview{display:block!important;height:auto!important;overflow:visible!important;padding:0!important;background:white!important}.nametag-preview>div{display:block!important;height:auto!important}.nametag-page{width:210mm!important;height:297mm!important;margin:0!important;-webkit-box-sizing:border-box!important;-moz-box-sizing:border-box!important;box-sizing:border-box!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important;page-break-after:always;page-break-inside:avoid;overflow:hidden!important}.nametag-page>*{height:100%!important}.nametag-page:last-child{page-break-after:auto}}"})]})}v.displayName="SliderControl";let k=(e,t,a,n)=>{var r;let s=(null===(r=n.find(t=>t.value===e.fontFamily))||void 0===r?void 0:r.fontStack)||"sans-serif",o=210-2*e.padding,i=297-2*e.padding,l=e.gap*(e.cols-1),c=e.gap*(e.rows-1),m=(o-l)/e.cols,f=(i-c)/e.rows,b="vertical"===e.orientation?"writing-mode: vertical-rl; text-orientation: upright;":"",p='<!DOCTYPE html>\n<html lang="ko">\n<head>\n<meta charset="UTF-8">\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gamja+Flower&family=Gowun+Batang&family=Jua&family=Nanum+Pen+Script&family=Noto+Serif+KR:wght@400;700&family=Stylish&display=swap\');\n@page { size: A4 portrait; margin: 0; }\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { margin: 0; padding: 0; }\ntable {\n    width: '.concat(o,"mm;\n    border-collapse: separate;\n    border-spacing: ").concat(e.gap,"mm;\n    margin: 0;\n    padding: 0;\n    table-layout: fixed;\n}\n.page-wrapper {\n    width: 210mm;\n    height: 297mm;\n    padding: ").concat(e.padding,"mm;\n    padding-left: ").concat(e.padding-e.gap,"mm;\n    padding-top: ").concat(e.padding-e.gap,"mm;\n    box-sizing: border-box;\n    overflow: hidden;\n    page-break-after: always;\n}\n.page-wrapper:last-child { page-break-after: auto; }\ntd {\n    width: ").concat(m,"mm;\n    height: ").concat(f,"mm;\n    border: 1px solid #9ca3af;\n    border-radius: ").concat(e.borderRadius,"mm;\n    background-color: ").concat(e.backgroundColor,";\n    font-family: ").concat(s,";\n    font-size: ").concat(e.fontSize,"pt;\n    text-align: center;\n    vertical-align: middle;\n    overflow: hidden;\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n}\ntd.empty {\n    border-color: transparent;\n    background: transparent;\n}\n.num {\n    font-size: 0.5em;\n    font-weight: bold;\n    opacity: 0.8;\n    line-height: 1;\n}\n.name {\n    font-weight: bold;\n    line-height: 1;\n    white-space: nowrap;\n    ").concat(b,"\n}\n</style>\n</head>\n<body>\n");t.forEach(t=>{p+='<div class="page-wrapper"><table>';let n=0;for(let r=0;r<e.rows;r++){p+="<tr>";for(let r=0;r<e.cols;r++){let r=t[n];r?(p+="<td>",e.showNumber&&(p+='<div class="num">'.concat(a(r),"</div>")),e.showName&&(p+='<div class="name">'.concat(r.name,"</div>")),p+="</td>"):p+='<td class="empty"></td>',n++}p+="</tr>"}p+="</table></div>"});let x=new Blob([p+="</body></html>"],{type:"application/force-download"}

1),h=window.URL.createObjectURL(x),u=document.createElement("a");u.href=h,u.download="이름표_".concat((0,d.RJ)(),".hwp"),document.body.appendChild(u),u.click(),document.body.removeChild(u),window.URL.revokeObjectURL(h)}}}]);