[FEAT] 소셜 로그인 기능 추가 (#84)

src/Router.js

@@ -17,6 +17,7 @@ import SavedWorkers from './pages/MyPage/SavedWorkers';
 import AlbaReviewPage from './pages/AlbaReviewPage';
 import MyResume from './pages/MyResume/MyResume';
 import MyStoreForm from './pages/MyPage/MyStore/MyStoreForm';
+import SocialLoginCallback from "./pages/SocialLoginCallback";
 
 const AppRouter = () => {
   return (
@@ -40,6 +41,7 @@ const AppRouter = () => {
       <Route path="/mypage/saved-workers" element={<SavedWorkers />} />
       <Route path="/support" element={<SupportPage />} />
       <Route path="/mypage/mystore-form" element={<MyStoreForm />} />
+      <Route path="/oauth2/callback" element={<SocialLoginCallback />} />
     </Routes>
   );
 };

src/components/common/MypageSubMenu.jsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import React, { useState, useEffect, useMemo } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 
@@ -12,8 +12,11 @@ import { BsBookmarkFill } from "react-icons/bs";
 
 const MypageSubMenu = ({ userType }) => {
   const location = useLocation(); // 현재 경로 가져오기
+  const navigate = useNavigate();
   const [activeMenu, setActiveMenu] = useState(null);
 
+
+
   // 알바생과 사장님의 공통 메뉴 항목
   const commonMenu = [
     { name: '체결 현황', path: '/mypage/contracts', icon: <HiClipboardDocumentList /> },
@@ -34,17 +37,24 @@ const MypageSubMenu = ({ userType }) => {
     ...commonMenu
   ];
 
-  // 사용자 타입에 맞는 메뉴 선택
-  const menuItems = userType === 'worker' ? workerMenu : ownerMenu;
-
-  // 초기 activeMenu를 현재 경로로 설정
+  const menuItems = useMemo(() => {
+    if (!userType) return [];
+    return userType === "worker" ? workerMenu : ownerMenu;
+  }, [userType]);
+
   useEffect(() => {
+    if (!userType || menuItems.length === 0) return;
+
     const currentPath = location.pathname;
     const activeItem = menuItems.find((item) => item.path === currentPath);
-    if (activeItem) {
+
+    if (activeItem && activeMenu !== activeItem.name) {
       setActiveMenu(activeItem.name);
+    } else if (!activeItem && activeMenu !== menuItems[0].name) {
+      setActiveMenu(menuItems[0].name);
+      navigate(menuItems[0].path, { replace: true });
     }
-  }, [location.pathname, menuItems]);
+  }, [location.pathname, userType, menuItems, activeMenu, navigate]);
 
 
   // 메뉴 항목 클릭 시 activeMenu 상태 업데이트

src/components/layout/Header.jsx

@@ -60,7 +60,17 @@ function Header() {
         <NavItem to="/alba/search">알바찾기</NavItem>
         <NavItem to="/alba/review">알바후기</NavItem>
         <NavItem to="/support">고객지원</NavItem>
-        <NavItem to="/mypage">마이페이지</NavItem>
+        <NavItem 
+          to={isAuthenticated ? "/mypage" : "#"} 
+          onClick={(e) => {
+            if (!isAuthenticated) {
+              e.preventDefault();  // ✅ 기본 이동 동작 막기
+              alert("로그인 후 이용해주세요.");
+            }
+          }}
+        >
+          마이페이지
+        </NavItem>
       </NavMenu>
       {isAuthenticated ? (
         <ProfileSection>

src/pages/LoginModal.jsx

@@ -46,6 +46,10 @@ function LoginModal({ onClose }) {
     }
   };
 
+  const handleSocialLogin = (provider) => {
+    window.location.href = `https://www.danpat.store/oauth2/authorization/${provider}`;
+  };
+
   return (
       <Modal onClose={onClose} title="로그인">
         <UserType>
@@ -100,8 +104,8 @@ function LoginModal({ onClose }) {
               <div></div>
             </Guide>
             <div id="sns-button-section">
-              <NaverButton id="naver" />
-              <KakaoButton id="kakao" />
+              <NaverButton id="naver" onClick={() => handleSocialLogin("naver")} />
+              <KakaoButton id="kakao" onClick={() => handleSocialLogin("kakao")} />
             </div>
           </SimpleLogin>
         )}

src/pages/SignUpModal.jsx

@@ -18,31 +18,35 @@ function SignUpModal({ onClose }) {
     onClose();
   };
 
+  const handleSocialSignUp = (provider) => {
+    window.location.href = `https://www.danpat.store/oauth2/authorization/${provider}`;
+  };
+
   return (
       <Modal onClose={onClose} title="회원가입" width="600px">
         <UserType>
-          <TypeOption onClick={() => handleSignUp('worker')}>
+          <TypeOption>
             <div class="option-info">
               <img id="worker" src={IcWorker} alt="worker" />
               <span>개인 회원</span>
               <p>원하는 시간, 딱 맞는 알바,<br/>지금 시작해보세요!</p>
             </div>
 
-            <div class="signup-button">
+            <div class="signup-button"  onClick={() => handleSignUp('worker')}>
               <p>개인회원 가입하기</p>
               <IoIosArrowForward/>
             </div>
 
             <div id="sns-signup">
-              <SNSSignUpButton>
-                <SiNaver size={10}/>
-                네이버
-              </SNSSignUpButton>
-              <div id="line"></div>
-              <SNSSignUpButton>
-                <RiKakaoTalkFill size={14}/>
-                카카오톡
-              </SNSSignUpButton>
+            <SNSSignUpButton onClick={() => handleSocialSignUp("naver")}>
+              <SiNaver size={10} />
+              네이버
+            </SNSSignUpButton>
+            <div id="line"></div>
+            <SNSSignUpButton onClick={() => handleSocialSignUp("kakao")}>
+              <RiKakaoTalkFill size={14} />
+              카카오톡
+            </SNSSignUpButton>
             </div>
           </TypeOption>
           <TypeOption onClick={() => handleSignUp('owner')}>

src/pages/SocialLoginCallback.jsx

@@ -0,0 +1,51 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useUserInfo } from '../contexts/useUserInfo.js';
+import request from "../api/request.ts";
+
+const SocialLoginCallback = () => {
+  const navigate = useNavigate();
+  const { updateUser } = useUserInfo();
+
+  useEffect(() => {
+    const handleSocialLogin = async () => {
+      // 현재 URL에서 code 값 가져오기
+      const urlParams = new URLSearchParams(window.location.search);
+      const code = urlParams.get("accessToken");
+
+      if (!code) {
+        alert("로그인 코드가 없습니다.");
+        navigate("/login");
+        return;
+      }
+
+      try {
+        // 백엔드 API에 GET 요청 보내기
+        const response = await request.get(`/oauth2/login?token=${code}`);
+
+        // 받은 데이터에서 필요한 값 추출
+        const { accessToken, userId, userRole, name, profile, email } = response;
+
+        // 사용자 정보 업데이트
+        updateUser({ id: userId, role: userRole, name: name, profileImage: profile, email: email });
+
+
+        // Axios 헤더 업데이트
+        request.updateToken(accessToken);
+
+        // 로그인 성공하면 홈으로 이동
+        navigate("/");
+      } catch (error) {
+        console.error("소셜 로그인 처리 중 오류 발생:", error);
+        alert("로그인 중 오류가 발생했습니다.");
+        navigate("/");
+      }
+    };
+
+    handleSocialLogin();
+  }, [navigate]);
+
+  return <div>카카오 로그인 중입니다...</div>;
+};
+
+export default SocialLoginCallback;