const{Fragment:e,jsx:n,jsxs:t}=arguments[0];function _createMdxContent(c){const o={a:"a",blockquote:"blockquote",code:"code",img:"img",p:"p",pre:"pre",...c.components},{Heading:a}=o;return a||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Heading",!0),t(e,{children:[n(a,{type:"h2",children:"React로 Flip 효과 책 만들기"}),"\n",n(o.p,{children:"책이 넘어가는 듯한 효과를 위해 Flip 애니메이션이나 react-flip이나 Turn.js 등 사용해 봤지만 react-pageFlip 라이브러리가 가장 책 같이 넘어감."}),"\n",n(o.p,{children:n(o.img,{src:"/posts/dev/202305-flipbook/1.gif",alt:"flig book animation"})}),"\n",t(o.blockquote,{children:["\n",t(o.p,{children:["npm: ",n(o.a,{href:"https://www.npmjs.com/package/react-pageflip",children:"https://www.npmjs.com/package/react-pageflip"}),"\ngithub: ",n(o.a,{href:"https://github.com/Nodlik/StPageFlip",children:"https://github.com/Nodlik/StPageFlip"}),"\ndoc: ",n(o.a,{href:"https://nodlik.github.io/StPageFlip/docs/index.html#point",children:"https://nodlik.github.io/StPageFlip/docs/index.html#point"})]}),"\n"]}),"\n",t(o.blockquote,{children:["\n",t(o.p,{children:["다른 라이브러리로는 react-flip-page ",n(o.a,{href:"https://www.npmjs.com/package/react-flip-page",children:"https://www.npmjs.com/package/react-flip-page"})]}),"\n"]}),"\n",n(o.p,{children:"책넘기는 애니메이션이 잘만들어져 있고 실제 마우스나 모바일 디바이스에선 터치로 flip 가능하다.\n그러나 구현 중 클릭하면 페이지가 넘어가는 게 짜증나서 disableFlipByClick를 true로 줬다\n글자를 클릭하면 이벤트도 줘야해서 disabled 처리를 하는 게 좋았다.\n페이지 귀퉁이에 있는 글자에 마우스 커서를 올리려고 하면 페이지 귀퉁이가 말려올라와서 showPageCorners도 false를 해줬다\n문제 될것이 없어보였다"}),"\n",n(o.p,{children:"그러나.."}),"\n",n(o.p,{children:"귀퉁이에 있는 글자를 클릭하면 이벤트도 발생하지만 다음 페이지로 넘어가 버리는 오류가 있었다.\n라이브러리 자체 API를 사용하면 클라이언트가 원하는 텍스트를 클릭하면 소리가 나오게 하는 기능 등 구현 사항과 상충되는 항목들이 있어, 인스턴스만 따로 상태 관리하여 web API를 사용해 클릭이나 터치, 넘김을 인식하여 필요한 API를 호출하도록 구현 필요."}),"\n",t(o.blockquote,{children:["\n",n(o.p,{children:"클릭이벤트를 분명 disabled 처리 했을텐데??"}),"\n"]}),"\n",n(o.p,{children:"공식문서를 다시 잘보니 이런 게 있었다."}),"\n",n(o.p,{children:n(o.img,{src:"/posts/dev/202305-flipbook/2.png",alt:"해결법 발견"})}),"\n",n(o.p,{children:"코너를 클릭하면 또 넘어가게 해놨나 보다\n빌어먹을"}),"\n",n(o.p,{children:"글자 클릭 시 일어나는 버블링을 막어보려고 했지만 잘 안됐다. pageFlip 라이브러리의 랜더 방식에 차이가 있는 모양이었다."}),"\n",n(o.p,{children:"별 수 없이 useMouseEvents:마우스나 터치 이벤트 사용여부 option 이다. false 처리 해줬다"}),"\n",n(o.p,{children:"이제 책넘기는 애니메이션만 제공하는 라이브러리, 손가락이나 마우스로 책 넘기듯이 Flip 이벤트를 주는 것은 불가능한 상태가 됐다."}),"\n",t(o.blockquote,{children:["\n",n(o.p,{children:"그러나, javascript는 못할게 없다."}),"\n"]}),"\n",n(o.p,{children:"html은 mouseDown, mouseUp, touchStart, touchEnd method가 있으니 이걸로 포인트 좌표값 계산해서 책넘기는 효과를 줄 것이다."}),"\n",n(o.p,{children:"그 전에 먼저 FlipPage 인스턴스에 접근해서 페이지 넘기는 함수를 만든다."}),"\n",n(o.pre,{children:n(o.code,{className:"language-ts",children:"const handleGoPrev = () => {\n if (isMobile) {\n bookIns.turnToPrevPage();\n } else {\n bookIns.flipPrev();\n }\n};\n\nconst handleGoNext = () => {\n bookIns.flipNext();\n};\n"})}),"\n",n(o.p,{children:"몰랐는데 disableFlipByClick 를 true로 하면 모바일에서 flipPrev가 안먹는다. 앞으로 안가는 기이형상. 그런데 또 turnToPrevPage()는 된다. 둘의 차이는 애니메이션이 있냐, 없냐의 차이다. 라이브러리를 좀 잘못 만든 것 같다. 지금이라도 라이브러리 바꿔볼까 싶지만 끝까지 가보겠다."}),"\n",n(o.pre,{children:n(o.code,{className:"language-ts",children:"//** mouse event\nconst [mdX, setMdX] = useState(0);\nconst [mdY, setMdY] = useState(0);\nconst [muX, setMuX] = useState(0);\nconst [muY, setMuY] = useState(0);\n\n//** touch event\nconst [tcX, setTcX] = useState(0);\nconst [tcY, setTcY] = useState(0);\n"})}),"\n",n(o.p,{children:"좌표값을 저장할 상태를 만들어준다.\nmouseDown,mouseUp 이벤트는 모바일에선 안먹으니 Touch 값을 저장할 상태도 만든다."}),"\n",n(o.pre,{children:n(o.code,{className:"language-ts",children:"const handleMouseDownStart = (e: React.MouseEvent) => {\n setMdX(e.clientX);\n setMdY(e.clientY);\n};\nconst handleMouseDownEnd = (e: React.MouseEvent) => {\n setMuX(e.clientX);\n setMuY(e.clientY);\n};\nuseEffect(() => {\n const dragSpaceX = Math.abs(mdX - muX);\n const dragSpaceY = Math.abs(mdY - muY);\n const vector = dragSpaceX / dragSpaceY;\n\n if (mdX !== 0 && dragSpaceX > 100 && vector > 2) {\n if (muX < mdX) {\n handleGoNext();\n } else if (muX > mdX) {\n handleGoPrev();\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n}, [muX]);\n\nconst handleTouchStart = (e: React.TouchEvent) => {\n console.log(e.changedTouches[0].pageX);\n setTcX(e.changedTouches[0].pageX);\n setTcY(e.changedTouches[0].pageY);\n};\nconst handleTouchEnd = (e: React.TouchEvent) => {\n const distanceX = tcX - e.changedTouches[0].pageX;\n const distanceY = tcY - e.changedTouches[0].pageY;\n const vector = Math.abs(distanceX / distanceY);\n\n if (distanceX > 30 && vector > 2) {\n handleGoNext();\n } else if (distanceX < -30 && vector > 2) {\n handleGoPrev();\n }\n};\n"})}),"\n",n(o.p,{children:"이제 이 함수들을 HTML 안에 넣어주면 된다."}),"\n",n(o.pre,{children:n(o.code,{className:"language-tsx",children:'return (\n \n {pages.map((el, idx) => (\n \n ))}\n \n);\n'})})]})}return{default:function(e={}){const{wrapper:t}=e.components||{};return t?n(t,{...e,children:n(_createMdxContent,{...e})}):_createMdxContent(e)}};

Loading...

Posts

Next13 build 배포 에러 수정

mouse, touch 이벤트로 FlipBook 이벤트

Nodemailer 오류 해결