Merge pull request #68 from 2023-Team-Luna-Achieve/FE/Feat/#61

[Feat] 리다이렉션
2023-Team-Luna-Achieve · Nov 25, 2023 · ef782be · ef782be
2 parents 2f0b0a1 + 4b506d5
commit ef782be
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 79 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,7 +18,7 @@
     "react": "^18.2.0",
     "react-calendar": "^4.6.1",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.18.0",
+    "react-router-dom": "^6.19.0",
     "react-select": "^5.7.7",
     "react-slick": "^0.29.0",
     "recoil": "^0.7.7",

diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
@@ -31,21 +31,18 @@ const StyledNav = styled.nav`
 `;
 const Header = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+
   useEffect(() => {
     axios
       .get('http://localhost:8080/api/users/login-confirm')
       .then((response) => {
-        if (response.data.loggedIn) {
-          setIsLoggedIn(true);
-        } else {
-          setIsLoggedIn(false);
-        }
+        setIsLoggedIn(response.data.loggedIn);
       })
       .catch((error) => {
         console.error('로그인 상태 확인 중 에러:', error);
         setIsLoggedIn(false);
       });
-  }, [isLoggedIn]);
+  }, []);
 
   return (
     <StyledHeaderBorder>
@@ -68,9 +65,11 @@ const Header = () => {
               <Link to="/Community">Community</Link>
             </li>
             {isLoggedIn ? (
-              <li>
-                <Link to="/Mypage">Mypage</Link>
-              </li>
+              <>
+                <li>
+                  <Link to="/Mypage">Mypage</Link>
+                </li>
+              </>
             ) : (
               <>
                 <li>
@@ -87,4 +86,7 @@ const Header = () => {
     </StyledHeaderBorder>
   );
 };
+
 export default Header;
+
+export {};
diff --git a/frontend/src/pages/BannerSlider.tsx b/frontend/src/pages/BannerSlider.tsx
@@ -4,6 +4,7 @@ import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import axios from '../util/axiosConfig';
 
 const BannerSlider: React.FC = () => {
   const settings = {
@@ -134,6 +135,25 @@ const BannerSlider: React.FC = () => {
     color: inherit;
   `;
 
+  const handleReservationClick = async () => {
+    try {
+      const response = await axios.get('http://localhost:8080/api/users/login-confirm');
+      const isLoggedIn = response.data.loggedIn; // API에서 받은 로그인 상태
+
+      if (!isLoggedIn) {
+        // 로그인되어 있지 않으면 로그인 페이지로 이동
+        window.location.href = '/login';
+      } else {
+        // 로그인되어 있을 때 예약 페이지로 이동
+        window.location.href = '/select';
+      }
+    } catch (error) {
+      console.error('로그인 상태 확인 중 에러:', error);
+      // 에러 발생 시 로그인 페이지로 이동
+      window.location.href = '/login';
+    }
+  };
+
   return (
     <Banner>
       <StyledSlider {...settings}>
@@ -156,7 +176,7 @@ const BannerSlider: React.FC = () => {
           <Text>Next.js</Text>
         </Background>
       </StyledSlider>
-      <ReservationLink to="/select">
+      <ReservationLink to="/select" onClick={handleReservationClick}>
         <RoundedRectangle>
           <h3>스마트하게</h3>
           <h2>동아리방 예약</h2>

diff --git a/frontend/src/pages/JoinPage.tsx b/frontend/src/pages/JoinPage.tsx
@@ -99,7 +99,6 @@ const PasswordInput = styled(Input).attrs({ type: 'password', autoComplete: 'new
   margin-bottom: 0px;
   border-radius: 0;
 `;
-
 const JoinPage: React.FC = () => {
   const [affiliation, setAffiliation] = useState('');
   const [email, setEmail] = useState('');
@@ -109,13 +108,11 @@ const JoinPage: React.FC = () => {
   const [name, setName] = useState('');
   const [verificationMessage, setVerificationMessage] = useState<string>('');
   const [isPasswordMatch] = useState(false);
-
   const sendCode = async () => {
     try {
       await axios.post('http://localhost:8080/api/email/verification/request', {
         email: email,
       });
-
       console.log(`코드가 성공적으로 전송되었습니다: ${email}`);
     } catch (error) {
       if ((error as AxiosError).isAxiosError) {
@@ -127,7 +124,6 @@ const JoinPage: React.FC = () => {
       }
     }
   };
-
   const handleSendCodeClick: React.MouseEventHandler<HTMLButtonElement> = async () => {
     try {
       // SendCodeButton이 클릭될 때 email 값을 설정하고 sendCode 함수 호출
@@ -136,25 +132,21 @@ const JoinPage: React.FC = () => {
       console.error('handleSendCodeClick 오류:', (error as AxiosError).message);
     }
   };
-
   const handleConfirmAuthClick = async () => {
     try {
       // 클라이언트에서 서버로 코드 확인 요청을 보냄
       const response = await axios.post('http://localhost:8080/api/email/verification/confirm', {
         email,
         code: authCode,
       });
-
       setVerificationMessage(response.data.message);
     } catch (error) {
       console.error('인증 확인 중 에러:', (error as AxiosError).message);
     }
   };
-
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     console.log('양식 제출 중...');
-
     // 이메일이 검증되었고 비밀번호가 일치하는지 확인
     {
       console.log('가입 정보:', {
@@ -163,7 +155,6 @@ const JoinPage: React.FC = () => {
         email,
         password,
       });
-
       try {
         console.log('axios.post 이전');
         const response = await axios.post('http://localhost:8080/api/users/signup', {
@@ -172,7 +163,6 @@ const JoinPage: React.FC = () => {
           email,
           password,
         });
-
         console.log('서버 응답:', response.data);
       } catch (error) {
         console.error('서버로의 데이터 전송 중 에러:', error);
@@ -182,7 +172,6 @@ const JoinPage: React.FC = () => {
       console.error('비밀번호가 일치하지 않습니다.');
     }
   };
-
   return (
     <>
       <JoinText className="join">가입하기</JoinText>
@@ -256,5 +245,4 @@ const JoinPage: React.FC = () => {
     </>
   );
 };
-
 export default JoinPage;
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import axios from '../util/axiosConfig';
-
 const FormContainer = styled.div`
   max-width: 600px;
   margin: 50px auto;
@@ -13,39 +12,34 @@ const FormContainer = styled.div`
   overflow: hidden;
   color: #585858;
 `;
-
 const LoginText = styled.div`
   font-size: 70px;
   font-weight: bold;
-  color: #3a3a3a;
+  color: #3A3A3A;
   text-align: center;
   margin-top: 60px;
   margin-bottom: 0px;
 `;
-
 const Input = styled.input`
   border-radius: 0;
-  border: 0.7px solid #c0c0c0;
+  border: 0.7px solid #C0C0C0;
   height: 26px;
   width: 400px;
 `;
-
 const PasswordInput = styled(Input).attrs({ type: 'password', autoComplete: 'new-password' })`
   margin-bottom: 0px;
   border-radius: 0;
 `;
-
 const StyledForm = styled.form``;
 const FormGroup = styled.div`
   display: flex;
   flex-direction: column;
   margin-bottom: 10px;
 `;
-
 const LoginButton = styled.button`
   border: none;
-  background-color: #c0c0c0;
-  color: #ffffff;
+  background-color: #C0C0C0;
+  color: #FFFFFF;
   font-size: 16px;
   height: 26px;
   width: 100%;
@@ -56,32 +50,25 @@ const LoginButton = styled.button`
     background-color: #000000;
   }
 `;
-
 const LoginPage: React.FC = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-
   const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(event.target.value);
   };
-
   const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setPassword(event.target.value);
   };
-
   const handleLogin = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-
     try {
       // signin 엔드포인트로 API 호출
       const response = await axios.post('http://localhost:8080/api/users/signin', {
         email,
         password,
       }); // withCredentials 설정 추가
-
       // 응답을 처리하고, 예를 들어 성공 시 새로운 페이지로 리다이렉트 + 전역적으로 로그인 상태 확인중인지 받기
       console.log('로그인 성공:', response.data);
-
       await handleLoginVerification();
     } catch (error) {
       // 에러 처리
@@ -92,17 +79,14 @@ const LoginPage: React.FC = () => {
     try {
       // 로그인 검증을 위한 요청
       const confirmResponse = await axios.get('http://localhost:8080/api/users/login-confirm');
-
       // 로그인 검증 응답을 확인하고 필요에 따라 처리
       console.log('로그인 검증 성공:', confirmResponse.data);
-
       // 여기서 로그인 검증이 성공했으므로 적절한 처리를 수행하면 됩니다.
     } catch (error) {
       // 에러 처리
       console.error('로그인 검증 실패:', error);
     }
   };
-
   return (
     <FormContainer>
       <LoginText className="login">로그인</LoginText>
@@ -122,5 +106,4 @@ const LoginPage: React.FC = () => {
     </FormContainer>
   );
 };
-
 export default LoginPage;