[Fix]로그인 유지 및 프로필 모달 코드 정리

로그인 시 Auth토큰 유무 판별 시 else부분 삭제 API url 변수에 할당 Issues #70
codestates-seb · Sep 13, 2023 · 4ab5ed0 · 4ab5ed0
1 parent 3ea8034
commit 4ab5ed0
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 38 deletions.
diff --git a/client/src/components/Logins/GoogleSignin.tsx b/client/src/components/Logins/GoogleSignin.tsx
@@ -3,7 +3,7 @@ import { GoogleOAuthProvider, GoogleLogin, useGoogleOneTapLogin } from "@react-o
 import { useDispatch } from "react-redux";
 import { setLoginState } from "../../reducer/member/loginSlice";
 
-const GoogleSignInComponent: React.FC = () => {
+const GoogleSignIn: React.FC = () => {
   const dispatch = useDispatch(); // Redux의 dispatch 함수를 사용하기 위해 가져옵니다.
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -37,4 +37,4 @@ const GoogleSignInComponent: React.FC = () => {
   );
 };
 
-export default GoogleSignInComponent;
+export default GoogleSignIn;
diff --git a/client/src/components/Logins/OAuthLogin.tsx b/client/src/components/Logins/OAuthLogin.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import kakaoLogo from '../../asset/images/KakaoLogo.svg';  
 import axios from 'axios';
-
+// import { GoogleOAuthProvider, GoogleLogin, googleLogout } from '@react-oauth/google';
 
 const OAuthLoginModal: React.FC<LoginModalProps> = ({ onClose, onEmailLoginClick, onEmailSignupClick }) => {
     const titleText = "로그인";
@@ -12,7 +12,9 @@ const OAuthLoginModal: React.FC<LoginModalProps> = ({ onClose, onEmailLoginClick
     const emailLoginText = "이메일로 로그인";
     const emailSignupText = "이메일로 회원가입";
 
-
+    // const handleGoogleLogout = async () => {
+    //     googleLogout();
+    // }
 
     const handleKakaoLogin = async () => {
         try {
@@ -33,7 +35,16 @@ const OAuthLoginModal: React.FC<LoginModalProps> = ({ onClose, onEmailLoginClick
             <ModalContainer>
                 <CloseButton onClick={onClose}>&times;</CloseButton>
                 <Title>{titleText}</Title>
-
+                {/* <GoogleOAuthProvider clientId="<your_client_id>">
+                    <GoogleLogin
+                        onSuccess={credentialResponse => {
+                            console.log(credentialResponse);
+                        }}
+                        onError={() => {
+                            console.log('Login Failed');
+                        }}
+                    />;
+                </GoogleOAuthProvider>; */}
                 <KakaoButton onClick={handleKakaoLogin}>
                     <LogoImage src={kakaoLogo} alt="Kakao Logo" />
                     {kakaoLoginText}
@@ -101,6 +112,7 @@ const OrText = styled.span`
 `;
 
 
+
 const KakaoButton = styled.button`
     margin: 10px 0;
     padding: 10px 20px;

diff --git a/client/src/components/Profile/cashModal.tsx b/client/src/components/Profile/cashModal.tsx
@@ -49,7 +49,7 @@ const CashModal: React.FC<CashModalProps> = ({ onClose }) => {
                 }
             });
         } else {
-            console.error("cashId is null or not a valid number.");
+            console.error("moneyId is null or not a valid number.");
         }
     };
 
@@ -88,7 +88,7 @@ const CashModal: React.FC<CashModalProps> = ({ onClose }) => {
 
 interface CashModalProps {
     onClose: () => void;
-    cashId: string | null;
+    moneyId: number | null;
 }
 
 // Styled Components Definitions:

diff --git a/client/src/components/Profile/profileModal.tsx b/client/src/components/Profile/profileModal.tsx
@@ -11,7 +11,7 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ onClose }) => {
     const memberInfoText = "회원정보";
     const cashText = "현금";
     const memberWithdrawText = "회원탈퇴";
-    const cashId = useSelector((state: RootState) => state.cash.moneyId); 
+    const moneyId = useSelector((state: RootState) => state.cash.moneyId); 
 
     const [selectedTab, setSelectedTab] = useState(1); // 1: MemberInfo, 2: CashModal, 3: WithdrawalModal
 
@@ -25,7 +25,7 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ onClose }) => {
                 </Tabs>
                 <TabContent>
                     {selectedTab === 1 && <MemberInfoModal onClose={onClose} />}
-                    {selectedTab === 2 && <CashModal onClose={onClose} cashId={cashId} />}
+                    {selectedTab === 2 && <CashModal onClose={onClose} moneyId={moneyId} />}
                     {selectedTab === 3 && <MemberWithdrawalModal onClose={onClose} />}
                 </TabContent>
                 {/* <CloseButton onClick={onClose}>&times;</CloseButton> */}

diff --git a/client/src/hooks/useCash.ts b/client/src/hooks/useCash.ts
@@ -1,7 +1,8 @@
-// hooks/useCash.ts
 import { useQuery, useMutation } from 'react-query';
 import axios from 'axios';
 
+const BASE_URL = 'http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com';
+
 const getAuthHeader = () => {
     const authToken = localStorage.getItem('authToken');
     return {
@@ -10,18 +11,17 @@ const getAuthHeader = () => {
 };
 
 export const useCreateCash = () => {
-    return useMutation((initialAmount: number) => axios.post('http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash', { "money": initialAmount }, {
+    return useMutation((initialAmount: number) => axios.post(`${BASE_URL}/cash`, { "money": initialAmount }, {
         headers: getAuthHeader()
     }));
-
 }
 
 export const useGetCash = (moneyId: string | null) => {
     const queryFn = () => {
         if (!moneyId) {
             throw new Error("Cash ID is not provided.");
         }
-        return axios.get(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash/${moneyId}`, {
+        return axios.get(`${BASE_URL}/cash`, {
             headers: getAuthHeader()
         });
     };
@@ -41,7 +41,7 @@ export const useGetCash = (moneyId: string | null) => {
 }
 
 export const useResetCash = () => {
-    return useMutation((data: { moneyId: number, money: number }) => axios.patch(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash/${data.moneyId}`, { "money": data.money }, {
+    return useMutation((data: { moneyId: number, money: number }) => axios.patch(`${BASE_URL}/cash/${data.moneyId}`, { "money": data.money }, {
         headers: getAuthHeader()
     }));
 }
diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
@@ -97,25 +97,19 @@ const MainPage = () => {
   const dispatch = useDispatch();
   const isLogin = useSelector((state: StateProps) => state.login);
 
-    // 🔴 페이지 로드 시 로컬 스토리지의 토큰을 기반으로 로그인 상태를 확인합니다.
-    useEffect(() => {
-      const authToken = localStorage.getItem("authToken");
-      if (authToken !== null) {
-        dispatch(setLoginState());
-      } else {
-        dispatch(setLogoutState());
-      }
-    }, [dispatch]);
-
-  // // 🔴 새로고침 되면 로그인 해제되면서 액세스 토큰도 같이 삭제됨
-  // useEffect(() => {
-  //   // const authToken = localStorage.getItem("authToken");
-
-  //   // if (authToken !== null) {
-  //   //   dispatch(setLoginState());
-  //   // }
-  //   localStorage.removeItem("authToken");
-  // }, []);
+  // 🔴 페이지 로드 시 로컬 스토리지의 토큰을 기반으로 로그인 상태를 확인합니다.
+  useEffect(() => {
+    const authToken = localStorage.getItem("authToken");
+    if (authToken !== null) {
+      dispatch(setLoginState());
+    }
+  },);
+
+      // 🔴 로그아웃 시 로컬스토리지에 있는 Auth 토큰 제거
+  const handleLogout = () => {
+    dispatch(setLogoutState());
+    localStorage.removeItem("authToken");
+  };
 
   //프로필 모달 열고닫는 매커니즘
   const openProfileModal = useCallback(() => {
@@ -141,12 +135,7 @@ const MainPage = () => {
     setSelectedMenu(menu);
   };
 
-  // 🔴 로그아웃 시 로컬스토리지에 있는 Auth 토큰 제거
-  const handleLogout = () => {
-    dispatch(setLogoutState());
-    localStorage.removeItem("authToken");
 
-  };
 
   return (
     <Container>