온라인 쇼핑몰 무신사를 클론코딩했습니다.
회원 관리, 패션 아이템 구매, 후기 작성, 상품 문의 등의 기능을 모두 구현했으며,
추가 기능으로 회원이 직접 구매한 옷으로 피드를 꾸밀 수 있는 옷장 페이지와 스타일 탭을 구현했습니다.
또한 기존 무신사 홈페이지는UI/UX 적으로 부족한 부분이 많다고 느껴, 레이아웃 및 기능을 그대로 클론하지 않고 Develop 했습니다.
배포 주소: https://dllflfuvssxc9.cloudfront.net/
"axios": "^1.2.1",
"env-cmd": "^10.1.0",
"eslint": "8.22.0",
"prettier": "^2.8.1",
"react": "^18.2.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.6.0",
"react-slick": "^0.29.0",
"react-toastify": "^9.1.1",
"redux": "^4.2.0",
"sass": "^1.57.1",
"slick-carousel": "^1.8.1",
"typescript": "^4.9.4",
"use-file-upload": "^1.0.11",
image업로드는 모두 cloudinary서비스를 사용하고 있습니다. 백엔드 db에 사진을 직접 저장하기 보다는 cloudinary에 업로드 하고 사진 url만 저장하는 방식을 사용하고 있습니다.
노션에서 모델과 REST API를 확인할 수 있습니다!
API설계에 있어서, RESTful 하도록 노력을 기울였습니다. API와 모델, 백엔드 패키지 구조는 백엔드 리드미를 참고해주세요.
웹사이트의 첫인상인 홈페이지입니다.
기존 무신사의 홈페이지는 너무 많은 정보를 다 담으려다 난잡해졌다고 생각해서 홈페이지 디자인을 아예 바꿨습니다.
홈페이지가 세로확장성만 있다고 느껴질 것 같아, 홈페이지 하단 스타일탭을 infinite carousel(슬라이드)로 구현, 가로로도 공간이 느껴지도록 구현했습니다.
회원가입/로그인 페이지 입니다. 일반 로그인과 카카오 소셜 로그인을 지원하고 있습니다.
상품을 카테고리/서브카테고리/검색어로 찾을 수 있는 아이템 리스트 페이지입니다.
기존 무신사보다 깔끔하게 구현하였고, 무엇보다 sort 변경, pagenation 등 페이지 리렌더가 필요할 때마다 refresh를 해버리는 기존 무신사와 다르게 리렌더 최적화를 했습니다.
상세 페이지 입니다. 기존 무신사는 정말 많은 데이터를 보여주느라 상당히 복잡한 디자인을 가지고 있었습니다. 그래서 MUSIN4는 정말 필요한 핵심 데이터만 추려서 간결하게 상품 상세 페이지를 만들었습니다.
상품 상세 페이지 하단에는 그 상품에 달린 리뷰들이 렌더링 됩니다. 리뷰는 페이지네이션 작업이 들어가 있어서 한 페이지에 5개씩 렌더링 되고 있습니다.
상품에 대한 문의 작성도 가능합니다. 문의 작성은 별도의 popup을 통해 하고 있습니다.
장바구니 페이지입니다. 기존 무신사 장바구니는 삭제 UI가 직관적이지 않다고 생각되어 develop하였습니다. 또, 기존 무신사 처럼 수량 변경시 마다 refresh를 하는 것이 아니라, 따로 수량을 컨트롤하여 수량 변경시 리렌더만 일어나게 하도록 하여 부정적인 잦은 강제 refresh의 경험을 없앴습니다.
결제 페이지입니다. 실제 결제 기능을 구현하지는 않아 많은 기능이 있지 않습니다.
결제 중 로딩까지 구현하였습니다. 실제 결제 기능을 구현한다면 필요하다고 생각되어 만들었지만 실제 결제 기능까지는 구현하지 않았습니다.
마이 페이지입니다. 회원정보 확인 및 변경, 구매내역 확인, 후기 작성 및 내역 확인, 문의 내역 확인, 최근 본 상품 등 많은 하위 페이지를 가지고 있고, 하위 페이지간의 UI가 통일감 있도록 신경썼습니다.
디자이너 분과 협업하여 옷장 기능을 구현하였습니다. 게시글 작성, 팔로우, 언팔로우, 팔로우리스트 보기 등 커뮤니티 기능을 완전히 구현했습니다.
옷장에서 작성한 Style 게시글들을 모아볼 수 있는 스타일 페이지입니다. 여러 스타일을 한번에 보여주는 만큼 UI면에서 난잡하지 않도록 신경썼습니다.
게시글 이동이 잦은 커뮤니티 기능이므로, style 게시글을 누를 때 마다 페이지를 이동하기보다는 모달을 띄우는 방법을 채택해 스타일 모달 또한 구현했습니다.
스타일 모달에도 사진 슬라이드, 옷장 naviagate, 작성자 팔로우, 게시글 좋아요 기능 등 댓글을 제외한 커뮤니티 기능을 모두 구현했습니다.
