Merge branch 'dev-client' of github.com:codestates-seb/seb45_main_008…

… into dev-client#17/stockOrder
codestates-seb · Sep 8, 2023 · 85cc99b · 85cc99b
2 parents 0c7bfaf + b94256a
commit 85cc99b
Show file tree

Hide file tree

Showing 10 changed files with 512 additions and 31 deletions.
diff --git a/client/src/components/Headers/LogoutHeader.tsx b/client/src/components/Headers/LogoutHeader.tsx
@@ -32,6 +32,11 @@ const LogoutHeader: React.FC<LogoutHeaderProps> = ({ onLoginClick }) => {
 };
 
 export default LogoutHeader;
+// 프롭스 타입 정의
+interface LogoutHeaderProps {
+  onLoginClick: () => void;
+}
+
 
 
 // 스타일드 컴포넌트 정의
@@ -84,8 +89,4 @@ const LoginButton = styled.button`
   }
 `;
 
-// 프롭스 타입 정의
-interface LogoutHeaderProps {
-  onLoginClick: () => void;
-}
 
diff --git a/client/src/components/Logins/OAuthLogin.tsx b/client/src/components/Logins/OAuthLogin.tsx
@@ -14,51 +14,38 @@ const OAuthLoginModal: React.FC<LoginModalProps> = ({ onClose, onEmailLoginClick
     const emailLoginText = "이메일로 로그인";
     const emailSignupText = "이메일로 회원가입";
 
-    // 구글 로그인 핸들러
+    // 카카오 로그인 핸들러
     const handleGoogleLogin = async () => {
       try {
-          const response = await axios.post('/oauth2/authorization/google');
+          const response = await axios.get('/oauth2/authorization/google');
           if (response.status === 200) {
-            const authToken = response.headers['authorization'];
-            const accessToken = response.headers['accessToken'];
-            const refreshToken = response.headers['refreshToken'];
-
-            // 토큰들을 로컬 스토리지에 저장
-            if(authToken) localStorage.setItem('authToken', authToken);
-            if(accessToken) localStorage.setItem('accessToken', accessToken);
-            if(refreshToken) localStorage.setItem('refreshToken', refreshToken);
-              console.log("Successfully logged in with Google!");
-              onClose();
+              // 200 상태 코드를 받으면 주소 데이터를 사용하여 리다이렉트
+              const redirectUri = response.data.uri;  // 백엔드에서 'url' 키로 주소 데이터를 제공한다고 가정
+              window.location.href = redirectUri;
           } else {
-              console.error("Error logging in with Google");
+              console.error("Error logging in with Google, unexpected status code:", response.status);
           }
       } catch (error) {
           console.error("Error logging in with Google:", error);
       }
-    };
+  };
+
 
     // 카카오 로그인 핸들러
     const handleKakaoLogin = async () => {
       try {
-          const response = await axios.post('/oauth2/authorization/kakao');
+          const response = await axios.get('/oauth2/authorization/kakao');
           if (response.status === 200) {
-            const authToken = response.headers['authorization'];
-            const accessToken = response.headers['accessToken'];
-            const refreshToken = response.headers['refreshToken'];
-
-            // 토큰들을 로컬 스토리지에 저장
-            if(authToken) localStorage.setItem('authToken', authToken);
-            if(accessToken) localStorage.setItem('accessToken', accessToken);
-            if(refreshToken) localStorage.setItem('refreshToken', refreshToken);
-              console.log("Successfully logged in with Kakao!");
-              onClose();
+              // 200 상태 코드를 받으면 주소 데이터를 사용하여 리다이렉트
+              const redirectUri = response.data.uri;  // 백엔드에서 'url' 키로 주소 데이터를 제공한다고 가정
+              window.location.href = redirectUri;
           } else {
-              console.error("Error logging in with Kakao");
+              console.error("Error logging in with Kakao, unexpected status code:", response.status);
           }
       } catch (error) {
           console.error("Error logging in with Kakao:", error);
       }
-    };
+  };
 
     // 모달 반환
     return (

diff --git a/client/src/components/Profile/cashModal.tsx b/client/src/components/Profile/cashModal.tsx
@@ -0,0 +1,123 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import axios from 'axios';
+
+const CashModal: React.FC<CashModalProps> = ({ onClose, memberId }) => {
+    const [cash, setCash] = useState<number | null>(null);
+    const [cashInput, setCashInput] = useState<string>('');
+
+    useEffect(() => {
+        axios.get(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash/${memberId}`)
+            .then(response => {
+                if (response.status === 200) {
+                    setCash(response.data.cash);
+                } else if (response.status === 204) {
+                    // Handle the "No Content" scenario. This could be setting cash to 0 or displaying a message.
+                    setCash(0); // Or handle it in a way that suits your needs
+                }
+            })
+            .catch(error => {
+                console.error("Error fetching cash:", error);
+            });
+    }, [memberId]);
+
+    const handleCashReceive = () => {
+        axios.post(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash/${memberId}`, {
+            cash: cashInput
+        })
+        .then(response => {
+            if (response.status === 201) {
+                // Update the cash display with the new value
+                setCash(prevCash => prevCash ? prevCash + Number(cashInput) : Number(cashInput));
+            } else {
+                console.warn("Unexpected status code:", response.status);
+            }
+        })
+        .catch(error => {
+            console.error("Error updating cash:", error);
+        });
+    };
+
+    return (
+        <ModalBackground>
+            <ModalContainer>
+                <CloseButton onClick={onClose}>&times;</CloseButton>
+                <Title>현금</Title>
+                <p>현재 현금: {cash ? cash.toLocaleString() : 'Loading...'}</p>
+                <div>
+                    <CashInput
+                        type="number"
+                        value={cashInput}
+                        onChange={e => setCashInput(e.target.value)}
+                        placeholder="현금 입력"
+                    />
+                    <ReceiveButton onClick={handleCashReceive}>받기</ReceiveButton>
+                </div>
+            </ModalContainer>
+        </ModalBackground>
+    );
+};
+
+interface CashModalProps {
+    onClose: () => void;
+    memberId: string;
+}
+
+// Styled Components Definitions:
+
+const ModalBackground = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+`;
+
+const ModalContainer = styled.div`
+  position: relative;
+  background-color: white;
+  padding: 20px;
+  width: 400px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Title = styled.h2`
+  margin-bottom: 20px;
+  font-size: 1.6rem;
+  font-weight: 400;
+`;
+
+const CloseButton = styled.button`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: #FFFFFF;
+  border: 1px solid lightgray;
+  font-size: 1.5rem;
+  cursor: pointer;
+`;
+
+const CashInput = styled.input`
+    padding: 10px;
+    border: 1px solid lightgray;
+    border-radius: 5px;
+    margin-right: 10px;
+`;
+
+const ReceiveButton = styled.button`
+    padding: 10px 15px;
+    background-color: darkgreen;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+`;
+
+export default CashModal;
diff --git a/client/src/components/Profile/memberInfoModal.tsx b/client/src/components/Profile/memberInfoModal.tsx
@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import axios from 'axios';
+
+const MemberInfoModal: React.FC<MemberInfoModalProps> = ({ onClose, memberId }) => {
+    const [memberInfo, setMemberInfo] = useState<MemberData | null>(null);  // Use the MemberData type
+
+    const titleText = "회원정보";
+    const loadingText = "Loading...";
+    const nameText = "이름: ";
+    const emailText = "이메일: ";
+    const createdAtText = "회원 가입 일시: ";
+    const memberIdText = "회원 ID: ";
+
+    useEffect(() => {
+        // Fetch member info when the modal is opened
+        axios.get<MemberData>(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/members/${memberId}`)
+            .then(response => {
+                setMemberInfo(response.data);
+            })
+            .catch(error => {
+                console.error("Error fetching member info:", error);
+            });
+    }, [memberId]);
+
+    return (
+        <ModalBackground>
+            <ModalContainer>
+                <CloseButton onClick={onClose}>&times;</CloseButton>
+                <Title>{titleText}</Title>
+                {memberInfo ? (
+                    <div>
+                        {/* Display member information */}
+                        <p>{memberIdText}{memberInfo.memberId}</p>
+                        <p>{nameText}{memberInfo.name}</p>
+                        <p>{emailText}{memberInfo.email}</p>
+                        <p>{createdAtText}{memberInfo.createdAt}</p>
+                    </div>
+                ) : (
+                    <p>{loadingText}</p>
+                )}
+            </ModalContainer>
+        </ModalBackground>
+    );
+};
+
+interface MemberInfoModalProps {
+    onClose: () => void;
+    memberId: string;
+}
+interface MemberData {
+    memberId: number;
+    email: string;
+    name: string;
+    createdAt: string;
+}
+
+// Styled Components Definitions:
+
+const ModalBackground = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+`;
+
+const ModalContainer = styled.div`
+  position: relative;
+  background-color: white;
+  padding: 20px;
+  width: 400px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Title = styled.h2`
+  margin-bottom: 20px;
+  font-size: 1.6rem;
+  font-weight: 400;
+`;
+
+const CloseButton = styled.button`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: #FFFFFF;
+  border: 1px solid lightgray;
+  font-size: 1.5rem;
+  cursor: pointer;
+`;
+
+export default MemberInfoModal;