diff --git a/FITple-Frontend/data/LoginApi.jsx b/FITple-Frontend/data/LoginApi.jsx index 1038552..35e7239 100644 --- a/FITple-Frontend/data/LoginApi.jsx +++ b/FITple-Frontend/data/LoginApi.jsx @@ -7,7 +7,6 @@ export const login = async (loginId, loginPw) => { headers: { "Content-Type": "application/json", }, - // 추가 credentials: "include", body: JSON.stringify({ user_id: loginId, password: loginPw }), }); @@ -18,3 +17,79 @@ export const login = async (loginId, loginPw) => { throw new Error("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요."); } }; + + +export const findId = async (name, email) => { + try { + const response = await fetch(`${localhost}/FITple/auth/find-id`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + credentials: "include", + body: JSON.stringify({ nickname: name, email: email }), + }); + + if (!response.ok) { + throw new Error('ID 찾기 요청 실패'); + } + + const data = await response.json(); + console.log('받아온 데이터'); + console.log(data.result); + return data.result; // { email, name, user_id } 형태로 반환 + } catch (error) { + console.error("ID 찾기 요청 중 오류가 발생했습니다.", error); + throw new Error("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요."); + } +}; + +export const requestNewPasswordKey = async (user_id, nickname, email) => { + try { + const response = await fetch(`${localhost}/FITple/auth/reset-password`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + credentials: "include", + body: JSON.stringify({ user_id, nickname, email }), + }); + + const data = await response.json(); + if (!response.ok) { + throw new Error(data.message || "비밀번호 재설정 요청 실패"); + } + + console.log('받아온 데이터'); + console.log(data.result); + return data; + } catch (error) { + console.error("비밀번호 재설정 요청 중 오류가 발생했습니다.", error); + throw new Error("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요."); + } +}; + +export const resetPassword = async (newPassword) => { + console.log('새로운 비밀번호 전송!'); + console.log(newPassword); + try { + const response = await fetch(`${localhost}/FITple/auth/reset-password`, { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + credentials: "include", + body: JSON.stringify({ newPassword }), + }); + + const data = await response.json(); + if (!response.ok) { + throw new Error(data.message || "비밀번호 변경 실패"); + } + + return data; + } catch (error) { + console.error("비밀번호 변경 요청 중 오류가 발생했습니다.", error); + throw new Error("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요."); + } +}; \ No newline at end of file diff --git a/FITple-Frontend/data/MyPageApi.jsx b/FITple-Frontend/data/MyPageApi.jsx index 87c9c57..639ddc1 100644 --- a/FITple-Frontend/data/MyPageApi.jsx +++ b/FITple-Frontend/data/MyPageApi.jsx @@ -1,56 +1,24 @@ const API_BASE_URL = 'http://localhost:3000'; -// 임시 토큰 발급 함수 -const fetchToken = async () => { - try { - const response = await fetch(`${API_BASE_URL}/temp-token`, { - method: 'POST', // POST 요청 - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - // 필요한 경우 바디 데이터를 추가 - }), - }); - - if (!response.ok) { - throw new Error('Failed to fetch token'); - } - - const data = await response.json(); - return data.token; // 가져온 토큰을 반환 - } catch (error) { - console.error('Error fetching token:', error); - throw error; - } -}; - export const submitUserInfo = async (data, imageFile) => { const formData = new FormData(); - - // JSON 데이터를 문자열로 변환해서 추가 formData.append('data', JSON.stringify(data)); - // 이미지 파일 추가 if (imageFile) { formData.append('image', imageFile); } try { - // 임시 토큰 발급 - const token = await fetchToken(); - - // 사용자 정보 제출 const response = await fetch(`${API_BASE_URL}/FITple/myprofile`, { method: 'POST', headers: { - 'Authorization': `Bearer ${token}`, + "Content-Type": "multipart/form-data", }, body: formData, credentials: 'include', }); - if (!response.ok) { + if (!response.status === 200) { if (response.status === 407) { console.error('이미 존재하는 닉네임입니다.'); } @@ -67,3 +35,30 @@ export const submitUserInfo = async (data, imageFile) => { throw error; } }; + + +// // 임시 토큰 발급 함수 +// const fetchToken = async () => { +// try { +// const response = await fetch(`${API_BASE_URL}/temp-token`, { +// method: 'POST', +// headers: { +// 'Content-Type': 'application/json', +// }, +// credentials: "include", +// body: JSON.stringify({ +// // 필요한 경우 바디 데이터를 추가 +// }), +// }); + +// if (!response.ok) { +// throw new Error('Failed to fetch token'); +// } + +// const data = await response.json(); +// return data.token; +// } catch (error) { +// console.error('Error fetching token:', error); +// throw error; +// } +// }; diff --git a/FITple-Frontend/data/SignupApi.jsx b/FITple-Frontend/data/SignupApi.jsx index d3ffcc6..13ccf97 100644 --- a/FITple-Frontend/data/SignupApi.jsx +++ b/FITple-Frontend/data/SignupApi.jsx @@ -7,6 +7,7 @@ export const signup = async (userData) => { headers: { 'Content-Type': 'application/json', }, + credentials: "include", body: JSON.stringify(userData), }); diff --git a/FITple-Frontend/data/store/userStore.js b/FITple-Frontend/data/store/userStore.js new file mode 100644 index 0000000..edbc77e --- /dev/null +++ b/FITple-Frontend/data/store/userStore.js @@ -0,0 +1,12 @@ +import { create } from 'zustand'; + +const userStore = create((set) => ({ + userInfo: { + nickname: '', + email: '', + user_id: '' + }, + setUserInfo: (userInfo) => set({ userInfo }), +})); + +export default userStore; diff --git a/FITple-Frontend/src/components/UserInfoBasic/UserInfoBasic.jsx b/FITple-Frontend/src/components/UserInfoBasic/UserInfoBasic.jsx index c9b329b..2339184 100644 --- a/FITple-Frontend/src/components/UserInfoBasic/UserInfoBasic.jsx +++ b/FITple-Frontend/src/components/UserInfoBasic/UserInfoBasic.jsx @@ -1,96 +1,116 @@ -import React from "react"; +import React, { useState, useRef } from 'react'; import uploadButton from "../../../assets/btn_image_upload.svg"; import { - MainText, - SubText, - InfoContainer, - InfoWrapper, - InputWrapper, - InputBox, - GenderWrapper, - GenderButton, - FitWrapper, - FitButton, - StyleWrapper, - StyleButton, -} from "../../pages/UserInfoPage/UserInfoPage.style"; + MainText, SubText, InfoContainer, InfoWrapper, InputWrapper, InputBox, GenderWrapper, + GenderButton, FitWrapper, FitButton, StyleWrapper, StyleButton, ProfileImageWrapper, ProfileImage +} from '../../pages/UserInfoPage/UserInfoPage.style'; function UserInfoBasic({ - selectedGender, - setSelectedGender, - selectedFits, - setSelectedFits, - selectedStyles, - setSelectedStyles, - handleFitClick, - handleStyleClick, + selectedGender, setSelectedGender, selectedFits, setSelectedFits, + selectedStyles, setSelectedStyles, handleFitClick, handleStyleClick, + handleNicknameChange, fileInputRef, profileImage, setProfileImage, errorMessage }) { - const fits = ["슬림", "레귤러", "세미오버", "오버"]; - const styles = [ - "심플베이직", - "캐주얼", - "시크", - "러블리", - "아메카지", - "유니크", - "유니섹스", - "스트릿", - "스포티", - ]; + const fits = ['슬림', '레귤러', '세미오버', '오버']; + const styles = ['심플베이직', '캐주얼', '시크', '러블리', '아메카지', '유니크', '유니섹스', '스트릿', '스포티']; - return ( - - 기본 정보 - uploadButton - - - 닉네임 - - 성별 - - setSelectedGender("male")} - > - 남성 - - setSelectedGender("female")} - > - 여성 - - - 선호 핏 - - {fits.map((fit) => ( - handleFitClick(fit)} - > - {fit} - - ))} - - 선호 스타일 - - {styles.map((style) => ( - handleStyleClick(style)} - > - {style} - - ))} - - 한 줄 소개 - - - - - ); + const handleImageUpload = (e) => { + const file = e.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onloadend = () => { + setProfileImage(reader.result); + }; + reader.readAsDataURL(file); + } + }; + + // 핏 버튼 클릭 핸들러 + handleFitClick = (fit) => { + setSelectedFits(prevSelectedFits => { + if (prevSelectedFits.includes(fit)) { + return prevSelectedFits.filter(selectedFit => selectedFit !== fit); + } else { + // 최대 2개까지 선택 가능 + if (prevSelectedFits.length >= 2) { + return [...prevSelectedFits.slice(1), fit]; // 가장 오래된 항목 제거 후 새 항목 추가 + } + return [...prevSelectedFits, fit]; + } + }); + }; + + // 스타일 버튼 클릭 핸들러 + handleStyleClick = (style) => { + setSelectedStyles(prevSelectedStyles => { + if (prevSelectedStyles.includes(style)) { + return prevSelectedStyles.filter(selectedStyle => selectedStyle !== style); + } else { + // 최대 2개까지 선택 가능 + if (prevSelectedStyles.length >= 2) { + return [...prevSelectedStyles.slice(1), style]; // 가장 오래된 항목 제거 후 새 항목 추가 + } + return [...prevSelectedStyles, style]; + } + }); + }; + + return ( + + 기본 정보 + fileInputRef.current.click()}> + {profileImage ? ( + + ) : ( + uploadButton + )} + + + + + 닉네임 + + {errorMessage && {errorMessage}} + 성별 + + setSelectedGender(0)}>남성 + setSelectedGender(1)}>여성 + + 선호 핏 + + {fits.map((fit) => ( + handleFitClick(fit)} + > + {fit} + + ))} + + 선호 스타일 + + {styles.map((style) => ( + handleStyleClick(style)} + > + {style} + + ))} + + 한 줄 소개 + + + + + ); } export default UserInfoBasic; diff --git a/FITple-Frontend/src/components/UserInfoBody/UserInfoBody.jsx b/FITple-Frontend/src/components/UserInfoBody/UserInfoBody.jsx index 3e054f1..faae183 100644 --- a/FITple-Frontend/src/components/UserInfoBody/UserInfoBody.jsx +++ b/FITple-Frontend/src/components/UserInfoBody/UserInfoBody.jsx @@ -12,75 +12,70 @@ import { EditBTN, } from "../../pages/UserInfoPage/UserInfoPage.style"; -function UserBodyInfo({ ...props }) { - return ( - - {/* 컴포넌트 작업을 위해서 div하나 추가 */} - - 체형 정보 - 수정 - - - - - 키 - - - cm - - - - 몸무게 - - - kg - - - - 어깨 너비 - - - cm - - - - 가슴둘레 - - - cm - - - - 팔 길이 - - - cm - - - - 허리 둘레 - - - cm - - - - 허벅지 둘레 - - - cm - - - - 엉덩이 둘레 - - - cm - - - - - ); +function UserBodyInfo({ handleBodyInfoChange }) { + return ( + + 체형 정보 + + + 키 + + + cm + + + + 몸무게 + + + kg + + + + 어깨너비 + + + cm + + + + 가슴둘레 + + + cm + + + + 팔길이 + + + cm + + + + 허리둘레 + + + cm + + + + 허벅지둘레 + + + cm + + + + 엉덩이둘레 + + + cm + + + + + ); } export default UserBodyInfo; diff --git a/FITple-Frontend/src/pages/FindIdPage/FindIdPage.jsx b/FITple-Frontend/src/pages/FindIdPage/FindIdPage.jsx index ad4e4b1..005faa9 100644 --- a/FITple-Frontend/src/pages/FindIdPage/FindIdPage.jsx +++ b/FITple-Frontend/src/pages/FindIdPage/FindIdPage.jsx @@ -1,6 +1,8 @@ import React, { useState, useEffect } from 'react'; import { useNavigate } from "react-router-dom"; import logo from "../../../assets/Logo.svg"; +import { findId } from "../../../data/LoginApi"; +import userStore from "../../../data/store/userStore"; import { FindIdPageWrapper, MainText, @@ -15,45 +17,56 @@ function FindIdPage() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [isButtonActive, setIsButtonActive] = useState(false); + const setUserInfo = userStore((state) => state.setUserInfo); const navigate = useNavigate(); useEffect(() => { - if (name && email) { - setIsButtonActive(true); - } else { - setIsButtonActive(false); - } + setIsButtonActive(!!name && !!email); }, [name, email]); - const handleIdFindClick = () => { - navigate('/findid/showid'); - } + const handleIdFindClick = async () => { + try { + const result = await findId(name, email); + setUserInfo(result); // 받아온 데이터를 Zustand에 저장 + navigate('/findid/showid'); + } catch (error) { + alert("가입하지 않은 사용자입니다."); + } + }; + + const handleLoginClick = () => { + navigate('/login'); + }; + + const handlePwFindClick = () => { + navigate('/findpw'); + }; return ( - FITple Logo - FITple - - setName(e.target.value)} - /> - setEmail(e.target.value)} - /> - ID 찾기 - - - 로그인 화면으로 돌아가기 - 비밀번호 찾기 - + FITple Logo + FITple + + setName(e.target.value)} + /> + setEmail(e.target.value)} + /> + ID 찾기 + + + 로그인 화면으로 돌아가기 + 비밀번호 찾기 + ); } diff --git a/FITple-Frontend/src/pages/FindPwPage/FindPwPage.jsx b/FITple-Frontend/src/pages/FindPwPage/FindPwPage.jsx index 5529e1f..35b5fe3 100644 --- a/FITple-Frontend/src/pages/FindPwPage/FindPwPage.jsx +++ b/FITple-Frontend/src/pages/FindPwPage/FindPwPage.jsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import { useNavigate } from "react-router-dom"; +import { requestNewPasswordKey } from "../../../data/LoginApi" import logo from "../../../assets/Logo.svg"; import { FindPwPageWrapper, @@ -20,47 +21,62 @@ function FindPwPage() { useEffect(() => { if (id && name && email) { - setIsButtonActive(true); + setIsButtonActive(true); } else { - setIsButtonActive(false); + setIsButtonActive(false); } }, [id, name, email]); - const handlePwFindClick = () => { - navigate('/findpw/showpw'); + const handlePwFindClick = async () => { + if (isButtonActive) { + try { + const response = await requestNewPasswordKey(id, name, email); + if (response.isSuccess) { + navigate('/findpw/showpw', { state: { id, name, email } }); + } else { + alert("비밀번호 재설정 요청이 실패했습니다."); + } + } catch (error) { + alert("오류가 발생했습니다. 다시 시도해주세요."); + } + } + }; + + const handleLoginClick = () => { + navigate('/login'); } return ( - FITple Logo - FITple - - setId(e.target.value)} - /> - setName(e.target.value)} - /> - setEmail(e.target.value)} - /> - 비밀번호 찾기 - - - 로그인 화면으로 돌아가기 - + FITple Logo + FITple + + setId(e.target.value)} + /> + setName(e.target.value)} + /> + setEmail(e.target.value)} + /> + 비밀번호 찾기 + + + 로그인 화면으로 돌아가기 + ); } diff --git a/FITple-Frontend/src/pages/IdPage/IdPage.jsx b/FITple-Frontend/src/pages/IdPage/IdPage.jsx index 3b11ae5..ae5edee 100644 --- a/FITple-Frontend/src/pages/IdPage/IdPage.jsx +++ b/FITple-Frontend/src/pages/IdPage/IdPage.jsx @@ -1,5 +1,7 @@ +import React from 'react'; import logo from "../../../assets/Logo.svg"; import { useNavigate } from "react-router-dom"; +import userStore from "../../../data/store/userStore"; import { IdPageWrapper, MainText, @@ -12,10 +14,15 @@ import { function IdPage() { const navigate = useNavigate(); + const { nickname, email, user_id } = userStore((state) => state.userInfo); + + const handleLoginClick = () => { + navigate('/login'); + }; const handleIdFindClick = () => { navigate('/findpw'); - } + }; return ( @@ -23,18 +30,18 @@ function IdPage() { FITple - 이름 - 핏플 + 닉네임 + {nickname} 이메일 - fitple@gmail.com + {email} 아이디 - fitple + {user_id} - + diff --git a/FITple-Frontend/src/pages/PwPage/PwPage.jsx b/FITple-Frontend/src/pages/PwPage/PwPage.jsx index 0ca7a9b..c8c65b7 100644 --- a/FITple-Frontend/src/pages/PwPage/PwPage.jsx +++ b/FITple-Frontend/src/pages/PwPage/PwPage.jsx @@ -1,5 +1,6 @@ +import React from "react"; +import { useNavigate, useLocation } from "react-router-dom"; import logo from "../../../assets/Logo.svg"; -import { useNavigate } from "react-router-dom"; import { PwPageWrapper, MainText, @@ -12,6 +13,8 @@ import { function PwPage() { const navigate = useNavigate(); + const location = useLocation(); + const { id, name, email } = location.state || {}; const handleRePwClick = () => { navigate('/repw'); @@ -23,16 +26,16 @@ function PwPage() { FITple - 이름 - 핏플 + 닉네임 + {name || "닉네임 받아오는 중"} 이메일 - fitple@gmail.com + {email || "이메일 받아오는 중"} 아이디 - fitple + {id || "아이디 받아오는 중"} diff --git a/FITple-Frontend/src/pages/RePwPage/RePwPage.jsx b/FITple-Frontend/src/pages/RePwPage/RePwPage.jsx index 97913cf..15d3640 100644 --- a/FITple-Frontend/src/pages/RePwPage/RePwPage.jsx +++ b/FITple-Frontend/src/pages/RePwPage/RePwPage.jsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; +import { resetPassword } from "../../../data/LoginApi"; import logo from "../../../assets/Logo.svg"; import { RePwPageWrapper, @@ -23,10 +24,19 @@ function RePwPage() { } }, [pw, pw2]); - const handleSubmit = () => { + const handleSubmit = async () => { if (isButtonActive) { - alert("비밀번호 변경이 완료됐습니다! 로그인 페이지로 이동합니다."); - navigate('/login'); + try { + const response = await resetPassword(pw); + if (response.isSuccess) { + alert("비밀번호 변경이 완료됐습니다! 로그인 페이지로 이동합니다."); + navigate('/login'); + } else { + alert("비밀번호 변경에 실패했습니다."); + } + } catch (error) { + alert("오류가 발생했습니다. 다시 시도해주세요."); + } } }; @@ -49,12 +59,7 @@ function RePwPage() { value={pw2} onChange={(e) => setPw2(e.target.value)} /> - - 저장하기 - + 저장하기 ); diff --git a/FITple-Frontend/src/pages/UserInfoPage/UserInfoPage.jsx b/FITple-Frontend/src/pages/UserInfoPage/UserInfoPage.jsx index 91d124b..673c647 100644 --- a/FITple-Frontend/src/pages/UserInfoPage/UserInfoPage.jsx +++ b/FITple-Frontend/src/pages/UserInfoPage/UserInfoPage.jsx @@ -1,55 +1,176 @@ -import logo from "../../../assets/Logo.svg"; -import { useState } from "react"; +import { useState, useRef } from 'react'; import { useNavigate } from "react-router-dom"; -import { UserInfoPageWrapper, SubmitButton } from "./UserInfoPage.style"; -import BasicInfo from "../../components/UserInfoBasic/UserInfoBasic"; -import BodyInfo from "../../components/UserInfoBody/UserInfoBody"; -import UserInfoBasic from "../../components/UserInfoBasic/UserInfoBasic"; +import logo from "../../../assets/Logo.svg"; +import { + UserInfoPageWrapper, + SubmitButton +} from './UserInfoPage.style'; +import BasicInfo from '../../components/UserInfoBasic/UserInfoBasic'; +import BodyInfo from '../../components/UserInfoBody/UserInfoBody'; +import { submitUserInfo } from '../../../data/MyPageApi'; function UserInfoPage() { - const [selectedGender, setSelectedGender] = useState(null); - const [selectedFits, setSelectedFits] = useState([]); - const [selectedStyles, setSelectedStyles] = useState([]); - const navigate = useNavigate(); - - const handleStyleClick = (style) => { - setSelectedStyles((prevSelectedStyles) => - prevSelectedStyles.includes(style) - ? prevSelectedStyles.filter((selectedStyle) => selectedStyle !== style) - : [...prevSelectedStyles, style] - ); - }; + const [selectedGender, setSelectedGender] = useState(null); + const [selectedFits, setSelectedFits] = useState([]); + const [selectedStyles, setSelectedStyles] = useState([]); + const [nickname, setNickname] = useState(''); + const [profileImage, setProfileImage] = useState(null); + const [errorMessage, setErrorMessage] = useState(''); + const [bodyInfo, setBodyInfo] = useState({ + height: '', + weight: '', + shoulder_width: '', + chest_circumference: '', + arm_length: '', + waist_circumference: '', + thigh_circumference: '', + hip_circumference: '' + }); + const navigate = useNavigate(); + const fileInputRef = useRef(null); + + const handleNicknameChange = (e) => { + setNickname(e.target.value); + }; + + const handleBodyInfoChange = (e) => { + const { name, value } = e.target; + const numericValue = value === '' ? '' : parseInt(value, 10); // 신체 정보 입력값을 숫자로 변환 + + setBodyInfo((prevBodyInfo) => ({ + ...prevBodyInfo, + [name]: numericValue // 숫자로 변환된 값 저장 + })); + }; + const handleFitClick = (fit) => { + setSelectedFits((prevSelectedFits) => { + if (prevSelectedFits.includes(fit)) { + return prevSelectedFits.filter(selectedFit => selectedFit !== fit); + } else { + return [...prevSelectedFits, fit]; + } + }); + }; + + const handleStyleClick = (style) => { + setSelectedStyles((prevSelectedStyles) => { + if (prevSelectedStyles.includes(style)) { + return prevSelectedStyles.filter(selectedStyle => selectedStyle !== style); + } else { + return [...prevSelectedStyles, style]; + } + }); + }; + + const handleForceSubmit = () => { + alert("회원가입이 완료되었습니다."); + navigate('/login'); + } + + const handleSubmit = async () => { + try { + if (!selectedGender || !nickname || selectedFits.length === 0 || selectedStyles.length === 0) { + setErrorMessage('모든 필드를 채워주세요.'); + return; + } + + if (!profileImage) { + setProfileImage('https://avatars.githubusercontent.com/u/175378381?s=400&u=deddffbaae8b7955703812927f4c6580c036db40&v=4'); + } + + const userInfo = { + nickname, + gender: selectedGender || 0, + perfer_fit: selectedFits, + perfer_style: selectedStyles, + one_line_info: document.getElementById('userinfo-infotext').value + }; + + const convertedBodyInfo = { + height: bodyInfo.height || 0, + weight: bodyInfo.weight || 0, + shoulder_width: bodyInfo.shoulder_width || 0, + chest_circumference: bodyInfo.chest_circumference || 0, + arm_length: bodyInfo.arm_length || 0, + waist_circumference: bodyInfo.waist_circumference || 0, + thigh_circumference: bodyInfo.thigh_circumference || 0, + hip_circumference: bodyInfo.hip_circumference || 0, + }; + + const data = { + userInfo, + bodyInfo: convertedBodyInfo + }; + + console.log("제출할 데이터:", data); + const response = await submitUserInfo(data, profileImage); + console.log("서버 응답:", response); // 서버 응답 로그 추가 + + if (response.status === 200) { + alert("회원가입이 완료되었습니다."); + navigate('/login'); + } else { + switch (response.status) { + case 400: + setErrorMessage('잘못된 요청입니다.'); + break; + case 401: + setErrorMessage('사용자 이미지가 존재하지 않습니다.'); + break; + case 402: + setErrorMessage('기본 정보 또는 체형 정보 데이터가 없습니다.'); + break; + case 403: + setErrorMessage('체형 정보 데이터가 이미 존재합니다.'); + break; + case 404: + setErrorMessage('체형 정보 데이터 저장 중 오류가 발생했습니다.'); + break; + case 405: + setErrorMessage('기본 정보 데이터 저장 중 오류가 발생했습니다.'); + break; + case 406: + setErrorMessage('사용자 이미지 데이터 저장 중 오류가 발생했습니다.'); + break; + case 407: + setErrorMessage('이미 존재하는 닉네임입니다.'); + break; + case 500: + setErrorMessage('서버 에러가 발생했습니다.'); + break; + default: + setErrorMessage('알 수 없는 오류가 발생했습니다.'); + break; + } + } + } catch (error) { + console.error("API 호출 중 오류 발생:", error); + setErrorMessage('회원가입 중 오류가 발생했습니다.'); + } + }; - const handleFitClick = (fit) => { - setSelectedFits((prevSelectedFits) => - prevSelectedFits.includes(fit) - ? prevSelectedFits.filter((selectedFit) => selectedFit !== fit) - : [...prevSelectedFits, fit] + return ( + + FITple Logo + + + 저장 + ); - }; - - const handleSubmit = () => { - alert("회원가입이 완료되었습니다."); - navigate("/login"); // LoginPage로 이동 - }; - - return ( - - FITple Logo - - - 저장 - - ); } export default UserInfoPage; diff --git a/FITple-Frontend/src/pages/UserInfoPage/UserInfoPage.style.js b/FITple-Frontend/src/pages/UserInfoPage/UserInfoPage.style.js index 2d813f7..545fa26 100644 --- a/FITple-Frontend/src/pages/UserInfoPage/UserInfoPage.style.js +++ b/FITple-Frontend/src/pages/UserInfoPage/UserInfoPage.style.js @@ -22,8 +22,8 @@ export const MainBox = styled.div` `; export const ProfileImageWrapper = styled.div` - width: 150px; - height: 150px; + width: 180px; + height: 180px; border-radius: 50%; overflow: hidden; cursor: pointer; @@ -31,7 +31,6 @@ export const ProfileImageWrapper = styled.div` justify-content: center; align-items: center; // border: 2px solid #0276FE; - margin-bottom: 20px; `; export const ProfileImage = styled.img` @@ -44,6 +43,7 @@ export const MainText = styled.p` font-size: 28px; font-weight: bold; text-align: center; + margin-bottom: 40px; `; export const EditBTN = styled.button`