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

포토리뷰만 보기와 별점 순으로 정렬하는 기능 구현 방법 기록  1. ReviewTag 컴포넌트먼저, ReviewTag 컴포넌트는 사용자가 모든 리뷰를 볼지 포토리뷰만 볼지 선택할 수 있도록 해줍니다.import React from "react";import styled from "styled-components";// 스타일 생략const ReviewTag = ({ changeShowPhotosOnly, showPhotosOnly }) => { return ( changeShowPhotosOnly(false)} > 모든 리뷰 보기 changeShowPhotosOnly(true)} > 포토리뷰만 보기 )..

리뷰 등록하는 방법 기록제가 생각하는 리뷰 등록 기능의 주요 포인트는 다음과 같습니다.Point사용자가 리뷰를 작성하고 사진을 업로드할 수 있음.업로드된 사진을 Firebase Storage에 저장하고, 그 URL을 리뷰 데이터와 함께 Firebase Realtime Database에 저장.리뷰 데이터를 Redux를 통해 관리하고, 필요한 컴포넌트에서 데이터를 사용. 1. 리뷰 작성 폼 컴포넌트먼저, 리뷰 작성 폼 컴포넌트를 구현해 보겠습니다. 이 컴포넌트는 사용자가 리뷰를 작성하고 사진을 업로드할 수 있도록 합니다. 리뷰 작성 폼 컴포넌트 (ReviewSection.js)import React, { useState } from "react";import { kuwazawa_reviewDB, oStora..

상품을 카테고리별로 분류하고, 상품 리스트를 다양한 기준으로 정렬하는 기능을 구현 방법 기록이 과정에서는 부모 컴포넌트와 자식 컴포넌트 간의 데이터 전송이 중요한 포인트입니다.  1. 컴포넌트 구조컴포넌트는 크게 ProductView, ProductCategory, ProductSection으로 나뉘며, ProductView가 부모 컴포넌트 역할을 합니다. ProductView 컴포넌트(부모)먼저, ProductView 컴포넌트에서는 title 상태를 관리하고, 이를 자식 컴포넌트인 ProductCategory와 ProductSection에 전달합니다. title 상태는 현재 선택된 카테고리를 나타냅니다.import React, { useState } from "react";import styled fr..

관리자가 기존에 등록된 상품 정보를 변경하는 방법 기록 1. 라우터 설정먼저, 상품 수정 페이지로 이동할 수 있도록 라우터를 설정해야 합니다. react-router-dom을 사용하여 경로를 설정합니다.import React from "react";import { Route, Routes } from "react-router-dom";import Layout from "@/Layout";import ProductModifyView from "@/views/product/ProductModifyView";const App = () => { return ( }> {/* 다른 경로 생략 */} } /> );};export default App; 왜..

상품의 상세페이지를 구현하는 방법 기록상품 상세페이지는 사용자가 특정 상품을 클릭했을 때 해당 상품에 대한 자세한 정보를 보여주는 페이지입니다.   1. React Router 설정Route 컴포넌트는 React Router 라이브러리에서 제공하는 컴포넌트로, URL 경로와 해당 경로가 매칭될 때 렌더링할 컴포넌트를 지정합니다.  2. ProductDetailView 경로 설정 ProductDetailView 컴포넌트를 특정 상품의 상세 페이지로 연결하는 설정} /> 2-1 Route 컴포넌트Route 컴포넌트는 경로(path)와 해당 경로에 매칭될 때 렌더링할 컴포넌트(element)를 정의합니다. 2-2 path 속성path 속성은 URL 경로를 정의합니다.여기서 "/product/:id"는 동적 세..