Merge pull request #47 from Kakaotech-10/feature/Login

🐛 카카오 정보동의 이후 signupform_kakao로 넘어가지 않는 문제 해결
Kakaotech-10 · Oct 25, 2024 · f41fb96 · f41fb96
2 parents dfe80ef + 98cb7ef
commit f41fb96
Show file tree

Hide file tree

Showing 3 changed files with 207 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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 = () => {
       </div>
       <div className="content-wrapper">
         <div className="signup-area">
-          <ProfileUpload />
-          <Input type="text" placeholder="이름(한글)" />
-          <Input type="text" placeholder="이름(영문)" />
+          <ProfileUpload
+            initialImage={formData.profileImage}
+            onImageUpload={handleProfileUpload}
+          />
+
+          <Input
+            type="text"
+            name="koreanName"
+            value={formData.koreanName}
+            onChange={handleInputChange}
+            placeholder="이름(한글)"
+          />
+
+          <Input
+            type="text"
+            name="englishName"
+            value={formData.englishName}
+            onChange={handleInputChange}
+            placeholder="이름(영문)"
+          />
+
           <Select
+            name="field"
+            value={formData.field}
             options={["풀스택", "클라우드", "인공지능"]}
-            onChange={handleFieldChange}
+            onChange={handleInputChange}
             placeholder="분야 선택"
           />
-          <Button text="회원가입" />
+
+          <Select
+            name="role"
+            value={formData.role}
+            options={["STUDENT", "MANAGER"]}
+            onChange={handleInputChange}
+            placeholder="역할 선택"
+          />
+
+          {error && <p className="error-message">{error}</p>}
+
+          <Button
+            text={isLoading ? "처리중..." : "회원가입"}
+            onClick={handleSubmit}
+            disabled={isLoading}
+          />
+
           <p className="re-login" onClick={handleLogin}>
             아이디로 로그인
           </p>