feat: ホーム画面にランキングを追加

app/components/LoginCard.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { LoginCard } from "./LoginCard";
+
+const meta: Meta<typeof LoginCard> = {
+	title: "Components/LoginCard",
+	component: LoginCard,
+	args: {
+		style: { width: "600px", height: "300px" },
+	},
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof LoginCard> = {};

app/components/LogginCard.tsx → app/components/LoginCard.tsx

@@ -10,9 +10,9 @@ interface FormData {
 	displayName: string;
 }
 
-interface LogginCardProps extends ComponentPropsWithRef<"div"> {}
+interface LoginCardProps extends ComponentPropsWithRef<"div"> {}
 
-export function LogginCard({ className }: LogginCardProps): ReactNode {
+export function LoginCard({ className }: LoginCardProps): ReactNode {
 	const { register, handleSubmit } = useForm<FormData>();
 
 	const onSubmit: SubmitHandler<FormData> = async (data) => {

app/routes/_index/SignUp.tsx

@@ -1,11 +1,11 @@
 import type { ReactNode } from "react";
-import { LogginCard } from "~/components/LogginCard";
+import { LoginCard } from "~/components/LoginCard";
 
 export function SignUp(): ReactNode {
 	return (
 		<div className="grid justify-items-center gap-8">
 			<img src="/logo.svg" alt="RicoShot" className="w-full" />
-			<LogginCard className="w-full rotate-2" />
+			<LoginCard className="w-full rotate-2" />
 		</div>
 	);
 }

app/routes/_index/route.tsx

@@ -1,7 +1,7 @@
 import type { MetaFunction } from "@remix-run/react";
-import { Button } from "~/components/Button";
 import { Heading } from "~/components/Heading";
 import { ProfileCard } from "~/components/ProfileCard";
+import { RankingList } from "~/components/Ranking";
 import { useMyProfile } from "~/features/profile/useMyProfile";
 import { SignUp } from "./SignUp";
 
@@ -17,10 +17,14 @@ export default function Page() {
 		>
 			<main className="mx-auto grid w-full max-w-screen-sm gap-y-4">
 				{myProfile ? (
-					<ProfileCard className="rotate-2 sm:rotate-1" profile={myProfile} />
+					<>
+						<Heading>ホーム</Heading>
+						<ProfileCard className="rotate-2 sm:rotate-1" profile={myProfile} />
+					</>
 				) : (
 					<SignUp />
 				)}
+				<RankingList />
 			</main>
 		</div>
 	);