Merge pull request #648 from isucon/frontend/switch-account

[FE] アカウントの切り替え動線を追加
isucon · Dec 6, 2024 · 62739c0 · 62739c0
2 parents 06f2255 + 7ada77d
commit 62739c0
Show file tree

Hide file tree

Showing 14 changed files with 106 additions and 18 deletions.
diff --git a/frontend/app/components/icon/account-switch.tsx b/frontend/app/components/icon/account-switch.tsx
@@ -0,0 +1,19 @@
+import type { ComponentProps, FC } from "react";
+import colors from "tailwindcss/colors";
+
+export const AccountSwitchIcon: FC<ComponentProps<"svg">> = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      width="24px"
+      viewBox="0 -960 960 960"
+      fill={colors.neutral[500]}
+      {...props}
+    >
+      <path d="M160-160v-80h110l-16-14q-52-46-73-105t-21-119q0-111 66.5-197.5T400-790v84q-72 26-116 88.5T240-478q0 45 17 87.5t53 78.5l10 10v-98h80v240H160Zm400-10v-84q72-26 116-88.5T720-482q0-45-17-87.5T650-648l-10-10v98h-80v-240h240v80H690l16 14q49 49 71.5 106.5T800-482q0 111-66.5 197.5T560-170Z" />
+    </svg>
+  );
+};
+
+// https://github.com/google/material-design-icons/blob/master/LICENSE
diff --git a/frontend/app/components/icon/account.tsx b/frontend/app/components/icon/account.tsx
@@ -0,0 +1,19 @@
+import type { ComponentProps, FC } from "react";
+import colors from "tailwindcss/colors";
+
+export const AccountIcon: FC<ComponentProps<"svg">> = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      width="24px"
+      viewBox="0 -960 960 960"
+      fill={colors.neutral[500]}
+      {...props}
+    >
+      <path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" />
+    </svg>
+  );
+};
+
+// https://github.com/google/material-design-icons/blob/master/LICENSE
diff --git a/frontend/app/components/icon/chair.tsx b/frontend/app/components/icon/chair.tsx
@@ -33,7 +33,7 @@ const Chair: FC<
   {
     chairType: (typeof ChairTypes)[number];
   } & ComponentProps<"svg">
-> = function ({ chairType, ...props }) {
+> = ({ chairType, ...props }) => {
   const { bodyColor, windowColor, wheelColor } = chairType;
   return (
     <svg

diff --git a/frontend/app/components/icon/copy.tsx b/frontend/app/components/icon/copy.tsx
@@ -1,6 +1,6 @@
 import type { ComponentProps, FC } from "react";
 
-export const CopyIcon: FC<ComponentProps<"svg">> = function (props) {
+export const CopyIcon: FC<ComponentProps<"svg">> = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/app/components/icon/desktop.tsx b/frontend/app/components/icon/desktop.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, FC } from "react";
 import colors from "tailwindcss/colors";
 
-export const DesktopIcon: FC<ComponentProps<"svg">> = function (props) {
+export const DesktopIcon: FC<ComponentProps<"svg">> = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/app/components/icon/history.tsx b/frontend/app/components/icon/history.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, FC } from "react";
 import colors from "tailwindcss/colors";
 
-export const HistoryIcon: FC<ComponentProps<"svg">> = function (props) {
+export const HistoryIcon: FC<ComponentProps<"svg">> = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/app/components/icon/human.tsx b/frontend/app/components/icon/human.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, FC } from "react";
 import colors from "tailwindcss/colors";
 
-export const HumanIcon: FC<ComponentProps<"svg">> = function (props) {
+export const HumanIcon: FC<ComponentProps<"svg">> = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/app/components/icon/isuride.tsx b/frontend/app/components/icon/isuride.tsx
@@ -1,6 +1,6 @@
 import type { ComponentProps, FC } from "react";
 
-export const IsurideIcon: FC<ComponentProps<"svg">> = function (props) {
+export const IsurideIcon: FC<ComponentProps<"svg">> = (props) => {
   return (
     <svg
       viewBox="0 0 163.15 219.74"

diff --git a/frontend/app/components/icon/mobile.tsx b/frontend/app/components/icon/mobile.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, FC } from "react";
 import colors from "tailwindcss/colors";
 
-export const MobileIcon: FC<ComponentProps<"svg">> = function (props) {
+export const MobileIcon: FC<ComponentProps<"svg">> = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/app/components/icon/money.tsx b/frontend/app/components/icon/money.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, FC } from "react";
 import colors from "tailwindcss/colors";
 
-export const MoneyIcon: FC<ComponentProps<"svg">> = function (props) {
+export const MoneyIcon: FC<ComponentProps<"svg">> = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/app/components/icon/schedule.tsx b/frontend/app/components/icon/schedule.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, FC } from "react";
 import colors from "tailwindcss/colors";
 
-export const ScheduleIcon: FC<ComponentProps<"svg">> = function (props) {
+export const ScheduleIcon: FC<ComponentProps<"svg">> = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/app/components/modules/footer-navigation/footer-navigation.tsx b/frontend/app/components/modules/footer-navigation/footer-navigation.tsx
@@ -1,5 +1,6 @@
 import { NavLink } from "@remix-run/react";
 import type { ComponentProps, FC } from "react";
+import { AccountIcon } from "~/components/icon/account";
 import { HistoryIcon } from "~/components/icon/history";
 import { IsurideIcon } from "~/components/icon/isuride";
 
@@ -20,6 +21,11 @@ const MenuList = [
     link: "/client/history",
     label: "HISTORY",
   },
+  {
+    icon: AccountIcon,
+    link: "/client/user",
+    label: "USER",
+  },
 ] as const satisfies NavigationMenu[];
 
 export const FooterNavigation: FC = () => {

diff --git a/frontend/app/routes/client.user/route.tsx b/frontend/app/routes/client.user/route.tsx
@@ -0,0 +1,29 @@
+import type { MetaFunction } from "@remix-run/node";
+import { useNavigate } from "@remix-run/react";
+import colors from "tailwindcss/colors";
+import { AccountSwitchIcon } from "~/components/icon/account-switch";
+import { Button } from "~/components/primitives/button/button";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "User | ISURIDE" },
+    { name: "description", content: "ユーザーページ" },
+  ];
+};
+
+export default function Index() {
+  const navigate = useNavigate();
+
+  return (
+    <section className="mx-8 flex-1">
+      <h2 className="text-xl my-6">ユーザー</h2>
+      <Button
+        className="w-full flex items-center justify-center "
+        onClick={() => navigate("/client/register")}
+      >
+        <AccountSwitchIcon className="me-1" fill={colors.neutral[600]} />
+        ユーザーを切り替える
+      </Button>
+    </section>
+  );
+}
diff --git a/frontend/app/routes/owner/route.tsx b/frontend/app/routes/owner/route.tsx
@@ -1,6 +1,9 @@
-import { Link, Outlet, useMatches } from "@remix-run/react";
+import { Link, Outlet, useMatches, useNavigate } from "@remix-run/react";
 import { twMerge } from "tailwind-merge";
+import colors from "tailwindcss/colors";
+import { AccountSwitchIcon } from "~/components/icon/account-switch";
 import { IsurideIcon } from "~/components/icon/isuride";
+import { Button } from "~/components/primitives/button/button";
 import { OwnerProvider } from "~/contexts/owner-context";
 
 const tabs = [
@@ -36,18 +39,30 @@ const Tab = () => {
 };
 
 export default function OwnerLayout() {
+  const navigate = useNavigate();
+
   return (
     <OwnerProvider>
       <div className="bg-neutral-100 flex justify-center">
         <div className="p-6 lg:p-10 h-screen flex flex-col overflow-x-hidden w-full max-w-6xl bg-white">
-          <h1 className="flex items-baseline text-xl lg:text-3xl mb-6">
-            <IsurideIcon
-              className="relative top-[2px] mr-2"
-              width={40}
-              height={40}
-            />
-            オーナー様向け管理画面
-          </h1>
+          <div className="flex items-center justify-between mb-6">
+            <h1 className="flex items-baseline text-xl lg:text-3xl">
+              <IsurideIcon
+                className="relative top-[2px] mr-2"
+                width={40}
+                height={40}
+              />
+              オーナー様向け管理画面
+            </h1>
+            <Button
+              size="sm"
+              className="flex items-center justify-center "
+              onClick={() => navigate("/owner/login")}
+            >
+              <AccountSwitchIcon className="me-1" fill={colors.neutral[600]} />
+              アカウント切替え
+            </Button>
+          </div>
           <Tab />
           <div className="flex-1 overflow-auto pt-8 pb-16 max-w-7xl xl:flex justify-center">
             <Outlet />