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

박성빈	강태현

🛠 사용기술

backend

📅 기간

2022.9.2 ~ 2022.10.14

Front-End

• 선택이유

  • Recoil

    • 적은 보일러플레이트로 코드의 길이 감소
    • hooks 사용과 같이 간단한 사용법

  • React Query

    • 프리패칭, 캐싱 등 다양한 기능
    • 클라이언트 state와 비동기 state의 분리

backend

📅 기간

9/6 ~ 10/14

🎬 개요

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

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

🎯 목표

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

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

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

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

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

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

기획과 해결책

일본 웹 페이지 특징

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

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

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

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

문제점 발견 및 개선점

• 기존 페이지의 로딩 개선
  • 리액트 쿼리를 이용해 prefecth를 이용했습니다.
  • 리액트의 SPA는 MPA 방식의 단점을 개선했습니다.

협업방식

회의

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

개발

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

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

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

API 명세서

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

개선점 및 특징

- 페이지네이션 prefecth 적용

---

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

---

- 제품 상세 로딩시간 개선

---

- 메인 상품 컬러칩 hover시 이미지 변경

---

- 상품 검색 기록 저장

결과

피그마 디자인

플로우차트

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

구현 기능

[X] 회원가입/로그인

[X] 즐겨찾기 담기/삭제

[X] 기간, 컬러, 시리즈, 특징 별 필터링

[X] 리뷰 작성, 이미지, 텍스트, 별점

[X] 리뷰 수정/삭제

[X] 상품별 리뷰 필터링

[X] 제품 상세 옵션별 상품 변경

[X] 상품 추천

[X] 이벤트, 공지사항

[X] 제품 검색, 최근 검색 기록 저장

[X] 주문서 작성

[X] 회원가입 쿠폰, 이벤트를 통한 쿠폰 발급

[X] 회원정보 수정

[X] 배송조회

[X] 스켈레톤 UI - 메인 상품, 제품상세

[X] 제품상세 바로구매 -> 주문서페이지