전체 글(85)
-
회원관리(MariaDB) - Part1 회원가입
사용자 정보를 입력받아 데이터베이스에 저장하고, 중복된 이메일과 닉네임을 체크하며, 프로필 사진을 업로드하는 기능 기록 프론트엔드- JoinSection.tsx1. 입력 필드 변경 핸들러// 입력 필드 변경 핸들러const handleChange = async (e) => { const { value, name } = e.target; // 입력된 값을 상태에 저장 setUserInfo((userInfo) => ({ ...userInfo, [name]: value })); // 이메일 중복 체크 if (name === "email" && value) { try { await axios.post(`${serverUrl}/auth/check-email`, { email: value }..
-
Kuwazawa - Snack ShoppingMall 데이터베이스 구조 정리
1. ERD - 실제 firebase에 저장된 데이터의 JSON코드 2. 데이터베이스 구조 설명Firebase kuwazawa_carts kuwazawa_members kuwazawa_noticekuwazawa_products kuwazawa_review 3. 데이터 CRUD회원관리 공지사항 상품관리 후기관리 장바구니관리
-
MiniGame 만들기 - matter.js 물리엔진 처음 사용해본 리뷰
인기 모바일 게임인 수박 게임을 모티브로 하여 제작하였습니다 프로젝트 개요목표 : 간단한 미니게임을 만들어보는 것사용 기술 : 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..
-
장바구니 기능 - Part2 선택상품 주문하기, 전체상품 주문하기, 주문 합계
장바구니에 담긴 상품 중 부분만 선택하거나 전체 선택하는 방법과 선택된 상품의 주문 합계를 구하는 방법 기록수량 변경을 처리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..
-
장바구니 기능 - Part 1 장바구니 추가
상품을 장바구니에 추가하는 기능 구현 방법 기록 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..