로그인 시 엑세스토큰 처리

엑세스 토큰의 밸류를 디코딩
디코딩 된 자료에서 memberId를 추출해 전역변수로 설정
Issues #15

client/package.json

@@ -15,8 +15,10 @@
     "boxicons": "^2.1.4",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
+    "gapi-script": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-google-login": "^5.2.2",
     "react-query": "^3.39.3",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",

client/src/components/Logins/EmailLogin.tsx

@@ -35,27 +35,33 @@ const EmailLoginModal: React.FC<EmailLoginModalProps> = ({ onClose, onLogin }) =
   // 로그인 버튼 클릭 핸들러
   const handleLoginClick = async () => {
     try {
-      // 백엔드에 로그인 요청
       const response = await axios.post("http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/members/login", {
         email,
         password,
       });
       if (response.status === 200) {
-
-        // 로그인 상태로 만들기
-        dispatch(setLoginState(true)); 
-
-        // memberId 상태 업데이트하기
-        dispatch(updateMemberId(response.data.memberId));
-
         const authToken = response.headers['authorization'];
-        const accessToken = response.headers['accessToken'];
+
+        // JWT 토큰 디코딩
+        const base64Url = authToken.split('.')[1];
+        const base64 = base64Url.replace('-', '+').replace('_', '/');
+        const decodedToken = JSON.parse(window.atob(base64));
+
+        // memberId 상태 업데이트하기
+        if (decodedToken && decodedToken.memberId) {
+          dispatch(updateMemberId(decodedToken.memberId));
+        }
+
         const refreshToken = response.headers['refreshToken'];
-
+
+        // 로그인 상태로 만들기
+        dispatch(setLoginState(true)); 
+
         // 토큰들을 로컬 스토리지에 저장
         if(authToken) localStorage.setItem('authToken', authToken);
-        if(accessToken) localStorage.setItem('accessToken', accessToken);
+
         if(refreshToken) localStorage.setItem('refreshToken', refreshToken);
+
         onLogin();
         onClose();
       } else {