Merge pull request #230 from 3I-shikosai32/feat/18-sign_up

src/pages/auth/index.tsx

@@ -0,0 +1,11 @@
+import type { NextPage } from 'next';
+import { Layout } from '../../presentation/layout/layout.container';
+import { Auth } from '../../presentation/relevant/auth/auth.page';
+
+const AuthPage: NextPage = () => (
+  <Layout title="サインイン・サインアップ | OZ">
+    <Auth />
+  </Layout>
+);
+
+export default AuthPage;

src/presentation/layout/component/user-navigation-menu/user-navigation-menu.presenter.tsx

@@ -73,7 +73,7 @@ export const UserNavigationMenu: FC<UserNavigationMenuProps & UserNavigationMenu
             </>
           ) : (
             <NavigationLink>
-              <Link className="gap-2 font-normal" href="/auth/sign-up">
+              <Link className="gap-2 font-normal" href="/auth">
                 <LinkIcon>
                   <RiUser3Fill />
                 </LinkIcon>

src/presentation/relevant/auth/auth.page.tsx

@@ -0,0 +1,39 @@
+import Router from 'next/router';
+import { FC, useState } from 'react';
+import { FcGoogle } from 'react-icons/fc';
+import { Button, ButtonIcon } from '../../primitive/component/button/button.presenter';
+import { Card } from '../../primitive/component/card/card.presenter';
+import { loginWithGoogle } from '@/infra/firebase/auth';
+
+export const Auth: FC = () => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <Card className="my-24 py-5 px-10">
+      <h1 className="text-center">
+        <span className="text-2xl font-semibold">sign in / sign up</span>
+      </h1>
+      <div className="my-5">
+        <Button
+          disabled={isLoading}
+          className="bg-secondary-300"
+          onClick={async () => {
+            setIsLoading(true);
+            await loginWithGoogle().catch(() => {
+              setIsLoading(false);
+            });
+            if (isLoading) {
+              Router.push('/auth/is-new-user');
+            }
+            setIsLoading(false);
+          }}
+        >
+          <ButtonIcon>
+            <FcGoogle />
+          </ButtonIcon>
+          Googleでログインする
+        </Button>
+      </div>
+    </Card>
+  );
+};