Lensis - Client

✨ 결과물

배포 주소

• 클라이언트: https://lenssis-fe-client.vercel.app/
• 관리자: https://lenssis-admin-page.vercel.app/

깃헙

• 클라이언트: https://github.com/IKO-FinalProject/FE-Client
• 관리자: https://github.com/IKO-FinalProject/FE-Admin
• 백엔드: https://github.com/IKO-FinalProject/BE-IKO

협업툴

• 노션: https://www.notion.so/BE-FE2-UXUI3-_1-e1ca7b5e27354b08a033573299dde83d

UI/UX

• 피그마: https://www.figma.com/file/SL2HjUJ0aujggFSfo9biR9/%EC%BB%AC%EB%9F%AC%EB%A0%8C%EC%A1%B0-3?node-id=2039%3A77754

🤲 함께한 멤버

UI/UX

김보민	이유나	임혜인

Front-End

장경찬	김명성	이경택	최효근

Back-End

박성빈	강태현

🛠 사용기술

Front-End

• React-Query
  • 기존 렌시스 페이지는 로딩시간이 오래걸리는 문제가 있었습니다. 이를 해결하기 위해 React-Query를 사용하여 데이터를 prefecth하여 성능을 높였습니다.
• Recoil
  • 리액트 쿼리와 연계하여 사용하여 전역 상태 관리를 하였습니다. 간결한 코드로 코드를 줄이고 효율적으로 사용할 수 있었습니다.
• TailWind CSS
  • 기간이 짧아 빠른 모바일/웹 반응형 마크업이 필요한 상황이었습니다. 테일윈드를 사용하여 단기간에 스타일링할 수 있었습니다.

📅 기간

2022.9.2 ~ 2022.10.14

🎬 개요

• IKO 기업과 연계한 UI/UX, Front-End, Back-End 협업 프로젝트입니다.

• 렌즈 쇼핑몰 서비스입니다. 클라이언트와 관리자 웹/앱 반응형으로 제작했습니다.

🎯 목표

• 일본 소비자의 특성을 파악하여 웹/앱 디자인에 반영한다.

• 자사 운영 가능한 관리자를 포함한 전체적인 하나의 쇼핑몰 서비스를 제작한다.

• 앱도 호환 가능하도록 한다.

• 기존 페이지의 문제점을 파악하고 개선한다.

• UX를 고려하여 상품 구매까지 이어지는 플로우를 개선한다.

• 시간이 된다면 쿠폰등의 추가기능도 구현한다.

기획과 해결책

일본 웹 페이지 특징

• 메인에 많은 정보가 집약되어 있습니다.

  • 필터 기능 -> 메인에서 조건에 맞는 상품을 바로 찾아 볼 수 있습니다.
  • 검색 기능 -> 상단 검색바를 통해 원하는 상품을 검색 가능합니다.
  • 컬러칩 -> 메인상품에 컬러칩을 hover 하면 해당 렌즈 상품이 보여집니다.

• 사이트의 깊이가 있는것을 선호하지 않습니다.

  • 이벤트, 공지사항, 리뷰 등을 메인에서도 접근 가능합니다.
  • 라우팅 처리르 간단히하여 deps를 줄였습니다.

문제점 발견 및 개선점

• 기존 페이지의 로딩 개선
  • 리액트 쿼리를 이용해 페이지네이션에 prefecth를 이용했습니다.

맡은 역할

• 필터 기능, 제품 상세, 즐겨찾기, 리뷰 등록/수정/삭제

협업방식

회의

• 노션을 사용하여 회의 로그를 관리하였습니다.

개발

• Git flow를 도입하여 역할 분담과 깃 운영방식을 명확히했습니다.

• GitHub organization을 만들어 백엔드와 프론트가 서로 개발상황을 확인할 수 있었습니다.

• GitHub Issue를 활용하여 협업시 구성원의 작업현황을 확인할 수 있었습니다.

API 명세서

• 프론트와 백엔드가 지속적인 소통을 통해 필요한 API 목록들을 확정했습니다.
• 우선순위를 정해 꼭 구현해야할 기능과 부가기능으로 구분했습니다.
• API 명세서를 작성하여 개발의 효율성을 높였습니다.

구현 기능

- 페이지네이션 prefecth 적용

• 기존 렌시스 페이지는 페이지네이션 선택시 HTML파일을 다시 불러와 로드하는 방식이었습니다.

• 따라서 로딩시간이 늘어나 UX가 좋지 않았습니다.

• 1 페이지일 때 미리 2페이지 데이터를 가져오는 방식으로 리액트 쿼리의 prefetch를 적용했습니다.

- 메인에서 필터링된 결과 바로 확인

• 가장 어려웠던 기능이었습니다. 리코일의 atom으로 필터링된 값의 상태관리를 했습니다.

• 하나의 atom을 사용했고 값이 배열이었기 때문에 데이터 관리가 더욱 복잡했습니다.

  • 예를 들면 브라운 컬러를 누르면 브라운 계열의 컬러코드들이 들어있는 배열을 넘기는 작업을 해야했습니다.
  • 브라운 컬러를 다시 한번 누르거나 다른 컬러를 누를 경우 배열을 비교하여 현재 클릭된 값에 맞게 상태를 업데이트 해야했습니다.
  • 배열을 비교하기 위해 배열을 비교하는 차집합, 교집합 로직을 사용해 구현했고 이를 통해 필터링된 데이터를 렌더링했습니다.

• refresh 버튼을 누르면 필터링된 데이터를 초기화하고 전체 데이터를 렌더링했습니다.

  • 상태 값들을 초기화하기 위해 리코일의 resetRecoilState를 사용했습니다.

- 제품 상세페이지 구현

• 렌즈 상품 특성상 선택할 수 있는 많은 옵션이 있고 옵션마다 상품이 달라집니다.

• 기존의 렌시스 페이지에선 옵션을 선택할 때마다 리소스 전부를 서버에 다시 요청해 로딩시간이 길었습니다.

• 리액트 쿼리의 useQuery를 사용해 옵션의 값들을 순차적으로 입력시켰고 따로 캐시나 프리페칭을 하지 않아도 데이터를 불러오는 시간이 단축되었습니다.

  • 이미 불러온 데이터들은 캐시되어 있고 keepPreviousData 옵션을 통해 이전 데이터를 유지시켜주기 때문입니다.

• 리액트 쿼리의 useQuery를 사용하여 여러 API가 있지만 하나의 함수로 처리했습니다.

• React.lazy와 suspense를 사용해 간결한 코드로 스켈레톤을 적용시켰습니다.

- 리뷰 등록/수정/삭제 구현

• AWS-S3 오류로 인해 파이어베이스 스토리지를 활용하여 이미지를 저장하고 불러왔습니다.

• 리뷰 폼을 리뷰 등록과 수정에서 재사용하기 위해 리뷰 폼 컴포넌트를 분리했습니다.

• 리뷰 수정 시 기존에 작성한 리뷰를 불러와 폼에 입력되어 있도록 구현했습니다.

• useMutation의 onSuccess 옵션을 통해 리뷰 등록/수정/삭제 후 토스트를 작동시켜 사용자에게 알려주었습니다.

- 리뷰 페이지 구현

• useMutation을 사용해 상품 이름에 따른 리뷰를 가져오도록 구현했습니다.

• 리뷰에 대한 댓글은 관리자만 댓글을 남길 수 있습니다.

피그마 디자인

• 피그마 디자인 시안에 따라 반응형 웹/앱 레이아웃을 구현했습니다.
• 반복되는 디자인은 재사용성을 고려해서 컴포넌트를 구성했습니다.
• 먼저 마크업을 전부하고 다자이너와 세부적인 요소를 소통하며 수정했습니다.

트러블 슈팅

배포 에러

리뷰 이미지를 등록할 때 이미지 처리를 AWS-S3를 이용하여 프론트가 버킷에 저장하고 보내는 방식이었습니다. 하지만 라이브러리 문제로 Vercel에 배포시 렌더링이 안되는 문제가 있었습니다. AWS-S3와 React-S3 모두 에러가 나며 화면이 나타나지 않았습니다. 해결이 안된채로 이미지 등록 없이 배포를 해야하는 상황까지 고려했었습니다. 하지만 계속 방법을 찾았고 기존의 파이어베이스 스토리지를 사용했던 경험을 떠올려 이미지 등록은 파이어베이스 스토리지를 따로 만들어 저장하는 방식을 선택했습니다. 어차피 서버에는 이미지 경로만 저장되기 때문에 크게 문제는 없다고 판단했습니다. 실제로 파이어베이스로 방식으로 전환했고 성공적으로 배포할 수 있었습니다.

플로우차트

• 사용자가 경험할 수 있는 루트입니다.