사이드 프로젝트 : 쇼핑 사이트

배포 주소 : https://yhshop.netlify.app/

// 배포중단

기술

1. Tool: Cursor
2. front: react
3. back: firebase, cloudnary

firebase 사용 이유 : 구글로그인, database 사용하기 위해

cloudnary 사용 이유 : 이미지를 더 빠르게 로딩하고 퀄리티에 영향을 주지 않음

프로젝트 계획

프로젝트 기능들

1. 로그인, 로그아웃
   1. 로그인 클릭 했을 경우 구글로 로그인 하는 팝업 생성
   2. 사용자 정보 나오게 하고 로그아웃 버튼 나옴
   3. 페이지 리프래쉬 해도 로그인한 사용자의 세션이 남아있다면 일정시간내에 다시 들어가도 로그인 상태 유지
   4. 로그인 했을때 장바구니 표시 나옴
   5. 로그아웃 했을때 상품만 표시 됨
2. 어드민
   1. 어드민으로 로그인 했을 경우 물품 추가 버튼 나옴
   2. 주소창 경로 알아도 권한 없으면 홈으로 리다이렉트
   3. 어드민만 주소창으로 접속 가능
   4. 경로 보호
   5. 로그아웃 하면 장바구니 못들어가고, 홈으로 리다이렉트
3. 제품 추가, 제품 이미지 추가
   1. 클라우디너리에 이미지 업로드
4. 장바구니 담으면 숫자 갱신

구현 계획

1. 헤더 라우터 만들기
2. 로그인 파이어베이스 셋업, 로그아웃
3. 어드민
   1. 파이어베이스 데이터베이스 적용
4. 제품 등록
   1. 어드민으로 로그인시 제품등록 버튼 볼 수 있음
   2. 사진, 제품 명, 가격, 카테고리, 제품 설명, 옵션(사이즈)
   3. 제품 등록 완료하면 완료 되었다 표시
5. 제품 보여주기
   1. useQuery 사용
6. 제품 상세페이지
7. 장바구니
   1. 로그인한 사용자만 보이게