From 98cb7eff620242033b3ae18bcf76063590af5f03 Mon Sep 17 00:00:00 2001 From: parkseyoung Date: Fri, 25 Oct 2024 10:18:21 +0900 Subject: [PATCH] =?UTF-8?q?bug:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=EB=8F=99=EC=9D=98=20=EC=9D=B4=ED=9B=84=20signupform?= =?UTF-8?q?=5Fkakao=EB=A1=9C=20=EB=84=98=EC=96=B4=EA=B0=80=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/ProfileUpload.jsx | 14 ++- src/containers/LoginHandler.jsx | 72 ++++++++++++-- src/containers/SignupForm_kakao.jsx | 142 ++++++++++++++++++++++++++-- 3 files changed, 207 insertions(+), 21 deletions(-) diff --git a/src/component/ProfileUpload.jsx b/src/component/ProfileUpload.jsx index 90f2b48..a34b3f9 100644 --- a/src/component/ProfileUpload.jsx +++ b/src/component/ProfileUpload.jsx @@ -1,15 +1,23 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import "./styles/ProfileUpload.scss"; -const ProfileUpload = () => { +const ProfileUpload = ({ initialImage, onImageUpload }) => { const [preview, setPreview] = useState(null); + useEffect(() => { + if (initialImage) { + setPreview(initialImage); + } + }, [initialImage]); + const handleFileChange = (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = () => { - setPreview(reader.result); + const imageData = reader.result; + setPreview(imageData); + onImageUpload(imageData); }; reader.readAsDataURL(file); } diff --git a/src/containers/LoginHandler.jsx b/src/containers/LoginHandler.jsx index 32640cd..c55f4fb 100644 --- a/src/containers/LoginHandler.jsx +++ b/src/containers/LoginHandler.jsx @@ -15,7 +15,10 @@ const LoginHandler = () => { useEffect(() => { const kakaoLogin = async () => { try { + console.log("Authorization Code:", code); // 인가 코드 확인 const response = await fetchKakaoData(code); + console.log("Raw API Response:", response); // 전체 응답 확인 + console.log("Response Data:", response.data); // 응답 데이터 확인 handleLoginResponse(response.data); } catch (err) { handleError(err); @@ -32,9 +35,12 @@ const LoginHandler = () => { }, [code, navigate]); const fetchKakaoData = async (code) => { + const url = `${import.meta.env.VITE_REACT_APP_SERVER_URL}/oauth2/callback/kakao?code=${code}`; + console.log("Requesting URL:", url); // API 요청 URL 확인 + return await axios({ method: "GET", - url: `${import.meta.env.VITE_REACT_APP_SERVER_URL}/oauth2/callback/kakao?code=${code}`, + url: url, headers: { "Content-Type": "application/json;charset=utf-8", "Access-Control-Allow-Origin": "*", @@ -43,22 +49,72 @@ const LoginHandler = () => { }; const handleLoginResponse = (data) => { - console.log("Server response:", data); + console.log("=== Login Response Data ==="); + console.log("Full response data:", data); + console.log("IsExistingUser:", data.isExistingUser); + if (data.isExistingUser) { - localStorage.setItem("name", data.account.nickname); + console.log("=== Existing User Data ==="); + console.log("Member data:", data.member); + console.log("Token:", data.token); + + localStorage.setItem("member_id", data.member.member_id); + localStorage.setItem("member_name", data.member.member_name); + localStorage.setItem( + "member_name_english", + data.member.member_name_english + ); + localStorage.setItem("role", data.member.role); + localStorage.setItem("course", data.member.course); localStorage.setItem("token", data.token); + + if (data.member.profile_image) { + console.log("Profile image URL:", data.member.profile_image); + localStorage.setItem("profile_image", data.member.profile_image); + } + navigate("/mainpage"); } else { - localStorage.setItem("kakaoNickname", data.account.nickname); - if (data.account.profileImage) { - localStorage.setItem("kakaoProfileImage", data.account.profileImage); - } + console.log("=== New User Data ==="); + // 카카오에서 받아온 데이터 구조 확인 + console.log("Kakao account data:", data.kakaoAccount || data); + + // 여러 가능한 데이터 구조 확인 + const kakaoData = { + member_name: + data.kakaoAccount?.profile?.nickname || + data.kakaoAccount?.nickname || + data.profile?.nickname || + data.nickname || + "", + profile_image: + data.kakaoAccount?.profile?.profile_image_url || + data.kakaoAccount?.profile_image_url || + data.profile?.profile_image_url || + data.profile_image_url || + "", + }; + + console.log("Processed Kakao data to store:", kakaoData); + localStorage.setItem("tempKakaoData", JSON.stringify(kakaoData)); + + // localStorage에 제대로 저장되었는지 확인 + const storedData = localStorage.getItem("tempKakaoData"); + console.log("Data stored in localStorage:", JSON.parse(storedData)); + navigate("/kakaosignup"); } }; const handleError = (err) => { - console.error("Login error:", err); + console.error("=== Login Error ==="); + console.error("Error object:", err); + console.error("Error message:", err.message); + if (err.response) { + console.error("Error response:", err.response); + console.error("Error response data:", err.response.data); + } + setState((prev) => ({ ...prev, error: diff --git a/src/containers/SignupForm_kakao.jsx b/src/containers/SignupForm_kakao.jsx index 0f943d2..36e1760 100644 --- a/src/containers/SignupForm_kakao.jsx +++ b/src/containers/SignupForm_kakao.jsx @@ -1,4 +1,6 @@ import { useNavigate } from "react-router-dom"; +import { useEffect, useState } from "react"; +import axios from "axios"; import Sidebar from "./SideForm"; import Button from "../component/Button"; import Input from "../component/Input"; @@ -8,14 +10,98 @@ import "./styles/SignupForm.scss"; const SignupForm_kakao = () => { const navigate = useNavigate(); + const [formData, setFormData] = useState({ + koreanName: "", + englishName: "", + field: "", + role: "", + profileImage: null, + }); + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(null); - const handleLogin = () => { - navigate("/login"); + useEffect(() => { + // Load kakao profile data from localStorage + const kakaoNickname = localStorage.getItem("kakaoNickname"); + const kakaoProfileImage = localStorage.getItem("kakaoProfileImage"); + + if (kakaoNickname) { + setFormData((prev) => ({ + ...prev, + koreanName: kakaoNickname, + })); + } + + if (kakaoProfileImage) { + setFormData((prev) => ({ + ...prev, + profileImage: kakaoProfileImage, + })); + } + }, []); + + const handleInputChange = (e) => { + const { name, value } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: value, + })); }; - const handleFieldChange = (e) => { - console.log("Selected field:", e.target.value); - // 여기에 선택된 필드를 처리하는 로직을 추가할 수 있습니다. + const handleProfileUpload = (imageData) => { + setFormData((prev) => ({ + ...prev, + profileImage: imageData, + })); + }; + + const handleSubmit = async () => { + try { + setIsLoading(true); + setError(null); + + // Validate form data + if ( + !formData.koreanName || + !formData.englishName || + !formData.field || + !formData.role + ) { + throw new Error("모든 필드를 입력해주세요."); + } + + // Send data to server + const response = await axios.post( + `${import.meta.env.VITE_REACT_APP_SERVER_URL}/api/signup`, + { + memberName: formData.koreanName, + memberNameEnglish: formData.englishName, + course: formData.field, + role: formData.role, + profileImage: formData.profileImage, + } + ); + + if (response.data.success) { + // Store necessary data in localStorage + localStorage.setItem("token", response.data.token); + localStorage.setItem("name", formData.koreanName); + + // Clear temporary kakao data + localStorage.removeItem("kakaoNickname"); + localStorage.removeItem("kakaoProfileImage"); + + navigate("/mainpage"); + } + } catch (err) { + setError(err.response?.data?.message || err.message); + } finally { + setIsLoading(false); + } + }; + + const handleLogin = () => { + navigate("/login"); }; return ( @@ -25,15 +111,51 @@ const SignupForm_kakao = () => {
- - - + + + + + + + + {error &&

{error}

} + +