[FE] ユーザーログイン画面を追加

frontend/app/contexts/simulator-context.tsx

@@ -191,8 +191,6 @@ export const SimulatorProvider = ({ children }: { children: ReactNode }) => {
   const [clientRideId, setClientRideId] = useState<string>();
   const isAnotherSimulatorBeingUsed = !clientRideId && !!data?.ride_id;
 
-  console.log(isAnotherSimulatorBeingUsed);
-
   useEffect(() => {
     const onMessage = ({
       data,

frontend/app/routes/client.user/route.tsx

@@ -19,7 +19,7 @@ export default function Index() {
       <h2 className="text-xl my-6">ユーザー</h2>
       <Button
         className="w-full flex items-center justify-center "
-        onClick={() => navigate("/client/register")}
+        onClick={() => navigate("/client/login")}
       >
         <AccountSwitchIcon className="me-1" fill={colors.neutral[600]} />
         ユーザーを切り替える

frontend/app/routes/client_.login/route.tsx

@@ -0,0 +1,70 @@
+import type { MetaFunction } from "@remix-run/node";
+import { Link, useNavigate } from "@remix-run/react";
+import { useState } from "react";
+import { Button } from "~/components/primitives/button/button";
+import { TextInput } from "~/components/primitives/form/text-input";
+import { FormFrame } from "~/components/primitives/frame/form-frame";
+import { getUsers } from "~/utils/get-initial-data";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "Login | ISURIDE" },
+    { name: "description", content: "ユーザーログイン" },
+  ];
+};
+
+export default function ClientLogin() {
+  const [sessionToken, setSessionToken] = useState<string>();
+  const navigate = useNavigate();
+  const presetUsers = getUsers();
+
+  const handleOnClick = () => {
+    document.cookie = `app_session=${sessionToken}; path=/`;
+    navigate("/client");
+  };
+
+  return (
+    <FormFrame>
+      <h1 className="text-2xl font-semibold mb-6">ユーザーログイン</h1>
+      <div className="mb-4">
+        <TextInput
+          id="sessionToken"
+          name="sessionToken"
+          label="セッショントークン"
+          defaultValue={sessionToken}
+          onChange={(e) => setSessionToken(e.target.value)}
+          value={sessionToken}
+        />
+        <details className="mt-3">
+          <summary className="mb-2 ps-2 cursor-pointer">presetから選択</summary>
+          <ul className="list-disc ps-8 space-y-1">
+            {presetUsers.map((preset) => (
+              <li key={preset.id}>
+                <button
+                  className="text-blue-600 hover:underline"
+                  onClick={() => setSessionToken(preset.token)}
+                >
+                  {preset.username}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </details>
+      </div>
+      <div className="flex flex-col gap-4">
+        <Button
+          variant="primary"
+          className="text-lg"
+          onClick={() => void handleOnClick()}
+        >
+          ログイン
+        </Button>
+        <p className="text-center mt-2">
+          <Link to="/client/register" className="text-blue-600 hover:underline">
+            新規登録
+          </Link>
+        </p>
+      </div>
+    </FormFrame>
+  );
+}

frontend/app/routes/client_.register/route.tsx

@@ -3,6 +3,7 @@ import {
   ClientActionFunctionArgs,
   Form,
   json,
+  Link,
   redirect,
   useActionData,
 } from "@remix-run/react";
@@ -145,6 +146,11 @@ export default function ClientRegister() {
         <Button type="submit" variant="primary" className="text-lg">
           登録
         </Button>
+        <p className="text-center mt-2">
+          <Link to="/client/login" className="text-blue-600 hover:underline">
+            ログイン
+          </Link>
+        </p>
       </Form>
     </FormFrame>
   );

frontend/app/routes/owner_.login/route.tsx

@@ -13,7 +13,7 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-export default function OwnerRegister() {
+export default function OwnerLogin() {
   const [sessionToken, setSessionToken] = useState<string>();
   const navigate = useNavigate();
   const presetOwners = getOwners();

frontend/app/routes/owner_.register/route.tsx

@@ -14,7 +14,7 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-export default function ProviderRegister() {
+export default function OwnerRegister() {
   const [ownerName, setOwnerName] = useState<string>();
   const [errorMessage, setErrorMessage] = useState<string>();
   const navigate = useNavigate();