프로젝트 소개

프론트단에서 개발 하였고 쇼핑몰을 제작 하였습니다. 부트스트랩 5, 피그마 템플릿, 쇼핑몰 Fake API를 사용하여 제작 했습니다.

🕰️ 개발 기간

• 23.08.28 - 23.09.08

🧑‍🤝‍🧑 멤버 구성

• 황재연

⚙️ 개발 환경

• Framework : React
• Library : react-router-dom, axios, recoil
• Tool : Git, Figma

Reference

• Figma : 피그마 링크
• API : API 링크

📌 주요 기능

메인 페이지

• 라우터 연결
• 실시간 슬라이드

카테고리 페이지

• 라우터 연결
• 정렬 기능
• 찜하기 기능

상세 페이지

• 라우터 연결
• 장바구니 추가 기능

장바구니 페이지

• 장바구니 삭제 기능

로그인 페이지

• 로그인 기능

찜하기 기능

찜하기 기능은 리코일로 관리했습니다. 누르면 모달이 실시간으로 켜져 추가 된 걸 볼 수 있습니다 네브바에 하트 아이콘 누르면 찜한 목록이 나옵니다. 삭제도 가능하고 찜 목록 누르면 바로 상품페이지로 이동합니다.

장바구니 기능

장바구니 기능은 로컬스토리지에 저장되게 했습니다. 장바구니 추가를 누르면 수량도 같이 추가 할 수 있게 했습니다. 삭제도 가능 합니다.

로그인 기능

로그인 하면 토큰을 세션 스토리지에 저장하게 해놨습니다. 로그아웃 누르면 세션 스토리지에 있는 토큰을 삭제하게 해놨습니다.

프로젝트 설명

최대한 공통 컴포넌트로 쪼개서 만드려고 했고 디자인 시스템을 적용 했습니다. 테스트 아이디 mor_2314 , 비밀번호 83r5^_ 입니다.