jjanmo / movie-app

Movie App

from Grip_React_YangChanMo

Install & Start

 yarn

install node_modules

yarn dev

execute app in local as dev mode

Tech Stack

• react-boilerplate : using vite
• routing : react-router
• style & design(ui)
  • styled-components
  • styled-reset
  • react-icons
• state-management
  • server-state : swr
  • client-state : recoil
• etc
  • axios
  • lodash
  • dnd-kit (드래그앤드랍)

Structure

src
 ├── apis        # api layer
 ├── components  # each component of a page
 ├── hooks       # custom hooks collection
 ├── pages       # pages component
 ├── store       # state collection
 ├── styles      # style files
 |
 ├── main.tsx    # entry point file
 └── router.tsx  # routes specification file

• apis : server-state를 관리를 위한 엔드포인트 및 SWR훅이 존재
• store : client-state를 관리를 위한 recoil의 atom과 atom에 대한 CRUD 커스텀 훅

Features

• 상단의 검색바 구현

  → 공통 컴퍼넌트로서 페이지에 관계없이 검색 가능, 즐겨찾기 페이지에서 검색시 검색(홈) 페이지로 이동하여 결과 노출

• 하단의 투 탭(검색(홈) / 즐겨찾기) 네비게이션 구현

• 검색 페이지 노출 화면 3가지로 구성 (시점과 검색 결과에 따라서 구분)

  • 최초 진입 화면
  • 검색 결과 없는 화면
  • 검색 결과 있는 화면

• 검색 결과 그리드 2 컬럼 레이아웃으로 노출

• 각 영화 카드마다 영화 정보 노출 (포스터 / 제목 / 연도 / 타입 )

  → 애니메이션을 통한 정보 노출

  → 포스터가 없는 영화의 경우 기본 이미지 생성하여 추가

• 검색 결과에 대한 무한 스크롤 기능

• 영화 카드 상단에 별아이콘 토글을 통해서 즐겨찾기 추가/제거 기능

• 영화의 즐겨찾기 여부는 filled/outline 스타일의 별을 통해서 구분

• 즐겨찾기한 영화들은 즐겨찾기 탭에서 노출

• 즐겨찾기한 영화는 로컬스토리지에 저장되어 앱 재시작시 초기값으로 사용 가능

  → 로컬스토리지는 즐겨찾기의 변경상태를 지속적으로 저장

• 즐겨찾기 페이지에서 각 영화의 상단에 별을 클릭하면 모달이 뜨고 즐겨찾기를 제거할지 여부 선택 가능

• 즐겨찾기 페이지에서 드래그앤드랍을 이용한 목록 순서 조정

전반적인 구현 의도(+ 생각)

• UI/UX

  • 전반적인 핏이 앱스러운 느낌을 주기 위해 노력하였습니다.(단 완전한 반응형을 고려하진않았지만, 모바일에서 볼 때, 불편함이 없는 정도까지 표현해보았습니다.(부족하지만, PC에서 모바일보기로 체크))

  • 전반적인 색상은 그립 홈페이지를 참고해보았습니다.

  • 영화 카드의 인터렉션은 좁은 화면에 많은 정보를 담기 위한 하나의 방법으로서 사용해보았습니다. (단 빠르게 정보를 보는데 있어서는 인터렉션이 불편함이 있는지에 대한 의문은 살짝 있었습니다. 😅)

• 상태관리

  • atom으로 관리하는 것이 두가지 있습니다. 검색 키워드와 즐겨찾기한 영화 목록입니다.

  • 검색 키워드를 전역으로 관리한 이유

    • lifting-state-up을 통해서 Home 컴퍼넌트에서 키워드 상태를 관리함으로서 onChange와 onSubmit을 props로 SearchBar 컴퍼넌트로 내려보내는 상황을 마주하게 되었습니다.

    • value의 변경에 따라서 Home 컴퍼넌트 전체가 리랜더링(부모의 리랜더링)이 일어나게 됨으로서 성능상 좋지 못하다고 판단하였습니다. 또한 각 컴퍼넌트에서 필요한 상태가 colocate 되지 않는다고 생각하였습니다.

    • value 하나로 관리하던 상태를 input에서의 local state(value)와 submit 이후의 값은 keyword로서 global state로 분리함으로서 각각 컴퍼넌트마다 역할과 상태를 분리하여 관리할 수 있게 변경해보았습니다.

    • 키워드는 전역으로 관리되기 때문에 한 번 검색한 키워드는 탭이 변경되더라도 리셋되지 않습니다. 이런 상황을 시뮬레이션해보았습니다. 검색을 하고 즐겨찾기에 원하는 영화를 추가하고 즐겨찾기 탭으로 이동하였다가 다시 검색탭으로 돌아왔을 때, 기존 검색한 값이 노출되어야할지에 대한 것입니다. UX적으로 기존 값이 유지되는 것이 좋다고 판단하였습니다. 단, 상단의 로고를 클릭시 리셋되도록 해놓았습니다.(최초의 홈으로 돌아가는 기능)

• 즐겨찾기 CRUD

  • 홈 페이지에서 각 영화 아이템의 상단의 별을 통해서 즐겨찾기를 추가/삭제(토글링)를 할 수 있습니다. 이 때는 자유롭고 빠르게 토글링을 진행할 수 있습니다.

  • 즐겨찾기 페이지에서 즐겨찾기된 영화를 제거할 수 있습니다. 이 때는 상단의 별을 클릭하면 제거 여부를 확인하는 모달이 뜨고 액션을 행하면 실행됩니다. 이렇게 제거할 때는 모달을 통해 추가적인 플로우를 넣은 이유는 일반적인 UX 관점에서 제거를 좀 더 조심스럽게(?) 접근(재차 확인의 의도)하고 다시 돌릴 수 없기 때문입니다.

• 드래그앤드랍

  • 라이브러리 선택 배경

    1. 처음에는 react-beautiful-dnd라는 라이브러리를 사용하였습니다. 가장 많은 다운로드 수와 Atlassian팀에서 직접 개발한 라이브러리라는 점이 간단하게 사용하는데는 적합하다는 생각이 들었습니다. 하지만 이 라이브러리의 경우 단점은 Atlassian팀에서 제품의 우선순위로 인해 해당 프로젝트는 지속적으로 모니터링하면서 수정하지 못할 수 도 있다는 경고(?)가 있었기에 만약에 진짜 서비스를 위한 라이브러리라면 다른 것을 좀 더 찾아보고 적용했을 것 같습니다.

    2. react-beautiful-dnd 를 사용하여 드래그앤드랍을 구현하였을 때, 문제가 발생했습니다. 해당 라이브러리는 그리드 레이아웃에서 열과 행을 따로 인식하여 카드 칸마다 드래그앤드랍이 가능하도록 만드는 것이 어렵다는 것을 알게 되었습니다. 그렇게 하기 위해선 또 다른 라이브러리인 react-sortable-hoc를 사용해야 가능하다는 정보를 깃허브 이슈를 통해서 알게 되었습니다. 그런데 react-sortable-hoc는 더이상 유지보수가 안되는 라이브러리이고 리드미에 직접적으로 dnd-kit을 사용하도록 권장하고 있었습니다.

    3. dnd-kit의 사용법은 훅스를 통해서 좀 더 직관적이고 사용하기 편하도록 되어 있었고, 다양한 옵션(유틸)을 통해서 드래그앤드랍에 대한 컨트롤이 가능하다는 것을 알게 되었습니다. 또한 가장 중요했던 그리드 레이아웃에서의 각 칸마다 드래그앤드랍이 가능한 것을 확인한 후, 최종적으로 dnd-kit으로 결정하였습니다.