파이널 프로젝트(Fessport) 기능 리뷰

 - 프로젝트 및 기술 스택에 대한 회고록을 별도로 작성하였으며, 간략하게 기능 리뷰를 시작해보겠습니다.

1. Main Page

Main Page

1-1. 반응형 지도 및 모달

 - 포트폴리오 목적의 프로젝트였기에 첫 화면 비주얼에 힘을 싣고 싶었습니다. hooks를 활용한 state와 CSS를 활용하여 각각의 아이콘들이 움직이고 반응하며 비주얼적으로 화려해보일 수 있게 구현하였습니다. 또한, UX적인 측면을 생각하여 나라별(위치값에 따라) 구현되는 모달의 위치도(좌상, 좌하, 우상, 우하) 사용자가 편하게 볼 수 있도록 분기처리 해주었습니다. 처음에는 좌표값을 프론트 사이드에서 관리하였으나, (좌표값도 데이터라 생각하고)데이터를 프론트에서 관리하는 것은 적합하지 못하다 생각하여 서버에서 받는 좌표값을 받는 비동기 로직으로 구현하였습니다.

 - 나라를 클릭하면 해당 나라 기준으로 필터링된 상태의 페스티벌 리스트 페이지가 나타나고, 페스티벌 포스터를 클릭하면 해당 페스티벌 디테일 페이지가 구현되도록 하였습니다.

Resize

 - 사용자 측면에서 많이 생각했던 페이지였습니다. 일단 지도와 이미지라는 특성 때문에 탄력적으로 변하기 보다는 고정적인 크기를 가져가는 쪽으로 설계방향을 잡았습니다. 그렇기에 가장 많이 활용되는 1280 x 720, 1920x1080 화면 비율에서 보기 좋게 제작하였으며, 창 크기가 변해도 유동적으로 따라올 수 있도록 position과 flex 구조를 짰다. 또한 모바일이나 980 픽셀 미만일 경우 지도가 너무나 작게 구현되어서 의미가 없어지기에 해당 픽셀에서는 별도 안내 페이지가 나타나도록 구성하였습니다.

 - 고급 기술 스택보다는 몇 가지 state들과 transition, animation 등 CSS 수작업(?)으로 구현해낸 화면입니다. 구현하다 보니 canvas의 필요성을 절실히 느꼈습니다. 추후 프로젝트를 진행할 때는 canvas를 공부하여, 좀 더 동적이고 에니메이션틱한 화면을 활용해볼 계획입니다.

 

2. Nav

Login

2-1. Signin/up

 - 기본적인 로그인, 회원가입을 모달창으로 구현하였습니다. 별도의 RefreshToken 없이 쿠키 AccessToken만을 활용하였고, 간단한 유효성 검사 및 별도 isLogin 상태도 관리하고 있습니다.

 - 2주 프로젝트 때에는 AccessToken을 받아 클라이언트 사이드에서 별도로 관리하고 Authorization header로 전달하는 방식을 활용하였으며, 이 토큰값을 활용하여 로그인을 유지시키는 방식으로 구현하였습니다. 하지만 이번에는 쿠키로만 인증하는 방식으로 백엔드와 설계하였기에, 새로고침 시 isLogin 상태가 풀리지 않는 별도 로직을 추가해야 했습니다. 간단하게 isLogin 상태를 잃었을 시에 localstorage 및 재인증 방식을 통하여 로그인이 유지되도록 하였습니다.

2-2. React Router 및 반응형 디자인

 - 기본적으로 react-router-dom을 활용하여 라우터를 구현하였습니다. 웹앱 전반적으로 전체화면 사이즈 백그라운드 이미지를 사용하였기에 네비바를 투명바 상태로 구성하였습니다. 다만, 스크롤을 내렸을 때 컨텐츠와 구분될 수 있도록 네비바 배경이 활성화되고, topButton이 화면 좌하단에 나타나도록 설계하였습니다. 시각적인 scroll 이벤트는 즉각적으로 반응이 나타나야 하기에 throttle이나 debounce 처리는 하지 않았습니다.

 

3. Festival & Artist List Page

List Page

3-1. Offset pagination

 - DB에 방대한 콘텐츠 데이터가 있다는 상황을 가정하여 Offset pagination을 활용하여 컨테츠를 불러오도록 설계하였습니다. 초기에 limit만큼 데이터를 요청응답 받고 버튼 혹은 infinite scroll로 추가요청 되도록 만들었습니다. 모든 데이터 요청은 쿼리파라미터를 통해서 진행하였고, search, genreId, countryId, offset, limit 값들을 기본적으로 하여 서버와 소통을 할 수 있도록 API 및 비동기 로직을 처리하였습니다.

Resizing

 - 컨텐츠 출력은 flex와 grid를 활용하였고, %및 rem을 활용하여 창 크기에 맞춰서 반응하도록 제작되었습니다. 단순 페이지 게시판 형식으로 구현되면 시각적으로 재미없을 것 같아 반응형 버튼식으로 이미지와 이름이 출력되도록 하였습니다. limit만큼 데이터를 요청응답 받고 버튼 혹은 infinite scroll로 추가요청 되도록 만들었습니다. 

3-2. 카테고리 필터링 및 검색

 - 설계 당시 DB 스키마 및 API에 카테고리를 추가시켜, 보다 카테고리 다운 카테고리와 검색기능까지 구현해봤습니다. 백에서 받은 카테고리 데이터를 기준으로 요청이 들어갈 수 있도록 설계하였으며, 검색어, 나라와 장르까지 3중 필터링이 가능하도록 설계하였습니다.

 

4. Festival & Artist Detail(+Wish list) Page 

Detail Page

4-1. 컨텐츠 출력 및 연결

 - 해당 페스티벌 및 아티스트 디테일 정보가 출력되도록 만들었습니다. 비디오와 출연 아티스트는 콘텐츠 슬라이더로 구현하였고, 반응형 버튼 및 클릭시에 비디오는 모달, 아티스트는 디테일 페이지로 넘어갈 수 있도록 설계하였습니다.

4-3. 'visit' & 'like' 비즈니스 로직

 - 'visit'와 'like' 버튼을 비동기 비즈니스 로직을 구축하여서, 사용자의 DB가 업데이트 될 수 있도록 만들었습니다. 추후 해당 내용은 Wish List Page와 My Fessport Page의 Collector 파트에서 확인할 수 있습니다.

 

5. My Fessport

My Pessport Page

5-1. 이미지 업로드 및 유저정보 수정

 - FormData 타입의 프로필 사진을 업로드할 수 있는 비즈니스 로직을 구현하였습니다. 프로필 사진 및 회원정보, 비밀번호를 수정할 수 있으며, 성공적으로 업데이트 되었을 시에 재렌더링 되도록 설계하였습니다.

 - 사용자가 다른 기능들을 넘기지 않도록, Ref을 활용하여 각가의 파트로 넘어가는 버튼을 넣어놨습니다.

5-2. 'Collector' 및 'Challenge' 기능

 - Detail Page에서 'visit' 버튼을 누른 페스티벌들의 스탬프들이 나타납니다. 여권 사증 페이지에 도장이 찍힌 듯한 느낌을 연출하기 위해 해당 여권 페이지 영역 내에서 랜덤하게 좌표값을 갖고 출력될 수 있도록 로직을 설계하였습니다.

 - 'visit'한 페스티벌을 기준으로 타이틀을 획득할 수 있는 'Challenge' 기능을 구현하였습니다. get 속성값을 통해서 획득여부를 판단하고, 비획득 시에 흑백으로 출력되도록 하였습니다.

 

6. Loading, Error, Message Page

Message Modal

 - 리덕스 사가를 통해서 비즈니스 로직을 처리하였고, 비동기 결과에 따라 loading, error를 상태값을 관리하여 해당 페이지가 레더링되도록 설계하였습니다.

 - alert 메세지창은 XSS 공격 등 보안에 취약함으로 로그인이 필요하다는 등의 안내메세지는 별도의 모달로 구현시켰습니다.