from Grip_React_YangChanMo
yarn
install node_modules
yarn dev
execute app in local as dev mode
- react-boilerplate : using
vite
- routing :
react-router
- style & design(ui)
styled-components
styled-reset
react-icons
- state-management
- server-state :
swr
- client-state :
recoil
- server-state :
- etc
axios
lodash
dnd-kit
(드래그앤드랍)
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 커스텀 훅
-
상단의 검색바 구현
→ 공통 컴퍼넌트로서 페이지에 관계없이 검색 가능, 즐겨찾기 페이지에서 검색시 검색(홈) 페이지로 이동하여 결과 노출
-
하단의 투 탭(검색(홈) / 즐겨찾기) 네비게이션 구현
-
검색 페이지 노출 화면 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 관점에서 제거를 좀 더 조심스럽게(?) 접근(재차 확인의 의도)하고 다시 돌릴 수 없기 때문입니다.
-
-
드래그앤드랍
-
라이브러리 선택 배경
-
처음에는
react-beautiful-dnd
라는 라이브러리를 사용하였습니다. 가장 많은 다운로드 수와Atlassian
팀에서 직접 개발한 라이브러리라는 점이 간단하게 사용하는데는 적합하다는 생각이 들었습니다. 하지만 이 라이브러리의 경우 단점은 Atlassian팀에서 제품의 우선순위로 인해 해당 프로젝트는 지속적으로 모니터링하면서 수정하지 못할 수 도 있다는 경고(?)가 있었기에 만약에 진짜 서비스를 위한 라이브러리라면 다른 것을 좀 더 찾아보고 적용했을 것 같습니다. -
react-beautiful-dnd
를 사용하여 드래그앤드랍을 구현하였을 때, 문제가 발생했습니다. 해당 라이브러리는 그리드 레이아웃에서 열과 행을 따로 인식하여 카드 칸마다 드래그앤드랍이 가능하도록 만드는 것이 어렵다는 것을 알게 되었습니다. 그렇게 하기 위해선 또 다른 라이브러리인react-sortable-hoc
를 사용해야 가능하다는 정보를 깃허브 이슈를 통해서 알게 되었습니다. 그런데react-sortable-hoc
는 더이상 유지보수가 안되는 라이브러리이고 리드미에 직접적으로dnd-kit
을 사용하도록 권장하고 있었습니다. -
dnd-kit
의 사용법은 훅스를 통해서 좀 더 직관적이고 사용하기 편하도록 되어 있었고, 다양한 옵션(유틸)을 통해서 드래그앤드랍에 대한 컨트롤이 가능하다는 것을 알게 되었습니다. 또한 가장 중요했던 그리드 레이아웃에서의 각 칸마다 드래그앤드랍이 가능한 것을 확인한 후, 최종적으로dnd-kit
으로 결정하였습니다.
-
-