Read 책 읽는 화면

url은 /reading/:title/:chapter/:page이고 <Read/> 컴포넌트를 사용했다. url매개 변수로 책 제목, 현재 읽고 있는 단원 , 페이지를 사용했다.

<Route path="/reading/:title/:chapter/:page" element={<Read/>}/>

내 책장에서 원하는 책을 선택하면 책 읽는 화면으로 이동할 수 있다.

navigate(`/reading/${book["title"]}/1/1`);

<Read/>

책 읽기 부분은 프로젝트 마지막까지 애를 먹었던 부분이다. 바로 글자의 크기이다. 왜냐하면 화면이 동적으로 변할 때마다 글씨의 크기도 변해야 했기 때문이다. 여기서부터가 난관이었다. 처음에 한 장에 보여지는 총 글자의 수를 300자로 제한 했고 이에 맞게 글자의 크기를 지정했다. 우리가 간과한 것이 있었는데 그냥 글자와 공백의 너비가 다르다는 점이였다.. 여기서부터 아주 온 갖 아는 수학 지식을 이용해서 동적으로 변할 때 글자의 크기와 최대 글자 수를 구해보기도 하고 공백의 너비도 일반 글자 너비로 바꿔보기도 했는데 결국에는 대실패였다. 글자가 종이를 넘어가기도 하고, 마지막 문장이 뚝 끊기기도 하고.. 그래서 결국에는 글자수 제한을 하고 사용자에게 보여지는 화면 사이즈를 구해 폰트 사이즈를 수학적으로 계산해 동적으로 보여지게는 했으나 마지막 문장이 뚝 끊기는 것은 해결할 수 없었다. 이는 전자책 저작권을 사서 전자책 리더기를 도입하는 것이 가장 좋은 해결 방법인 것 같다.

그리고 난관은 다음 페이지로 넘어갈 때 실제로 종이가 넘어가는 효과를 주고 싶었다.
이를 위해서는 기존에 한 페이지씩 DB에서 받아오는 걸로는 힘들었다. 그래서 결국에는 DB에서 받아오는 방식을 싹 갈아 엎고 한번에 한 단원 분량을 받아오고 이를 프론트에서 글자수를 잘라 보여주는 방식을 택했다. 그리고 나서도 css로 flip효과를 구현 하려고 하니 z-index가 속을 썩였는데 하루 밤새니까 해결했다.

최종 구현 모습

잘 동작하는 거 보고 너무 좋았다...