feat : recaptcha 로그인 구현

package.json

@@ -11,16 +11,20 @@
   },
   "dependencies": {
     "framer-motion": "^11.18.1",
+    "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-google-recaptcha": "^3.1.0",
     "react-icons": "^5.4.0",
     "react-router-dom": "^7.1.2",
     "react-toastify": "^11.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "@types/react-google-recaptcha": "^2.1.9",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.17.0",

src/App.tsx

@@ -6,6 +6,8 @@ import "react-toastify/dist/ReactToastify.css";
 import { ToastContainer } from "react-toastify";
 import MobileLoginPage from "./pages/mobile/MobileLoginPage";
 import MobileRegisterPage from "./pages/mobile/MobileRegisterPage";
+import ProtectedRoute from "./components/ProtectedRoute";
+import MobileProtectedRoute from "./components/MobileProtectedRoute";
 
 const App = () => {
   return (
@@ -18,11 +20,25 @@ const App = () => {
         rtl={false}
       />
       <Routes>
+        <Route path="/" element={
+            <ProtectedRoute>
+              <Navigate to="/home" replace />
+            </ProtectedRoute>
+          }
+        />
         <Route path="/login" element={<LoginPage />} />
         <Route path="/register" element={<RegisterPage />} />
+
+        <Route path="/app" element={
+            <MobileProtectedRoute>
+              <Navigate to="/app/home" replace />
+            </MobileProtectedRoute>
+          }
+        />
         <Route path="/app/login" element={<MobileLoginPage />} />
         <Route path="/app/register" element={<MobileRegisterPage />} />
-        <Route path="/" element={<Navigate to="/login" replace />} />
+
+
       </Routes>
     </BrowserRouter>
   );

src/components/MobileProtectedRoute.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+import Cookies from 'js-cookie';
+
+interface ProtectedProps {
+  children: ReactNode;
+}
+
+const MobileProtectedRoute = ({ children }: ProtectedProps) => {
+  const userCookie = Cookies.get("SYS-REFRESH");
+
+  if (!userCookie) {
+    return <Navigate to="/app/login" replace />;
+  }
+
+  return children;
+};
+
+export default MobileProtectedRoute;

src/components/ProtectedRoute.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+import Cookies from 'js-cookie';
+
+interface ProtectedProps {
+  children: ReactNode;
+}
+
+const ProtectedRoute = ({ children }: ProtectedProps) => {
+  const userCookie = Cookies.get("SYS-REFRESH");
+
+  if (!userCookie) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return children;
+};
+
+export default ProtectedRoute;