사용자가 자신의 팔로워와 팔로잉 리스트를 확인할 수 있는 기능을 구현합니다. 이 기능은 팔로워 리스트와 팔로잉 리스트를 각각 별도의 컴포넌트로 분리하여 제공합니다. 프론트엔드 1. 팔로워 리스트 컴포넌트FollowerListSection.jsx 1-1 팔로워 리스트 컴포넌트> 상태 및 기본 설정 const FollowerListSection = () => { const navigate = useNavigate(); const location = useLocation(); const { followers } = location.state || { followers: [] }; console.log("팔로워페이지의 팔로잉", followers); // 뒤로 가기 버튼을 눌렀을 때 이전 페이지로 이동..

사용자가 다른 사용자를 팔로우하거나 언팔로우할 수 있는 기능을 구현합니다. 이 기능은 팔로우 버튼을 통해 사용자 목록 페이지와 개인 피드 페이지에서 제공되며, 프론트엔드와 백엔드가 상호작용하여 팔로우/언팔로우 상태를 업데이트합니다. 데이터베이스에 팔로우 관계를 저장하고 삭제하는 과정을 포함합니다. 데이터베이스 구조 설정 followerId : users 테이블의 userNo가 팔로우하는 유저followeeId : users 테이블의 userNo 에게 팔로우된 유저프론트엔드 1. 팔로우 버튼 컴포넌트 (FollowButton.jsx) 1-1 팔로우 버튼 컴포넌트 > 상태 및 기본 설정const FollowButton = ({ userNo }) => { const dispatch = useDispatch(..

사용자가 회원 정보를 수정할 수 있는 기능을 구현합니다. 사용자는 닉네임, 비밀번호, 프로필 사진을 변경할 수 있으며, 이를 위해 프론트엔드와 백엔드가 상호작용합니다. 데이터베이스에 저장된 정보를 업데이트하고, 중복된 닉네임을 체크하며, 새로운 프로필 사진을 업로드하는 과정을 포함합니다. 프론트엔드 1. 회원 정보 수정 페이지 (ProfileModify.jsx) 1-1 초기 상태 및 사용자 정보 로드import React, { useRef, useState, useEffect } from "react";import { useNavigate } from "react-router-dom";import { useSelector, useDispatch } from "react-redux";import style..

사용자가 이메일과 비밀번호를 입력하여 로그인할 수 있는 기능을 구현합니다. 이 과정에서 프론트엔드와 백엔드가 상호작용하며, 입력된 정보를 바탕으로 데이터베이스에서 사용자를 인증합니다.프론트엔드 1. 로그인 요청 핸들러handleLogin 함수const handleLogin = async (e) => { e.preventDefault(); // 폼 제출 시 페이지 새로고침 방지 setError(""); // 기존 오류 메시지 초기화 // 이메일 검증 if (!email) { alert("이메일을 입력하세요."); // 이메일이 비어 있으면 경고 메시지 표시 emailRef.current.focus(); // 이메일 입력 필드에 포커스 return; } // 비밀번호 검증 if ..

사용자 정보를 입력받아 데이터베이스에 저장하고, 중복된 이메일과 닉네임을 체크하며, 프로필 사진을 업로드하는 기능 기록 프론트엔드- 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 }..