@shark-pepper/create-app 1.0.3 → 1.0.4

package/templates/react-app/src/App.tsx

@@ -1,3 +1,5 @@
+import { Outlet } from 'react-router-dom';
+
 export default function App() {
-  return <h1>Welcome to React</h1>;
+  return <Outlet />;
 }

package/templates/react-app/src/components/ProtectedRoute.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+  redirectPath?: string;
+}
+
+export default function ProtectedRoute({ children, redirectPath = '/login' }: ProtectedRouteProps) {
+  const location = useLocation();
+  const isAuth = localStorage.getItem('isAuth') === 'true';
+
+  if (!isAuth) {
+    return <Navigate to={redirectPath} state={{ from: location }} replace />;
+  }
+  return children;
+}

package/templates/react-app/src/index.tsx

@@ -1,6 +1,17 @@
-import { createRoot } from "react-dom/client";
-import App from "./App";
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter, useRoutes } from 'react-router-dom';
+import routes from './routes';
+import 'normalize.css';
 
-const container = document.getElementById("root")!;
+const AppRouter: React.FC = () => useRoutes(routes);
+
+const container = document.getElementById('root')!;
 const root = createRoot(container);
-root.render(<App />);
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AppRouter />
+    </BrowserRouter>
+  </React.StrictMode>,
+);

package/templates/react-app/src/pages/Home.tsx

@@ -0,0 +1,15 @@
+import '../styles/Home.scss';
+
+export default function Home() {
+  const handleClick = () => {
+    localStorage.setItem('isAuth', 'false');
+    window.location.reload();
+  };
+
+  return (
+    <div className="home">
+      <h1>Home Page</h1>
+      <button onClick={handleClick}>Logout</button>
+    </div>
+  );
+}

package/templates/react-app/src/pages/Login.tsx

@@ -0,0 +1,29 @@
+import { Navigate, useLocation, useNavigate } from 'react-router-dom';
+import '../styles/Login.scss';
+
+export default function Login() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const from = (location.state as any)?.from?.pathname || '/';
+  const isAuth = localStorage.getItem('isAuth') === 'true';
+
+  if (isAuth) {
+    return <Navigate to="/" replace />;
+  }
+
+  const handleLogin = () => {
+    localStorage.setItem('isAuth', 'true');
+    navigate(from, { replace: true });
+  };
+
+  return (
+    <div className="container">
+      <div className="welcome">
+        <h1>Thanks for using @shark-pepper/create-app</h1>
+        <h2>Let's start coding!</h2>
+      </div>
+      <button onClick={handleLogin}>Login Now</button>
+    </div>
+  );
+}

package/templates/react-app/src/routes/index.tsx

@@ -0,0 +1,24 @@
+import { Navigate, RouteObject } from 'react-router-dom';
+import ProtectedRoute from '@/components/ProtectedRoute';
+import Home from '@/pages/Home';
+import Login from '@/pages/Login';
+import App from '../App';
+
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: (
+      <ProtectedRoute>
+        <App />
+      </ProtectedRoute>
+    ),
+    children: [
+      { index: true, element: <Home /> },
+      { path: 'home', element: <Navigate to="/" replace /> },
+      { path: '*', element: <div>404 Not Found</div> },
+    ],
+  },
+  { path: 'login', element: <Login /> },
+];
+
+export default routes;

package/templates/react-app/src/styles/Home.scss

@@ -0,0 +1,9 @@
+.home {
+  height: 100vh;
+  display: flex;
+  justify-self: center;
+  align-items: center;
+  button {
+    margin-left: 36px;
+  }
+}

package/templates/react-app/src/styles/Login.scss

@@ -0,0 +1,16 @@
+@mixin flex-center($direction: row) {
+  display: flex;
+  flex-direction: $direction;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  height: 100vh;
+  @include flex-center(column);
+  .welcome {
+    width: 750px;
+    margin-bottom: 40px;
+    @include flex-center(column);
+  }
+}