1. ERD    - 실제 firebase에 저장된 데이터의 JSON코드 2. 데이터베이스 구조 설명Firebase kuwazawa_carts kuwazawa_members kuwazawa_noticekuwazawa_products kuwazawa_review 3. 데이터 CRUD회원관리 공지사항 상품관리 후기관리 장바구니관리

인기 모바일 게임인 수박 게임을 모티브로 하여 제작하였습니다 프로젝트 개요목표 : 간단한 미니게임을 만들어보는 것사용 기술 : React, Matter.js. 주요 기능물리 엔진 설정 : Matter.js를 사용해 물리 엔진을 설정하고, 렌더러를 통해 캔버스에 그립니다.키보드 입력 처리 : 키보드 입력을 받아 스낵을 좌우로 움직이거나 아래로 떨어뜨립니다.충돌 감지 및 스낵 합성 : 동일한 종류의 스낵이 충돌하면 더 큰 스낵으로 합성됩니다.게임 오버 및 승리 조건 : 게임 오버와 승리 조건을 설정하여 게임을 관리합니다. import React, { useEffect, useRef } from "react";import Matter from "matter-js";import { Snack } from "@/..

Point배송비와 총 주문 금액 계산사용자 정보 괸리 및 변경주문지 선택 및 초기화다음 우편번호 api 연동상품 재고 업데이트 1. 배송비와 총 주문 금액 계산// 배송비 기본값 설정 및 총 주문 금액 초기화const [deliveryFee, setDeliveryFee] = useState(700); // 기본 배송비를 700으로 설정const [total, setTotal] = useState(0); // 총 주문 금액을 0으로 초기화const [totalDeliveryPrice, setTotalDeliveryPrice] = useState(0); // 총 주문 금액 + 배송비를 0으로 초기화useState 훅을 사용하여 배송비, 총 주문 금액, 총 주문 금액 + 배송비를 초기화합니다.useEffect..

장바구니에 담긴 상품 중 부분만 선택하거나 전체 선택하는 방법과 선택된 상품의 주문 합계를 구하는 방법 기록수량 변경을 처리const onChange = (e, id, inventory) => { let newQty = parseInt(e.target.value); // 새로운 수량을 입력값에서 가져옴 if (newQty inventory) newQty = inventory; // 수량이 재고보다 많으면 재고 수량으로 설정 setQuantityValues((prevState) => ({ ...prevState, [id]: newQty, // 수량 값을 업데이트 })); if (user) { kuwazawa_cartDB .child(user.key) .child..

상품을 장바구니에 추가하는 기능 구현 방법 기록 PointFirebase 데이터베이스 연동 : 사용자의 장바구니 데이터를 Firebase에 저장 및 업데이트리덕스 연동 : 장바구니 상태를 리덕스로 관리하여, 헤더와 장바구니 페이지의 동기화를 유지 1. Firebase 초기화 및 설정// firebase.jsimport firebase from "firebase/compat/app";import "firebase/compat/database";import "firebase/compat/storage";// Firebase 설정const firebaseConfig = firebase.initializeApp({ apiKey: "API_KEY", authDomain: "AUTH_DOMAIN", datab..

Firebase에 여러 개의 파일을 저장하는 방법 기록이 작업의 주요 포인트는 Firebase에 여러 개의 파일을 저장하고, 저장된 파일들을 받아와서 슬라이드로 보여주는 것입니다. 따라서 이 부분에 중점을 두고 구현 과정을 기록하겠습니다.  파일 업로드1개의 파일(대표 사진)과 여러개의 파일(상세 사진)을 Firebase Storage에 업로드하는 방식의 차이점에 대해서 설명하겠습니다.> 1개의 파일 업로드 (대표 사진 업로드)대표 사진은 단일 파일이기 때문에, 파일을 선택하고 Storage에 업로드한 후, 해당 파일의 URL을 받아오는 과정이 간단합니다.// 대표 사진 변경 처리const handleFileChange = (e) => { const file = e.target.files[0]; se..