등록된 이메일만 회원 가입 가능 (테스트 완료)

src/components/layout/header/MobileMenu.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styles from './mobileMenu.module.scss';
+import { Link } from 'react-router-dom';
+import { AiOutlineClose } from 'react-icons/ai';
+
+interface MobileMenuProps {
+  onClose: () => void;
+}
+
+const MobileMenu: React.FC<MobileMenuProps> = ({ onClose }) => {
+  return (
+    <div className={styles.mobileMenu}>
+      <button onClick={onClose} className={styles.closeButton}>
+        <AiOutlineClose />
+      </button>
+      <ul className={styles.menuList}>
+        <li className={styles.menuItem}>
+          <Link to="/community">소근소근</Link>
+        </li>
+        <li className={styles.menuItem}>
+          <Link to="/">포트폴리오</Link>
+        </li>
+        <li className={styles.menuItem}>
+          <Link to="/">스터디</Link>
+        </li>
+        <li className={styles.menuItem}>
+          <Link to="/">프로젝트</Link>
+        </li>
+        <li className={styles.menuItem}>
+          <Link to="/">구인구직</Link>
+        </li>
+        {/* 필요한 메뉴 항목을 추가하세요 */}
+      </ul>
+    </div>
+  );
+};
+
+export default MobileMenu;

src/components/layout/header/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import styles from './header.module.scss';
 import { AiOutlineMenu } from 'react-icons/ai';
@@ -7,16 +8,26 @@ import { userState } from '@/store/store';
 import { instance } from '@/api/client';
 import { AiOutlineUser } from 'react-icons/ai';
 import logo from '@/assets/logo.svg';
+import MobileMenu from './MobileMenu';
 
 const fetchLogout = async () => {
   const response = await instance.get(`api/v1/logout`);
   return response.data;
 };
 
 const Header = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [userData, setUserData] = useRecoilState(userState);
+
   const navigation = useNavigate();
 
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+  const handleMenuClose = () => {
+    setIsMenuOpen(false); // "닫기" 버튼 클릭 시 메뉴를 닫음
+  };
+
   const showAlert = () => {
     window.alert('준비 중입니다');
   };
@@ -43,8 +54,9 @@ const Header = () => {
   return (
     <>
       <ToggleBar />
+      {isMenuOpen && <MobileMenu onClose={handleMenuClose} />}
       <div className={styles.container}>
-        <div className={styles['menu-btn']}>
+        <div className={styles['menu-btn']} onClick={toggleMenu}>
           <AiOutlineMenu />
         </div>
         <div className={styles.logo} onClick={handleLogoClick}>

src/components/layout/header/mobileMenu.module.scss

@@ -0,0 +1,30 @@
+.mobileMenu {
+  position: fixed;
+  // top: $--notice-bar-height;
+  top: 0;
+  left: 0;
+  width: 300px;
+  height: 100%;
+  background-color: #fff8f8;
+  z-index: 2;
+}
+
+.closeButton {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 20px;
+}
+.menuList {
+  margin-top: 80px;
+}
+
+.menuItem {
+  margin: 10px 0;
+  padding: 10px 20px;
+  border-bottom: 1px solid #f7b9b9;
+  text-align: center;
+}

src/components/signIn/sessionManager.ts

@@ -2,21 +2,14 @@
 // import { useRecoilState } from 'recoil';
 // import { userState } from '@/store/store';
 // import { useNavigate } from 'react-router-dom';
-// import { instance } from '@/api/client';
 
 // const SessionExpirationCheck = () => {
 //   const [userData, setUserData] = useRecoilState(userState);
 //   const navigation = useNavigate();
 
 //   const checkSessionStatus = useCallback(async () => {
 //     try {
-//       const response = await instance.post('/api/v1/login');
-//       if (response.status === 403) {
-//         setUserData({ ...userData, login: false });
-//         navigation('/signin');
-//       } else if (response.status === 200) {
-//         setUserData(response.data);
-//       }
+//       // Axios 인터셉터에서 이미 세션 확인 및 처리를 수행함.
 //     } catch (error) {
 //       console.error('세션 확인 중 오류 발생', error);
 //     }
@@ -34,6 +27,7 @@
 
 //     return () => clearInterval(interval);
 //   }, [checkSessionStatus]);
+
 //   return null;
 // };
 

src/components/signUp/SignUpForm.tsx

@@ -3,7 +3,7 @@ import styles from './signUp.module.scss';
 import Input from '../atoms/input';
 import { PATTERNS } from '@/constants/constants';
 import Button from '../atoms/button';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { instance } from '@/api/client';
 
 interface SignUpFormValues {
@@ -15,6 +15,8 @@ interface SignUpFormValues {
 }
 
 const SignUpForm = () => {
+  const navigate = useNavigate();
+
   const {
     register,
     watch,
@@ -28,8 +30,10 @@ const SignUpForm = () => {
       const response = await instance.post('/api/v1/join', data);
       if (response.status === 200) {
         console.log('회원가입이 성공했습니다.');
+        navigate('/signin');
       } else {
         console.error('회원가입 실패:', response.data);
+        alert(response.data);
       }
     } catch (error) {
       console.error('서버 요청 중 오류가 발생했습니다.', error);
@@ -47,15 +51,22 @@ const SignUpForm = () => {
       const response = await instance.post('api/v1/emailconfirm', {
         email: emailValue,
       });
+
       if (response.status === 200) {
         console.log('이메일 전송 성공');
+        alert('이메일 전송 성공! 인증 코드를 입력해주세요.');
       } else {
         console.error('이메일 전송 실패:', response.data);
+        alert(response.data);
+      }
+    } catch (error: any) {
+      if (error.response && error.response.status === 400) {
+        alert('FastCampus에 등록된 이메일이 아닙니다.');
+      } else {
+        console.error('서버 요청 중 오류가 발생했습니다.', error);
+        alert('서버 요청 중 오류가 발생했습니다.');
       }
-    } catch (error) {
-      console.error('서버 요청 중 오류가 발생했습니다.', error);
     }
-    console.log(emailValue);
   };
 
   return (

src/main.tsx

@@ -5,6 +5,8 @@ import { RouterProvider } from 'react-router-dom';
 import { router } from './routes/router.tsx';
 import { RecoilRoot } from 'recoil';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+// import SessionExpirationCheck from './components/signIn/sessionManager.ts';
+// import axiosInstance from './axios-interceptor.ts';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -20,6 +22,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     <RecoilRoot>
       <QueryClientProvider client={queryClient}>
         <RouterProvider router={router} />
+        {/* <SessionExpirationCheck /> */}
       </QueryClientProvider>
     </RecoilRoot>
   </React.StrictMode>