feat: ルーティングの整備とメニューのUIの実装

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# env
+.env

src/features/common/components/Menu.tsx

@@ -6,10 +6,10 @@ export const Menu = () => {
   return (
     <ul className="fixed bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-200">
       <div className="grid h-full max-w-lg grid-cols-4 mx-auto font-medium">
-        <MenuButton name="Quests" icon={<QuestsIcon />} />
-        <MenuButton name="Manage" icon={<ManageIcon />} />
-        <MenuButton name="Analytics" icon={<AnalyticsIcon />} />
-        <MenuButton name="Profile" icon={<ProfileIcon />} />
+        <MenuButton name="Quests" path="/quests/" icon={<QuestsIcon />} />
+        <MenuButton name="Manage" path="/quests/manage" icon={<ManageIcon />} />
+        <MenuButton name="Analytics" path="/quests/analytics" icon={<AnalyticsIcon />} />
+        <MenuButton name="Profile" path="/quests/profile" icon={<ProfileIcon />} />
       </div>
     </ul>
   );

src/features/common/components/MenuButton.tsx

@@ -1,15 +1,23 @@
+import { useNavigate } from "@tanstack/react-router";
 import { FC, ReactNode } from "react";
 
 type Props = {
   name: string;
+  path: string;
   icon: ReactNode;
 };
 export const MenuButton: FC<Props> = (props) => {
-  const { name, icon } = props;
+  const { name, path, icon } = props;
+  const navigate = useNavigate();
+
   return (
-    <button type="button" className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 group">
+    <button
+      type="button"
+      className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 group"
+      onClick={() => navigate({ to: path })}
+    >
       {icon}
-      <span className="text-sm text-gray-500 group-hover:text-blue-600">{name}</span>
+      <span className="text-sm text-blue-600 group-hover:text-blue-600">{name}</span>
     </button>
   );
 };

src/features/common/components/icons/AnalyticsIcon.tsx

@@ -1,7 +1,7 @@
 export const AnalyticsIcon = () => {
   return (
     <svg
-      className="w-6 h-6 text-gray-800"
+      className="w-6 h-6 text-blue-600"
       aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"

src/features/common/components/icons/ManageIcon.tsx

@@ -1,7 +1,7 @@
 export const ManageIcon = () => {
   return (
     <svg
-      className="w-6 h-6 text-gray-800"
+      className="w-6 h-6 text-blue-600"
       aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"

src/features/common/components/icons/ProfileIcon.tsx

@@ -1,7 +1,7 @@
 export const ProfileIcon = () => {
   return (
     <svg
-      className="w-6 h-6 text-gray-800"
+      className="w-6 h-6 text-blue-600"
       aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"

src/features/common/components/icons/QuestsIcon.tsx

@@ -1,7 +1,7 @@
 export const QuestsIcon = () => {
   return (
     <svg
-      className="w-6 h-6 text-gray-800"
+      className="w-6 h-6 text-blue-600"
       aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"

src/features/common/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./Header";
+export * from "./Menu";
+export * from "./icons";

src/features/entrance/components/EntrancePresenter.tsx

@@ -1,12 +1,14 @@
+import { Link } from "@tanstack/react-router";
+
 export const EntrancePresenter = () => {
   return (
     <div>
       <div className="m-16 flex flex-col items-center">
-        <img className="w-48 my-4 inline object-center w-3/5" src="/logo-long.svg" alt="rhythmateのロゴ" />
+        <img className="w-48 my-4 inline object-center" src="/logo-long.svg" alt="rhythmateのロゴ" />
         <div>
           <div className="my-4 flex gap-2 align-center">
             <svg
-              className="w-[80px] h-[80px] fill-red-700 dark:text-white"
+              className="w-[80px] h-[80px] fill-red-700"
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
@@ -22,7 +24,7 @@ export const EntrancePresenter = () => {
           </div>
           <div className="my-4 flex gap-2 align-center">
             <svg
-              className="w-[80px] h-[80px] fill-blue-700 dark:text-white"
+              className="w-[80px] h-[80px] fill-blue-700"
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
@@ -39,7 +41,7 @@ export const EntrancePresenter = () => {
           </div>
           <div className="my-4 flex gap-2 align-center">
             <svg
-              className="w-[80px] h-[80px] fill-yellow-400 dark:text-white"
+              className="w-[80px] h-[80px] fill-yellow-400"
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
@@ -58,9 +60,12 @@ export const EntrancePresenter = () => {
             </p>
           </div>
         </div>
-        <button className="my-4 text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+        <Link
+          to="/login"
+          className="my-4 text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
+        >
           今すぐ始める
-        </button>
+        </Link>
         <small className="my-10 text-gray-400">&copy; 167.25 All rights reserved.</small>
       </div>
     </div>

src/routeTree.gen.ts

@@ -19,6 +19,9 @@ import { Route as rootRoute } from "./routes/__root";
 const IndexLazyImport = createFileRoute("/")();
 const QuestsIndexLazyImport = createFileRoute("/quests/")();
 const LoginIndexLazyImport = createFileRoute("/login/")();
+const QuestsProfileIndexLazyImport = createFileRoute("/quests/profile/")();
+const QuestsManageIndexLazyImport = createFileRoute("/quests/manage/")();
+const QuestsAnalyticsIndexLazyImport = createFileRoute("/quests/analytics/")();
 
 // Create/Update Routes
 
@@ -37,6 +40,21 @@ const LoginIndexLazyRoute = LoginIndexLazyImport.update({
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import("./routes/login/index.lazy").then((d) => d.Route));
 
+const QuestsProfileIndexLazyRoute = QuestsProfileIndexLazyImport.update({
+  path: "/quests/profile/",
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import("./routes/quests/profile/index.lazy").then((d) => d.Route));
+
+const QuestsManageIndexLazyRoute = QuestsManageIndexLazyImport.update({
+  path: "/quests/manage/",
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import("./routes/quests/manage/index.lazy").then((d) => d.Route));
+
+const QuestsAnalyticsIndexLazyRoute = QuestsAnalyticsIndexLazyImport.update({
+  path: "/quests/analytics/",
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import("./routes/quests/analytics/index.lazy").then((d) => d.Route));
+
 // Populate the FileRoutesByPath interface
 
 declare module "@tanstack/react-router" {
@@ -53,11 +71,30 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof QuestsIndexLazyImport;
       parentRoute: typeof rootRoute;
     };
+    "/quests/analytics/": {
+      preLoaderRoute: typeof QuestsAnalyticsIndexLazyImport;
+      parentRoute: typeof rootRoute;
+    };
+    "/quests/manage/": {
+      preLoaderRoute: typeof QuestsManageIndexLazyImport;
+      parentRoute: typeof rootRoute;
+    };
+    "/quests/profile/": {
+      preLoaderRoute: typeof QuestsProfileIndexLazyImport;
+      parentRoute: typeof rootRoute;
+    };
   }
 }
 
 // Create and export the route tree
 
-export const routeTree = rootRoute.addChildren([IndexLazyRoute, LoginIndexLazyRoute, QuestsIndexLazyRoute]);
+export const routeTree = rootRoute.addChildren([
+  IndexLazyRoute,
+  LoginIndexLazyRoute,
+  QuestsIndexLazyRoute,
+  QuestsAnalyticsIndexLazyRoute,
+  QuestsManageIndexLazyRoute,
+  QuestsProfileIndexLazyRoute,
+]);
 
 /* prettier-ignore-end */

src/routes/quests/analytics/index.lazy.tsx

@@ -0,0 +1,16 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { Header, Menu } from "../../../features/common/components";
+
+export const Route = createLazyFileRoute("/quests/analytics/")({
+  component: () => <Analytics />,
+});
+
+const Analytics = () => {
+  return (
+    <>
+      <Header />
+      <div>統計レポートページです。</div>
+      <Menu />
+    </>
+  );
+};

src/routes/quests/index.lazy.tsx

@@ -1,5 +1,6 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { Menu } from "../../features/common/components/Menu";
+import { Header } from "../../features/common/components/Header";
 
 export const Route = createLazyFileRoute("/quests/")({
   component: () => <Quests />,
@@ -8,6 +9,7 @@ export const Route = createLazyFileRoute("/quests/")({
 const Quests = () => {
   return (
     <>
+      <Header />
       <div>クエスト一覧ページです。</div>
       <Menu />
     </>

src/routes/quests/manage/index.lazy.tsx

@@ -0,0 +1,16 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { Header, Menu } from "../../../features/common/components";
+
+export const Route = createLazyFileRoute("/quests/manage/")({
+  component: () => <Manage />,
+});
+
+const Manage = () => {
+  return (
+    <>
+      <Header />
+      <div>クエスト作成・編集ページです。</div>
+      <Menu />
+    </>
+  );
+};

src/routes/quests/profile/index.lazy.tsx

@@ -0,0 +1,16 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { Header, Menu } from "../../../features/common/components";
+
+export const Route = createLazyFileRoute("/quests/profile/")({
+  component: () => <Profile />,
+});
+
+const Profile = () => {
+  return (
+    <>
+      <Header />
+      <div>プロフィールページです。</div>
+      <Menu />
+    </>
+  );
+};