상품 삭제 기능을 구현하는 방법 기록상품 삭제는 관리자 권한을 가진 사용자가 상품을 목록에서 제거할 수 있도록 하는 기능입니다.  1. 삭제 기능 구현삭제 버튼 클릭 시 삭제 기능을 수행하는 함수 removeProduct를 추가합니다const removeProduct = async (productId) => { const confirmDelete = window.confirm("정말로 삭제하시겠습니까?"); if (confirmDelete) { try { await kuwazawa_productDB.child(productId).remove(); alert("상품이 삭제되었습니다."); dispatch(fetchProducts()); // 삭제 후 상품 목록 갱신 ..

쇼핑몰의 상품 등록 기능을 구현 기록 Firebase를 이용해 상품 데이터를 관리하고, React와 Redux를 사용하여 데이터를 처리하는 방법을 다룹니다.  1. Firebase 설정import firebase from "firebase/compat/app";import "firebase/compat/database";import "firebase/compat/storage";// Firebase 설정 초기화const firebaseConfig = firebase.initializeApp({ apiKey: "YOUR_API_KEY", authDomain: "YOUR_PROJECT_ID.firebaseapp.com", databaseURL: "https://YOUR_PROJECT_ID.firebas..

책 형태의 네비게이션에서 태그를 통해 해당 페이지로 이동하는 기능을 추가하는 방법 기록 1. SnackTag 컴포넌트먼저, 태그 버튼을 클릭하면 해당하는 페이지로 이동하는 기능을 구현합니다.// 태그 버튼에 호버 애니메이션 추가const hoverLine = keyframes` 0% { opacity: 0; transform: translateY(100%); } 50% { opacity: 1; transform: translateY(0%); } 100% { opacity: 0; transform: translateY(100%); }`;// SnackTag 컴포넌트 정의const SnackTag = ({ onButtonClick }) => { // 태그 버튼 ..

책 형태의 네비게이션에서 검색어를 입력하여 해당 페이지로 이동하는 기능을 추가하는 방법 기록  1.  검색 컴포넌트 만들기먼저 검색 기능을 구현하는 SnackSearch 컴포넌트를 작성합니다// 검색 컴포넌트 정의const SnackSearch = ({ onSearch }) => { const [searchValue, setSearchValue] = useState(""); // 검색어 상태 const handleInputChange = (e) => { setSearchValue(e.target.value); // 검색어 상태 업데이트 }; const onClick = () => { handleSearch(); // 검색 버튼 클릭 시 검색 함수 호출 }; const onKeyPre..

react-pageflip 라이브러리를 사용하여 책 형태를 구현하는 방법 기록  1. 기본적인 컴포넌트 구조 만들기먼저 SnackList 컴포넌트를 만들고, react-pageflip 라이브러리를 이용하여 기본적인 페이지 넘김 효과를 구현합니다.// 기본적인 SnackList 컴포넌트 정의const SnackList = () => { const pageFlipRef = useRef(); return ( Page 1 Page 2 Page 3 Page 4 );};export default SnackList;여기서는 PageFlip 컴포넌트를 사용하여 기본적인 페이지 넘김 효과..

회원정보 수정 기능 구현 방법 기록 1. 회원정보 수정 컴포넌트회원정보 수정 컴포넌트는 사용자가 입력한 정보를 업데이트하고 이를 Firebase에 저장하는 역할을 합니다. import React, { useState, useEffect, useRef } from "react";import { useSelector, useDispatch } from "react-redux";import { kuwazawa_memberDB, kuwazawa_cartDB } from "@/assets/firebase";import { useNavigate } from "react-router-dom";import { fetchMembers, localUser, userLogout } from "@/store/member";i..