회원관리 기능의 두 번째 파트인 로그인 기능을 구현 방법 기록로그인 기능은 사용자가 등록된 계정으로 로그인을 하여 개인화된 서비스를 이용할 수 있게 해주는 중요한 기능입니다.  1. 로그인 컴포넌트 구현로그인 컴포넌트는 사용자가 입력한 이메일과 비밀번호를 받아 이를 검증하고, 성공 시 사용자 정보를 저장하는 역할을 합니다.import React, { useState, useRef, useEffect } from "react";import { fetchMembers, userLogin } from "@/store/member";import { fetchCarts } from "@/store/product";import { useDispatch, useSelector } from "react-redux";i..

React + Firebase 사용하여 회원가입 기능 구현 방법 기록 과정상태 관리 및 입력값 처리중복 체크 및 회원가입 처리주소 검색 기능 추가  1. 상태 관리 및 입력값 처리회원가입 폼에서 입력한 값을 관리하고 처리하는 방법을 설정합니다. useState와 useRef를 사용해서 상태를 관리하고, handleChange 함수를 통해 입력값을 업데이트합니다.const JoinSection = () => { const dispatch = useDispatch(); const members = useSelector((state) => state.members.members); const navigate = useNavigate(); const userIdRef = useRef(""); const..

가로 스크로 컴포넌트 구현 방법 기록 1. SnackSlider.js 파일을 생성하고 기본 컴포넌트를 작성import React, { useRef } from "react";import styled, { keyframes } from "styled-components";import { Link } from "react-router-dom";// 애니메이션 효과 정의const hoverLine = keyframes` 0% { opacity: 0; transform: translateX(-100%); } 50% { opacity: 1; transform: translateX(0%); } 100% { opacity: 0; transform: translateX(100%..

마우스 스크롤에 따라 이미지가 바뀌는 기능 기록  1. TextArea.js 파일을 생성import React, { useState, useEffect } from "react";import styled from "styled-components";import _ from "lodash";import { Link } from "react-router-dom";// 스타일 정의const TextAreaBlock = styled.div` //생략`;// 텍스트와 이미지가 포함된 컴포넌트const TextArea = () => { const [currentImageIndex, setCurrentImageIndex] = useState(0); // 현재 이미지 인덱스 const [scrollPosition,..

애니메이션이 적용된 슬라이드 구현 방법 기록 1.MainSlider.js 파일을 생성import React from "react";import styled from "styled-components";import Slider from "react-slick";import "slick-carousel/slick/slick.css";const MainSliderBlock = styled.div` max-width: 1800px; margin: auto; width: 100vw; .slick-track { margin-top: 410px; } .slide { height: 50vh; line-height: 50vh; text-align: center; img { ..

글자가 테두리부터 채워지는 애니메이션 빙밥 기록이 작업은 꽤 세밀한 조정이 필요한데요, 그래도 결과물보니까 뿌듯헸습니다. 특히, 애니메이션이 적용된 텍스트는 웹사이트의 인상을 확 높여줄 수 있습니다. 주요 기술:CSS 애니메이션SVG (Scalable Vector Graphics)React와 styled-components 1.TextAnimation.js 파일을 생성해서 기본 컴포넌트를 작성import React from 'react';import styled, { keyframes } from 'styled-components';const TextAnimationBlock = styled.div` display: flex; justify-content: center; align-items: ce..