var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var u=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),g=(a,n)=>{for(var s in n)l(a,s,{get:n[s],enumerable:!0})},o=(a,n,s,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of h(n))!k.call(a,c)&&c!==s&&l(a,c,{get:()=>n[c],enumerable:!(t=m(n,c))||t.enumerable});return a};var f=(a,n,s)=>(s=a!=null?d(N(a)):{},o(n||!a||!a.__esModule?l(s,"default",{value:a,enumerable:!0}):s,a)),y=a=>o(l({},"__esModule",{value:!0}),a);var r=u((D,i)=>{i.exports=_jsx_runtime});var C={};g(C,{default:()=>x,frontmatter:()=>w});var e=f(r()),w={description:"\uBE14\uB85C\uADF8 - next/image placeholder \uC18D\uC131 \uC801\uC6A9"};function p(a){let n=Object.assign({p:"p",code:"code",h2:"h2",a:"a",h3:"h3",pre:"pre",span:"span",ul:"ul",li:"li",strong:"strong",blockquote:"blockquote",h4:"h4",br:"br",img:"img",hr:"hr"},a.components),{Admonition:s}=n;return s||P("Admonition",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.p,{children:["\uBE14\uB85C\uADF8\uC5D0 next/image ",(0,e.jsx)(n.code,{children:"placeholder"})," \uC18D\uC131\uC744 \uC801\uC6A9\uD588\uB2E4."]}),` `,(0,e.jsx)(n.h2,{id:"\uAE30\uC874\uC758-\uBB38\uC81C\uC810",children:(0,e.jsx)(n.a,{href:"#\uAE30\uC874\uC758-\uBB38\uC81C\uC810",children:"\uAE30\uC874\uC758 \uBB38\uC81C\uC810"})}),` `,(0,e.jsx)(n.p,{children:"mdx\uC758 \uC774\uBBF8\uC9C0\uB97C next/image\uB85C \uD588\uC744 \uB54C, \uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC624\uB294 \uB3D9\uC548 \uC544\uBB34\uAC83\uB3C4 \uB80C\uB354\uB9C1\uB418\uC9C0 \uC54A\uB2E4\uAC00 \uC774\uBBF8\uC9C0\uAC00 \uB85C\uB4DC\uB418\uBA74 \uB80C\uB354\uB9C1\uB418\uB294 \uD604\uC0C1\uC774 \uC788\uC5C8\uB2E4. \uADF8\uB85C \uC778\uD574 layout shift\uAC00 \uBC1C\uC0DD\uD588\uACE0, \uC774\uB294 UX\uC5D0 \uC88B\uC9C0 \uC54A\uC740 \uC601\uD5A5\uC744 \uBBF8\uCCE4\uB2E4."}),` `,(0,e.jsx)(n.h2,{id:"\uD574\uACB0-\uBC29\uBC95",children:(0,e.jsx)(n.a,{href:"#\uD574\uACB0-\uBC29\uBC95",children:"\uD574\uACB0 \uBC29\uBC95"})}),` `,(0,e.jsxs)(n.p,{children:["\uADF8\uB798\uC11C next/image\uC758 placeholder \uC18D\uC131\uC744 \uC801\uC6A9\uD574\uBCF4\uC558\uB2E4. \uC801\uC6A9\uD558\uAE30 \uC704\uD574\uC11C\uB294 \uBA3C\uC800 ",(0,e.jsx)(n.a,{href:"https://plaiceholder.co/docs",children:"plaiceholder"})," \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB97C \uC124\uCE58\uD574\uC57C \uD55C\uB2E4."]}),` `,(0,e.jsx)(n.h3,{id:"nextimage\uC758-placeholder-\uC18D\uC131",children:(0,e.jsx)(n.a,{href:"#nextimage\uC758-placeholder-\uC18D\uC131",children:"next/image\uC758 placeholder \uC18D\uC131"})}),` `,(0,e.jsx)(n.p,{children:"\uD574\uB2F9 \uC18D\uC131\uC744 \uC0AC\uC6A9\uD558\uAC8C \uB418\uBA74 \uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC624\uB294 \uB3D9\uC548 placeholder \uC774\uBBF8\uC9C0\uB97C \uBCF4\uC5EC\uC900\uB2E4. \uADF8\uB9AC\uACE0 \uC774\uBBF8\uC9C0\uAC00 \uB85C\uB4DC\uB418\uBA74 \uAE30\uC874\uC758 \uC774\uBBF8\uC9C0\uB85C \uAD50\uCCB4\uD55C\uB2E4."}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// https://nextjs.org/docs/pages/api-reference/components/image#placeholder"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Image"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"src",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"alt"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"alt",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"width"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"width",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"height"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"height",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"placeholder"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"blur",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"blurDataURL"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"blurDataURL",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})}),` `]})]})}),` `,(0,e.jsxs)(s,{type:"note",title:"placeholder \uC18D\uC131\uC758 \uAC12",children:[(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"PlaceholderValue"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:"'blur'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'empty'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"data:image/"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"//..."}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" placeholder",(0,e.jsx)(n.span,{className:"token operator",children:"?"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PlaceholderValue"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"undefined"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:"empty"})," : ",(0,e.jsx)(n.strong,{children:"default"})," \uAC12. \uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC624\uB294 \uB3D9\uC548 \uC544\uBB34\uAC83\uB3C4 \uBCF4\uC5EC\uC8FC\uC9C0 \uC54A\uB294\uB2E4."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:"blur"})," : \uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC624\uB294 \uB3D9\uC548 blur \uC774\uBBF8\uC9C0\uB97C \uBCF4\uC5EC\uC900\uB2E4. (*blurDataURL \uC18D\uC131 \uD544\uC694)"]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:"data:image/${string}"})," : \uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC624\uB294 \uB3D9\uC548 \uD574\uB2F9 data url\uC744 \uBCF4\uC5EC\uC900\uB2E4."]}),` `]})]}),` `,(0,e.jsx)(n.h3,{id:"plaiceholder-\uB77C\uC774\uBE0C\uB7EC\uB9AC",children:(0,e.jsx)(n.a,{href:"#plaiceholder-\uB77C\uC774\uBE0C\uB7EC\uB9AC",children:"plaiceholder \uB77C\uC774\uBE0C\uB7EC\uB9AC"})}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:'"Plaiceholder" is a suite of server-side functions for creating low quality image placeholders (LQIP).'}),` `]}),` `,(0,e.jsx)(n.p,{children:"\uB098\uB294 \uC774 \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB85C base64 \uD615\uD0DC\uC758 blur \uC774\uBBF8\uC9C0\uB97C \uC0DD\uC131\uD558\uC5EC next/image\uC758 placeholder \uC18D\uC131\uC5D0 \uC801\uC6A9\uD560 \uAC83\uC774\uB2E4."}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsx)(n.code,{className:"language-bash code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token function",children:"pnpm"})," ",(0,e.jsx)(n.span,{className:"token function",children:"add"}),` plaiceholder `]})})}),` `,(0,e.jsx)(n.h4,{id:"getbase64-\uD568\uC218",children:(0,e.jsx)(n.a,{href:"#getbase64-\uD568\uC218",children:"getBase64 \uD568\uC218"})}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// src/utils/getBase64.ts"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:"fs"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'node:fs/promises'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," join ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'path'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," getPlaiceholder ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'plaiceholder'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"getBase64"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"src",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," isExternal ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," src",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"startsWith"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'http'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"let"})," buffer",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Buffer"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"isExternal",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" buffer ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"fetch"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"src",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"res",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Buffer"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"from"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token keyword",children:"await"})," res",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"arrayBuffer"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"else"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" buffer ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"await"})," fs",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"readFile"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token function",children:"join"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"process",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"cwd"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"public"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"src",(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," base64 ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getPlaiceholder"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"buffer",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," base64 ",(0,e.jsx)(n.span,{className:"token keyword",children:"as"})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"data:image/"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"}),` getBase64 `]})]})}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:"\uC678\uBD80 \uC774\uBBF8\uC9C0"})," - fetch\uB97C \uD1B5\uD574 \uAC00\uC838\uC628 \uD6C4 Buffer.from\uC744 \uD1B5\uD574 Buffer\uB85C \uBCC0\uD658",(0,e.jsx)(n.br,{}),` `,(0,e.jsx)(n.code,{children:"\uB0B4\uBD80 \uC774\uBBF8\uC9C0"})," - node.js\uC758 fs \uBAA8\uB4C8\uC744 \uD1B5\uD574 \uD30C\uC77C\uC744 \uC77D\uC74C"]}),` `,(0,e.jsxs)(n.p,{children:["\uADF8\uB9AC\uACE0 plaiceholder\uC758 ",(0,e.jsx)(n.code,{children:"getPlaiceholder"}),"\uB97C \uD1B5\uD574 base64 \uD615\uD0DC\uC758 blur \uC774\uBBF8\uC9C0\uB97C \uC0DD\uC131\uD55C\uB2E4."]}),` `,(0,e.jsx)(n.h4,{id:"blurimage-\uCEF4\uD3EC\uB10C\uD2B8",children:(0,e.jsx)(n.a,{href:"#blurimage-\uCEF4\uD3EC\uB10C\uD2B8",children:"BlurImage \uCEF4\uD3EC\uB10C\uD2B8"})}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// src/components/BlurImage.tsx"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"ImageProps"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next/image'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:"getBase64"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@/utils/getBase64'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"BlurImage"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," src",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"props ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"ImageProps"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"&"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," src",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," base64 ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getBase64"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"src",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Image"})]})," ",(0,e.jsxs)(n.span,{className:"token spread",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"alt"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"alt"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"||"})," ",(0,e.jsx)(n.span,{className:"token string",children:"''"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"src",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"placeholder"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"base64",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"BlurImage"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"\uC774\uC81C BlurImage \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uC801\uC6A9\uD560 \uC218 \uC788\uB2E4."}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:"next-contentlayer/hooks"}),"\uC758 ",(0,e.jsx)(n.code,{children:"useMDXComponent"}),"\uB85C mdx\uB97C \uB80C\uB354\uB9C1\uD558\uB294\uB370, \uC774\uB54C ",(0,e.jsx)(n.code,{children:"components"})," \uC18D\uC131\uC744 \uD1B5\uD574 mdx\uC758 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uCEE4\uC2A4\uD140\uD560 \uC218 \uC788\uB2E4. \uADF8\uB798\uC11C ",(0,e.jsx)(n.code,{children:"components"})," \uC18D\uC131\uC744 \uD1B5\uD574 ",(0,e.jsx)(n.code,{children:"img"})," \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uBC14\uAFD4\uC8FC\uC5C8\uB2E4.",(0,e.jsx)(n.br,{}),` `,"\uB098\uB294 BlurImage\uC5D0\uC11C \uC870\uAE08\uC758 \uC2A4\uD0C0\uC77C\uB9C1\uC744 \uB354 \uCD94\uAC00\uD55C ",(0,e.jsx)(n.code,{children:"Image"})," \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uB9CC\uB4E4\uC5B4\uC11C img\uD0DC\uADF8\uB97C Image \uCEF4\uD3EC\uB10C\uD2B8\uB85C \uBCC0\uACBD\uD558\uC600\uB2E4."]}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// src/layouts/MDXContent.tsx"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useMDXComponent ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next-contentlayer/hooks'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:`\u3161 `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Prose"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'./Prose'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@/components/mdx/Image'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MDXComponents"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'mdx/types'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," components ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"//..."}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" img",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"as"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MDXComponents"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"interface"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"MDXContentProps"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" code",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"MDXContent"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," code ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MDXContentProps"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MDXComponent"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useMDXComponent"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"code",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Prose"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"MDXComponent"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"code"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"code",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"components"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"components",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MDXContent"}),` `]})]})}),` `,(0,e.jsxs)(s,{type:"warning",title:"\uC8FC\uC758\uC0AC\uD56D",children:[(0,e.jsx)(n.p,{children:"Next 13 \uBC84\uC804\uC744 \uAE30\uC900\uC73C\uB85C, BlurImage\uB97C \uC0AC\uC6A9\uD558\uB294 \uACF3\uC740 \uC11C\uBC84 \uCEF4\uD3EC\uB10C\uD2B8\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD55C\uB2E4. \uB9CC\uC57D \uD074\uB77C\uC774\uC5B8\uD2B8 \uCEF4\uD3EC\uB10C\uD2B8\uC5D0\uC11C \uC0AC\uC6A9\uD558\uBA74 \uC5D0\uB7EC\uAC00 \uBC1C\uC0DD\uD55C\uB2E4."}),(0,e.jsxs)(n.p,{children:["\uB098\uB294 Chakra UI\uC758 mdx \uC2A4\uD0C0\uC77C\uB9C1\uC744 \uC704\uD574 ",(0,e.jsx)(n.code,{children:"@nikolovlazar/chakra-ui-prose"})," \uB77C\uC774\uBE0C\uB7EC\uB9AC\uC5D0\uC11C \uC81C\uACF5\uD558\uB294 ",(0,e.jsx)(n.code,{children:"Prose"})," \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uC0AC\uC6A9\uD558\uACE0 \uC788\uC5C8\uB294\uB370, \uC774 \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uD074\uB77C\uC774\uC5B8\uD2B8 \uCEF4\uD3EC\uB10C\uD2B8\uB85C \uB418\uC5B4\uC788\uC5B4\uC11C BlurImage\uB97C \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC5C8\uB2E4.",(0,e.jsx)(n.br,{}),` `,"\uADF8\uB798\uC11C Prose \uCEF4\uD3EC\uB10C\uD2B8\uB97C ",(0,e.jsx)(n.strong,{children:"\uC11C\uBC84 \uCEF4\uD3EC\uB10C\uD2B8"}),"\uB85C \uBCC0\uACBD\uD558\uC600\uB2E4."]}),(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// src/layouts/Prose.tsx"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token string",children:"'use client'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Prose"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"as"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"ChakraProse"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@nikolovlazar/chakra-ui-prose'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useEffect",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"PropsWithChildren"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"Prose"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," children ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PropsWithChildren"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// url\uC5D0 hash\uAC00 \uC788\uC73C\uBA74 \uD574\uB2F9 id\uB97C \uAC00\uC9C4 element\uB85C \uC2A4\uD06C\uB864 \uC774\uB3D9"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token keyword",children:"typeof"})," ",(0,e.jsx)(n.span,{className:"token dom variable",children:"document"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,e.jsx)(n.span,{className:"token string",children:"'undefined'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," hash ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token dom variable",children:"window"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"decodeURI"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token dom variable",children:"location"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"hash"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"replace"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'#'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:"''"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"hash ",(0,e.jsx)(n.span,{className:"token operator",children:"!=="})," ",(0,e.jsx)(n.span,{className:"token string",children:"''"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," element ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token dom variable",children:"document"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"getElementById"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"hash",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"element",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," offset ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," element",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"offsetTop"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"setTimeout"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token dom variable",children:"window"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"scrollTo"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," offset ",(0,e.jsx)(n.span,{className:"token operator",children:"-"})," ",(0,e.jsx)(n.span,{className:"token number",children:"64"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"ChakraProse"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"children",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Prose"}),` `]})]})}),(0,e.jsx)(n.pre,{className:"language-diff",children:(0,e.jsxs)(n.code,{className:"language-diff code-highlight",children:[(0,e.jsx)(n.span,{className:"code-line",children:`// src/components/MDXContent.tsx `}),(0,e.jsx)(n.span,{className:"code-line deleted",children:(0,e.jsxs)(n.span,{className:"token deleted-sign deleted",children:[(0,e.jsx)(n.span,{className:"token prefix deleted",children:"-"}),(0,e.jsx)(n.span,{className:"token line",children:`import { Prose } from '@nikolovlazar/chakra-ui-prose' `})]})}),(0,e.jsxs)(n.span,{className:"code-line inserted",children:[(0,e.jsx)(n.span,{className:"token deleted-sign deleted",children:(0,e.jsx)(n.span,{className:"token line"})}),(0,e.jsxs)(n.span,{className:"token inserted-sign inserted",children:[(0,e.jsx)(n.span,{className:"token prefix inserted",children:"+"}),(0,e.jsx)(n.span,{className:"token line",children:`import Prose from './Prose' `})]})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token inserted-sign inserted",children:(0,e.jsx)(n.span,{className:"token line"})}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:`const MDXContent = ({ code }: MDXContentProps) => { `}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token unchanged",children:[(0,e.jsx)(n.span,{className:"token prefix unchanged",children:" "}),(0,e.jsx)(n.span,{className:"token line",children:` const MDXComponent = useMDXComponent(code) `})]})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token unchanged",children:(0,e.jsx)(n.span,{className:"token line"})}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token unchanged",children:[(0,e.jsx)(n.span,{className:"token prefix unchanged",children:" "}),(0,e.jsx)(n.span,{className:"token line",children:` return ( `})]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token unchanged",children:[(0,e.jsx)(n.span,{className:"token line"}),(0,e.jsx)(n.span,{className:"token prefix unchanged",children:" "}),(0,e.jsx)(n.span,{className:"token line",children:` `})]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token unchanged",children:[(0,e.jsx)(n.span,{className:"token line"}),(0,e.jsx)(n.span,{className:"token prefix unchanged",children:" "}),(0,e.jsx)(n.span,{className:"token line",children:` `})]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token unchanged",children:[(0,e.jsx)(n.span,{className:"token line"}),(0,e.jsx)(n.span,{className:"token prefix unchanged",children:" "}),(0,e.jsx)(n.span,{className:"token line",children:` `})]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token unchanged",children:[(0,e.jsx)(n.span,{className:"token line"}),(0,e.jsx)(n.span,{className:"token prefix unchanged",children:" "}),(0,e.jsx)(n.span,{className:"token line",children:` ) `})]})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token unchanged",children:(0,e.jsx)(n.span,{className:"token line"})}),`} `]})]})})]}),` `,(0,e.jsx)(n.h2,{id:"\uACB0\uACFC",children:(0,e.jsx)(n.a,{href:"#\uACB0\uACFC",children:"\uACB0\uACFC"})}),` `,(0,e.jsx)(n.img,{src:"/log/23.11/11.26/before.gif",alt:"BEFORE",width:"1490",height:"886"}),` `,(0,e.jsx)(n.hr,{}),` `,(0,e.jsx)(n.img,{src:"/log/23.11/11.26/after.gif",alt:"AFTER",width:"714",height:"886"})]})}function b(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(p,a)})):p(a)}var x=b;function P(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return y(C);})(); ;return Component;