무신사를 PC버전에서 보기 좋게 만들어보자😶😶
무신사가 최근 PC버전을 종료했다
어느날 무신사 홈페이지를 들어가 보니 모바일화면이 띡 하고 나와버렸다...
나는 와이드 모니터를 사용해서 양옆 여백이 더 크게 느껴졌습니다.
그야 말로 옹졸 그 자체..
조금 불편하기는 했지만, 저는 솔직히 무신사를 PC로 많이 사용하지는 않아서 어휴 그냥 폰으로 보고 말지... 하는 마인드로 PC를 그냥 안들어가게 되었습니다.. (이게 목표였겠죠)
그런데 주변 사람들도 모두 불편하다고 말하고, 생각보다 PC로 사용하는 사람이 많더라구요.
그래서 익스텐션으로 만들어보자! 생각했습니다
크롬 익스텐션
무신사를 PC에서 보기좋게 만드는 익스텐션입니다!
현재 만들어서 운영중인 익스텐션 입니다!
지금 가장 큰 문제점은 검색을 할 때, 한번에 3개씩 밖에 안보이고 무한스크롤로 내려서 봐야한다는게 너무 불편하다고 느꼈습니다!
서비스 설명
무한 스크롤을 Pagination으로 변경
- 모바일에 익숙한 무한스크롤이 PC에도 적용되어 있었음.
- 최하단에 pagination 을 만들고, 클릭시에 ajax요청이 되도록 하였음.
- 기존 무신사서버에서 렌더링 한 상품들을 모두 지우고 무신사 API를 익스텐션에서 자체적으로 호출 한 뒤, 응답값을 innerHTML로 다시 렌더링했습니다.
- 좋아요 페이지의 경우, API의 응답값으로 page를 알 수 없는 형태였습니다.
nextCursor가 null이 되는 순간까지 재귀적으로 API를 호출하여 pagination처럼 보이게 변경했습니다.
적용 전 화면
익스텐션 적용 후 화면
상품 상세페이지 좌우로 분할
- 기존의 상품 상세만 나오는 페이지 형식에서 좌측에는 상품의 설명이 나오고 우측에는 리뷰를 볼 수 있도록 수정했습니다.
- iframe 태그를 사용하여 우측에 리뷰 페이지를 렌더링했습니다.
- 우측 상단의 toggle 을 사용해 사진리뷰와 전체리뷰를 필터링 할 수 있도록 수정했습니다.
적용 전 화면
적용 후 화면
프론트엔드 개발자 입니다