Merge pull request #56 from tosaken1116/feat/top-page

feat: add top page

src/app/page.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
+import { Screen } from '@/components/page/Top'
 
-const Home = (): ReactNode => <p>this is home</p>;
+const Top:React.FC = () => <Screen />;
 
-export default Home;
+export default Top;

src/components/model/LoginButton/hooks/index.ts

@@ -0,0 +1,13 @@
+import { useRouter } from 'next/navigation';
+
+type IUseLoginButton = {
+  handleLogin: () => void;
+};
+
+export const useLoginButton = (): IUseLoginButton => {
+  const router = useRouter();
+  const handleLogin = (): void => {
+    router.push('/home');
+  };
+  return { handleLogin };
+};

src/components/model/LoginButton/index.stories.tsx

@@ -0,0 +1,17 @@
+import { LoginButtonPresentation  } from './presentations';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof LoginButtonPresentation> = {
+  component: LoginButtonPresentation,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LoginButtonPresentation>;
+
+export const Default: Story = {};

src/components/model/LoginButton/index.tsx

@@ -0,0 +1,3 @@
+import { LoginButtonPresentation } from './presentations';
+
+export const LoginButton: React.FC = () => <LoginButtonPresentation />;

src/components/model/LoginButton/presentations/index.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useLoginButton } from '../hooks';
+
+import { Button } from '@/components/ui/Button';
+import { Typography } from '@/components/ui/Typography';
+
+export const LoginButtonPresentation: React.FC = () => {
+  const { handleLogin } = useLoginButton();
+  return (
+    <div className="mt-20 flex flex-col gap-6">
+      <Typography variant="strong">アカウントをお持ちの場合</Typography>
+      <Button
+        className="w-72 rounded-full border-gray-400 font-bold text-primary"
+        variant="outline"
+        onClick={(): void => handleLogin()}
+      >
+        ログイン
+      </Button>
+    </div>
+  );
+};

src/components/page/Top/index.stories.tsx

@@ -0,0 +1,19 @@
+import { Screen as Top } from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Top> = {
+  component: Top,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Top>;
+
+export const Default: Story = {
+  args: {},
+};

src/components/page/Top/index.tsx

@@ -0,0 +1,51 @@
+import { BsApple } from 'react-icons/bs';
+import { FcGoogle } from 'react-icons/fc';
+
+import { YIcon } from '@/components/icons/Y';
+import { LoginButton } from '@/components/model/LoginButton';
+import { Button } from '@/components/ui/Button';
+import { Separator } from '@/components/ui/Separator';
+import { Typography } from '@/components/ui/Typography';
+
+export const Screen: React.FC = () => (
+  <div className="flex flex-row">
+    <div className="flex w-1/2 items-center justify-center self-center">
+      <YIcon size={240} className="h-1/2 w-1/2" />
+    </div>
+    <div className="mt-16 flex w-1/2 flex-col gap-6 p-8">
+      <div>
+        <Typography className="text-[64px]" variant="strong">
+          すべての話題が、ここに。
+        </Typography>
+      </div>
+      <div>
+        <Typography className="text-3xl" variant="strong">
+          今すぐ参加しましょう。
+        </Typography>
+      </div>
+      <div>
+        <div className="flex flex-col gap-4">
+          <Button className="w-72 rounded-full bg-white text-black hover:bg-gray-100">
+            <FcGoogle size={20} />
+            Googleで登録
+          </Button>
+          <Button className="w-72 rounded-full bg-white font-bold text-black hover:bg-gray-100">
+            <BsApple size={20} />
+            Appleのアカウントで登録
+          </Button>
+        </div>
+        <div className="mx-2 flex h-10 w-28 flex-row items-center">
+          <Separator orientation="horizontal" className=" bg-gray-400" />
+          <Typography className=" whitespace-nowrap">または</Typography>
+          <Separator orientation="horizontal" className=" bg-gray-400" />
+        </div>
+        <div>
+          <Button className="w-72 rounded-full font-bold">
+            アカウントを作成
+          </Button>
+        </div>
+      </div>
+      <LoginButton />
+    </div>
+  </div>
+);