https://ichart.kr/_next/static/chunks/3043.2f38e07ec70b8fa7.js

1try{!function(){var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="448627d6-b3de-4ddb-9330-a68b05912fde",e._sentryDebugIdIdentifier="sentry-dbid-448627d6-b3de-4ddb-9330-a68b05912fde")}()}catch(e){}"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3043],{3043:(e,t,a)=>{a.r(t),a.d(t,{CommentListRenderer:()=>y});var r=a(35346),l=a(28965),n=a(35228),s=a(92090),i=a(60900),o=a(91736),c=a(37970),d=function(e){return e.ASC="asc",e.DESC="desc",e}({}),u=a(46066),m=a(80536),p=a(9826),h=a(93630);let f=({onChange:e,page:t,totalPage:a,count:l})=>{let n=(0,h.useQueryClient)(),{startPage:o=1,endPage:c=1,hasPrevPage:u=!1,hasNextPage:f=!1,prevEndPage:x=1,nextStartPage:g=1}=(0,s.useMemo)(()=>{if(!l)return{currentGroup:0};let e=Math.floor((t-1)/l),r=e*l+1,n=Math.min(r+l-1,a);return{currentGroup:e,startPage:r,endPage:n,prevEndPage:r-1,nextStartPage:n+1,hasPrevPage:e>0,hasNextPage:(e+1)*l<a}},[t,a,l]),y=(0,s.useCallback)(e=>{n.prefetchQuery(i.q.getCommentList({limit:10,page:e,order:d.DESC}))},[]),b=(0,s.useMemo)(()=>Array.from({length:c-o+1},(e,t)=>c-t),[o,c]);return(0,r.jsx)("div",{className:"w-full",children:(0,r.jsxs)("div",{className:"flex w-full items-center justify-center gap-4",children:[f&&(0,r.jsx)("button",{className:"text-grayscale-500 hover:text-grayscale-800",onClick:()=>e(g),onMouseEnter:()=>y(g),"aria-label":"다음 댓글 페이지로 이동 버튼",children:(0,r.jsx)(p.a,{className:"fa-solid fa-chevron-left",size:14})}),b.map(a=>(0,r.jsx)("button",{onClick:()=>e(a),onMouseEnter:()=>y(a),"aria-label":`${a} 댓글 페이지로 이동 버튼`,children:(0,r.jsx)(p.a,{size:10,className:(0,m.cn)("fa-solid fa-circle text-grayscale-500 relative bottom-[2px]",{"text-primary-400":t===a})})},a)),u&&(0,r.jsx)("button",{className:"text-grayscale-500 hover:text-grayscale-800",onClick:()=>e(x),onMouseEnter:()=>y(x),"aria-label":"이전 댓글 페이지로 이동 버튼",children:(0,r.jsx)(p.a,{className:"fa-solid fa-chevron-right",size:14})})]})})},x=(0,n.default)(()=>a.e(6053).then(a.bind(a,36053)),{loadableGenerated:{webpack:()=>[36053]},ssr:!1,loading:()=>(0,r.jsx)(c.hE,{})}),g=()=>{let[e,t]=(0,s.useState)(1),[a,n]=(0,s.useState)(0),{state:m,actions:p,isSubmitting:h}=(0,o.V)(),g=(0,s.useRef)(null),{data:y,isLoading:b}=(0,l.useQuery)(i.q.getCommentList({limit:10,page:e,order:d.DESC}));(0,s.useEffect)(()=>{y?.totalPages&&y.totalPages!==a&&n(y.totalPages)},[y?.totalPages,a]);let E=async()=>{await p.submitComment(),m.isReplyMode||1===e||t(1),g.current?.scrollIntoView({block:"start",behavior:"smooth"})};return(0,r.jsxs)("section",{ref:g,className:"py-8",children:[(0,r.jsx)("div",{className:"mb-10 px-[15px]",children:(0,r.jsx)(u.o,{value:m.commentFormData.content,onChange:e=>p.setDraft(e.target.value,null),onSubmit:E,isSubmitting:h})}),(0,r.jsx)("div",{className:"min-h-[200px]",children:b?(0,r.jsx)(c.hE,{}):y?.results?.length===0?(0,r.jsx)("p",{className:"text-grayscale-500 body-contents-medium flex h-50 w-full items-center justify-center px-10",children:"아직 댓글이 없어요! 첫 번째 댓글을 달아보세요"}):(0,r.jsx)(x,{comments:[...y?.results??[]].reverse()})}),(0,r.jsxs)("div",{className:"mt-8 flex flex-col gap-8 px-[15px]",children:[(0,r.jsx)(f,{onChange:t,page:e,totalPage:a,count:10}),!m.isReplyMode&&(0,r.jsx)(u.o,{value:m.commentFormData.content,onChange:e=>p.setDraft(e.target.value,null),onSubmit:E,isSubmitting:h})]})]})},y=()=>(0,r.jsx)(o.j,{children:(0,r.jsx)(g,{})})},19144:(e,t,a)=>{a.d(t,{R:()=>n});var r=a(35346),l=a(43129);function n(e){return l.$1.parseContentForYoutube(e).map((e,t)=>"text"===e.type?(0,r.jsx)("span",{className:"break-words break-all whitespace-pre-line",dangerouslySetInnerHTML:{__html:e.text}},`text-${t}`):"youtube"===e.type?(0,r.jsx)("div",{className:"relative aspect-video w-full max-w-[400px]",children:(0,r.jsx)("iframe",{src:`https://www.youtube.com/embed/${e.videoId}`,title:"YouTube video player",width:"100%",height:"300",className:"absolute top-0 left-0 h-full w-full rounded-lg",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0})},`yt-${t}`):(0,r.jsx)("a",{href:e.url,target:"_blank",rel:"noopener noreferrer",className:"text-blue-500 underline",children:e.url},`link-${t}`))}},28883:(e,t,a)=>{a.d(t,{E:()=>n,a:()=>l});var r=a(10521);let l={COMMENT_LIST:e=>`/v2/comment/ichart?page=${e.page}&limit=${e.limit}&order=${e.order}`,CREATE_COMMENT:"/v2/comment/ichart",DELETE_COMMENT:e=>`/v2/comment/ichart/${e}`,UPDATE_COMMENT:"/v2/comment/ichart"};class n{static async getCommentList(e){try{return(await r.o.get(l.COMMENT_LIST(e),{params:e})).data}catch{return{results:[],totalPages:0}}}static async createComment(e){return(await r.o.post(l.CREATE_COMMENT,{parent:e.parent??null,content:e.content})).data}static async deleteComment(e){return(await r.o.delete(l.DELETE_COMMENT(e))).data}static async updateComment(e){return(await r.o.patch(l.UPDATE_COMMENT,{...e})).data}}},31423:(e,t,a)=>{a.d(t,{m:()=>r});let r={SET_REPLY_MODE:"SET_REPLY_MODE",SET_REPLY_TARGET:"SET_REPLY_TARGET",SET_DRAFT:"SET_DRAFT",RESET:"RESET"}},37970:(e,t,a)=>{a.d(t,{Bt:()=>i,hE:()=>c});var r=a(35346),l=a(80536),n=a(92090);let s=(0,n.forwardRef)((e,t)=>{let{className:a,onChange:s,...i}=e,o=(0,n.useRef)(null),c=(0,n.useCallback)(()=>{o.current&&(o.current.style.height="auto")},[]);(0,n.useImperativeHandle)(t,()=>({resetHeight:c}),[c]);let d=(0,n.useCallback)(e=>{s?.(e),o.current&&(o.current.style.height="auto",o.current.style.height=`${o.current.scrollHeight}px`)},[s]);return(0,r.jsx)("textarea",{translate:"no",className:(0,l.cn)("scrollbar-hide",a),ref:((e,t)=>t=>{e.current=t})(o,null),onChange:d,...i})});s.displayName="AutoResizeTextarea";

1let i=(0,n.forwardRef)(({value:e,onChange:t,onKeyDown:a,placeholder:n,isPending:i},o)=>(0,r.jsx)(s,{ref:o,value:e,onChange:t,onKeyDown:a,className:(0,l.cn)("text-btn-link placeholder:text-btn-link text-grayscale-800 placeholder:text-grayscale-400 min-h-[98px] w-full resize-none bg-inherit p-2 focus:outline-none",{"bg-grayscale-000":i}),placeholder:n||"댓글 입력",disabled:i}));i.displayName="CommentEditor";let o=()=>(0,r.jsxs)("div",{className:"flex items-start gap-3",children:[(0,r.jsx)("figure",{className:"border-grayscale-200 h-[34px] w-[34px] shrink-0 overflow-hidden rounded-full border",children:(0,r.jsx)("div",{className:"bg-grayscale-200 h-full w-full animate-pulse rounded-full"})}),(0,r.jsxs)("div",{className:"w-full",children:[(0,r.jsx)("div",{className:"flex w-full items-start justify-between",children:(0,r.jsx)("div",{className:"bg-grayscale-200 h-4 w-24 animate-pulse rounded"})}),(0,r.jsxs)("div",{className:"pt-[6px]",children:[(0,r.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,r.jsx)("div",{className:"bg-grayscale-200 h-4 w-[80%] animate-pulse rounded"}),(0,r.jsx)("div",{className:"bg-grayscale-200 h-4 w-[60%] animate-pulse rounded"})]}),(0,r.jsx)("div",{className:"mt-2",children:(0,r.jsx)("div",{className:"bg-grayscale-200 h-3 w-20 animate-pulse rounded"})})]})]})]}),c=()=>(0,r.jsx)("ol",{className:"px-[15px]",children:Array.from({length:10}).map((e,t)=>(0,r.jsx)("li",{className:"border-grayscale-200 py-4 [&:not(:last-child)]:border-b",children:(0,r.jsx)(o,{})},t))})},46066:(e,t,a)=>{a.d(t,{o:()=>u});var r=a(35346),l=a(80536),n=a(9826),s=a(24102),i=a(92090),o=a(80735);a(19144);var c=a(37970);let d=({isMacOS:e=!1})=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{className:"btn-link block text-inherit md:hidden",children:"확인 또는 엔터키 연타"}),(0,r.jsx)("span",{className:"btn-link hidden text-inherit md:block",children:`확인(${e?"⌥":"ALT"}+S 또는 엔터 3연타)`})]}),u=({isMacOS:e=!1,showLabel:t=!0,value:a,onChange:u,onSubmit:m,isSubmitting:p})=>{let h=(0,i.useMemo)(()=>void 0!==a&&!!u,[a,u]),[f,x]=(0,i.useState)(a||""),g=(0,i.useRef)(null),{mutateAsync:y,isPending:b}=(0,o.lw)(),E=(0,i.useCallback)(async()=>{if(m)return void m();let e=((h?a:f)??"").trim();e&&(await y({content:e}),h||x(""),g.current?.resetHeight())},[m,h,a,f,y]),{onKeyDownEnter:v,onAltSKeyPress:w}=(e=>{var t;let a=()=>{e()},{onKeyDownEnter:r}=(e=>{let t=(0,i.useRef)(0);return{onKeyDownEnter:a=>{let{key:r,nativeEvent:l}=a;!l.isComposing&&("Enter"===r?t.current+=1:t.current=0,t.current>=3&&(e(),t.current=0))}}})(()=>{a()}),{onAltSKeyPress:l}=(t=()=>{a()},{onAltSKeyPress:e=>{let{key:a,nativeEvent:r,altKey:l}=e;!r.isComposing&&l&&("s"===a||"\xdf"===a)&&(e?.preventDefault(),t())}});return{onKeyDownEnter:r,onAltSKeyPress:l}})(E),j=(0,i.useCallback)(e=>{v(e),w(e)},[v,w]),C=h?a??"":f,T=p??b;return(0,r.jsxs)("div",{className:"flex items-start gap-2",children:[(0,r.jsx)("figure",{className:"h-[34px] w-[34px] shrink-0 overflow-hidden rounded-full",children:(0,r.jsx)(s.default,{src:"/assets/images/profile/random1.png",width:34,height:34,alt:"profile-image",unoptimized:!0})}),(0,r.jsx)("form",{className:"h-auto w-full",onSubmit:e=>{e.preventDefault(),E()},children:(0,r.jsxs)("fieldset",{className:"flex w-full flex-col",children:[t&&(0,r.jsx)("legend",{className:"text-grayscale-500 text-btn-link mb-2",children:(0,r.jsx)("p",{children:"비회원도 댓글 달 수 있어요 (You can write a comment)"})}),(0,r.jsxs)("div",{className:"flex w-full flex-col",children:[(0,r.jsx)("div",{className:"bg-emphasize-bg border-border-line focus-within:border-grayscale-100 flex min-h-[98px] w-full flex-1 overflow-hidden rounded-t-[8px] border",children:(0,r.jsx)(c.Bt,{ref:g,value:C,placeholder:"댓글을 입력해 보세요",onChange:e=>{if(e.target.value.length>2e3)return void alert("내용은 2000자까지 입력이 가능합니다");h&&u?u(e):x(e.target.value)},onKeyDown:j,isPending:T})}),(0,r.jsx)("button",{type:"submit",className:(0,l.cn)("text-body-contents-medium bg-primary-100 text-primary-500 border-primary-100 flex h-[40px] w-full items-center justify-center rounded-b-[8px] border border-x border-b",{"text-primary-500":T}),disabled:T,children:T?(0,r.jsx)(n.a,{className:"fa-solid fa-spinner fa-spin",size:14}):(0,r.jsx)(d,{isMacOS:e})})]})]})})]})}},60900:(e,t,a)=>{a.d(t,{S:()=>n,q:()=>s});var r=a(64634),l=a(28883);let n={ALL:"comment",COMMENT_LIST:e=>l.a.COMMENT_LIST(e)},s={getCommentList:e=>(0,r.j)({queryKey:[n.ALL,n.COMMENT_LIST(e)],queryFn:()=>l.E.getCommentList(e),staleTime:3e5,gcTime:6e5,refetchOnWindowFocus:!0,refetchOnMount:!0})}},80735:(e,t,a)=>{a.d(t,{lw:()=>c});var r=a(93630),l=a(35812),n=a(28883),s=a(60900);let i=(e,t,a)=>e.map(e=>e.id===t?{...e,children:[...e.children,a]}:{...e,children:i(e.children,t,a)}),o=(e,t)=>{for(let a of e)if(a.id===t||a.children?.length&&o(a.children,t))return!0;return!1},c=()=>{let e=[s.S.ALL],t=(0,r.useQueryClient)();return(0,l.useMutation)({mutationFn:e=>n.E.createComment(e),onMutate:async a=>{await t.cancelQueries({queryKey:e});let r=t.getQueriesData({queryKey:e}),l=(e=>({id:Date.now(),content:e.content,createdAt:Date.now(),depth:+!!e.parent,children:[],user:{id:null,nickname:"비회원 댓글",image:"/assets/images/profile/random1.png"}}))(a);return r.forEach(([e,r])=>{let n;if(r){if(Array.isArray(e)&&e.length>=2){let t=e[1];if(t&&"string"==typeof t){let e=t.split("?")[1];if(e){let t=new URLSearchParams(e).get("page");n=t?parseInt(t,10):void 0}}}if(a.parent){if(!o(r.results,a.parent))return;let n=i(r.results,a.parent,l);t.setQueryData(e,{...r,count:r.count+1,results:n});return}1===n&&t.setQueryData(e,{...r,count:r.count+1,results:[l,...r.results]})}}),{previousEntries:r}},onError:(e,a,r)=>{r?.previousEntries?.forEach(([e,a])=>{t.setQueryData(e,a)})},onSuccess:async()=>{await t.invalidateQueries({queryKey:e})}})}},91736:(e,t,a)=>{a.d(t,{j:()=>d,V:()=>u});var r=a(35346),l=a(92090),n=a(80735),s=a(31423);let i={isReplyMode:!1,replyingToCommentId:null,commentFormData:{content:"",parent:null}},o=(e,t)=>{switch(t.type){case s.m.SET_REPLY_MODE:return{...e,isReplyMode:t.payload.isReplyMode};case s.m.SET_REPLY_TARGET:return{...e,replyingToCommentId:t.payload.commentId,commentFormData:{...e.commentFormData,content:t.payload?.content??""}};case s.m.SET_DRAFT:return{...e,commentFormData:{...e.commentFormData,content:t.payload.content,parent:t.payload?.parent??null}};case s.m.RESET:return i;default:return e}},c=(0,l.createContext)(void 0);function d({children:e}

1){let[t,a]=(0,l.useReducer)(o,i),{mutateAsync:d,isPending:u}=(0,n.lw)(),m=(0,l.useCallback)(e=>{a({type:s.m.SET_REPLY_MODE,payload:{isReplyMode:e}})},[]),p=(0,l.useCallback)(e=>{a({type:s.m.SET_REPLY_TARGET,payload:{commentId:e}}),a({type:s.m.SET_REPLY_MODE,payload:{isReplyMode:!!e}})},[]),h=(0,l.useCallback)((e,t)=>{a({type:s.m.SET_DRAFT,payload:{content:e,parent:t}})},[]),f=(0,l.useCallback)(()=>{a({type:s.m.RESET})},[]),x=(0,l.useCallback)(async()=>{let e=t.commentFormData.content.trim();if(!e)return;let r=t.isReplyMode?t.replyingToCommentId:t.commentFormData.parent;await d({content:e,parent:r??void 0}),a({type:s.m.RESET})},[t.commentFormData.content,t.commentFormData.parent,t.isReplyMode,t.replyingToCommentId,d]),g={setReplyMode:m,setReplyTarget:p,setDraft:h,reset:f,submitComment:x},y=(0,l.useMemo)(()=>({state:t,dispatch:a,actions:g,isSubmitting:u}),[t,m,p,h,f,x,u]);return(0,r.jsx)(c.Provider,{value:y,children:e})}function u(){let e=(0,l.useContext)(c);if(!e)throw Error("useCommentCompose must be used within a CommentProvider");return e}}}]);