YoungStyle

• Firebase와 Cloudinary를 활용하여 구현한 반응형 쇼핑몰 웹사이트입니다.
  
  

🖥 화면 구성

1️⃣ 메인 화면

로그인

로그아웃

2️⃣ 제품 목록 화면

3️⃣ 제품 상세 화면

4️⃣ 제품 등록 화면

5️⃣ 장바구니 화면

💡 주요 기능 및 구현

구글 로그인/로그아웃 기능

• Firebase Authentication의 GoogleAuthProvider를 사용하여 팝업 기반 구글 로그인 및 로그아웃 기능 구현
• prompt: 'select_account' 옵션으로 계정 선택 화면 제공

제품 목록 조회 기능

• Firebase Realtime Database에서 products 데이터 조회
• 존재하는 경우 배열 형태로 변환 후 반환

새로운 제품 등록 기능

• 고유 ID(uuid)를 생성하여 제품 식별
• 이미지 파일은 Cloudinary에 업로드 후 URL 저장
• 가격 데이터는 숫자형으로 변환, 옵션은 배열로 변환하여 저장

장바구니 조회 기능

• 사용자별 장바구니 데이터를 Firebase Realtime Database에서 carts 데이터 조회
• 빈 경우 빈 배열을 반환하여 예외 처리

장바구니 추가/수정 기능

• 사용자 장바구니에 새로운 제품 추가 또는 기존 제품 정보 업데이트
• 데이터 저장 경로: carts/{userId}/{productId}

장바구니 삭제 기능

• 사용자 장바구니에서 특정 제품 데이터 삭제
• 데이터 삭제 경로: carts/{userId}/{productId}

🌐 라우터 구조

경로	설명
/	메인 페이지
/products	제품 목록을 조회하는 페이지
/products/new	새로운 제품을 등록하는 페이지
/products/:id	선택한 제품의 상세 정보를 보여주는 페이지
/carts	사용자의 장바구니를 보여주는 페이지

🛠 기술 스택

🕹 프론트엔드

• 프레임워크/빌드:  
• 라우팅:
• 상태 관리:  
• 스타일링:
• API: Firebase에서 제공하는 API
• 데이터베이스: Firebase Realtime Database
• 인증: Firebase Authentication
• 미디어 관리: Cloudinary

🚀 배포 도구

• 플랫폼:

🧩 폴더 구조

📦src
 ┣ 📂api
 ┃ ┣ 📜firebase.js                     // Firebase API 호출 모듈 (인증, 데이터베이스 CRUD)
 ┃ ┗ 📜uploader.js                     // Cloudinary 이미지 업로드 모듈
 ┣ 📂components
 ┃ ┣ 📂ui
 ┃ ┃ ┗ 📜Button.jsx                    // 공통 버튼 UI 컴포넌트
 ┃ ┣ 📜Banner.jsx                      // 메인 배너 컴포넌트
 ┃ ┣ 📜CartItem.jsx                    // 장바구니 아이템 컴포넌트(추가/수정/삭제 기능 포함)
 ┃ ┣ 📜CartStatus.jsx                  // 네비게이션 장바구니 개수 표시 컴포넌트
 ┃ ┣ 📜Navbar.jsx                      // 상단 네비게이션 바 컴포넌트
 ┃ ┣ 📜PriceCard.jsx                   // 장바구니 총액 표시 카드 컴포넌트
 ┃ ┣ 📜ProductCard.jsx                 // 개별 제품 카드 컴포넌트
 ┃ ┣ 📜Products.jsx                    // 제품 카드 목록 컴포넌트
 ┃ ┗ 📜User.jsx                        // 네비게이션 사용자 정보(프로필 사진, 이름) 컴포넌트
 ┣ 📂context
 ┃ ┗ 📜AuthContext.jsx                 // 로그인/로그아웃 상태 관리 Context
 ┣ 📂hooks
 ┃ ┣ 📜useCart.jsx                     // 장바구니 관련 커스텀 훅
 ┃ ┗ 📜useProducts.jsx                 // 제품 관련 커스텀 훅
 ┣ 📂pages
 ┃ ┣ 📜AllProducts.jsx                 // 전체 제품 목록 페이지
 ┃ ┣ 📜Home.jsx                        // 홈 페이지 (배너 + 제품 목록)
 ┃ ┣ 📜MyCart.jsx                      // 장바구니 페이지
 ┃ ┣ 📜NewProduct.jsx                  // 신제품 등록 페이지
 ┃ ┣ 📜NotFound.jsx                    // 에러 페이지
 ┃ ┣ 📜ProductDetail.jsx               // 제품 상세 정보 페이지
 ┃ ┗ 📜ProtectedRoute.jsx              // 관리자 전용 라우팅 처리 (권한 검증)
 ┣ 📜App.jsx
 ┣ 📜index.css
 ┗ 📜main.jsx

🎯 실행 방법

• Node.js 18 이상 권장
• Firebase, Cloudinary 개인 키 필요

API Key 설정

• 프로젝트 루트에 .env파일을 만들고 아래와 같이 설정하세요.

VITE_FIREBASE_API_KEY=발급 받은 키
VITE_FIREBASE_AUTH_DOMAIN=발급 받은 키
VITE_FIREBASE_DB_URL=발급 받은 키
VITE_FIREBASE_PROJECT_ID=발급 받은 키
VITE_CLOUDINARY_PRESET=발급 받은 키
VITE_CLOUDINARY_URL=발급 받은 키

실행

# 패키지 설치
npm install   # 또는 npm i

# 개발 서버 실행
npm run dev

📍 홈페이지 주소

https://young-style.netlify.app/