/cheese_book

Book app for lazybones built using ReactJS

Primary LanguageTypeScript




Deployment

github pages: https://eee0930.github.io/cheese_book



1. Project Info

2. Getting Started

3. Stacks

4. Screens and Key Features

5. Architecture



1. Project Info

Cheese book 개발 기획안

Main Function

  1. 나의 성격이나 취향에 맞는 책 추천 기능 (MBTI 테스트)
  2. 베스트 셀러, 신작 리스트 제공
  3. 책 미리보기 기능
  4. 도서, 작가 검색 기능
  5. 책 좋아요 및 좋아요한 책 리스트 보여주기
  6. Mobile과 PC 유저 모두를 위한 반응형 디자인

Goal

  1. 서점에 가기 귀찮아하는 게으름쟁이들을 위해 오로지 '책' 정보만 보여주는 SPA 사이트 만들기
  2. 책 이미지를 3d로 표현하여 관심 유도
  3. Framer Motion을 이용하여 사용자 인터렉션 유도
  4. React Query의 cashing 특징을 이용해 대량의 데이터 가져오기
  5. 반복 사용 가능한 Custom Hook 만들기
  6. Scraping으로 필요한 정보만 가져오기

Period

2023-08-11 ~ 2023-09-20



2. Getting Started 🏃‍♀️

Installation

$ git clone https://github.com/eee0930/cheese_book.git
$ cd cheese_book
$ code .

How to run

  • Change the REACT_APP_ALADIN_KEY and REACT_APP_ALADIN_ROOT on the .env.example file.
  • Click on View -> Terminal.
  • Run
$ npm install
$ npm start

How to deploy?

  • Change the homepage on the package.json file.
$ npm run deploy



3. Stacks 📚

Libraries & Languages

Config

Environment



4. Screens and Key Features 🎬

1. Home 화면에서부터 눈에 띄는 배너! 베스트 셀러가 보고싶은 기분!

skills & issues

  1. 베스트셀러 List Data를 불러와 framer motion을 이용하여 active한 배너를 보여줌
  2. 5초마다 한번씩 배너를 변경하기 위헤 setTimeout 기능을 썼지만 timeout이 한번 발생될 때마다 state들이 모두 업데이트되는 버그 발생 -> setTimeout을 정의한 변수를 담을 state를 정의한 후 useEffect 안에서 배너 변경 감지시 timeout 변수를 삭제한 후 다시 정의하여 해결

skills & issues

  1. 베스트셀러, 신작 도서, 치즈북 추천 도서들을 framer motion을 이용하여 ticker 형태로 active하게 보여줌
  2. 각각의 도서 클릭 시 해당 도서 상세페이지로 이동

2. 카테고리별로 베스트셀러와 신작들을 볼 수 있음

skills & issues

  1. Skelepton UI를 이용하여 한꺼번에 많은 데이터를 불러오기전 로딩 화면을 보여줌
  2. layout component를 따로 만들어 그 안에서 scroll이 움직이도록 구현하였기 때문에 useScroll hook이 적용되지 않는 문제가 생김 -> useRef에 이동할 target div를 배열로 담아 scrollIntoView를 이용하여 스크롤 이동을 구현하여 해결함

3. 3D로 보는 책 커버부터 궁금했던 기본 정보들, 빠져든다 빠져든다

skills & issues

  1. 이미지로 된 카드 리뷰를 button click 또는 mouse drag event를 일으켜 slide로 보여줌

4. 미리보기 기능까지! 있을 건 다 있는 치즈 북

skills & issues

  1. 오른쪽을 클릭시 다음 페이지로 이동, 왼쪽을 클릭시 이전 페이지로 이동
  2. 객 책들의 미리보기 이미지 정보를 미리 알 수 없음 (이미지의 404 에러를 통해 미리보기 이미지 유무를 알 수 있음) -> 이미지 url을 string으로 미리 만든 후 onError를 이용하여 cover 이미지로 교체함
  3. 404에러가 난 이미지를 클릭시 index에 관한 정보기 없어 빈 화면이 나옴 -> 이미지 태그에 onError가 실행될 경우 index가 0일때만 prevent라는 state를 true로 변경, prevent가 true일 경우 이미지 클릭 이벤트를 preventDefault, return 시켜 해결

5. 테스트를 진행하면 내 성격 유형에 맞는 책을 추천해줌!

skills & issues

  1. 12개 문항의 mbti 테스트를 통해 각 성격유형별로 책을 추천

6. 좋아요 기능과 좋아하는 책을 한 번에 볼 수 있는 목록까지!

skills & issues

  1. 상세보기 페이지에서 하트모양 좋아요 버튼을 클릭시 My Books 페이지에서 좋아요를 누른 책 목록을 볼 수있음

7. 도서, 작가 검색을 통해 원하는 책을 찾을 수 있음

skills & issues

  1. 최근 검색어 5개 목록을 보여줌, 클릭 시 해당 검색 결과를 보여줌
  2. 검색한 keyword로 재 검색시 새로 데이터를 불러오는 문제 -> cashing 기능이 있는 react query 사용
  3. 검색 결과 화면에서 다른 keyword로 검색시 데이어를 불러오지 못하는 버그 발생 -> react query 고유키 설정 오류로, 검색어마다 고유기를 ['search', 검색어]로 지정하여 해결

8. 최근 본 책들과 기록 삭제 기능까지!

skills & issues

  1. 최근 본 책 목록을 보여줌
  2. 각각의 책 목록을 클릭시 해당 책의 상세페이지로 이동
  3. 책 각각을 목록에서 삭제시키거나 전체 삭제를 할 수 있음



5. Architecture

Directory structure

📦src
 ┣ 📂apis
 ┃ ┣ 📜aladinApi.ts
 ┃ ┣ 📜fetching.ts
 ┃ ┗ 📜localApi.ts
 ┣ 📂components
 ┃ ┣ 📂home
 ┃ ┃ ┣ 📜Banner.tsx
 ┃ ┃ ┣ 📜BestSellerTicker.tsx
 ┃ ┃ ┣ 📜CheeseRecomend.tsx
 ┃ ┃ ┣ 📜HomeMenu.tsx
 ┃ ┃ ┗ 📜NewBooksTicker.tsx
 ┃ ┣ 📂list
 ┃ ┃ ┣ 📜BestSellers.tsx
 ┃ ┃ ┣ 📜NavTaps.tsx
 ┃ ┃ ┗ 📜NewBooks.tsx
 ┃ ┣ 📂mixins
 ┃ ┃ ┣ 📜Book.tsx
 ┃ ┃ ┗ 📜CoverImage.tsx
 ┃ ┣ 📂taste
 ┃ ┃ ┣ 📜MbtiTest.tsx
 ┃ ┃ ┗ 📜TasteResults.tsx
 ┃ ┣ 📂viewDetail
 ┃ ┃ ┣ 📜BookViewer.tsx
 ┃ ┃ ┣ 📜DetailContainer.tsx
 ┃ ┃ ┣ 📜DetailImages.tsx
 ┃ ┃ ┗ 📜ViewerModal.tsx
 ┃ ┣ 📜Button.tsx
 ┃ ┣ 📜CheeseHead.tsx
 ┃ ┣ 📜EmptyData.tsx
 ┃ ┣ 📜ErrorComponet.tsx
 ┃ ┣ 📜LatestBookList.tsx
 ┃ ┣ 📜MobileHeader.tsx
 ┃ ┣ 📜ProgressBar.tsx
 ┃ ┣ 📜SearchForm.tsx
 ┃ ┣ 📜SideMenu.tsx
 ┃ ┗ 📜Ticker.tsx
 ┣ 📂data
 ┃ ┗ 📜cheeseMainData.ts
 ┣ 📂hooks
 ┃ ┣ 📜useAppendScript.ts
 ┃ ┣ 📜useImageLoad.ts
 ┃ ┗ 📜useRedesignData.ts
 ┣ 📂routes
 ┃ ┣ 📂layouts
 ┃ ┃ ┣ 📜AuthLayout.tsx
 ┃ ┃ ┗ 📜BasicLayout.tsx
 ┃ ┣ 📜Home.tsx
 ┃ ┣ 📜ListBestSeller.tsx
 ┃ ┣ 📜ListNewBooks.tsx
 ┃ ┣ 📜Login.tsx
 ┃ ┣ 📜MyBooks.tsx
 ┃ ┣ 📜NotFound.tsx
 ┃ ┣ 📜SearchResults.tsx
 ┃ ┣ 📜Taste.tsx
 ┃ ┗ 📜ViewDetail.tsx
 ┣ 📂styles
 ┃ ┣ 📂components
 ┃ ┣ 📂screens
 ┣ 📜App.tsx
 ┣ 📜Router.tsx
 ┣ 📜atom.ts
 ┗ 📜index.tsx