쇼핑몰 Shoppy 프로젝트

🕰️ 개발 기간

2023. 11 ~ (진행중)

🔗 URL

https://shoppy-oh.netlify.app/

⚙️ 개발 환경

• React.js
• CSS: Tailwind CSS
• Authentication: Firebase
• Database: Cloudinary, Firebase
• Deploy: Netlify
• etc: React Router, React Query, uuid

📌 주요 기능

반응형 웹

PC

Mobile

제품 정보 제공

	홈 및 Products 페이지 - Cloudinary와 Firebase의 realtime database 기능을 활용하여 제품 이미지 및 정보를 관리 및 보여줌
	상세페이지 - 제품의 상세정보를 보여줌 - 제품의 옵션을 선택할 수 있음

로그인

	구글계정 로그인 팝업창 - Firebase의 Authentication 기능을 활용하여 구글계정으로 로그인을 할 수 있도록 구현함
	프로필 - 로그인 시 구글계정의 프로필사진과 이름이 상단에 보여짐

페이지 제한

- 로그인 여부 및 관리자 여부에 따라 접근제한이 있는 페이지 구현함
- url로 해당 페이지를 직접 입력하더라도 권한이 없다면 다시 홈으로 돌아가도록 구현함

로그인 전 - Products 페이지만 접근 가능

일반계정 로그인 후 - 장바구니 페이지 접근 가능

관리자계정 로그인 후 - 새 제품 추가 페이지 접근 가능

새 제품 등록

관리자 계정에서 이미지 선택 및 제품 상세정보 작성 후 제출 시 이미지는 Cloudinary에, 제춤 전체 정보는 Firebase에 저장됨