Merge pull request #29 from openhacku-team-a/feature/login-page

ログインページ

src/app/career-edit/[userId]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import EditingCareerCalendar from "@/components/EditingCareerCalendar";
+import EditingCareerCalendar from "@/components/organisms/EditingCareerCalendar";
 import { useParams } from "next/navigation";
 import React from "react";
 

src/app/login/page.tsx

@@ -3,8 +3,7 @@
 import { useRouter } from "next/navigation";
 import { auth } from "@/lib/firebase/client";
 import { useAuthState } from "react-firebase-hooks/auth";
-import { login } from "@/lib/firebase/auth";
-import LoginButton from "@/components/atoms/LoginButton";
+import Login from "@/components/templates/Login";
 
 const Home = () => {
   const router = useRouter();
@@ -23,7 +22,7 @@ const Home = () => {
       </div>
     );
 
-  return user ? redirectMain() : <LoginButton onClick={login} />;
+  return user ? redirectMain() : <Login />;
 };
 
 export default Home;

src/components/atoms/LoginButton.tsx

@@ -7,7 +7,7 @@ interface Props {
 const LoginButton = (props: Props) => {
   const { onClick } = props;
   return (
-    <div className="flex items-center justify-center h-screen dark:bg-gray-800">
+    <div className="dark:bg-gray-800">
       <button
         className="px-4 py-2 border flex gap-2 border-slate-200 dark:border-slate-700 rounded-lg text-slate-700 dark:text-slate-200 hover:border-slate-400 dark:hover:border-slate-500 hover:text-slate-900 dark:hover:text-slate-300 hover:shadow transition duration-150"
         onClick={onClick}

src/components/EditingCareerCalendar.tsx → src/components/organisms/EditingCareerCalendar.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useState } from "react";
 import EditingCareerEvent from "./EditingCareerEvent";
 import milestones from "@/sample-data/milestones.json";
-import { Milestone } from "../../proto/typescript/pb_out/main";
+import { Milestone } from "../../../proto/typescript/pb_out/main";
 
 // とりあえず100年分のカレンダーを表示
 const FULL_YEAR = 100;

src/components/EditingCareerEvent.tsx → src/components/organisms/EditingCareerEvent.tsx

@@ -2,7 +2,7 @@
 
 import useEditingCareerEvent from "@/hooks/useEditingCareerEvent";
 import { useMemo } from "react";
-import { Milestone } from "../../proto/typescript/pb_out/main";
+import { Milestone } from "../../../proto/typescript/pb_out/main";
 
 type Props = {
   lifeEvent: Milestone;

src/components/templates/Login.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { login } from "@/lib/firebase/auth";
+import LoginButton from "@/components/atoms/LoginButton";
+
+const Login = () => {
+  return (
+    <div className="flex items-center justify-center h-screen flex-col">
+      <h1 className="font-bold sm:text-6xl font-serif mb-5 text-4xl">Career Canvas</h1>
+      <p className="font-bold sm:text-2xl font-sans mb-7 text-lg">
+        キャリアプランを設計するためのサービス
+      </p>
+      <LoginButton onClick={login} />
+    </div>
+  );
+};
+
+export default Login;