Merge pull request #123 from 2023-Team-Luna-Achieve/FE/Feat/#64

[�Feat] 모달 구현

frontend/package.json

@@ -18,7 +18,8 @@
     "react": "^18.2.0",
     "react-calendar": "^4.6.1",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.19.0",
+    "react-modal": "^3.16.1",
+    "react-router-dom": "^6.18.0",
     "react-select": "^5.7.7",
     "react-slick": "^0.29.0",
     "recoil": "^0.7.7",
@@ -31,6 +32,7 @@
     "@types/react": "^18.2.37",
     "@types/react-calendar": "^4.1.0",
     "@types/react-dom": "^18.2.15",
+    "@types/react-modal": "^3.16.3",
     "@types/styled-components": "^5.1.27",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",

frontend/src/App.tsx

@@ -7,7 +7,7 @@ import LoginPage from './pages/LoginPage';
 import JoinPage from './pages/JoinPage';
 import CommunityPage from './pages/CommunityPage';
 import AboutPage from './pages/AboutPage';
-import Reservationpage from './pages/ReservationPage';
+import ReservationPage from './pages/ReservationPage';
 import SelectPage from './pages/SelectPage';
 import MyPage from './pages/MyPage';
 
@@ -20,7 +20,7 @@ const App: React.FC = () => {
           <Route path="" element={<MainPage />} />
           <Route path="Main" element={<MainPage />} />
           <Route path="About" element={<AboutPage />} />
-          <Route path="Reservation" element={<Reservationpage />} />
+          <Route path="Reservation" element={<ReservationPage />} />
           <Route path="Select" element={<SelectPage />} />
           <Route path="Notice" element={<NoticePage />} />
           <Route path="Login" element={<LoginPage />} />

frontend/src/components/Modal.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import ReactModal from 'react-modal';
+
+const StyledModal = styled(ReactModal)`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  max-width: 400px;
+  width: 100%;
+`;
+
+interface ModalProps {
+  children: ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const Modal: React.FC<ModalProps> = ({ children, isOpen, onClose }) => {
+  return (
+    <StyledModal isOpen={isOpen} onRequestClose={onClose} shouldCloseOnOverlayClick shouldCloseOnEsc>
+      {children}
+    </StyledModal>
+  );
+};
+
+export default Modal;

frontend/src/pages/BannerSlider.tsx

@@ -158,22 +158,16 @@ const BannerSlider: React.FC = () => {
     <Banner>
       <StyledSlider {...settings}>
         <Background>
-          <StudyLabel>study</StudyLabel>
-          <Heading>프론트엔드 스터디 SF5팀</Heading>
-          <Heading2>드림코딩 강의 수강중</Heading2>
-          <Text>Next.js</Text>
-        </Background>
-        <Background>
-          <StudyLabel>study</StudyLabel>
-          <Heading>프론트엔드 스터디 SF5팀</Heading>
-          <Heading2>드림코딩 강의 수강중</Heading2>
-          <Text>Next.js</Text>
+          <StudyLabel>project</StudyLabel>
+          <Heading>테커 동아리방 예약 시스템</Heading>
+          <Heading2>예약과 취소를 간편하게!</Heading2>
+          <Text>Achieve</Text>
         </Background>
         <Background>
           <StudyLabel>study</StudyLabel>
-          <Heading>프론트엔드 스터디 SF5팀</Heading>
-          <Heading2>드림코딩 강의 수강중</Heading2>
-          <Text>Next.js</Text>
+          <Heading>프론트엔드 스터디</Heading>
+          <Heading2>드림코딩 Next.js 강의 수강중</Heading2>
+          <Text>SF5</Text>
         </Background>
       </StyledSlider>
       <ReservationLink to="/select" onClick={handleReservationClick}>

frontend/src/pages/JoinPage.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import axios from '../util/axiosConfig';
 import { AxiosError } from 'axios';
 import { Link } from 'react-router-dom';
+import Modal from '../components/Modal';
 
 const JoinText = styled.div`
   font-size: 70px;
@@ -106,63 +107,63 @@ const JoinPage: React.FC = () => {
   const [passwordConfirm, setPasswordConfirm] = useState('');
   const [authCode, setAuthCode] = useState('');
   const [name, setName] = useState('');
-  const [verificationMessage, setVerificationMessage] = useState<string>('');
+  const [verificationMessage] = useState<string>('');
   const [isPasswordMatch] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalContent, setModalContent] = useState<React.ReactNode | null>(null);
+
   const sendCode = async () => {
     try {
       await axios.post('http://localhost:8080/api/email/verification/request', {
         email: email,
       });
-      console.log(`코드가 성공적으로 전송되었습니다: ${email}`);
+
+      setIsModalOpen(true);
+      setModalContent('이메일로 인증번호가 전송되었습니다.');
     } catch (error) {
       if ((error as AxiosError).isAxiosError) {
-        // Axios 에러인 경우
         console.error('코드 전송 중 에러:', (error as AxiosError).message);
       } else {
-        // 그 외의 에러인 경우
         console.error('코드 전송 중 에러:', error);
       }
     }
   };
   const handleSendCodeClick: React.MouseEventHandler<HTMLButtonElement> = async () => {
     try {
-      // SendCodeButton이 클릭될 때 email 값을 설정하고 sendCode 함수 호출
       await sendCode();
     } catch (error) {
       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);
+
+      setIsModalOpen(true);
+
+      setModalContent(response.data.message);
     } catch (error) {
       console.error('인증 확인 중 에러:', (error as AxiosError).message);
     }
   };
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    console.log('양식 제출 중...');
-    // 이메일이 검증되었고 비밀번호가 일치하는지 확인
+
     {
-      console.log('가입 정보:', {
-        affiliation,
-        name,
-        email,
-        password,
-      });
       try {
-        console.log('axios.post 이전');
         const response = await axios.post('http://localhost:8080/api/users/signup', {
           affiliation,
           name,
           email,
           password,
         });
+
+        setIsModalOpen(true);
+
+        setModalContent('회원가입이 완료되었습니다.');
         console.log('서버 응답:', response.data);
       } catch (error) {
         console.error('서버로의 데이터 전송 중 에러:', error);
@@ -174,6 +175,9 @@ const JoinPage: React.FC = () => {
   };
   return (
     <>
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        {modalContent}
+      </Modal>
       <JoinText className="join">가입하기</JoinText>
       <LoginText className="already">
         이미 계정이 있습니까?{' '}
@@ -236,9 +240,7 @@ const JoinPage: React.FC = () => {
             />
           </FormGroup>
           <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
-            <JoinButton type="submit" onClick={() => console.log('가입하기 버튼이 클릭되었습니다.')}>
-              {'가입하기'}
-            </JoinButton>
+            <JoinButton>{'가입하기'}</JoinButton>
           </div>
         </StyledForm>
       </FormContainer>

frontend/src/pages/LoginPage.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import axios from '../util/axiosConfig';
+import Modal from '../components/Modal';
+
 const FormContainer = styled.div`
   max-width: 600px;
   margin: 50px auto;
@@ -53,6 +55,8 @@ const LoginButton = styled.button`
 const LoginPage: React.FC = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(event.target.value);
   };
@@ -62,33 +66,39 @@ const LoginPage: React.FC = () => {
   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();
+
+      // Open the modal after successful login
+      setIsModalOpen(true);
     } catch (error) {
-      // 에러 처리
       console.error('로그인 실패:', error);
     }
   };
+
   const handleLoginVerification = async () => {
     try {
-      // 로그인 검증을 위한 요청
       const confirmResponse = await axios.get('http://localhost:8080/api/users/login-confirm');
-      // 로그인 검증 응답을 확인하고 필요에 따라 처리
       console.log('로그인 검증 성공:', confirmResponse.data);
-      // 여기서 로그인 검증이 성공했으므로 적절한 처리를 수행하면 됩니다.
     } catch (error) {
-      // 에러 처리
       console.error('로그인 검증 실패:', error);
     }
   };
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
   return (
     <FormContainer>
+      <Modal isOpen={isModalOpen} onClose={closeModal}>
+        <p>로그인이 완료 되었습니다.</p>
+      </Modal>
       <LoginText className="login">로그인</LoginText>
       <StyledForm onSubmit={handleLogin}>
         <FormGroup>