MyCareerPageにサイドバーを設置

src/app/future-time-line/page.tsx

@@ -1,27 +1,41 @@
-'use client'
-import React from 'react'
-import milestones from '@/sample-data/milestones.json'
-import FutureTimeLine from '@/components/organisms/FutureTimeLine'
-
-export type MileStone = {
-    userId: string;
-    milestoneId: string;
-    title: string;
-    content: string;
-    /** GCS内のファイル名 */
-    imageHash: string;
-    /** RFC3339 */
-    beginDate: string;
-    /** RFC3339 */
-    finishDate: string;
-  }
+"use client";
+import React from "react";
+import userInfos from "@/constants/json/user-info.json";
+import FutureTimeLine from "@/components/organisms/FutureTimeLine";
+import { useRouter } from "next/navigation";
+import { useAuthState } from "react-firebase-hooks/auth";
+import { auth } from "@/lib/firebase/client";
+import Sidebar from "@/components/organisms/Sidebar";
 
 const FutureTimeLinePage = () => {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between md:p-24">
-        <FutureTimeLine milestones={milestones} />
-    </main>
-  )
-}
+  const router = useRouter();
+  const [user, isLoading] = useAuthState(auth);
+  const redirectLogin = () => {
+    router.push("/login");
+  };
+
+  if (isLoading)
+    return (
+      <div
+        className="flex justify-center items-center h-screen"
+        aria-label="Loading..."
+      >
+        <div className="animate-spin h-10 w-10 border-4 border-gray-500 rounded-full border-t-transparent"></div>
+      </div>
+    );
+
+  return user ? (
+    <div className="flex w-screen">
+      <Sidebar />
+      <div className="h-screen w-full overflow-scroll">
+        <main className="flex flex-col items-center justify-between md:p-24">
+          <FutureTimeLine milestones={userInfos[0].milestones} />
+        </main>
+      </div>
+    </div>
+  ) : (
+    redirectLogin()
+  );
+};
 
-export default FutureTimeLinePage
+export default FutureTimeLinePage;

src/components/organisms/Sidebar.tsx

@@ -44,6 +44,14 @@ const Sidebar = () => {
           }
           path="/setting"
         />
+        <SidebarIcon
+          icon={
+            <span className="material-symbols-outlined material-icons text-3xl cursor-pointer">
+              map
+            </span>
+          }
+          path="/future-time-line"
+        />
         <SidebarIcon
           icon={
             <span className="material-symbols-outlined material-icons text-3xl cursor-pointer">