Merge pull request #97 from codestates-seb/dev-client#8/signuplogin

[FE]로그인 유지 및 프로필 탭 구현
codestates-seb · Sep 13, 2023 · b09a7e2 · b09a7e2
2 parents 6124396 + 95aabf0
commit b09a7e2
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 93 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
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useSelector, useDispatch } from 'react-redux'; 
 import { useCreateCash, useGetCash, useResetCash } from '../../hooks/useCash'; 
 import { RootState } from '../../store/config'; 
-import { setCashId, setCashAmount } from '../../reducer/cash/cashSlice';
+import { setMoneyId, setMoneyAmount } from '../../reducer/cash/cashSlice';
 
 const CashModal: React.FC<CashModalProps> = ({ onClose }) => {
 
@@ -14,42 +14,42 @@ const CashModal: React.FC<CashModalProps> = ({ onClose }) => {
     const resetButtonText = "리셋";
 
     const dispatch = useDispatch();
-    const cashId = useSelector((state: RootState) => state.cash.cashId);
-    const cashAmount = useSelector((state: RootState) => state.cash.cashAmount) || 0;
+    const moneyId = useSelector((state: RootState) => state.cash.moneyId);
+    const moneyAmount = useSelector((state: RootState) => state.cash.moneyAmount) || '0';
 
     const createCashMutation = useCreateCash();
-    const { data: cashData, isLoading } = useGetCash(cashId); 
+    const { data: cashData, isLoading } = useGetCash(moneyId); 
     const updateCashMutation = useResetCash();
 
-    const [cashInput, setCashInput] = useState<string>('');
-    const [initialAmount, setInitialAmount] = useState<number>(0); // 현금 생성을 위한 상태 변수
+    const [cashInput, setCashInput] = useState<string>('0');
+    const [initialAmount, setInitialAmount] = useState<string>('0'); // 현금 생성을 위한 상태 변수
 
     // 현금 생성 및 cashId 전역 저장
     const handleCreateCash = () => {
         createCashMutation.mutate(initialAmount, {
             onSuccess: (data) => {
-                dispatch(setCashId(data.data.cashId));
+                dispatch(setMoneyId(data.data.moneyId));
             }
         });
     };
 
     // 보유 현금량 조회 및 전역 저장
-    if (cashData && cashAmount !== cashData.data.cash) {
-        dispatch(setCashAmount(cashData.data.cash));
+    if (cashData && moneyAmount !== cashData.data.cash) {
+        dispatch(setMoneyAmount(cashData.data.cash));
     }
 
 // 현금을 입력한 금액으로 리셋하는 함수
     const handleCashReset = () => {
-        if (cashId) {
-            const numericCashId = parseInt(cashId, 10);  // cashId를 숫자로 변환
-            const numericCashAmount = Number(cashInput); // cashInput을 숫자로 변환
-            updateCashMutation.mutate({ cashId: numericCashId, cashAmount: numericCashAmount }, {
+        if (moneyId) {
+            const numericCashId = parseInt(moneyId, 10);  // cashId를 숫자로 변환
+            const numericCashAmount =cashInput; // cashInput을 숫자로 변환
+            updateCashMutation.mutate({ moneyId: numericCashId, money: numericCashAmount }, {
                 onSuccess: () => {
-                    dispatch(setCashAmount(numericCashAmount)); // 현금 금액을 입력한 금액으로 리셋
+                    dispatch(setMoneyAmount(numericCashAmount)); // 현금 금액을 입력한 금액으로 리셋
                 }
             });
         } else {
-            console.error("cashId is null or not a valid number.");
+            console.error("moneyId is null or not a valid number.");
         }
     };
 
@@ -63,18 +63,18 @@ const CashModal: React.FC<CashModalProps> = ({ onClose }) => {
                 {/* 현금 생성 입력창 및 버튼 추가 */}
                 <div>
                     <CashCreationInput
-                        type="number"
+                        type="string"
                         value={initialAmount}
-                        onChange={e => setInitialAmount(Number(e.target.value))}
+                        onChange={e => setInitialAmount(e.target.value)}
                         placeholder={cashCreationPlaceholder}
                     />
                     <CreateCashButton onClick={handleCreateCash}>{createCashButtonText}</CreateCashButton>
                 </div>
 
-                <p>현재 현금: {isLoading ? 'Loading...' : cashAmount.toLocaleString()}</p>
+                <p>현재 현금: {isLoading ? 'Loading...' : moneyAmount.toLocaleString()}</p>
                 <div>
                     <CashInput
-                        type="number"
+                        type="string"
                         value={cashInput}
                         onChange={e => setCashInput(e.target.value)}
                         placeholder={cashInputPlaceholder}
@@ -88,7 +88,7 @@ const CashModal: React.FC<CashModalProps> = ({ onClose }) => {
 
 interface CashModalProps {
     onClose: () => void;
-    cashId: string | null;
+    moneyId: number | null;
 }
 
 // Styled Components Definitions:
@@ -106,6 +106,7 @@ const ModalBackground = styled.div`
 `;
 
 const ModalContainer = styled.div`
+  z-index: 11;
   position: relative;
   background-color: white;
   padding: 20px;

diff --git a/client/src/components/Profile/memberInfoModal.tsx b/client/src/components/Profile/memberInfoModal.tsx
@@ -52,6 +52,7 @@ const ModalBackground = styled.div`
 `;
 
 const ModalContainer = styled.div`
+  z-index: 11;
   position: relative;
   background-color: white;
   padding: 20px;

diff --git a/client/src/components/Profile/memberWithdrawalModal.tsx b/client/src/components/Profile/memberWithdrawalModal.tsx
@@ -57,6 +57,7 @@ const ModalBackground = styled.div`
 `;
 
 const ModalContainer = styled.div`
+  z-index: 11;
   position: relative;
   background-color: white;
   padding: 20px;

diff --git a/client/src/components/Profile/profileModal.tsx b/client/src/components/Profile/profileModal.tsx
@@ -10,41 +10,37 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ onClose }) => {
 
     const memberInfoText = "회원정보";
     const cashText = "현금";
-    const memberWithdrawText = "회원탈퇴"
-    const [selectedTab, setSelectedTab] = useState<number>(1);
-    const cashId = useSelector((state: RootState) => state.cash.cashId); // Get cashId from Redux store
+    const memberWithdrawText = "회원탈퇴";
+    const moneyId = useSelector((state: RootState) => state.cash.moneyId); 
 
-    const handleTabChange = (tabNumber: number) => {
-        setSelectedTab(tabNumber);
-    };
+    const [selectedTab, setSelectedTab] = useState(1); // 1: MemberInfo, 2: CashModal, 3: WithdrawalModal
 
     return (
         <ModalBackground>
             <ModalContainer>
-                <CloseButton onClick={onClose}>&times;</CloseButton>
                 <Tabs>
-                    <TabButton active={selectedTab === 1} onClick={() => handleTabChange(1)}>{memberInfoText}</TabButton>
-                    <TabButton active={selectedTab === 2} onClick={() => handleTabChange(2)}>{cashText}</TabButton>
-                    <TabButton active={selectedTab === 3} onClick={() => handleTabChange(3)}>{memberWithdrawText}</TabButton>
+                    <TabButton onClick={() => setSelectedTab(1)}>{memberInfoText}</TabButton>
+                    <TabButton onClick={() => setSelectedTab(2)}>{cashText}</TabButton>
+                    <TabButton onClick={() => setSelectedTab(3)}>{memberWithdrawText}</TabButton>
                 </Tabs>
                 <TabContent>
-                    {selectedTab === 1 && <MemberInfoModal onClose={onClose}/>}
-                    {selectedTab === 2 && <CashModal onClose={onClose} cashId={cashId} />}
-                    {selectedTab === 3 && <MemberWithdrawalModal onClose={onClose}/>}
+                    {selectedTab === 1 && <MemberInfoModal onClose={onClose} />}
+                    {selectedTab === 2 && <CashModal onClose={onClose} moneyId={moneyId} />}
+                    {selectedTab === 3 && <MemberWithdrawalModal onClose={onClose} />}
                 </TabContent>
+                {/* <CloseButton onClick={onClose}>&times;</CloseButton> */}
             </ModalContainer>
         </ModalBackground>
     );
-}
+};
 
 interface ProfileModalProps {
     onClose: () => void;
 }
 
-
 // 모달 배경 스타일
 const ModalBackground = styled.div`
-  z-index:10;
+  z-index: 1000;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -56,53 +52,58 @@ const ModalBackground = styled.div`
   background-color: rgba(0, 0, 0, 0.5);
 `;
 
-// 모달 컨테이너 스타일
 const ModalContainer = styled.div`
-  z-index: 11;
+  z-index: 1001;
   position: relative;
-  background-color: white;
   padding: 20px;
   width: 400px;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  background-color: transparent; // 배경색을 투명하게 설정
+  border: none; // 테두리를 없앱니다.
 `;
+
 const Tabs = styled.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
     margin-bottom: 20px;
+    z-index: 1002; // 이 값을 추가하여 Tabs를 최상위로 올립니다.
 `;
 
-// 모달 닫기 버튼 스타일
-const CloseButton = styled.button`
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: #FFFFFF;
-  border: 1px solid lightgray;
-  font-size: 1.5rem;
-  cursor: pointer;
-`;
+// // 모달 닫기 버튼 스타일
+// const CloseButton = styled.button`
+//   position: absolute;
+//   top: 10px;
+//   right: 10px;
+//   background: #FFFFFF;
+//   border: 1px solid lightgray;
+//   font-size: 1.5rem;
+//   cursor: pointer;
+// `;
 
-interface TabButtonProps {
-    active?: boolean;
-}
-
-const TabButton = styled.button<TabButtonProps>`
+const TabButton = styled.button`
     flex: 1;
     padding: 10px;
     border: 1px solid lightgray;
     border-radius: 5px;
     cursor: pointer;
-    background-color: ${({ active }) => (active ? 'darkslategray' : '#FFFFFF')};
-    color: ${({ active }) => (active ? '#FFFFFF' : 'darkslategray')};
+    background-color: #FFFFFF;
+    color: darkslategray;
 `;
 
 const TabContent = styled.div`
     width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    overflow-y: auto;
+    position: relative;
+    min-height: 200px;
 `;
 
-
-export default ProfileModal;
+export default ProfileModal;
diff --git a/client/src/hooks/useCash.ts b/client/src/hooks/useCash.ts
@@ -1,36 +1,37 @@
-// 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:8080';
+
 const getAuthHeader = () => {
     const authToken = localStorage.getItem('authToken');
     return {
         'Authorization': `${authToken}`
     };
+
 };
 
 export const useCreateCash = () => {
-    return useMutation((initialAmount: number) => axios.post('http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash', { cash: initialAmount }, {
+    return useMutation((initialAmount: string) => axios.post(`${BASE_URL}/cash`, { "money": initialAmount }, {
         headers: getAuthHeader()
     }));
-
 }
 
-export const useGetCash = (cashId: string | null) => {
+export const useGetCash = (moneyId: string | null) => {
     const queryFn = () => {
-        if (!cashId) {
+        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/${cashId}`, {
+        return axios.get(`${BASE_URL}/cash`, {
             headers: getAuthHeader()
         });
     };
 
-    const queryResult = useQuery(['cash', cashId], queryFn, {
-        enabled: !!cashId,
+    const queryResult = useQuery(['money', moneyId], queryFn, {
+        enabled: !!moneyId,
     });
 
-    if (!cashId) {
+    if (!moneyId) {
         return {
             ...queryResult,
             data: null
@@ -41,7 +42,7 @@ export const useGetCash = (cashId: string | null) => {
 }
 
 export const useResetCash = () => {
-    return useMutation((data: { cashId: number, cashAmount: number }) => axios.patch(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash/${data.cashId}`, { cash: data.cashAmount }, {
+    return useMutation((data: { moneyId: number, money: string }) => axios.patch(`${BASE_URL}/cash/${data.moneyId}`, { "money": data.money }, {
         headers: getAuthHeader()
     }));
 }