From 5ad532ac6c332cbe1f76cd7d742d9cf7c1356c52 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sun, 27 Oct 2024 22:53:40 +0800
Subject: [PATCH 01/27] chore: rename effect-new-2 to frosted-shadow-box

---
 pages/index.tsx    |  2 +-
 tailwind.config.js | 40 ++++++++++++++++++++--------------------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index a3de4cfe..d59f789b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -110,7 +110,7 @@ function CarouselCard({
                 !open && "scale-0"
               )}
             >
-              <ul className="py-4 effect-new-2 text-primary-800 bg-primary-200/60 whitespace-nowrap rounded-lg">
+              <ul className="py-4 frosted-shadow-box text-primary-800 bg-primary-200/60 whitespace-nowrap rounded-lg">
                 <li>
                   <Link
                     href="/rooms"
diff --git a/tailwind.config.js b/tailwind.config.js
index e333e6c7..bf8d0134 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -83,6 +83,24 @@ module.exports = {
     },
   },
   plugins: [
+    plugin(({ addComponents }) => {
+      /** custom scroll bar */
+      addComponents({
+        ".scrollbar": {
+          "&::-webkit-scrollbar": {
+            width: "16px",
+          },
+          "&::-webkit-scrollbar-thumb": {
+            boxShadow: "inset 0 0 8px 8px #7C7BA4",
+            border: "solid 4px transparent",
+            borderRadius: "8px",
+          },
+          "&::-webkit-scrollbar-thumb:hover": {
+            boxShadow: "inset 0 0 8px 8px #4C4B6E",
+          },
+        },
+      });
+    }),
     plugin(({ addComponents }) => {
       /** typography */
       const largeSizes = [64, 56, 44, 36];
@@ -166,29 +184,11 @@ module.exports = {
     plugin(({ addUtilities }) => {
       /** custom effect */
       addUtilities({
-        ".effect-new-2": {
-          "box-shadow": "0px 1.53px 36.72px -1.53px #0000002E",
+        ".frosted-shadow-box": {
+          "box-shadow": "0 2px 36px -2px #0000002E",
           "backdrop-filter": "blur(20px)",
         },
       });
     }),
-    plugin(({ addComponents }) => {
-      /** custom scroll bar */
-      addComponents({
-        ".scrollbar": {
-          "&::-webkit-scrollbar": {
-            width: "16px",
-          },
-          "&::-webkit-scrollbar-thumb": {
-            boxShadow: "inset 0 0 8px 8px #7C7BA4",
-            border: "solid 4px transparent",
-            borderRadius: "8px",
-          },
-          "&::-webkit-scrollbar-thumb:hover": {
-            boxShadow: "inset 0 0 8px 8px #4C4B6E",
-          },
-        },
-      });
-    }),
   ],
 };

From 1f6825436ff7cc359571be514b8523aae5daacad Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sun, 27 Oct 2024 22:58:03 +0800
Subject: [PATCH 02/27] refactor: box fancy

---
 components/shared/BoxFancy/BoxFancy.tsx | 57 +++++++++++--------------
 pages/login.tsx                         |  2 +-
 2 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/components/shared/BoxFancy/BoxFancy.tsx b/components/shared/BoxFancy/BoxFancy.tsx
index 88a8f34a..9172865f 100644
--- a/components/shared/BoxFancy/BoxFancy.tsx
+++ b/components/shared/BoxFancy/BoxFancy.tsx
@@ -16,16 +16,16 @@ export type BoxFancyBorderGradientVariant = "none" | "purple" | "black";
 // The border-radius of ::before should be as consistent as possible with the original,
 // and the border-radius size must be at least twice that of ::before.padding,
 // otherwise, the inner circle will protrude.
-const BorderSizeTwClassName: Record<BoxFancyBorderWidthVariant, string> = {
+const borderWidthMap: Record<BoxFancyBorderWidthVariant, string> = {
   none: "",
-  small: "p-[1px] before:p-[1px]",
+  small: "p-px before:p-px",
   medium: "p-1 before:p-1",
   large: "p-1.5 before:p-1.5",
   xLarge: "p-2 before:p-2",
   extraLarge: "p-3 before:p-3",
 };
 
-const BorderRadiusTwClassName: Record<BoxFancyBorderRadiusVariant, string> = {
+const borderRadiusMap: Record<BoxFancyBorderRadiusVariant, string> = {
   none: "",
   small: "rounded-sm before:rounded-sm",
   medium: "rounded-lg before:rounded-lg",
@@ -35,18 +35,17 @@ const BorderRadiusTwClassName: Record<BoxFancyBorderRadiusVariant, string> = {
   full: "rounded-full before:rounded-full",
 };
 
-const BorderGradientVariantTwClassName: Record<
-  BoxFancyBorderGradientVariant,
-  string
-> = {
-  none: "",
-  purple: "before:gradient-purple",
-  black: "before:gradient-black",
-};
+const borderGradientVariantMap: Record<BoxFancyBorderGradientVariant, string> =
+  {
+    none: "",
+    purple: "before:gradient-purple",
+    black: "before:gradient-black",
+  };
 
 export interface BaseBoxFancyProp {
   /** Border styles are recommended to be set by the following 'border' prefix props **/
   borderWidth?: BoxFancyBorderWidthVariant;
+  /** Border styles are recommended to be set by the following 'border' prefix props **/
   borderRadius?: BoxFancyBorderRadiusVariant;
   /** The border gradient color of the BoxFancy. If you set a border color by className or style, this should be covered. */
   borderGradientColor?: BoxFancyBorderGradientVariant;
@@ -55,12 +54,12 @@ export interface BaseBoxFancyProp {
 export type BoxFancyProps<C extends React.ElementType = "div"> =
   PolymorphicComponentProp<C, BaseBoxFancyProp>;
 
-type InnerBoxFancyComponent = <C extends React.ElementType = "div">(
+type InternalBoxFancyComponent = <C extends React.ElementType = "div">(
   props: BoxFancyProps<C>,
   ref?: PolymorphicRef<C>
 ) => React.ReactElement | null;
 
-const InnerBoxFancy: InnerBoxFancyComponent = (
+const InternalBoxFancy: InternalBoxFancyComponent = (
   {
     component,
     borderWidth = "small",
@@ -74,24 +73,20 @@ const InnerBoxFancy: InnerBoxFancyComponent = (
 ) => {
   const Component = component || "div";
 
-  const borderWidthTwClassName = BorderSizeTwClassName[borderWidth];
-  const borderRadiusTwClassName = BorderRadiusTwClassName[borderRadius];
-  const borderGradientColorTwClassName =
-    BorderGradientVariantTwClassName[borderGradientColor];
-
-  const allClassName = cn(
-    "w-full h-full relative bg-black/40 effect-new-2 text-primary-50",
-    "flex justify-center",
-    "before:w-full before:h-full before:absolute before:top-0 before:left-0",
-    "before:[mask:linear-gradient(#fff_0_0)_exclude_content-box,linear-gradient(#fff_0_0)]",
-    borderWidthTwClassName,
-    borderRadiusTwClassName,
-    borderGradientColorTwClassName,
-    className
-  );
-
   return (
-    <Component ref={ref} className={allClassName} {...restProps}>
+    <Component
+      ref={ref}
+      className={cn(
+        "relative bg-black/40 frosted-shadow-box text-primary-50",
+        "before:w-full before:h-full before:absolute before:top-0 before:left-0",
+        "before:[mask:linear-gradient(#fff_0_0)_exclude_content-box,linear-gradient(#fff_0_0)]",
+        borderWidthMap[borderWidth],
+        borderRadiusMap[borderRadius],
+        borderGradientVariantMap[borderGradientColor],
+        className
+      )}
+      {...restProps}
+    >
       {children}
     </Component>
   );
@@ -108,4 +103,4 @@ const InnerBoxFancy: InnerBoxFancyComponent = (
  *
  * 2. Avoid modifying the CSS `position` property directly. If necessary, consider using a container to encapsulate it.
  */
-export const BoxFancy = forwardRef(InnerBoxFancy);
+export const BoxFancy = forwardRef(InternalBoxFancy);
diff --git a/pages/login.tsx b/pages/login.tsx
index 1ba3f479..6a226075 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -131,7 +131,7 @@ Login.getLayout = (page) => (
       fill
     />
     <div className="w-full h-full flex items-center p-4 md:p-8 xl:px-36 xl:py-24">
-      <BoxFancy className={"container m-auto xl:max-h-[calc(max(560px,75%))]"}>
+      <BoxFancy className="container m-auto h-full xl:max-h-[calc(max(560px,75%))]">
         {page}
       </BoxFancy>
     </div>

From 4619a4c170dd868388858c00e674f89a86803e83 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sun, 27 Oct 2024 23:00:07 +0800
Subject: [PATCH 03/27] feat: button add icon size

---
 components/shared/Button/v2/Button.tsx | 8 +++++---
 pages/index.tsx                        | 4 ++--
 pages/login.tsx                        | 2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/shared/Button/v2/Button.tsx b/components/shared/Button/v2/Button.tsx
index 5d852b8e..36e4e1fe 100644
--- a/components/shared/Button/v2/Button.tsx
+++ b/components/shared/Button/v2/Button.tsx
@@ -11,6 +11,7 @@ export enum ButtonVariant {
 }
 
 export enum ButtonSize {
+  Icon = "icon",
   REGULAR = "regular",
   SMALL = "small",
 }
@@ -24,14 +25,15 @@ const buttonTypeClasses: Record<ButtonVariant, string> = {
   primaryTransparent:
     "text-primary-800 bg-primary-200/60 hover:text-primary-800 hover:bg-primary-300/50 active:text-primary-800 active:bg-primary-300/50",
   secondary:
-    "text-primary-200 bg-transparent hover:bg-primary-300/40 active:bg-primary-200/20 disabled:bg-transparent disabled:border",
+    "text-primary-200 bg-primary-700/40 hover:bg-primary-600/40 active:bg-primary-600/40",
   highlight:
     "text-primary-50 gradient-purple hover:gradient-purple-2 active:gradient-purple-3",
 };
 
 const buttonSizeClasses: Record<ButtonSize, string> = {
-  small: "h-9 px-4 gap-1",
-  regular: "h-11 px-6 gap-2",
+  icon: "p-2",
+  small: "py-2 px-4 gap-1",
+  regular: "py-2 px-6 gap-2",
 };
 
 interface BaseButtonProps {
diff --git a/pages/index.tsx b/pages/index.tsx
index d59f789b..b4f77d80 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,7 +6,7 @@ import { ReactEventHandler, useEffect, useState } from "react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { AxiosError } from "axios";
 
-import Button from "@/components/shared/Button/v2";
+import Button, { ButtonSize } from "@/components/shared/Button/v2";
 import CreateRoomModal from "@/components/lobby/CreateRoomModal";
 import CarouselV2 from "@/components/shared/Carousel/v2";
 import SearchBar from "@/components/shared/SearchBar";
@@ -98,7 +98,7 @@ function CarouselCard({
           <div className="relative">
             <Button
               variant="primaryTransparent"
-              className="w-11 h-11 p-0"
+              size={ButtonSize.Icon}
               tabIndex={tabIndex}
               onClick={() => setOpen((pre) => !pre)}
             >
diff --git a/pages/login.tsx b/pages/login.tsx
index 6a226075..7fa065e5 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -66,7 +66,7 @@ const Login: NextPageWithProps = () => {
     return LoginMethods.map(({ text, type, icon }) => (
       <Link key={type} href={`${internalEndpoint}/login?type=${type}`}>
         <ButtonV2
-          className="w-full min-w-[300px] max-w-[50%] xl:max-w-[318px] text-primary-50"
+          className="w-full min-w-[300px] max-w-[50%] xl:max-w-[318px] text-primary-50 flex justify-center items-center"
           variant={ButtonVariant.SECONDARY}
           onClick={(e: SyntheticEvent) => onLoginClick(e, type)}
         >

From 2962eb2a326bf10fcfc04ed74ba19612d441fe1f Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sun, 27 Oct 2024 23:00:42 +0800
Subject: [PATCH 04/27] refactor: header icon and button

---
 components/shared/Header.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/components/shared/Header.tsx b/components/shared/Header.tsx
index 11fb22c9..33a908d8 100644
--- a/components/shared/Header.tsx
+++ b/components/shared/Header.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import IconV2, { IconName } from "@/components/shared/Icon";
+import Icon, { IconName } from "@/components/shared/Icon";
 import Button from "@/components/shared/Button";
 import Badge from "@/components/shared/Badge";
 import UserInfoModal from "@/components/lobby/UserInfoModal";
@@ -60,7 +60,7 @@ export default function Header({
       )}
     >
       <div className="flex items-center gap-3">
-        <IconV2 name="Logo" className="w-10 h-10" />
+        <Icon name="Logo" className="w-10 h-10" />
         <h2 className="text-primary-100 text-2xl">遊戲微服務大平台</h2>
       </div>
       <div className="header___actions flex gap-5">
@@ -71,17 +71,14 @@ export default function Header({
             placement="top-right"
             className={cn("top-1 right-1")}
           >
-            <Button
-              className="relative bg-transparent hover:shadow-none p-2.5"
-              onClick={onClick}
-            >
-              <IconV2
+            <button className="p-2.5" onClick={onClick}>
+              <Icon
                 name={iconName}
-                className={cn("w-5 h-5 [&_*]:stroke-white", {
-                  "fill-blue": isActive,
+                className={cn("w-5 h-5", {
+                  "[&_*]:stroke-white": isActive,
                 })}
               />
-            </Button>
+            </button>
           </Badge>
         ))}
       </div>

From 1b0d71b889b9a283a28486ea7bd54a8cdd548cd6 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Mon, 28 Oct 2024 22:25:36 +0800
Subject: [PATCH 05/27] test: update border width case

---
 components/shared/BoxFancy/BoxFancy.test.tsx | 38 ++++++++------------
 1 file changed, 14 insertions(+), 24 deletions(-)

diff --git a/components/shared/BoxFancy/BoxFancy.test.tsx b/components/shared/BoxFancy/BoxFancy.test.tsx
index 4e32626e..3dcb902a 100644
--- a/components/shared/BoxFancy/BoxFancy.test.tsx
+++ b/components/shared/BoxFancy/BoxFancy.test.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import {
   BoxFancy,
   BoxFancyBorderGradientVariant,
@@ -25,15 +25,6 @@ type BorderGradientTest = {
   borderGradientColor?: BoxFancyBorderGradientVariant;
 } & ClassesFoundTest;
 
-const borderWidthTestTable: BorderWidthTest[] = [
-  { borderWidth: "none", classes: "p-\\[1px\\]", found: false },
-  { borderWidth: "small", classes: "p-\\[1px\\]", found: true },
-  { borderWidth: "medium", classes: "p-1", found: true },
-  { borderWidth: "large", classes: "p-1\\.5", found: true },
-  { borderWidth: "xLarge", classes: "p-2", found: true },
-  { borderWidth: "extraLarge", classes: "p-3", found: true },
-];
-
 const borderRadiusTestTable: BorderRadiusTest[] = [
   { borderRadius: "none", classes: "rounded-2xl", found: false },
   { borderRadius: "small", classes: "rounded-sm", found: true },
@@ -73,20 +64,19 @@ describe("BoxFancy", () => {
     expect(baseElement.textContent).toContain("Test");
   });
 
-  it.each<BorderWidthTest>(borderWidthTestTable)(
-    "should render with correct border size",
-    ({ borderWidth, classes, found }) => {
-      const { baseElement } = render(
-        <BoxFancy borderWidth={borderWidth}>Test</BoxFancy>
-      );
-
-      const matchers = [
-        () => expect(baseElement.querySelector(`.${classes}`)),
-        () => expect(baseElement.querySelector(`.before\\:${classes}`)),
-      ];
-      matchers.forEach((matcher) =>
-        found ? matcher().toBeTruthy() : matcher().toBeFalsy()
-      );
+  it.each`
+    borderWidth     | className
+    ${"small"}      | ${"p-px"}
+    ${"medium"}     | ${"p-1"}
+    ${"large"}      | ${"p-1.5"}
+    ${"xLarge"}     | ${"p-2"}
+    ${"extraLarge"} | ${"p-3"}
+  `(
+    "should render with correct $borderWidth border size",
+    ({ borderWidth, className }) => {
+      render(<BoxFancy borderWidth={borderWidth}>Box Fancy</BoxFancy>);
+
+      expect(screen.getByText("Box Fancy")).toHaveClass(className);
     }
   );
 

From ca696f8f7f35ee32b4196b4f2ac8af4b8cf14d6d Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Mon, 28 Oct 2024 22:26:24 +0800
Subject: [PATCH 06/27] feat: Modal component

---
 .../lobby/CreateRoomModal/CreateRoomModal.tsx |   9 +-
 .../EnterPrivateRoomModal.tsx                 |   6 +-
 components/lobby/UserInfoModal.tsx            |  11 +-
 components/shared/Modal/Modal.tsx             | 122 ++++++++++
 components/shared/Modal/index.tsx             |   3 +
 components/shared/Modal/modal.stories.tsx     |  47 ++++
 components/shared/Modal/modal.test.tsx        |  67 +++++
 components/shared/Modalow/Body.tsx            |  26 --
 components/shared/Modalow/Footer.tsx          |  35 ---
 components/shared/Modalow/Header.tsx          |  52 ----
 components/shared/Modalow/Icon.tsx            |  25 --
 components/shared/Modalow/Mask.tsx            |  43 ----
 components/shared/Modalow/Modalow.stories.tsx |  68 ------
 components/shared/Modalow/Modalow.tsx         | 127 ----------
 components/shared/Modalow/index.tsx           |   5 -
 components/shared/Modalow/modal.module.css    |  58 -----
 components/shared/Modalow/modalow.test.tsx    | 228 ------------------
 hooks/usePopup.tsx                            |   7 +-
 18 files changed, 254 insertions(+), 685 deletions(-)
 create mode 100644 components/shared/Modal/Modal.tsx
 create mode 100644 components/shared/Modal/index.tsx
 create mode 100644 components/shared/Modal/modal.stories.tsx
 create mode 100644 components/shared/Modal/modal.test.tsx
 delete mode 100644 components/shared/Modalow/Body.tsx
 delete mode 100644 components/shared/Modalow/Footer.tsx
 delete mode 100644 components/shared/Modalow/Header.tsx
 delete mode 100644 components/shared/Modalow/Icon.tsx
 delete mode 100644 components/shared/Modalow/Mask.tsx
 delete mode 100644 components/shared/Modalow/Modalow.stories.tsx
 delete mode 100644 components/shared/Modalow/Modalow.tsx
 delete mode 100644 components/shared/Modalow/index.tsx
 delete mode 100644 components/shared/Modalow/modal.module.css
 delete mode 100644 components/shared/Modalow/modalow.test.tsx

diff --git a/components/lobby/CreateRoomModal/CreateRoomModal.tsx b/components/lobby/CreateRoomModal/CreateRoomModal.tsx
index 2cbf5857..fd2b744e 100644
--- a/components/lobby/CreateRoomModal/CreateRoomModal.tsx
+++ b/components/lobby/CreateRoomModal/CreateRoomModal.tsx
@@ -4,7 +4,7 @@ import useRequest from "@/hooks/useRequest";
 import { createRoomEndpoint, CreateRoomFormType } from "@/requests/rooms";
 import { getAllGamesEndpoint, GameType } from "@/requests/games";
 import Button from "@/components/shared/Button";
-import Modalow from "@/components/shared/Modalow";
+import Modal from "@/components/shared/Modal";
 import GameListModal from "./GameListModal";
 import Input from "@/components/shared/Input";
 import PasswordField from "@/components/shared/PasswordField";
@@ -107,12 +107,11 @@ export default function CreateRoomModal({ tabIndex }: { tabIndex: number }) {
       >
         開設新房間
       </button>
-      <Modalow
+      <Modal
         title="create-room"
-        hasTitle={false}
         isOpen={showThisModal}
         onClose={handleCloseModal}
-        size="xLarge"
+        size="medium"
       >
         {showGameListModal ? (
           <GameListModal
@@ -257,7 +256,7 @@ export default function CreateRoomModal({ tabIndex }: { tabIndex: number }) {
             </Button>
           </form>
         )}
-      </Modalow>
+      </Modal>
     </>
   );
 }
diff --git a/components/lobby/EnterPrivateRoomModal/EnterPrivateRoomModal.tsx b/components/lobby/EnterPrivateRoomModal/EnterPrivateRoomModal.tsx
index 31db6e3b..591a1abd 100644
--- a/components/lobby/EnterPrivateRoomModal/EnterPrivateRoomModal.tsx
+++ b/components/lobby/EnterPrivateRoomModal/EnterPrivateRoomModal.tsx
@@ -1,6 +1,6 @@
 import type { ClipboardEvent } from "react";
 
-import Modalow from "@/components/shared/Modalow";
+import Modal from "@/components/shared/Modal";
 import PasswordField from "@/components/shared/PasswordField";
 
 type EnterPrivateRoomModalProps = {
@@ -21,7 +21,7 @@ export default function EnterPrivateRoomModal({
   onPaste,
 }: EnterPrivateRoomModalProps) {
   return (
-    <Modalow hasTitle={false} isOpen={isOpen} onClose={onClose} size="small">
+    <Modal isOpen={isOpen} onClose={onClose} size="small">
       <div
         className="p-3 m-[26px] border-2 border-blue2f rounded-[10px] flex justify-center text-center"
         onPaste={onPaste}
@@ -40,6 +40,6 @@ export default function EnterPrivateRoomModal({
           <div className="border-4 border-white/40 border-t-white/10 w-6 h-6 rounded-full animate-spin"></div>
         </div>
       )}
-    </Modalow>
+    </Modal>
   );
 }
diff --git a/components/lobby/UserInfoModal.tsx b/components/lobby/UserInfoModal.tsx
index 7f418e0a..8cdbe819 100644
--- a/components/lobby/UserInfoModal.tsx
+++ b/components/lobby/UserInfoModal.tsx
@@ -4,7 +4,7 @@ import { AxiosError } from "axios";
 import { cn } from "@/lib/utils";
 import Button from "@/components/shared/Button";
 import Input from "@/components/shared/Input";
-import Modalow from "@/components/shared/Modalow";
+import Modal from "@/components/shared/Modal";
 import useRequest from "@/hooks/useRequest";
 import useUser from "@/hooks/useUser";
 import { UserInfo, putUserinfoEndpoint } from "@/requests/users";
@@ -30,7 +30,7 @@ const UserInfoModal: FC<UserInfoModalProps> = ({ isOpen, onClose }) => {
 
   const handleClose = () => {
     setIsOpenModal((prev) => !prev);
-    setTimeout(() => onClose(), 200); // 要等 modalow 關閉動畫結束，才能關閉
+    setTimeout(() => onClose(), 200); // 要等 Modal 關閉動畫結束，才能關閉
   };
   const handleCancelEdit = () => {
     setEditMode(false);
@@ -95,12 +95,11 @@ const UserInfoModal: FC<UserInfoModalProps> = ({ isOpen, onClose }) => {
 
   return (
     <>
-      <Modalow
-        hasTitle={false}
+      <Modal
         isOpen={isOpenModal}
         onClose={handleClose}
         maskClosable={!loading}
-        size="xLarge"
+        size="medium"
       >
         <div className="flex flex-col">
           <div className="flex justify-between items-center">
@@ -173,7 +172,7 @@ const UserInfoModal: FC<UserInfoModalProps> = ({ isOpen, onClose }) => {
             )}
           </div>
         </div>
-      </Modalow>
+      </Modal>
     </>
   );
 };
diff --git a/components/shared/Modal/Modal.tsx b/components/shared/Modal/Modal.tsx
new file mode 100644
index 00000000..63eded46
--- /dev/null
+++ b/components/shared/Modal/Modal.tsx
@@ -0,0 +1,122 @@
+import React, {
+  useState,
+  useEffect,
+  ForwardRefRenderFunction,
+  forwardRef,
+} from "react";
+import { cn } from "@/lib/utils";
+import Portal from "../Portal/Portal";
+import BoxFancy from "../BoxFancy";
+import { Button, ButtonSize } from "../Button/v2";
+import Icon from "../Icon";
+
+enum ModalSizeVariant {
+  small = "small",
+  medium = "medium",
+}
+
+const containerSizeMap: Record<ModalSizeVariant, string> = {
+  small: "top-[180px]",
+  medium: "top-[120px]",
+};
+
+const dialogSize: Record<ModalSizeVariant, string> = {
+  small: "w-80",
+  medium: "w-[460px]",
+};
+
+export interface ModalProps {
+  isOpen?: boolean;
+  size?: keyof typeof ModalSizeVariant;
+  title?: string;
+  hideCloseIcon?: boolean;
+  maskClosable?: boolean;
+  children?: React.ReactNode;
+  onClose?: () => void;
+}
+
+const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
+  props,
+  ref
+) => {
+  const {
+    isOpen,
+    size = "medium",
+    title = "title",
+    hideCloseIcon = false,
+    maskClosable = true,
+    children,
+    onClose,
+    ...restProps
+  } = props;
+
+  const [removeDOM, setRemoveDOM] = useState(!isOpen);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+
+    if (isOpen) {
+      setRemoveDOM(false);
+    } else {
+      timer = setTimeout(() => {
+        setRemoveDOM(true);
+      }, 200);
+    }
+
+    return () => clearTimeout(timer);
+  }, [isOpen]);
+
+  return (
+    !removeDOM && (
+      <Portal>
+        <div
+          className={cn(
+            "duration-200",
+            "fixed top-0 left-0 w-screen h-screen bg-basic-black/60 z-10",
+            isOpen ? "opacity-100" : "opacity-0"
+          )}
+          data-testid="modal-mask"
+          onClick={maskClosable ? onClose : undefined}
+        />
+        <div
+          className={cn(
+            "fixed z-20 left-1/2 -translate-x-1/2 duration-200",
+            containerSizeMap[size],
+            isOpen ? "opacity-100" : "opacity-0"
+          )}
+          data-testid="modal-container"
+        >
+          <BoxFancy
+            ref={ref}
+            className={cn(
+              "px-10 py-12 flex flex-col gap-8",
+              "text-primary-100 bg-primary-700/40 rounded-2xl drop-shadow-md",
+              dialogSize[size]
+            )}
+            {...restProps}
+            role="dialog"
+          >
+            <header className="text-[22px] text-center">{title}</header>
+            <div>{children}</div>
+          </BoxFancy>
+          {!hideCloseIcon && (
+            <Button
+              variant="secondary"
+              size={ButtonSize.Icon}
+              className="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2"
+              data-testid="close-icon"
+              aria-label={`close ${title} modal`}
+              onClick={onClose}
+            >
+              <Icon name="X" className="w-6 h-6" />
+            </Button>
+          )}
+        </div>
+      </Portal>
+    )
+  );
+};
+
+const Modal = forwardRef<HTMLDivElement, ModalProps>(InternalModal);
+
+export default Modal;
diff --git a/components/shared/Modal/index.tsx b/components/shared/Modal/index.tsx
new file mode 100644
index 00000000..16767ee1
--- /dev/null
+++ b/components/shared/Modal/index.tsx
@@ -0,0 +1,3 @@
+export { default } from "./Modal";
+
+export * from "./Modal";
diff --git a/components/shared/Modal/modal.stories.tsx b/components/shared/Modal/modal.stories.tsx
new file mode 100644
index 00000000..1f0172b8
--- /dev/null
+++ b/components/shared/Modal/modal.stories.tsx
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useArgs } from "@storybook/preview-api";
+
+import Modal, { ModalProps } from "./index";
+import Button from "../Button/v2";
+
+const meta: Meta<typeof Modal> = {
+  title: "General/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+  decorators: [
+    (Story, ctx) => {
+      const [, setArgs] = useArgs<typeof ctx.args>();
+
+      const onClose = () => {
+        ctx.args.onClose?.();
+        setArgs({ isOpen: false });
+      };
+
+      return (
+        <div className="flex justify-center">
+          <div className="w-3/4">
+            <Button onClick={() => setArgs({ isOpen: true })}>open</Button>
+            <Story args={{ ...ctx.args, onClose }} />
+          </div>
+        </div>
+      );
+    },
+  ],
+  args: {
+    isOpen: true,
+    size: "medium",
+    title: "Modal Title",
+    hideCloseIcon: false,
+    maskClosable: true,
+    children: <div>Modal Body</div>,
+    onClose: () => undefined,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ModalProps>;
+
+export const Primary: Story = {
+  render: (args) => <Modal {...args} />,
+};
diff --git a/components/shared/Modal/modal.test.tsx b/components/shared/Modal/modal.test.tsx
new file mode 100644
index 00000000..8ad58623
--- /dev/null
+++ b/components/shared/Modal/modal.test.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import Modal from ".";
+
+describe("Modal", () => {
+  it("should render Modal when isOpen is true", () => {
+    render(
+      <Modal isOpen title="Test Title">
+        Test Content
+      </Modal>
+    );
+    const modal = screen.getByRole("dialog");
+    expect(modal).toBeInTheDocument();
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+    expect(screen.getByText("Test Content")).toBeInTheDocument();
+  });
+
+  it("should not render Modal when isOpen is not setting", () => {
+    render(<Modal title="Test Title">Test Content</Modal>);
+    const modal = screen.queryByRole("dialog");
+    expect(modal).toBeNull();
+  });
+
+  it("should call onClose when close button is clicked", async () => {
+    const onClose = jest.fn();
+    render(
+      <Modal isOpen title="Test Title" onClose={onClose}>
+        Test Content
+      </Modal>
+    );
+    const closeIcon = screen.getByLabelText("close Test Title modal");
+    await userEvent.click(closeIcon);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("should not call onClose when clicking outside of the modal mask and maskClosable is false", async () => {
+    const onClose = jest.fn();
+    render(
+      <Modal isOpen title="Test Title" onClose={onClose} maskClosable={false}>
+        Test Content
+      </Modal>
+    );
+    const mask = screen.getByTestId("modal-mask");
+    await userEvent.click(mask);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("should call onClose when clicking outside of the modal mask and maskClosable is default", async () => {
+    const onClose = jest.fn();
+    render(
+      <Modal isOpen title="Test Title" onClose={onClose}>
+        Test Content
+      </Modal>
+    );
+    const mask = screen.getByTestId("modal-mask");
+    await userEvent.click(mask);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("should render the close icon when hideCloseIcon is setting", () => {
+    render(<Modal isOpen title="Test Title" hideCloseIcon />);
+    const closeIcon = screen.queryByLabelText("close Test Title modal");
+    expect(closeIcon).toBeNull();
+  });
+});
diff --git a/components/shared/Modalow/Body.tsx b/components/shared/Modalow/Body.tsx
deleted file mode 100644
index b3b741b6..00000000
--- a/components/shared/Modalow/Body.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ReactNode, ForwardRefRenderFunction, forwardRef } from "react";
-import { cn } from "@/lib/utils";
-
-interface BodyProps {
-  children: ReactNode;
-}
-const InternalBody: ForwardRefRenderFunction<HTMLDivElement, BodyProps> = (
-  props,
-  ref
-) => {
-  const { children, ...restProps } = props;
-
-  const dialogContentClassName = cn(
-    "modal__container__dialog__content",
-    "px-8 py-3 text-white"
-  );
-
-  return (
-    <div className={dialogContentClassName} ref={ref} {...restProps}>
-      {children}
-    </div>
-  );
-};
-
-const Body = forwardRef<HTMLDivElement, BodyProps>(InternalBody);
-export default Body;
diff --git a/components/shared/Modalow/Footer.tsx b/components/shared/Modalow/Footer.tsx
deleted file mode 100644
index d093dac1..00000000
--- a/components/shared/Modalow/Footer.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ReactNode, ForwardRefRenderFunction, forwardRef } from "react";
-import { cn } from "@/lib/utils";
-
-interface FooterProps {
-  footer?: ReactNode;
-}
-
-const InternalFooter: ForwardRefRenderFunction<HTMLDivElement, FooterProps> = (
-  props,
-  ref
-) => {
-  const { footer, ...restProps } = props;
-  const dialogFooterClassName = cn(
-    "modal__container__dialog__footer",
-    "flex px-8 py-3 justify-center w-full gap-2 flex-nowrap"
-  );
-
-  return (
-    <>
-      {footer && (
-        <div
-          className={dialogFooterClassName}
-          ref={ref}
-          {...restProps}
-          data-testid="footer"
-        >
-          {footer}
-        </div>
-      )}
-    </>
-  );
-};
-
-const Footer = forwardRef<HTMLDivElement, FooterProps>(InternalFooter);
-export default Footer;
diff --git a/components/shared/Modalow/Header.tsx b/components/shared/Modalow/Header.tsx
deleted file mode 100644
index 7796cdd3..00000000
--- a/components/shared/Modalow/Header.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { ForwardRefRenderFunction } from "react";
-import { cn } from "@/lib/utils";
-import { CloseIcon } from "./Icon";
-
-interface HeaderProps {
-  title: string;
-  hasTitle?: boolean;
-  hideCloseIcon?: boolean;
-  onClose: () => void;
-}
-
-const InternalHeader: ForwardRefRenderFunction<HTMLDivElement, HeaderProps> = (
-  props,
-  ref
-) => {
-  const {
-    title,
-    onClose,
-    hasTitle = false,
-    hideCloseIcon = false,
-    ...restProps
-  } = props;
-  const dialogHeaderClassName = cn(
-    "modal__container__dialog__header",
-    "px-8 py-3 flex justify-between items-center text-white"
-  );
-
-  return (
-    <>
-      {hasTitle && (
-        <>
-          <div className={dialogHeaderClassName} ref={ref} {...restProps}>
-            {title}
-            {!hideCloseIcon && (
-              <div
-                className="cursor-pointer h-3 w-3"
-                onClick={onClose}
-                data-testid="close-icon"
-              >
-                <CloseIcon />
-              </div>
-            )}
-          </div>
-          <hr className="border-black" />
-        </>
-      )}
-    </>
-  );
-};
-
-const Header = React.forwardRef<HTMLDivElement, HeaderProps>(InternalHeader);
-export default Header;
diff --git a/components/shared/Modalow/Icon.tsx b/components/shared/Modalow/Icon.tsx
deleted file mode 100644
index 8c1308c0..00000000
--- a/components/shared/Modalow/Icon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-export const CloseIcon = () => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 34 34"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M0 0H33.734V33.734H0V0Z" fill="white" fillOpacity="0.01" />
-    <path
-      d="M5.62256 5.62231L28.1119 28.1116"
-      stroke="white"
-      strokeWidth="2.81116"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M5.62256 28.1116L28.1119 5.62231"
-      stroke="white"
-      strokeWidth="2.81116"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
diff --git a/components/shared/Modalow/Mask.tsx b/components/shared/Modalow/Mask.tsx
deleted file mode 100644
index 5c2aa412..00000000
--- a/components/shared/Modalow/Mask.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { ForwardRefRenderFunction } from "react";
-import { cn } from "@/lib/utils";
-import styles from "./modal.module.css";
-
-interface MaskProps {
-  isOpen: boolean;
-  hasMask?: boolean;
-  maskClosable?: boolean;
-  onClose: () => void;
-}
-
-const InternalMask: ForwardRefRenderFunction<HTMLDivElement, MaskProps> = (
-  props,
-  ref
-) => {
-  const {
-    isOpen,
-    hasMask = true,
-    maskClosable = true,
-    onClose,
-    ...restProps
-  } = props;
-
-  const maskClassName = cn(
-    "modal__mask",
-    isOpen ? styles.showMask : styles.hideMask,
-    hasMask
-      ? "fixed top-0 left-0 w-screen h-screen bg-black bg-opacity-60 z-10"
-      : "fixed top-0 left-0 w-screen h-screen z-10"
-  );
-
-  return (
-    <div
-      ref={ref}
-      className={maskClassName}
-      onClick={maskClosable ? onClose : undefined}
-      {...restProps}
-    />
-  );
-};
-
-const Mask = React.forwardRef<HTMLDivElement, MaskProps>(InternalMask);
-export default Mask;
diff --git a/components/shared/Modalow/Modalow.stories.tsx b/components/shared/Modalow/Modalow.stories.tsx
deleted file mode 100644
index bd89de12..00000000
--- a/components/shared/Modalow/Modalow.stories.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Modalow, { ModalProps } from "./index";
-import Button from "../Button";
-import Input from "../Input";
-import { useCallback, useState } from "react";
-
-const meta: Meta<typeof Modalow> = {
-  title: "General/Modalow",
-  component: Modalow,
-};
-
-export default meta;
-type Story = StoryObj<ModalProps>;
-
-export const Primary: Story = {
-  args: {
-    // isOpen: true,
-    size: "medium",
-    fullScreen: false,
-    title: "Title",
-    hideCloseIcon: false,
-    hasTitle: true,
-    hasMask: true,
-    maskClosable: true,
-    children: (
-      <Input className="w-full" value="" placeholder="我說第二誰敢第一?" />
-    ),
-    footer: <Button>確認新增房間</Button>,
-  },
-  render: (args) => {
-    const {
-      // isOpen,
-      size,
-      fullScreen,
-      title,
-      hideCloseIcon,
-      hasTitle,
-      hasMask,
-      maskClosable,
-      children,
-      footer,
-    } = args;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [open, setOpen] = useState(false);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const onClose = useCallback(() => setOpen(false), []);
-
-    return (
-      <>
-        <Button onClick={() => setOpen(true)}>open</Button>
-        <Modalow
-          hasTitle={hasTitle}
-          footer={footer}
-          fullScreen={fullScreen}
-          maskClosable={maskClosable}
-          hideCloseIcon={hideCloseIcon}
-          hasMask={hasMask}
-          isOpen={open}
-          title={title}
-          onClose={onClose}
-          size={size}
-        >
-          {children}
-        </Modalow>
-      </>
-    );
-  },
-};
diff --git a/components/shared/Modalow/Modalow.tsx b/components/shared/Modalow/Modalow.tsx
deleted file mode 100644
index 122d10d2..00000000
--- a/components/shared/Modalow/Modalow.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import React, {
-  useState,
-  useEffect,
-  ForwardRefRenderFunction,
-  forwardRef,
-} from "react";
-import { cn } from "@/lib/utils";
-import Portal from "../Portal/Portal";
-import styles from "./modal.module.css";
-import Header from "./Header";
-import Footer from "./Footer";
-import Mask from "./Mask";
-import Body from "./Body";
-
-enum ModalSizeVariant {
-  small = "small",
-  medium = "medium",
-  large = "large",
-  xLarge = "xLarge",
-  extraLarge = "extraLarge",
-}
-export interface ModalProps {
-  isOpen: boolean;
-  size?: keyof typeof ModalSizeVariant;
-  fullScreen?: boolean;
-  title?: string;
-  hideCloseIcon?: boolean;
-  hasTitle?: boolean;
-  hasMask?: boolean;
-  maskClosable?: boolean;
-  children: React.ReactNode;
-  footer?: React.ReactNode;
-  onClose: () => void;
-}
-
-const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
-  props,
-  ref
-) => {
-  const {
-    isOpen,
-    size = "medium",
-    fullScreen = false,
-    title = "title",
-    hideCloseIcon = false,
-    hasTitle = true,
-    hasMask = true,
-    maskClosable = true,
-    children,
-    footer,
-    onClose,
-    ...restProps
-  } = props;
-
-  const [removeDOM, setRemoveDOM] = useState(!isOpen);
-
-  useEffect(() => {
-    if (isOpen) {
-      setRemoveDOM(false);
-    } else {
-      setTimeout(() => {
-        setRemoveDOM(true);
-      }, 200);
-    }
-  }, [isOpen]);
-
-  const sizeVariants: Record<ModalSizeVariant, string> = {
-    small: "max-w-[320px]",
-    medium: "max-w-[460px]",
-    large: " max-w-[600px]",
-    xLarge: "max-w-[960px]",
-    extraLarge: "max-w-[1100px]",
-  };
-
-  const dialogContainerClassName = cn(
-    "modal__container",
-    fullScreen
-      ? "fixed z-20 top-0 left-0"
-      : "fixed z-20 top-1/2 left-1/2 transform -translate-x-1/2  -translate-y-1/2"
-  );
-
-  const dialogClassName = cn(
-    "modal__container__dialog",
-    "flex flex-col w-[90vw] drop-shadow-md",
-    styles.modal__dialog, // manually style
-    isOpen ? styles.showDialog : styles.hideDialog,
-    fullScreen ? "w-screen h-screen" : sizeVariants[size]
-  );
-
-  return (
-    <>
-      {!removeDOM && (
-        <Portal>
-          <Mask
-            data-testid="modal-mask"
-            isOpen={isOpen}
-            hasMask={hasMask}
-            onClose={onClose}
-            maskClosable={maskClosable}
-          />
-          <div
-            className={dialogContainerClassName}
-            data-testid="modal-container"
-          >
-            <div
-              className={dialogClassName}
-              ref={ref}
-              {...restProps}
-              data-testid="modal"
-            >
-              <Header
-                title={title}
-                hasTitle={hasTitle}
-                onClose={onClose}
-                hideCloseIcon={hideCloseIcon}
-              />
-              <Body>{children}</Body>
-              <Footer footer={footer} />
-            </div>
-          </div>
-        </Portal>
-      )}
-    </>
-  );
-};
-
-export const Modalow = forwardRef<HTMLDivElement, ModalProps>(InternalModal);
diff --git a/components/shared/Modalow/index.tsx b/components/shared/Modalow/index.tsx
deleted file mode 100644
index cdaf3141..00000000
--- a/components/shared/Modalow/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Modalow } from "./Modalow";
-
-export * from "./Modalow";
-
-export default Modalow;
diff --git a/components/shared/Modalow/modal.module.css b/components/shared/Modalow/modal.module.css
deleted file mode 100644
index 4818b8a5..00000000
--- a/components/shared/Modalow/modal.module.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.modal__dialog {
-  background: #292a2d;
-  border-radius: 10px;
-}
-
-@keyframes showMaskAnime {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes hideMaskAnime {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-.hideMask {
-  animation: hideMaskAnime 200ms ease-in-out forwards;
-}
-
-.showMask {
-  animation: showMaskAnime 200ms ease-in-out forwards;
-}
-
-@keyframes showDialogAnime {
-  0% {
-    transform: translate3d(0, -100%, 0);
-    opacity: 0;
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes hideDialogAnime {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate3d(0, -100%, 0);
-    opacity: 0;
-  }
-}
-
-.hideDialog {
-  animation: hideDialogAnime 200ms ease-in-out forwards;
-}
-
-.showDialog {
-  animation: showDialogAnime 200ms ease-in-out forwards;
-}
diff --git a/components/shared/Modalow/modalow.test.tsx b/components/shared/Modalow/modalow.test.tsx
deleted file mode 100644
index 63524c5b..00000000
--- a/components/shared/Modalow/modalow.test.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import { render, fireEvent, screen } from "@testing-library/react";
-import { ModalProps, Modalow } from "./Modalow";
-import React from "react";
-import userEvent from "@testing-library/user-event";
-
-const modalProps: ModalProps = {
-  isOpen: true,
-  title: "Test Modal",
-  onClose: () => {},
-  children: <div>Test Content</div>,
-};
-
-describe("Modal", () => {
-  /**
-   * Rendering test
-   */
-  it("should render Modal with default props", () => {
-    render(<Modalow {...modalProps} />);
-    const modal = screen.getByTestId("modal");
-    expect(modal).toBeInTheDocument();
-    expect(modal).toHaveClass("modal__container__dialog");
-    expect(screen.getByText("Test Modal")).toBeInTheDocument();
-    expect(screen.getByText("Test Content")).toBeInTheDocument();
-  });
-
-  it("should not render Modal when isOpen is false", () => {
-    render(<Modalow {...modalProps} isOpen={false} />);
-    const modal = screen.queryByTestId("modal"); // use queryByTestId instead of getByTestId
-    expect(modal).toBeNull();
-  });
-
-  /**
-   * onClost test
-   */
-  it("should call onClose when close icon is clicked", async () => {
-    const modalProps: ModalProps = {
-      isOpen: true,
-      title: "Test Modal",
-      onClose: jest.fn(),
-      children: <div>Test Content</div>,
-    };
-    render(<Modalow {...modalProps} />);
-    const closeIcon = screen.getByTestId("close-icon");
-    await userEvent.click(closeIcon);
-    expect(modalProps.onClose).toHaveBeenCalled();
-  });
-  /**
-   * maskClosable test
-   */
-  it("should not call onClose when clicking outside of the modal mask", async () => {
-    const modalProps: ModalProps = {
-      isOpen: true,
-      title: "Test Modal",
-      onClose: jest.fn(),
-      children: <div>Test Content</div>,
-      maskClosable: false,
-    };
-    render(<Modalow {...modalProps} />);
-    const mask = screen.getByTestId("modal-mask");
-    await userEvent.click(mask);
-    expect(modalProps.onClose).not.toHaveBeenCalled();
-  });
-
-  it("should call onClose when clicking outside of the modal mask", async () => {
-    const modalProps: ModalProps = {
-      isOpen: true,
-      title: "Test Modal",
-      onClose: jest.fn(),
-      children: <div>Test Content</div>,
-      maskClosable: true,
-    };
-    render(<Modalow {...modalProps} />);
-    const mask = screen.getByTestId("modal-mask");
-    await userEvent.click(mask);
-    expect(modalProps.onClose).toHaveBeenCalled();
-  });
-  /**
-   * hasTitle test
-   */
-  it("should render the modal title when hasTitle is true", () => {
-    const modalProps = {
-      isOpen: true,
-      title: "Test Modal",
-      hasTitle: true,
-      onClose: jest.fn(),
-      children: <div>Modal Content</div>,
-    };
-    render(<Modalow {...modalProps} />);
-    const title = screen.getByText("Test Modal");
-    expect(title).toBeInTheDocument();
-  });
-
-  it("should not render the modal title when hasTitle is false", () => {
-    const modalProps = {
-      isOpen: true,
-      title: "Test Modal",
-      hasTitle: false,
-      onClose: jest.fn(),
-      children: <div>Modal Content</div>,
-    };
-    render(<Modalow {...modalProps} />);
-    const title = screen.queryByText("Test Modal");
-    expect(title).not.toBeInTheDocument();
-  });
-  /**
-   * hideCloseIcon test
-   */
-  it("should render the close icon when hideCloseIcon is false", () => {
-    const modalProps = {
-      isOpen: true,
-      title: "Test Modal",
-      hideCloseIcon: false,
-      onClose: jest.fn(),
-      children: <div>Modal Content</div>,
-    };
-    render(<Modalow {...modalProps} />);
-    const closeIcon = screen.getByTestId("close-icon");
-    expect(closeIcon).toBeInTheDocument();
-  });
-
-  it("should not render the close icon when hideCloseIcon is true", () => {
-    const modalProps = {
-      isOpen: true,
-      title: "Test Modal",
-      hideCloseIcon: true,
-      onClose: jest.fn(),
-      children: <div>Modal Content</div>,
-    };
-    render(<Modalow {...modalProps} />);
-    const closeIcon = screen.queryByTestId("close-icon"); // use queryByTestId instead of getByTestId
-    expect(closeIcon).not.toBeInTheDocument();
-  });
-  /**
-   * fullScreen test
-   */
-  it("should add `w-screen h-screen` class and remove `transform -translate-x-1/2` class when fullScreen is true", () => {
-    const modalProps = {
-      isOpen: true,
-      title: "Test Modal",
-      onClose: jest.fn(),
-      children: <div>Modal Content</div>,
-      fullScreen: true,
-    };
-    render(<Modalow {...modalProps} />);
-    const modalContainer = screen.getByTestId("modal-container");
-    const modal = screen.getByTestId("modal");
-
-    expect(modalContainer).not.toHaveClass("transform");
-    expect(modalContainer).not.toHaveClass("-translate-x-1/2");
-
-    expect(modal).toHaveClass("w-screen");
-    expect(modal).toHaveClass("h-screen");
-  });
-
-  it("should add `transform -translate-x-1/2` class and remove `w-screen h-screen` class when fullScreen is false", () => {
-    const modalProps = {
-      isOpen: true,
-      title: "Test Modal",
-      onClose: jest.fn(),
-      children: <div>Modal Content</div>,
-      fullScreen: false,
-    };
-    render(<Modalow {...modalProps} />);
-    const modalContainer = screen.getByTestId("modal-container");
-    const modal = screen.getByTestId("modal");
-
-    expect(modalContainer).toHaveClass("transform");
-    expect(modalContainer).toHaveClass("-translate-x-1/2");
-
-    expect(modal).not.toHaveClass("w-screen");
-    expect(modal).not.toHaveClass("h-screen");
-  });
-  /**
-   * footer test
-   */
-  it("should render the footer when footer prop is provided", () => {
-    const modalProps = {
-      isOpen: true,
-      title: "Test Modal",
-      onClose: jest.fn(),
-      children: <div>Modal Content</div>,
-      footer: <div>Modal Footer</div>,
-    };
-    render(<Modalow {...modalProps} />);
-    const footer = screen.getByText("Modal Footer");
-    expect(footer).toBeInTheDocument();
-  });
-
-  it("should not render the footer when footer prop is not provided", () => {
-    const modalProps = {
-      isOpen: true,
-      title: "Test Modal",
-      onClose: jest.fn(),
-      children: <div>Modal Content</div>,
-    };
-    render(<Modalow {...modalProps} />);
-    const footer = screen.queryByText("Modal Footer");
-    expect(footer).not.toBeInTheDocument();
-  });
-  /**
-   * hasMask test
-   */
-  it("should render the mask when hasMask is true", () => {
-    const modalProps = {
-      isOpen: true,
-      title: "Test Modal",
-      onClose: jest.fn(),
-      children: <div>Modal Content</div>,
-      hasMask: true,
-    };
-    render(<Modalow {...modalProps} />);
-    const mask = screen.getByTestId("modal-mask");
-    expect(mask).toHaveClass("bg-black");
-  });
-
-  it("should not render the mask when hasMask is false", () => {
-    const modalProps = {
-      isOpen: true,
-      title: "Test Modal",
-      onClose: jest.fn(),
-      children: <div>Modal Content</div>,
-      hasMask: false,
-    };
-    render(<Modalow {...modalProps} />);
-    const mask = screen.getByTestId("modal-mask");
-    expect(mask).not.toHaveClass("bg-black");
-  });
-});
diff --git a/hooks/usePopup.tsx b/hooks/usePopup.tsx
index 1840c17c..01d13fef 100644
--- a/hooks/usePopup.tsx
+++ b/hooks/usePopup.tsx
@@ -1,4 +1,4 @@
-import Modalow, { ModalProps } from "@/components/shared/Modalow";
+import Modal, { ModalProps } from "@/components/shared/Modal";
 import Button from "@/components/shared/Button";
 import { useState, useEffect, useCallback, useMemo } from "react";
 interface PopupConfig extends Pick<ModalProps, "isOpen"> {
@@ -71,8 +71,7 @@ export default function usePopup() {
   const Popup = useMemo(() => {
     function PopupComponent() {
       return (
-        <Modalow
-          hasTitle={false}
+        <Modal
           isOpen={popupConfig.isOpen}
           onClose={handleClose}
           maskClosable={false}
@@ -84,7 +83,7 @@ export default function usePopup() {
             )}
             <Button onClick={handleConfirm}>確定</Button>
           </div>
-        </Modalow>
+        </Modal>
       );
     }
     return PopupComponent;

From 56040c1301924aae8e2295bd7ac23bc4dff8d149 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Tue, 29 Oct 2024 22:26:37 +0800
Subject: [PATCH 07/27] chore: modify modal size and create room modal title

---
 components/lobby/CreateRoomModal/CreateRoomModal.tsx | 2 +-
 components/shared/Modal/Modal.tsx                    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/lobby/CreateRoomModal/CreateRoomModal.tsx b/components/lobby/CreateRoomModal/CreateRoomModal.tsx
index fd2b744e..19827b06 100644
--- a/components/lobby/CreateRoomModal/CreateRoomModal.tsx
+++ b/components/lobby/CreateRoomModal/CreateRoomModal.tsx
@@ -108,7 +108,7 @@ export default function CreateRoomModal({ tabIndex }: { tabIndex: number }) {
         開設新房間
       </button>
       <Modal
-        title="create-room"
+        title="開新房間"
         isOpen={showThisModal}
         onClose={handleCloseModal}
         size="medium"
diff --git a/components/shared/Modal/Modal.tsx b/components/shared/Modal/Modal.tsx
index 63eded46..4d66f178 100644
--- a/components/shared/Modal/Modal.tsx
+++ b/components/shared/Modal/Modal.tsx
@@ -21,8 +21,8 @@ const containerSizeMap: Record<ModalSizeVariant, string> = {
 };
 
 const dialogSize: Record<ModalSizeVariant, string> = {
-  small: "w-80",
-  medium: "w-[460px]",
+  small: "w-[398px]",
+  medium: "w-[564px]",
 };
 
 export interface ModalProps {

From 6febfb1e761269313ed7806677bb0cac94183e14 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Wed, 30 Oct 2024 22:52:46 +0800
Subject: [PATCH 08/27] feat: update input component

---
 components/lobby/UserInfoModal.tsx            |   4 +-
 components/shared/Icon/icon.stories.tsx       |   6 +-
 components/shared/Input/Input.tsx             | 158 +++++++-----------
 components/shared/Input/index.tsx             |   4 +-
 components/shared/Input/input.stories.tsx     |  44 ++---
 components/shared/Input/input.test.tsx        |  75 ++++-----
 .../shared/PasswordField/PasswordField.tsx    |   3 +-
 7 files changed, 110 insertions(+), 184 deletions(-)

diff --git a/components/lobby/UserInfoModal.tsx b/components/lobby/UserInfoModal.tsx
index 8cdbe819..b9899e83 100644
--- a/components/lobby/UserInfoModal.tsx
+++ b/components/lobby/UserInfoModal.tsx
@@ -149,11 +149,11 @@ const UserInfoModal: FC<UserInfoModalProps> = ({ isOpen, onClose }) => {
                           "rounded-[10px] w-full border border-dark29",
                           "focus:border-blue2f transition-[border-color] duration-300 ease-in-out"
                         )}
-                        errorClassName={cn("w-full flex justify-end")}
+                        hintTextClassName={cn("w-full flex justify-end")}
                         value={userInfo.nickname}
                         onChange={handleNicknameChange}
                         error={hasError}
-                        errorMessage={errorMsg.nickname}
+                        hintText={errorMsg.nickname}
                       />
                     </div>
                   ) : (
diff --git a/components/shared/Icon/icon.stories.tsx b/components/shared/Icon/icon.stories.tsx
index 03e835a4..b1736861 100644
--- a/components/shared/Icon/icon.stories.tsx
+++ b/components/shared/Icon/icon.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { MouseEventHandler, useState } from "react";
 
 import { keys } from "@/lib/utils";
-import { Input } from "@/components/shared/Input";
+import Input from "@/components/shared/Input";
 import { ToastQueueProvider, useToast } from "@/components/shared/Toast";
 import * as icons from "./icons";
 import Icon from "./Icon";
@@ -59,8 +59,8 @@ const AllIcons = () => {
         label="搜尋"
         value={value}
         onChange={setValue}
-        labelClassName="mr-3 leading-normal"
-        inputClassName="border-white/90"
+        className="flex items-center gap-4"
+        inputWrapperClassName="px-2 py-1"
       />
       <div
         className="px-6 w-full h-96 grid place-content-start gap-4 overflow-auto"
diff --git a/components/shared/Input/Input.tsx b/components/shared/Input/Input.tsx
index 7322a11a..62e16878 100644
--- a/components/shared/Input/Input.tsx
+++ b/components/shared/Input/Input.tsx
@@ -1,7 +1,5 @@
-import type { ClassValue } from "clsx";
 import {
   ChangeEvent,
-  ForwardedRef,
   ForwardRefRenderFunction,
   InputHTMLAttributes,
   ReactNode,
@@ -18,7 +16,7 @@ export type ChangeHandler = (
 interface InputProps
   extends Omit<
     InputHTMLAttributes<HTMLInputElement>,
-    "maxLength" | "prefix" | "className" | "onChange"
+    "prefix" | "className" | "onChange"
   > {
   /** The current value of the input */
   value?: string;
@@ -29,26 +27,17 @@ interface InputProps
   /** The label text */
   label?: string;
 
-  /** The ref object used to access the underlying HTMLInputElement */
-  inputRef?: ForwardedRef<HTMLInputElement>;
-
   /** If `true`, the input will be in disabled mode */
   disabled?: boolean;
 
-  /** If `true`, the input will be in read only mode */
-  readOnly?: boolean;
-
   /** If `true`, the input will be in required mode */
   required?: boolean;
 
   /** If `true`, the input will display an error style */
   error?: boolean;
 
-  /** Display error message */
-  errorMessage?: string | string[];
-
-  /** Display the current length of the value and the maximum length */
-  maxLength?: string | number;
+  /** Display hint text */
+  hintText?: string;
 
   /** Input prefix */
   prefix?: ReactNode;
@@ -57,19 +46,19 @@ interface InputProps
   suffix?: ReactNode;
 
   /** For root class name */
-  className?: ClassValue;
+  className?: string;
 
   /** For label class name */
-  labelClassName?: ClassValue;
+  labelClassName?: string;
 
   /** For input class name */
-  inputClassName?: ClassValue;
+  inputClassName?: string;
 
-  /** For error message class name */
-  errorClassName?: ClassValue;
+  /** For input wrapper class name */
+  inputWrapperClassName?: string;
 
-  /** For error message class name */
-  maxLengthClassName?: ClassValue;
+  /** For hint text message class name */
+  hintTextClassName?: string;
 
   /**
    * Callback function that is called when the value of the input changes.
@@ -83,20 +72,17 @@ const InteralInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
   {
     value,
     label,
-    inputRef,
     disabled,
-    readOnly,
     required,
     error,
-    errorMessage,
-    maxLength,
+    hintText,
     prefix,
     suffix,
     className,
-    labelClassName: labelClassNameProp,
-    inputClassName: inputClassNameProp,
-    errorClassName: errorClassNameProp,
-    maxLengthClassName: maxLengthClassNameProp,
+    labelClassName,
+    inputClassName,
+    inputWrapperClassName,
+    hintTextClassName,
     onChange,
     ...attributes
   },
@@ -104,49 +90,7 @@ const InteralInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
 ) => {
   const reactId = useId();
 
-  const inputAttributes: InputHTMLAttributes<HTMLInputElement> = {
-    value,
-    disabled,
-    readOnly,
-    required,
-    "aria-disabled": disabled,
-    "aria-readonly": readOnly,
-    "aria-required": required,
-    ...attributes,
-  };
-
-  const inputId = inputAttributes.id || `input_${reactId}`;
-
-  const rootClassName = cn(
-    "relative flex items-center gap-2 text-white/90",
-    error && "border-red-500 outline-red-500/20",
-    disabled && "opacity-50 pointer-events-none",
-    className
-  );
-
-  const inputClassName = cn(
-    "px-3 py-0.5 flex-[3] box-border bg-[#1E1F22] border-2 border-[#1E1F22] rounded-[10px] transition-[border] duration-200 ease-in focus:border-[#2F88FF]/60 focus:outline-none",
-    error && "border-[#CC2431]",
-    inputClassNameProp
-  );
-
-  const labelClassName = cn(
-    "pl-1 flex-1 border-l-4 border-l-[#2F88FF] font-black leading-tight select-none transition-[border] duration-200 ease-in",
-    error && "border-l-[#CC2431]",
-    labelClassNameProp
-  );
-
-  const errorClassName = cn(
-    "ml-2 text-white/90 text-sm",
-    error && "text-[#CC2431]",
-    errorClassNameProp
-  );
-
-  const maxLengthClassName = cn(
-    "absolute bottom-0.5 right-1.5 text-xs text-white/60",
-    value && value.length > Number(maxLength) && "text-[#CC2431]/80",
-    maxLengthClassNameProp
-  );
+  const inputId = attributes.id || `input_${reactId}`;
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
@@ -155,41 +99,61 @@ const InteralInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
   };
 
   return (
-    <>
-      <div ref={ref} className={rootClassName}>
-        {label && (
-          <label htmlFor={inputId} className={labelClassName}>
-            {label}
-          </label>
+    <div className={cn(disabled && "pointer-events-none", className)}>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={cn(
+            "block mb-1 font-medium text-primary-200",
+            labelClassName
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <div
+        className={cn(
+          "mb-1 px-4 py-2 box-border inline-flex gap-2.5",
+          "leading-tight bg-primary-200/20 placeholder:text-primary-300",
+          "border-2 border-transparent focus:border-primary-200 rounded-lg",
+          disabled && "bg-grey-800",
+          error && "border-error-300",
+          inputWrapperClassName
         )}
+      >
         {prefix}
         <input
-          ref={inputRef}
+          ref={ref}
           id={inputId}
-          className={inputClassName}
+          className={cn(
+            "bg-transparent focus:outline-none",
+            "disabled:text-grey-400 disabled:placeholder:text-grey-400",
+            error && "placeholder:text-error-300",
+            inputClassName
+          )}
           onChange={handleChange}
-          {...inputAttributes}
+          value={value}
+          disabled={disabled}
+          required={required}
+          {...attributes}
         />
         {suffix}
-        {value && maxLength && (
-          <div className={maxLengthClassName}>
-            {value.length} / {maxLength}
-          </div>
-        )}
       </div>
-      {errorMessage && (
-        <div className={errorClassName}>
-          {Array.isArray(errorMessage)
-            ? errorMessage.map((message) => (
-                <div key={message} className="leading-tight">
-                  {message}
-                </div>
-              ))
-            : errorMessage}
+      {hintText && (
+        <div
+          className={cn(
+            "text-grey-500 text-sm",
+            error && "text-error-300",
+            hintTextClassName
+          )}
+        >
+          {hintText}
         </div>
       )}
-    </>
+    </div>
   );
 };
 
-export const Input = forwardRef(InteralInput);
+const Input = forwardRef(InteralInput);
+
+export default Input;
diff --git a/components/shared/Input/index.tsx b/components/shared/Input/index.tsx
index 776da69b..d72cf2ce 100644
--- a/components/shared/Input/index.tsx
+++ b/components/shared/Input/index.tsx
@@ -1,5 +1,3 @@
-import { Input } from "./Input";
+export { default } from "./Input";
 
 export * from "./Input";
-
-export default Input;
diff --git a/components/shared/Input/input.stories.tsx b/components/shared/Input/input.stories.tsx
index c08e12c8..38ee9007 100644
--- a/components/shared/Input/input.stories.tsx
+++ b/components/shared/Input/input.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { useArgs } from "@storybook/preview-api";
 
 import Input, { ChangeHandler } from ".";
+import Icon from "../Icon";
 
 const meta: Meta<typeof Input> = {
   title: "Data Entry/Input",
@@ -31,18 +32,15 @@ const meta: Meta<typeof Input> = {
   ],
   args: {
     label: "Label Name",
+    value: "value",
+    hintText: "Hint Text",
+    placeholder: "Placeholder",
   },
   argTypes: {
-    prefix: {
-      type: "string",
-    },
-    suffix: {
-      type: "string",
-    },
     maxLength: {
       type: "number",
     },
-    errorMessage: {
+    hintText: {
       type: "string",
     },
     onChange: {
@@ -67,47 +65,27 @@ Disabled.args = {
   disabled: true,
 };
 
-export const ReadOnly: Story = {
-  render: (args) => <Input {...args} />,
-};
-
-ReadOnly.args = {
-  readOnly: true,
-};
-
-export const ErrorAndMessage: Story = {
+export const HintAndError: Story = {
   render: (args) => (
     <div className="flex flex-col gap-2">
       <Input {...args} />
-      <Input errorMessage="message is error" {...args} />
-      <Input errorMessage={["message-1", "message-2"]} {...args} />
     </div>
   ),
 };
 
-ErrorAndMessage.args = {
+HintAndError.args = {
   error: true,
 };
 
-export const MaxLength: Story = {
+export const PrefixAndSuffix: Story = {
   render: (args) => (
     <div className="flex flex-col gap-2">
       <Input {...args} />
-      <Input value="測試" {...args} />
-      <Input value="測試輸入七個字" {...args} />
     </div>
   ),
 };
 
-MaxLength.args = {
-  maxLength: 5,
-};
-
-export const PrefixAndSuffix: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-2">
-      <Input prefix="🎉" inputClassName="ml-0.5 mr-8" {...args} />
-      <Input suffix="🎵" inputClassName="mr-0.5 ml-8" {...args} />
-    </div>
-  ),
+PrefixAndSuffix.args = {
+  prefix: "🎉",
+  suffix: <Icon name="Calendar" className="w-5 h-5" />,
 };
diff --git a/components/shared/Input/input.test.tsx b/components/shared/Input/input.test.tsx
index 87644258..a8ad73e9 100644
--- a/components/shared/Input/input.test.tsx
+++ b/components/shared/Input/input.test.tsx
@@ -44,8 +44,8 @@ describe("Input", () => {
     const rootClassName = "test-root";
     const labelClassName = "test-label";
     const inputClassName = "test-input";
-    const errorClassName = "test-error";
-    const maxLengthClassName = "test-error";
+    const inputWrapperClassName = "test-input-wrapper";
+    const hintTextClassName = "test-error";
 
     const { container } = render(
       <Input
@@ -53,26 +53,25 @@ describe("Input", () => {
         label="label"
         maxLength={1}
         error
-        errorMessage="error message"
+        hintText="hint text"
         className={rootClassName}
         labelClassName={labelClassName}
         inputClassName={inputClassName}
-        errorClassName={errorClassName}
-        maxLengthClassName={maxLengthClassName}
+        inputWrapperClassName={inputWrapperClassName}
+        hintTextClassName={hintTextClassName}
       />
     );
 
     const rootElement = container.querySelector("div");
     const inputElement = container.querySelector("input");
     const labelElement = container.querySelector("label");
-    const errorElement = screen.getByText("error message");
-    const maxLengthElement = container.querySelector("div.absolute");
+    const hintTextElement = screen.getByText("hint text");
 
     expect(rootElement).toHaveClass(rootClassName);
     expect(labelElement).toHaveClass(labelClassName);
     expect(inputElement).toHaveClass(inputClassName);
-    expect(errorElement).toHaveClass(errorClassName);
-    expect(maxLengthElement).toHaveClass(maxLengthClassName);
+    expect(labelElement?.nextElementSibling).toHaveClass(inputWrapperClassName);
+    expect(hintTextElement).toHaveClass(hintTextClassName);
   });
 
   it("should render prefix and suffix", async () => {
@@ -88,46 +87,34 @@ describe("Input", () => {
     expect(suffix).toBeInTheDocument();
   });
 
-  it.each([["disabled"], ["readonly"]])(
-    "should not call onChange when input is typed in %s mode",
-    async (mode) => {
-      const isDisabled = mode === "disabled";
-      const isReadOnly = mode === "readonly";
-      const initValue = "test";
-      const mockChange = jest.fn();
-
-      const ControllerComponent = () => {
-        const [value, setValue] = useState(initValue);
-        const handleChange: ChangeHandler = (v, e) => {
-          setValue(v);
-          mockChange(v, e);
-        };
-
-        return (
-          <Input
-            value={value}
-            onChange={handleChange}
-            disabled={isDisabled}
-            readOnly={isReadOnly}
-          />
-        );
+  it("should not call onChange when input is typed in disabled mode", async () => {
+    const initValue = "test";
+    const mockChange = jest.fn();
+
+    const ControllerComponent = () => {
+      const [value, setValue] = useState(initValue);
+      const handleChange: ChangeHandler = (v, e) => {
+        setValue(v);
+        mockChange(v, e);
       };
 
-      render(<ControllerComponent />);
+      return <Input value={value} onChange={handleChange} disabled />;
+    };
 
-      const inputElement = screen.getByRole<HTMLInputElement>("textbox");
+    render(<ControllerComponent />);
 
-      if (isDisabled) expect(inputElement).toBeDisabled();
-      expect(inputElement.value).toBe(initValue);
+    const inputElement = screen.getByRole<HTMLInputElement>("textbox");
 
-      const typingValue = "value";
+    expect(inputElement).toBeDisabled();
+    expect(inputElement.value).toBe(initValue);
 
-      await act(async () => {
-        await userEvent.type(inputElement, typingValue);
-      });
+    const typingValue = "value";
 
-      expect(mockChange).not.toHaveBeenCalled();
-      expect(inputElement.value).toBe(initValue);
-    }
-  );
+    await act(async () => {
+      await userEvent.type(inputElement, typingValue);
+    });
+
+    expect(mockChange).not.toHaveBeenCalled();
+    expect(inputElement.value).toBe(initValue);
+  });
 });
diff --git a/components/shared/PasswordField/PasswordField.tsx b/components/shared/PasswordField/PasswordField.tsx
index ce97f953..20553f7e 100644
--- a/components/shared/PasswordField/PasswordField.tsx
+++ b/components/shared/PasswordField/PasswordField.tsx
@@ -94,12 +94,11 @@ const PasswordField: FC<PasswordFieldProps> = ({
           <div key={index}>
             <Input
               id={`input-password-${index}`}
-              inputRef={(element) => (passwordRefs.current[index] = element)}
+              ref={(element) => (passwordRefs.current[index] = element)}
               type="text"
               maxLength={1}
               inputClassName="w-[34px] aspect-square rounded-[10px] text-[#2F88FF] text-center cursor-default caret-transparent p-0"
               value={password}
-              maxLengthClassName="hidden"
               onKeyUp={(e) => handlePasswordKeyUp(e, index)}
               onClick={(event) => {
                 event.stopPropagation(); // 防止冒泡到父層的onClick

From 8a0970301c6b9deddd39dada88148aeb9f886a9b Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Thu, 31 Oct 2024 19:18:41 +0800
Subject: [PATCH 09/27] feat(common): add select box group component

---
 .../shared/SelectBoxGroup/SelectBoxGroup.tsx  | 91 +++++++++++++++++++
 components/shared/SelectBoxGroup/index.tsx    |  3 +
 .../SelectBoxGroup/selectBoxGroup.stories.tsx | 57 ++++++++++++
 .../SelectBoxGroup/selectBoxGroup.test.tsx    | 72 +++++++++++++++
 4 files changed, 223 insertions(+)
 create mode 100644 components/shared/SelectBoxGroup/SelectBoxGroup.tsx
 create mode 100644 components/shared/SelectBoxGroup/index.tsx
 create mode 100644 components/shared/SelectBoxGroup/selectBoxGroup.stories.tsx
 create mode 100644 components/shared/SelectBoxGroup/selectBoxGroup.test.tsx

diff --git a/components/shared/SelectBoxGroup/SelectBoxGroup.tsx b/components/shared/SelectBoxGroup/SelectBoxGroup.tsx
new file mode 100644
index 00000000..c18bf56c
--- /dev/null
+++ b/components/shared/SelectBoxGroup/SelectBoxGroup.tsx
@@ -0,0 +1,91 @@
+import { Key, ReactNode, useId } from "react";
+import { cn } from "@/lib/utils";
+
+interface Item<T> {
+  key: Key;
+  label: ReactNode;
+  value: T;
+}
+
+interface SelectBoxGroupProps<T> {
+  items: Item<T>[];
+
+  /** The current value of the input */
+  value?: T;
+
+  /** The label text */
+  label?: string;
+
+  /** For root class name */
+  className?: string;
+
+  /** For label class name */
+  labelClassName?: string;
+
+  /** For item class name */
+  itemClassName?: string;
+
+  /** For item wrapper class name */
+  itemWrapperClassName?: string;
+
+  /**
+   * Callback function that is called when the value of the input changes.
+   * @param value - The new value of the input.
+   */
+  onChange?: (value: T) => void;
+}
+
+function SelectBoxGroup<T = string>({
+  items,
+  value,
+  label,
+  className,
+  labelClassName,
+  itemClassName,
+  itemWrapperClassName,
+  onChange,
+}: SelectBoxGroupProps<T>) {
+  const reactId = useId();
+  const selectBoxId = `select_box_${reactId}`;
+
+  return (
+    <div className={className}>
+      {label && (
+        <label
+          className={cn(
+            "block mb-1 font-medium text-primary-200",
+            labelClassName
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <ul className={cn("inline-flex gap-2.5", itemWrapperClassName)}>
+        {items.map((item) => (
+          <li key={item.key} className={itemClassName}>
+            <label
+              className={cn(
+                "block box-border leading-tight text-primary-200 bg-primary-200/20",
+                "border-2 border-transparent rounded-lg cursor-pointer",
+                value === item.value && "border-primary-200 text-primary-50"
+              )}
+              htmlFor={`${selectBoxId}_${item.key}`}
+              aria-checked={value === item.value}
+            >
+              {item.label}
+            </label>
+            <input
+              type="checkbox"
+              id={`${selectBoxId}_${item.key}`}
+              checked={value === item.value}
+              className="absolute w-0 h-0 pointer-events-none"
+              onChange={() => onChange?.(item.value)}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default SelectBoxGroup;
diff --git a/components/shared/SelectBoxGroup/index.tsx b/components/shared/SelectBoxGroup/index.tsx
new file mode 100644
index 00000000..e59f9164
--- /dev/null
+++ b/components/shared/SelectBoxGroup/index.tsx
@@ -0,0 +1,3 @@
+export { default } from "./SelectBoxGroup";
+
+export * from "./SelectBoxGroup";
diff --git a/components/shared/SelectBoxGroup/selectBoxGroup.stories.tsx b/components/shared/SelectBoxGroup/selectBoxGroup.stories.tsx
new file mode 100644
index 00000000..34815324
--- /dev/null
+++ b/components/shared/SelectBoxGroup/selectBoxGroup.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useArgs } from "@storybook/preview-api";
+
+import SelectBoxGroup from ".";
+
+const meta: Meta<typeof SelectBoxGroup<string>> = {
+  title: "Data Entry/SelectBoxGroup",
+  component: SelectBoxGroup,
+  tags: ["autodocs"],
+  decorators: [
+    (Story, ctx) => {
+      const [, setArgs] = useArgs<typeof ctx.args>();
+
+      const onChange = (value: string) => {
+        ctx.args.onChange?.(value);
+        setArgs({ value });
+      };
+
+      return (
+        <div className="flex justify-center">
+          <div className="w-3/4">
+            <Story args={{ ...ctx.args, onChange }} />
+          </div>
+        </div>
+      );
+    },
+  ],
+  args: {
+    label: "Label Name",
+    value: "option1",
+    items: [
+      {
+        key: 1,
+        label: <div className="px-2 py-1">Option 1</div>,
+        value: "option1",
+      },
+      {
+        key: 2,
+        label: <div className="px-2 py-1">Option 2</div>,
+        value: "option2",
+      },
+    ],
+  },
+  argTypes: {
+    onChange: {
+      type: "function",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SelectBoxGroup>;
+
+export const Playground: Story = {
+  render: (args) => <SelectBoxGroup {...args} />,
+};
diff --git a/components/shared/SelectBoxGroup/selectBoxGroup.test.tsx b/components/shared/SelectBoxGroup/selectBoxGroup.test.tsx
new file mode 100644
index 00000000..8b4f635e
--- /dev/null
+++ b/components/shared/SelectBoxGroup/selectBoxGroup.test.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import SelectBoxGroup from ".";
+
+describe("SelectBoxGroup", () => {
+  const items = [
+    { key: "1", label: "Option 1", value: "option1" },
+    { key: "2", label: "Option 2", value: "option2" },
+  ];
+
+  it("should displays the correct label text", () => {
+    const label = "Select an option";
+    render(<SelectBoxGroup items={items} label={label} />);
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+
+  it("should update selection state and call onChange callback when an option is clicked", async () => {
+    const onChangeMock = jest.fn();
+
+    const ControllerComponent = () => {
+      const [value, setValue] = useState(items[0].value);
+      const handleChange = (v: (typeof items)[0]["value"]) => {
+        setValue(v);
+        onChangeMock(v);
+      };
+
+      return (
+        <SelectBoxGroup items={items} value={value} onChange={handleChange} />
+      );
+    };
+
+    render(<ControllerComponent />);
+
+    await act(async () => {
+      await userEvent.click(screen.getByText("Option 2"));
+    });
+
+    expect(onChangeMock).toHaveBeenCalledWith("option2");
+    expect(screen.getByText("Option 1")).toHaveAttribute(
+      "aria-checked",
+      "false"
+    );
+    expect(screen.getByText("Option 2")).toHaveAttribute(
+      "aria-checked",
+      "true"
+    );
+  });
+
+  it("should sync selection state when value prop is updated", () => {
+    const { rerender } = render(
+      <SelectBoxGroup items={items} value="option1" />
+    );
+
+    expect(screen.getByText("Option 1")).toHaveAttribute(
+      "aria-checked",
+      "true"
+    );
+
+    rerender(<SelectBoxGroup items={items} value="option2" />);
+
+    expect(screen.getByText("Option 2")).toHaveAttribute(
+      "aria-checked",
+      "true"
+    );
+    expect(screen.getByText("Option 1")).toHaveAttribute(
+      "aria-checked",
+      "false"
+    );
+  });
+});

From 4dbedfec1941e992bbaeec3a8b9125c9dbdff78d Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Thu, 31 Oct 2024 19:21:27 +0800
Subject: [PATCH 10/27] refactor(common): carousel style

---
 .../shared/Carousel/v2/Carousel.stories.tsx   | 17 +++++-
 components/shared/Carousel/v2/Carousel.tsx    | 28 +++++++---
 .../shared/Carousel/v2/Carousel.type.ts       | 19 +++++++
 .../shared/Carousel/v2/CarouselButton.tsx     | 20 +++----
 .../shared/Carousel/v2/CarouselMain.tsx       | 18 ++----
 .../shared/Carousel/v2/CarouselPagination.tsx | 56 ++++++++++---------
 components/shared/Carousel/v2/index.tsx       |  2 +
 7 files changed, 102 insertions(+), 58 deletions(-)

diff --git a/components/shared/Carousel/v2/Carousel.stories.tsx b/components/shared/Carousel/v2/Carousel.stories.tsx
index b77a2e62..f5cb47cd 100644
--- a/components/shared/Carousel/v2/Carousel.stories.tsx
+++ b/components/shared/Carousel/v2/Carousel.stories.tsx
@@ -1,8 +1,10 @@
+import { useEffect } from "react";
+import { useArgs } from "@storybook/preview-api";
 import type { Meta, StoryObj } from "@storybook/react";
 import Carousel from "./";
 
 const Card = (props: any) => (
-  <div className="text-white mx-4 px-12 py-8 border border-white rounded-md text-8xl font-mono">
+  <div className="text-white mx-12 px-12 py-8 border border-white rounded-md text-8xl font-mono">
     {props.name}
   </div>
 );
@@ -13,6 +15,19 @@ const meta: Meta<typeof Carousel> = {
   tags: ["autodocs"],
   decorators: [
     (Story, ctx) => {
+      const [, setArgs] = useArgs<typeof ctx.args>();
+
+      useEffect(() => {
+        const handleResize = () => {
+          setArgs({ maxWidth: window.innerWidth - 60 });
+        };
+
+        handleResize();
+        window.addEventListener("resize", handleResize);
+
+        return () => window.removeEventListener("resize", handleResize);
+      }, [setArgs]);
+
       return (
         <div className="flex justify-center">
           <Story {...ctx} />
diff --git a/components/shared/Carousel/v2/Carousel.tsx b/components/shared/Carousel/v2/Carousel.tsx
index 2e03363c..b7f11629 100644
--- a/components/shared/Carousel/v2/Carousel.tsx
+++ b/components/shared/Carousel/v2/Carousel.tsx
@@ -1,22 +1,34 @@
+import { CSSProperties } from "react";
 import CarouselButton from "./CarouselButton";
 import CarouselPagination from "./CarouselPagination";
 import CarouselMain from "./CarouselMain";
 import { CarouselProvider } from "./CarouselContext";
-import { CarouselProps, TItem } from "./Carousel.type";
+import { CarouselButtonType, CarouselProps, TItem } from "./Carousel.type";
 
 export default function Carousel<Item extends TItem>({
   items,
-  renderKey,
+  maxWidth = window.innerWidth,
   Component,
+  renderKey,
 }: Readonly<CarouselProps<Item>>) {
   return (
     <CarouselProvider items={items} renderKey={renderKey} Component={Component}>
-      <div className="flex items-center">
-        <CarouselButton type="previous" />
-        <CarouselMain>
-          <CarouselPagination />
-        </CarouselMain>
-        <CarouselButton type="next" />
+      <div
+        className="max-w-[var(--window-width)]"
+        style={{ "--window-width": `${maxWidth}px` } as CSSProperties}
+      >
+        <div className="relative mb-4 w-full">
+          <CarouselMain className="sticky left-0 top-0" />
+          <CarouselButton
+            type={CarouselButtonType.Previous}
+            className="absolute top-1/2 left-0 -translate-y-1/2"
+          />
+          <CarouselButton
+            type={CarouselButtonType.Next}
+            className="absolute top-1/2 right-0 -translate-y-1/2"
+          />
+        </div>
+        <CarouselPagination />
       </div>
     </CarouselProvider>
   );
diff --git a/components/shared/Carousel/v2/Carousel.type.ts b/components/shared/Carousel/v2/Carousel.type.ts
index ec14a1c2..9b0850c9 100644
--- a/components/shared/Carousel/v2/Carousel.type.ts
+++ b/components/shared/Carousel/v2/Carousel.type.ts
@@ -17,6 +17,7 @@ export interface ICarouselContext<Item extends TItem = TItem> {
 
 export interface CarouselProps<Item extends TItem = TItem> {
   items: ICarouselContext<Item>["items"];
+  maxWidth?: number;
   Component: ICarouselContext<Item>["Component"];
   renderKey?: ICarouselContext<Item>["renderKey"];
 }
@@ -49,3 +50,21 @@ export interface CarouselButtonConfig {
   iconName: IconName;
   actionType: CarouselActionType.Previous | CarouselActionType.Next;
 }
+
+export const enum CarouselButtonType {
+  Previous = "previous",
+  Next = "next",
+}
+
+export interface CarouselButtonProps {
+  type: CarouselButtonType;
+  className?: string;
+}
+
+export interface CarouselMainProps {
+  className?: string;
+}
+
+export interface CarouselPaginationProps {
+  className?: string;
+}
diff --git a/components/shared/Carousel/v2/CarouselButton.tsx b/components/shared/Carousel/v2/CarouselButton.tsx
index 455e86b2..7d17ab94 100644
--- a/components/shared/Carousel/v2/CarouselButton.tsx
+++ b/components/shared/Carousel/v2/CarouselButton.tsx
@@ -1,15 +1,12 @@
 import Icon from "@/components/shared/Icon";
 import { useCarouselDispatch } from "./CarouselContext";
-import { CarouselActionType, CarouselButtonConfig } from "./Carousel.type";
-
-export const enum CarouselButtonType {
-  Previous = "previous",
-  Next = "next",
-}
-
-interface CarouselButtonProps {
-  type: CarouselButtonType | `${CarouselButtonType}`;
-}
+import {
+  CarouselActionType,
+  CarouselButtonConfig,
+  CarouselButtonProps,
+  CarouselButtonType,
+} from "./Carousel.type";
+import { cn } from "@/lib/utils";
 
 const configs: Record<CarouselButtonType, CarouselButtonConfig> = {
   [CarouselButtonType.Previous]: {
@@ -24,13 +21,14 @@ const configs: Record<CarouselButtonType, CarouselButtonConfig> = {
 
 export default function CarouselButton({
   type,
+  className,
 }: Readonly<CarouselButtonProps>) {
   const dispatch = useCarouselDispatch();
   const config = configs[type];
   return (
     <button
       type="button"
-      className="p-2.5 shrink-0 bg-white/4 shadow-default rounded-2xl"
+      className={cn("p-2.5 bg-white/4 shadow-default rounded-2xl", className)}
       onClick={() => dispatch({ type: config.actionType })}
     >
       <Icon
diff --git a/components/shared/Carousel/v2/CarouselMain.tsx b/components/shared/Carousel/v2/CarouselMain.tsx
index b0794c22..026be15b 100644
--- a/components/shared/Carousel/v2/CarouselMain.tsx
+++ b/components/shared/Carousel/v2/CarouselMain.tsx
@@ -1,16 +1,11 @@
-import {
-  CSSProperties,
-  PropsWithChildren,
-  useCallback,
-  useRef,
-  useState,
-} from "react";
+import { CSSProperties, useCallback, useRef, useState } from "react";
 import useResizeObserver from "@/hooks/useResizeObserver";
-import { useCarousel } from "./CarouselContext";
 import useAutoReset from "@/hooks/useAutoReset";
 import { cn } from "@/lib/utils";
+import { useCarousel } from "./CarouselContext";
+import { CarouselMainProps } from "./Carousel.type";
 
-export default function CarouselMain({ children }: PropsWithChildren) {
+export default function CarouselMain({ className }: CarouselMainProps) {
   const { showIndex, items, Component, renderKey } = useCarousel();
   const [carouselItemWidth, setCarouselItemWidth] = useState(0);
   const carouselRef = useRef<HTMLDivElement>(null);
@@ -30,10 +25,10 @@ export default function CarouselMain({ children }: PropsWithChildren) {
   });
 
   return (
-    <div ref={carouselRef} className="overflow-hidden w-full">
+    <div ref={carouselRef} className={cn("w-full overflow-hidden", className)}>
       <ul
         className={cn(
-          "mb-4 flex translate-x-[var(--translate-x)]",
+          "flex translate-x-[var(--translate-x)]",
           isAnimating && "transition-transform"
         )}
         style={
@@ -57,7 +52,6 @@ export default function CarouselMain({ children }: PropsWithChildren) {
             </li>
           ))}
       </ul>
-      {children}
     </div>
   );
 }
diff --git a/components/shared/Carousel/v2/CarouselPagination.tsx b/components/shared/Carousel/v2/CarouselPagination.tsx
index b60d5f4e..c8984f87 100644
--- a/components/shared/Carousel/v2/CarouselPagination.tsx
+++ b/components/shared/Carousel/v2/CarouselPagination.tsx
@@ -1,35 +1,39 @@
 import { cn } from "@/lib/utils";
 import { useCarousel, useCarouselDispatch } from "./CarouselContext";
-import { CarouselActionType } from "./Carousel.type";
+import { CarouselActionType, CarouselPaginationProps } from "./Carousel.type";
 
-export default function CarouselPagination() {
+export default function CarouselPagination({
+  className,
+}: CarouselPaginationProps) {
   const { showIndex, items, renderKey } = useCarousel();
   const dispatch = useCarouselDispatch();
 
   return (
-    <ul className="flex justify-center">
-      {Array.isArray(items) &&
-        items.map((item, index) => (
-          <li key={renderKey(item)}>
-            <button
-              type="button"
-              className="p-2"
-              onClick={() =>
-                dispatch({
-                  type: CarouselActionType.SetPage,
-                  payload: { page: index },
-                })
-              }
-            >
-              <div
-                className={cn(
-                  "w-10 h-px bg-primary-700 transition-colors",
-                  index === showIndex && "bg-primary-200"
-                )}
-              ></div>
-            </button>
-          </li>
-        ))}
-    </ul>
+    <nav className={className}>
+      <ul className="flex justify-center">
+        {Array.isArray(items) &&
+          items.map((item, index) => (
+            <li key={renderKey(item)}>
+              <button
+                type="button"
+                className="block p-2"
+                onClick={() =>
+                  dispatch({
+                    type: CarouselActionType.SetPage,
+                    payload: { page: index },
+                  })
+                }
+              >
+                <div
+                  className={cn(
+                    "w-10 h-px bg-primary-700 transition-colors",
+                    index === showIndex && "bg-primary-200"
+                  )}
+                ></div>
+              </button>
+            </li>
+          ))}
+      </ul>
+    </nav>
   );
 }
diff --git a/components/shared/Carousel/v2/index.tsx b/components/shared/Carousel/v2/index.tsx
index 4fe36731..8f4f225b 100644
--- a/components/shared/Carousel/v2/index.tsx
+++ b/components/shared/Carousel/v2/index.tsx
@@ -2,4 +2,6 @@ import Carousel from "./Carousel";
 
 export * from "./Carousel";
 
+export * from "./Carousel.type";
+
 export default Carousel;

From f5f9d927765bedcc5ec7011c1036ea0f9b132c78 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Thu, 31 Oct 2024 19:25:54 +0800
Subject: [PATCH 11/27] fix(common): box fancy pseudo element cover bug

---
 components/shared/BoxFancy/BoxFancy.tsx   | 2 +-
 components/shared/Input/input.stories.tsx | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/shared/BoxFancy/BoxFancy.tsx b/components/shared/BoxFancy/BoxFancy.tsx
index 9172865f..e2a77fc9 100644
--- a/components/shared/BoxFancy/BoxFancy.tsx
+++ b/components/shared/BoxFancy/BoxFancy.tsx
@@ -78,7 +78,7 @@ const InternalBoxFancy: InternalBoxFancyComponent = (
       ref={ref}
       className={cn(
         "relative bg-black/40 frosted-shadow-box text-primary-50",
-        "before:w-full before:h-full before:absolute before:top-0 before:left-0",
+        "before:w-full before:h-full before:absolute before:top-0 before:left-0 before:pointer-events-none",
         "before:[mask:linear-gradient(#fff_0_0)_exclude_content-box,linear-gradient(#fff_0_0)]",
         borderWidthMap[borderWidth],
         borderRadiusMap[borderRadius],
diff --git a/components/shared/Input/input.stories.tsx b/components/shared/Input/input.stories.tsx
index 38ee9007..e83eb150 100644
--- a/components/shared/Input/input.stories.tsx
+++ b/components/shared/Input/input.stories.tsx
@@ -37,9 +37,6 @@ const meta: Meta<typeof Input> = {
     placeholder: "Placeholder",
   },
   argTypes: {
-    maxLength: {
-      type: "number",
-    },
     hintText: {
       type: "string",
     },

From 6fa6d26c9885d18d4a4ad4cca86b45f27573edfd Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Fri, 1 Nov 2024 22:44:17 +0800
Subject: [PATCH 12/27] feat(common): add input OTP component

---
 components/shared/InputOTP/InputOTP.tsx       | 114 ++++++++++++++++++
 components/shared/InputOTP/index.ts           |   3 +
 .../shared/InputOTP/inputOTP.stories.tsx      |  31 +++++
 components/shared/InputOTP/inputOTP.test.tsx  |  89 ++++++++++++++
 4 files changed, 237 insertions(+)
 create mode 100644 components/shared/InputOTP/InputOTP.tsx
 create mode 100644 components/shared/InputOTP/index.ts
 create mode 100644 components/shared/InputOTP/inputOTP.stories.tsx
 create mode 100644 components/shared/InputOTP/inputOTP.test.tsx

diff --git a/components/shared/InputOTP/InputOTP.tsx b/components/shared/InputOTP/InputOTP.tsx
new file mode 100644
index 00000000..3e98491a
--- /dev/null
+++ b/components/shared/InputOTP/InputOTP.tsx
@@ -0,0 +1,114 @@
+import { useRef, KeyboardEvent, useId, useState, useEffect } from "react";
+import Input from "@/components/shared/Input";
+import { cn } from "@/lib/utils";
+
+type InputOTPProps = {
+  length: number;
+  value?: string;
+  defaultValue?: string;
+  label?: string;
+  error?: boolean;
+  labelClassName?: string;
+  onChange?: (value: string) => void;
+};
+
+function InputOTP({
+  length,
+  value,
+  defaultValue = "",
+  label,
+  error,
+  labelClassName,
+  onChange,
+}: InputOTPProps) {
+  const reactId = useId();
+  const inputOPTId = `input_opt_${reactId}`;
+  const [chars, setChars] = useState(() => (value || defaultValue).split(""));
+  const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
+  const inputIds = Array.from({ length }, (_, i) => `${inputOPTId}_${i}`);
+
+  const updateChars = (newChars: string[]) => {
+    setChars(newChars);
+    onChange?.(newChars.join(""));
+  };
+
+  const handleChange = (value: string, index: number) => {
+    const newChars = [...chars];
+    newChars[index] = value;
+    updateChars(newChars);
+  };
+
+  const shiftCharsLeftByIndex = (index: number) => {
+    updateChars([...chars.slice(0, index), "", ...chars.slice(index + 2)]);
+  };
+
+  const focusNextInput = (index: number) => {
+    if (index < length - 1) inputsRef.current[index + 1]?.focus();
+  };
+
+  const focusPreviousInput = (index: number) => {
+    if (index > 0) inputsRef.current[index - 1]?.focus();
+  };
+
+  const handleKeyUp = (index: number) => (e: KeyboardEvent) => {
+    const isArrowLeft = e.key === "ArrowLeft";
+    const isArrowRight = e.key === "ArrowRight";
+    const isBackspace = e.key === "Backspace";
+    const isDelete = e.key === "Delete";
+    const isNumeric = /\d/.test(e.key);
+
+    if (isArrowLeft) {
+      focusPreviousInput(index);
+    } else if (isArrowRight) {
+      focusNextInput(index);
+    } else if ((isDelete || isBackspace) && chars[index]) {
+      handleChange("", index);
+    } else if (isBackspace) {
+      focusPreviousInput(index);
+      handleChange("", index - 1);
+    } else if (isDelete) {
+      shiftCharsLeftByIndex(index);
+    } else if (isNumeric) {
+      handleChange(e.key, index);
+      focusNextInput(index);
+    }
+  };
+
+  useEffect(() => {
+    if (value) {
+      setChars(value.split(""));
+    }
+  }, [value]);
+
+  return (
+    <div>
+      {label && (
+        <label
+          htmlFor={inputOPTId}
+          className={cn(
+            "block mb-1 font-medium text-primary-200",
+            labelClassName
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <div className="flex gap-2">
+        {inputIds.map((id, index) => (
+          <Input
+            key={id}
+            id={index === 0 ? inputOPTId : undefined}
+            ref={(element) => (inputsRef.current[index] = element)}
+            inputClassName="w-10 px-3 py-2.5 text-center"
+            maxLength={1}
+            error={error}
+            value={chars[index] || ""}
+            onKeyUp={handleKeyUp(index)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default InputOTP;
diff --git a/components/shared/InputOTP/index.ts b/components/shared/InputOTP/index.ts
new file mode 100644
index 00000000..3f44a55a
--- /dev/null
+++ b/components/shared/InputOTP/index.ts
@@ -0,0 +1,3 @@
+export { default } from "./InputOTP";
+
+export * from "./InputOTP";
diff --git a/components/shared/InputOTP/inputOTP.stories.tsx b/components/shared/InputOTP/inputOTP.stories.tsx
new file mode 100644
index 00000000..3e4029e2
--- /dev/null
+++ b/components/shared/InputOTP/inputOTP.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useArgs } from "@storybook/preview-api";
+
+import InputOTP from ".";
+
+const meta: Meta = {
+  title: "Data Entry/InputOTP",
+  component: InputOTP,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => {
+      return (
+        <div className="flex justify-center">
+          <Story />
+        </div>
+      );
+    },
+  ],
+  args: {
+    value: "",
+    length: 4,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputOTP>;
+
+export const Playground: Story = {
+  render: (args) => <InputOTP {...args} />,
+};
diff --git a/components/shared/InputOTP/inputOTP.test.tsx b/components/shared/InputOTP/inputOTP.test.tsx
new file mode 100644
index 00000000..f9b1d781
--- /dev/null
+++ b/components/shared/InputOTP/inputOTP.test.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import InputOTP from ".";
+
+describe("InputOTP", () => {
+  it("should render InputOTP component", () => {
+    const label = "Input OTP";
+    render(<InputOTP label={label} value="" length={6} />);
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+
+  it("should render 8 input fields when length is 8", () => {
+    render(<InputOTP value="" length={8} />);
+    const InputOTPs = screen.getAllByRole("textbox");
+    expect(InputOTPs.length).toBe(8);
+  });
+
+  it("should set number when user types in the fields", async () => {
+    const onChangeMock = jest.fn();
+    render(<InputOTP value="" length={4} onChange={onChangeMock} />);
+    const InputOTPs = screen.getAllByRole("textbox");
+    const firstField = InputOTPs[0];
+    const secondField = InputOTPs[1];
+    const thirdField = InputOTPs[2];
+    const fourthField = InputOTPs[3];
+
+    await act(async () => {
+      await userEvent.type(firstField, "1");
+      await userEvent.type(secondField, "2");
+      await userEvent.type(thirdField, "3");
+      await userEvent.type(fourthField, "4");
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(4);
+    expect(onChangeMock).toHaveBeenCalledWith("1");
+    expect(onChangeMock).toHaveBeenCalledWith("12");
+    expect(onChangeMock).toHaveBeenCalledWith("123");
+    expect(onChangeMock).toHaveBeenLastCalledWith("1234");
+  });
+
+  it("should remove number in the fields", async () => {
+    const onChangeMock = jest.fn();
+    render(<InputOTP value="12345" length={5} onChange={onChangeMock} />);
+    const InputOTPs = screen.getAllByRole("textbox");
+    const secondField = InputOTPs[1];
+    await act(async () => {
+      await userEvent.type(secondField, "{Backspace}{Backspace}");
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    expect(onChangeMock).toHaveBeenCalledWith("1345");
+    expect(onChangeMock).toHaveBeenCalledWith("345");
+    await act(async () => {
+      await userEvent.type(secondField, "{Delete}");
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(3);
+    expect(onChangeMock).toHaveBeenCalledWith("45");
+    await act(async () => {
+      await userEvent.type(secondField, "{Delete}");
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(4);
+    expect(onChangeMock).toHaveBeenCalledWith("5");
+    await act(async () => {
+      await userEvent.type(secondField, "{Delete}");
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(5);
+    expect(onChangeMock).toHaveBeenCalledWith("");
+  });
+
+  it("should move focus when user presses arrow keys", async () => {
+    render(<InputOTP value="" length={3} />);
+    const InputOTPs = screen.getAllByRole("textbox");
+    const secondField = InputOTPs[1];
+    const thirdField = InputOTPs[2];
+    await act(async () => {
+      await userEvent.type(secondField, "{ArrowRight}");
+    });
+    expect(thirdField).toHaveFocus();
+    await act(async () => {
+      await userEvent.type(thirdField, "{ArrowRight}");
+    });
+    expect(thirdField).toHaveFocus();
+    await act(async () => {
+      await userEvent.type(secondField, "{ArrowLight}");
+    });
+    expect(thirdField).not.toHaveFocus();
+    expect(secondField).toHaveFocus();
+  });
+});

From c2c0deae199499ebf2e954622a3028493f7a80b8 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Fri, 1 Nov 2024 22:47:27 +0800
Subject: [PATCH 13/27] fix(input): clicking on the input edge is unresponsive

---
 components/shared/Input/Input.tsx         | 14 +++++++++-----
 components/shared/Input/input.stories.tsx |  4 +---
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/shared/Input/Input.tsx b/components/shared/Input/Input.tsx
index 62e16878..64c0d036 100644
--- a/components/shared/Input/Input.tsx
+++ b/components/shared/Input/Input.tsx
@@ -113,11 +113,13 @@ const InteralInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
       )}
       <div
         className={cn(
-          "mb-1 px-4 py-2 box-border inline-flex gap-2.5",
+          "mb-1 inline-flex items-center gap-2.5 rounded-lg",
           "leading-tight bg-primary-200/20 placeholder:text-primary-300",
-          "border-2 border-transparent focus:border-primary-200 rounded-lg",
+          "outline outline-2 -outline-offset-2 outline-transparent focus-within:outline-primary-200",
+          prefix && "pl-4",
+          suffix && "pr-4",
           disabled && "bg-grey-800",
-          error && "border-error-300",
+          error && "outline-error-300",
           inputWrapperClassName
         )}
       >
@@ -126,9 +128,11 @@ const InteralInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
           ref={ref}
           id={inputId}
           className={cn(
-            "bg-transparent focus:outline-none",
+            "grow px-4 py-2 bg-transparent border-2 border-transparent focus:outline-none",
             "disabled:text-grey-400 disabled:placeholder:text-grey-400",
-            error && "placeholder:text-error-300",
+            prefix && "pl-0",
+            suffix && "pr-0",
+            error && "text-error-300 placeholder:text-error-300",
             inputClassName
           )}
           onChange={handleChange}
diff --git a/components/shared/Input/input.stories.tsx b/components/shared/Input/input.stories.tsx
index e83eb150..1624c92b 100644
--- a/components/shared/Input/input.stories.tsx
+++ b/components/shared/Input/input.stories.tsx
@@ -23,9 +23,7 @@ const meta: Meta<typeof Input> = {
 
       return (
         <div className="flex justify-center">
-          <div className="w-3/4">
-            <Story args={{ ...ctx.args, onChange }} />
-          </div>
+          <Story args={{ ...ctx.args, onChange }} />
         </div>
       );
     },

From 4139c0599a56e38bee0b50ae2288e73502949fc7 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Fri, 1 Nov 2024 22:49:27 +0800
Subject: [PATCH 14/27] feat(modal): luck body scroll when modal is open

---
 components/shared/Modal/Modal.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/shared/Modal/Modal.tsx b/components/shared/Modal/Modal.tsx
index 4d66f178..f6113322 100644
--- a/components/shared/Modal/Modal.tsx
+++ b/components/shared/Modal/Modal.tsx
@@ -56,6 +56,7 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
     let timer: NodeJS.Timeout;
 
     if (isOpen) {
+      document.body.classList.add("overflow-y-hidden");
       setRemoveDOM(false);
     } else {
       timer = setTimeout(() => {
@@ -63,7 +64,10 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
       }, 200);
     }
 
-    return () => clearTimeout(timer);
+    return () => {
+      document.body.classList.remove("overflow-y-hidden");
+      clearTimeout(timer);
+    };
   }, [isOpen]);
 
   return (

From b7ae8b3c33f3d8d6d55017715fb5b33b577cb97f Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 20:12:45 +0800
Subject: [PATCH 15/27] feat(Cover): handle error to display fallback image

---
 components/shared/Cover/Cover.stories.tsx | 52 ++++-----------
 components/shared/Cover/cover.test.tsx    | 26 ++++----
 components/shared/Cover/index.tsx         | 78 ++++-------------------
 3 files changed, 39 insertions(+), 117 deletions(-)

diff --git a/components/shared/Cover/Cover.stories.tsx b/components/shared/Cover/Cover.stories.tsx
index aec8ba44..29a889e9 100644
--- a/components/shared/Cover/Cover.stories.tsx
+++ b/components/shared/Cover/Cover.stories.tsx
@@ -4,59 +4,35 @@ import Cover from "./index";
 const meta: Meta<typeof Cover> = {
   title: "Data Display/ Cover",
   component: Cover,
-  decorators: [
-    (Story) => (
-      <div className="flex gap-2 items-center w-fit">
-        <Story />
-      </div>
-    ),
-  ],
   tags: ["autodocs"],
   args: {
     src: "https://images.unsplash.com/photo-1684006231760-3f0290bf42a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1550&q=80",
     alt: "Cover",
+    width: 100,
+    height: 130,
   },
   argTypes: {
-    src: { control: "text" },
-    alt: { control: "text" },
-    width: { control: "number" },
-    height: { control: "number" },
-    fill: { control: "boolean" },
-    className: { control: "text" },
+    src: {
+      type: "string",
+    },
+    alt: {
+      type: "string",
+    },
   },
 };
 
 type Story = StoryObj<typeof Cover>;
 
-export const Playgrond: Story = {
-  render: (args) => {
-    return <Cover {...args} />;
-  },
+export const Playground: Story = {
+  render: (args) => <Cover {...args} />,
 };
 
-export const CoverFill: Story = {
-  args: {
-    src: "https://images.unsplash.com/photo-1682687219573-3fd75f982217?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1550&q=80",
-    alt: "Cover2",
-    fill: true,
-    className: "w-[250px] h-[250px]",
-  },
-  render: (args) => {
-    return <Cover {...args} />;
-  },
+export const DefaultErrorCover: Story = {
+  render: (args) => <Cover {...args} />,
 };
 
-export const CoverWithVewport: Story = {
-  args: {
-    src: "https://images.unsplash.com/photo-1685350854473-3f7822f1633a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80",
-    alt: "Cover1",
-    width: 100,
-    height: 100,
-    className: "w-full sm:w-[100%] md:w-[320px] lg:w-[150px]",
-  },
-  render: (args) => {
-    return <Cover {...args} />;
-  },
+DefaultErrorCover.args = {
+  src: "error src",
 };
 
 export default meta;
diff --git a/components/shared/Cover/cover.test.tsx b/components/shared/Cover/cover.test.tsx
index 1c02ccdb..9e93da95 100644
--- a/components/shared/Cover/cover.test.tsx
+++ b/components/shared/Cover/cover.test.tsx
@@ -1,19 +1,19 @@
 import React from "react";
-import { render } from "@testing-library/react";
-import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
 import Cover from ".";
 
 describe("Cover", () => {
-  const image = {
-    src: "https://images.unsplash.com/photo-1683125695370-1c7fc9ff1315?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160",
-    alt: "Cover1",
-  };
-
-  test("should render", () => {
-    render(<Cover {...image} />);
-    const _img = document.querySelector("img");
-    expect(_img).toBeInTheDocument();
-    expect(_img?.alt).toBe("Cover1");
-    expect(_img?.src).toMatch(/photo-1683125695370-1c7fc9ff1315/i);
+  test("should render Cover component", () => {
+    render(
+      <Cover
+        src="https://images.unsplash.com/photo-1683125695370-1c7fc9ff1315?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160"
+        alt="Cover"
+        width={300}
+        height={300}
+      />
+    );
+    const cover = screen.getByRole("img");
+    expect(cover).toBeInTheDocument();
+    expect(cover).toHaveAccessibleName("Cover");
   });
 });
diff --git a/components/shared/Cover/index.tsx b/components/shared/Cover/index.tsx
index 40e262e5..f53f5b1a 100644
--- a/components/shared/Cover/index.tsx
+++ b/components/shared/Cover/index.tsx
@@ -1,69 +1,15 @@
-import React, { useState } from "react";
-import Image from "next/image";
-import { cn } from "@/lib/utils";
-
-interface CoverProps {
-  className?: string;
-  src: string;
-  alt: string;
-  /** If `fill` is `false`, `width` is defined 320, but it can change as props from outside, the width and height will effect zoom in and out quality of the image for the responsive viewport */
-  width?: number;
-  /** If `fill` is `false`, `height` is defined 320, but it can change as props from outside the width and height will effect zoom in and out quality of the image for the responsive viewport */
-  height?: number;
-  /** If `fill` is `true`, the image will fill the viewport. According to next-image, `fill` is using `absolute` to position the image.  */
-  fill?: boolean;
-  sizes?: string;
-}
-
-const Cover: React.FC<CoverProps> = ({
-  className = "",
-  src,
-  alt,
-  width = 320,
-  height = 320,
-  fill = false,
-  ...rest
-}) => {
-  const [loaded, setLoaded] = useState(false);
-
-  const coverClass = cn(
-    "__cover",
-    {
-      relative: fill,
-      "w-full": !fill,
-    },
-    "overflow-hidden bg-gray-500 cover",
-    className
-  );
-
-  const isFill = () => {
-    return fill
-      ? {
-          fill,
-        }
-      : {
-          width,
-          height,
-        };
+import { ReactEventHandler } from "react";
+import Image, { ImageProps } from "next/image";
+import gameDefaultCoverImg from "@/public/images/game-default-cover.png";
+
+function Cover({ alt, onError, ...restProps }: ImageProps) {
+  const handleError: ReactEventHandler<HTMLImageElement> = (e) => {
+    if (e.target instanceof HTMLImageElement) {
+      e.target.src = gameDefaultCoverImg.src;
+    }
+    onError?.(e);
   };
-
-  return (
-    <div className={coverClass}>
-      <Image
-        className={cn("w-full object-cover object-center", {
-          invisible: !loaded,
-        })}
-        src={src}
-        alt={alt}
-        quality={75}
-        sizes="100vw"
-        onLoadingComplete={() => setLoaded(true)}
-        loading="lazy"
-        {...isFill()}
-        {...rest}
-      />
-    </div>
-  );
-};
+  return <Image alt={alt} onError={handleError} {...restProps} />;
+}
 
 export default Cover;

From 69cb81b877d3c83a972dd505034ff87362d8c04f Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 20:18:20 +0800
Subject: [PATCH 16/27] chore: modify style, fix typo and Image to Cover

---
 components/shared/Button/v2/Button.tsx |  2 +-
 components/shared/Input/Input.tsx      |  4 ++--
 components/shared/Modal/Modal.tsx      |  2 +-
 components/shared/Sidebar.tsx          | 14 ++++----------
 containers/layout/AppLayout.tsx        |  6 +++++-
 pages/_document.tsx                    |  1 +
 pages/rooms/[roomId]/index.tsx         | 14 ++++----------
 7 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/components/shared/Button/v2/Button.tsx b/components/shared/Button/v2/Button.tsx
index 36e4e1fe..4b26dd48 100644
--- a/components/shared/Button/v2/Button.tsx
+++ b/components/shared/Button/v2/Button.tsx
@@ -25,7 +25,7 @@ const buttonTypeClasses: Record<ButtonVariant, string> = {
   primaryTransparent:
     "text-primary-800 bg-primary-200/60 hover:text-primary-800 hover:bg-primary-300/50 active:text-primary-800 active:bg-primary-300/50",
   secondary:
-    "text-primary-200 bg-primary-700/40 hover:bg-primary-600/40 active:bg-primary-600/40",
+    "text-primary-200 bg-primary-700/0 hover:bg-primary-700/40 active:bg-primary-200/20",
   highlight:
     "text-primary-50 gradient-purple hover:gradient-purple-2 active:gradient-purple-3",
 };
diff --git a/components/shared/Input/Input.tsx b/components/shared/Input/Input.tsx
index 64c0d036..c2f239ac 100644
--- a/components/shared/Input/Input.tsx
+++ b/components/shared/Input/Input.tsx
@@ -68,7 +68,7 @@ interface InputProps
   onChange?: ChangeHandler;
 }
 
-const InteralInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
+const InternalInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
   {
     value,
     label,
@@ -158,6 +158,6 @@ const InteralInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
   );
 };
 
-const Input = forwardRef(InteralInput);
+const Input = forwardRef(InternalInput);
 
 export default Input;
diff --git a/components/shared/Modal/Modal.tsx b/components/shared/Modal/Modal.tsx
index f6113322..117968a4 100644
--- a/components/shared/Modal/Modal.tsx
+++ b/components/shared/Modal/Modal.tsx
@@ -41,8 +41,8 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
 ) => {
   const {
     isOpen,
+    title,
     size = "medium",
-    title = "title",
     hideCloseIcon = false,
     maskClosable = true,
     children,
diff --git a/components/shared/Sidebar.tsx b/components/shared/Sidebar.tsx
index 9637b068..a5dc0c2a 100644
--- a/components/shared/Sidebar.tsx
+++ b/components/shared/Sidebar.tsx
@@ -72,18 +72,12 @@ export default function Sidebar({ className }: SidebarProps) {
           >
             <Button
               className={cn(
-                "bg-transparent p-3 rounded-full hover:shadow-none",
-                {
-                  "bg-primary-200/20": isActive(routeProps.route),
-                }
+                "bg-transparent p-3 rounded-full hover:shadow-none text-primary-400",
+                isActive(routeProps.route) &&
+                  "bg-primary-200/20 text-primary-200"
               )}
             >
-              <Icon
-                name={routeProps.iconName}
-                className={cn("w-6 h-6 stroke-primary-400", {
-                  "stroke-primary-200": isActive(routeProps.route),
-                })}
-              />
+              <Icon name={routeProps.iconName} className="w-6 h-6" />
             </Button>
           </Link>
         ))}
diff --git a/containers/layout/AppLayout.tsx b/containers/layout/AppLayout.tsx
index 2b01e9a5..b875c961 100644
--- a/containers/layout/AppLayout.tsx
+++ b/containers/layout/AppLayout.tsx
@@ -4,6 +4,7 @@ import Header from "@/components/shared/Header";
 import Sidebar from "@/components/shared/Sidebar";
 import Chat from "@/components/shared/Chat/v2/Chat";
 import useChat from "@/hooks/useChat";
+import Head from "next/head";
 
 export default function Layout({ children }: PropsWithChildren) {
   const router = useRouter();
@@ -25,6 +26,9 @@ export default function Layout({ children }: PropsWithChildren) {
 
   return (
     <>
+      <Head>
+        <title>遊戲微服務大平台</title>
+      </Head>
       <Header
         className="fixed top-0 inset-x-0 z-40"
         onClickChatButton={toggleChatVisibility}
@@ -33,7 +37,7 @@ export default function Layout({ children }: PropsWithChildren) {
         <div className="shrink-0 w-18">
           <Sidebar className="fixed top-20 bottom-6 z-30" />
         </div>
-        <main className="grow overflow-x-hidden">{children}</main>
+        <main className="grow pb-4 overflow-x-hidden">{children}</main>
         {isChatVisible && (
           <div className="shrink-0 w-80 mr-4">
             <Chat
diff --git a/pages/_document.tsx b/pages/_document.tsx
index ed031e8b..5fd40813 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -11,6 +11,7 @@ export default function Document() {
         {/* <meta property="og:image" /> */}
         <meta name="og:title" content={siteTitle} />
         <meta name="twitter:card" content="summary_large_image" />
+        <title>{siteTitle}</title>
       </Head>
       <body className="body-bg min-h-screen text-primary-200">
         <Main />
diff --git a/pages/rooms/[roomId]/index.tsx b/pages/rooms/[roomId]/index.tsx
index f859f768..5ffcbae7 100644
--- a/pages/rooms/[roomId]/index.tsx
+++ b/pages/rooms/[roomId]/index.tsx
@@ -1,8 +1,9 @@
-import { ReactEventHandler, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { GetStaticProps, GetStaticPaths } from "next";
 import { useRouter } from "next/router";
-import Image from "next/image";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+
+import Cover from "@/components/shared/Cover";
 import RoomUserCardList from "@/components/rooms/RoomUserCardList";
 import RoomButtonGroup from "@/components/rooms/RoomButtonGroup";
 import RoomBreadcrumb from "@/components/rooms/RoomBreadcrumb";
@@ -29,12 +30,6 @@ import gameDefaultCoverImg from "@/public/images/game-default-cover.png";
 
 type User = Omit<RoomInfo.User, "isReady">;
 
-const onImageError: ReactEventHandler<HTMLImageElement> = (e) => {
-  if (e.target instanceof HTMLImageElement) {
-    e.target.src = gameDefaultCoverImg.src;
-  }
-};
-
 export default function Room() {
   const {
     roomInfo,
@@ -242,14 +237,13 @@ export default function Room() {
         <>
           <div className="relative w-full h-[280px] overflow-hidden">
             {roomInfo.currentPlayers && (
-              <Image
+              <Cover
                 src={gameInfo?.img || gameDefaultCoverImg.src}
                 alt={gameInfo?.name || "default game cover"}
                 draggable={false}
                 priority
                 fill
                 className="object-cover"
-                onError={onImageError}
               />
             )}
             <div className="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-t from-[#0f0919] to-50% to-[#170D2500]"></div>

From a08e4408679cd4324ac1f101049ca9b469a512e3 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 20:24:28 +0800
Subject: [PATCH 17/27] feat(user): add user info form

---
 components/lobby/UserInfoModal.tsx            | 180 ------------------
 components/shared/Header.tsx                  |  54 ++++--
 .../components/UserInfoForm/UserInfoForm.tsx  | 115 +++++++++++
 .../user/components/UserInfoForm/index.ts     |   1 +
 features/user/index.ts                        |   1 +
 tailwind.config.js                            |   1 +
 6 files changed, 153 insertions(+), 199 deletions(-)
 delete mode 100644 components/lobby/UserInfoModal.tsx
 create mode 100644 features/user/components/UserInfoForm/UserInfoForm.tsx
 create mode 100644 features/user/components/UserInfoForm/index.ts
 create mode 100644 features/user/index.ts

diff --git a/components/lobby/UserInfoModal.tsx b/components/lobby/UserInfoModal.tsx
deleted file mode 100644
index b9899e83..00000000
--- a/components/lobby/UserInfoModal.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { useState, FC, useEffect } from "react";
-import { AxiosError } from "axios";
-
-import { cn } from "@/lib/utils";
-import Button from "@/components/shared/Button";
-import Input from "@/components/shared/Input";
-import Modal from "@/components/shared/Modal";
-import useRequest from "@/hooks/useRequest";
-import useUser from "@/hooks/useUser";
-import { UserInfo, putUserinfoEndpoint } from "@/requests/users";
-import { useToast } from "../shared/Toast";
-
-type UserInfoModalProps = {
-  isOpen: boolean;
-  onClose: () => void;
-};
-
-const UserInfoModal: FC<UserInfoModalProps> = ({ isOpen, onClose }) => {
-  const [isOpenModal, setIsOpenModal] = useState(isOpen);
-  const [loading, setLoading] = useState(false);
-  const [editMode, setEditMode] = useState(false);
-  const [userInfo, setUserInfo] = useState<UserInfo>();
-  const [originalUserInfo, setOriginalUserInfo] = useState<UserInfo>(); // 取消編輯時可以回復原先資料
-  const [errorMsg, setErrorMsg] = useState({ nickname: "" });
-  const { fetch } = useRequest();
-  const { getCurrentUser } = useUser();
-  const toast = useToast();
-
-  const hasError = errorMsg.nickname !== "";
-
-  const handleClose = () => {
-    setIsOpenModal((prev) => !prev);
-    setTimeout(() => onClose(), 200); // 要等 Modal 關閉動畫結束，才能關閉
-  };
-  const handleCancelEdit = () => {
-    setEditMode(false);
-    setErrorMsg({ nickname: "" }); // Reset error message
-    setUserInfo(originalUserInfo); // Restore the original user info
-  };
-  const handleSubmit = async () => {
-    if (hasError) return;
-    if (!userInfo) return;
-    try {
-      setLoading(true);
-      await fetch(putUserinfoEndpoint(userInfo), { toast: { show: false } });
-      setOriginalUserInfo(userInfo); // Update the original user info
-      handleClose();
-    } catch (error) {
-      if (error instanceof AxiosError) {
-        toast(
-          { state: "error", children: error.response?.data.message },
-          {
-            position: "bottom-left",
-          }
-        );
-      } else {
-        toast(
-          { state: "error", children: `無法預期的錯誤： ${error}` },
-          {
-            position: "bottom-left",
-          }
-        );
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleNicknameChange = (value: string) => {
-    if (!userInfo) return;
-    setUserInfo((prev) => ({ ...prev!, nickname: value }));
-    const regex = /^[a-zA-Z0-9\u4E00-\u9FFF ]*$/; // Regex pattern for special characters. Allow only alphanumeric and spaces
-    if (value.length === 0) {
-      setErrorMsg((prep) => ({ ...prep, nickname: "暱稱欄位不可空白" }));
-    } else if (!regex.test(value)) {
-      setErrorMsg((prep) => ({ ...prep, nickname: "暱稱不可包含特殊字元" }));
-    } else if (value.length < 4) {
-      setErrorMsg((prep) => ({ ...prep, nickname: "暱稱長度過短" }));
-      return;
-    } else if (value.length > 16) {
-      setErrorMsg((prep) => ({ ...prep, nickname: "暱稱長度過長" }));
-      return;
-    } else {
-      setErrorMsg((prep) => ({ ...prep, nickname: "" }));
-    }
-  };
-
-  useEffect(() => {
-    (async () => {
-      const user = await getCurrentUser();
-      setUserInfo(user);
-      setOriginalUserInfo(user); // Save the original user info
-    })();
-  }, []);
-
-  return (
-    <>
-      <Modal
-        isOpen={isOpenModal}
-        onClose={handleClose}
-        maskClosable={!loading}
-        size="medium"
-      >
-        <div className="flex flex-col">
-          <div className="flex justify-between items-center">
-            <div className="text-2xl font-bold">個人資料</div>
-            <div className="flex gap-5 items-center">
-              {editMode ? (
-                <>
-                  <Button
-                    disabled={hasError}
-                    className="flex justify-center rounded-sm"
-                    onClick={handleSubmit}
-                    loading={loading}
-                  >
-                    更新
-                  </Button>
-                  <Button
-                    className="flex justify-center rounded-sm"
-                    onClick={handleCancelEdit}
-                    disabled={loading}
-                  >
-                    取消
-                  </Button>
-                </>
-              ) : (
-                <Button
-                  className="flex justify-center rounded-sm"
-                  onClick={() => setEditMode((prev) => !prev)}
-                >
-                  編輯
-                </Button>
-              )}
-            </div>
-          </div>
-          <div className="flex flex-col gap-5 my-12">
-            {userInfo && (
-              <>
-                <div className="flex items-start h-12">
-                  <div className="w-[100px] border-l-2 border-blue2f pl-2">
-                    暱稱
-                  </div>
-                  {editMode ? (
-                    <div className="w-full">
-                      <Input
-                        className={cn("flex flex-col")}
-                        disabled={loading}
-                        inputClassName={cn(
-                          "rounded-[10px] w-full border border-dark29",
-                          "focus:border-blue2f transition-[border-color] duration-300 ease-in-out"
-                        )}
-                        hintTextClassName={cn("w-full flex justify-end")}
-                        value={userInfo.nickname}
-                        onChange={handleNicknameChange}
-                        error={hasError}
-                        hintText={errorMsg.nickname}
-                      />
-                    </div>
-                  ) : (
-                    <div className="w-full px-3 py-0.5">
-                      {userInfo.nickname}
-                    </div>
-                  )}
-                </div>
-                <div className="flex items-start h-12">
-                  <div className="w-[100px] border-l-2 border-blue2f pl-2">
-                    電子郵件
-                  </div>
-                  <div className="w-full px-3 py-0.5">{userInfo.email}</div>
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      </Modal>
-    </>
-  );
-};
-
-export default UserInfoModal;
diff --git a/components/shared/Header.tsx b/components/shared/Header.tsx
index 33a908d8..dd85d62a 100644
--- a/components/shared/Header.tsx
+++ b/components/shared/Header.tsx
@@ -1,9 +1,11 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Icon, { IconName } from "@/components/shared/Icon";
-import Button from "@/components/shared/Button";
 import Badge from "@/components/shared/Badge";
-import UserInfoModal from "@/components/lobby/UserInfoModal";
 import { cn } from "@/lib/utils";
+import Modal from "./Modal";
+import { UserInfoForm } from "@/features/user";
+import useUser from "@/hooks/useUser";
+import { UserInfo } from "@/requests/users";
 
 enum HeaderActions {
   CHAT = "CHAT",
@@ -20,20 +22,29 @@ interface ButtonProps {
 
 interface HeaderProps {
   className?: string;
+  isChatVisible: boolean;
   onClickChatButton: () => void;
 }
 
 export default function Header({
   className,
+  isChatVisible,
   onClickChatButton,
 }: Readonly<HeaderProps>) {
-  const [openProfile, setOpenProfile] = useState(false);
+  const [isUserInfoVisible, setIsUserInfoVisible] = useState(false);
+  // TODO: 待優化登入就應可以取使用者資料
+  const [currentUserInfo, setCurrentUserInfo] = useState<UserInfo>();
+  const { getCurrentUser } = useUser();
+
+  useEffect(() => {
+    getCurrentUser().then((result) => setCurrentUserInfo(result));
+  }, []);
 
   const buttons: ButtonProps[] = [
     {
       iconName: "Chat",
       type: HeaderActions.CHAT,
-      isActive: false,
+      isActive: isChatVisible,
       onClick: onClickChatButton,
     },
     {
@@ -45,9 +56,9 @@ export default function Header({
     {
       iconName: "Player",
       type: HeaderActions.PROFILE,
-      isActive: openProfile,
+      isActive: isUserInfoVisible,
       onClick: () => {
-        setOpenProfile(true);
+        setIsUserInfoVisible(true);
       },
     },
   ];
@@ -71,22 +82,27 @@ export default function Header({
             placement="top-right"
             className={cn("top-1 right-1")}
           >
-            <button className="p-2.5" onClick={onClick}>
-              <Icon
-                name={iconName}
-                className={cn("w-5 h-5", {
-                  "[&_*]:stroke-white": isActive,
-                })}
-              />
+            <button
+              className={cn("p-2.5", isActive && "text-white")}
+              onClick={onClick}
+            >
+              <Icon name={iconName} className="w-5 h-5" />
             </button>
           </Badge>
         ))}
       </div>
-      {openProfile && (
-        <UserInfoModal
-          isOpen={openProfile}
-          onClose={() => setOpenProfile(false)}
-        />
+      {isUserInfoVisible && currentUserInfo && (
+        <Modal
+          title="修改暱稱"
+          isOpen={isUserInfoVisible}
+          onClose={() => setIsUserInfoVisible(false)}
+          size="medium"
+        >
+          <UserInfoForm
+            {...currentUserInfo}
+            onCancel={() => setIsUserInfoVisible(false)}
+          />
+        </Modal>
       )}
     </header>
   );
diff --git a/features/user/components/UserInfoForm/UserInfoForm.tsx b/features/user/components/UserInfoForm/UserInfoForm.tsx
new file mode 100644
index 00000000..66446ea6
--- /dev/null
+++ b/features/user/components/UserInfoForm/UserInfoForm.tsx
@@ -0,0 +1,115 @@
+import { useState, FormEvent, useRef } from "react";
+import { AxiosError } from "axios";
+
+import Button from "@/components/shared/Button/v2";
+import Input from "@/components/shared/Input";
+import useRequest from "@/hooks/useRequest";
+import { UserInfo, putUserinfoEndpoint } from "@/requests/users";
+import { useToast } from "@/components/shared/Toast";
+
+interface UserInfoFormProps extends UserInfo {
+  onCancel: () => void;
+}
+
+type UserInfoFormErrors = Partial<Record<keyof UserInfo, string>>;
+
+function UserInfoForm({
+  onCancel,
+  ...userInfoProps
+}: Readonly<UserInfoFormProps>) {
+  const { fetch } = useRequest();
+  const toast = useToast();
+  const [userInfo, setUserInfo] = useState<UserInfo>(userInfoProps);
+  const [errors, setErrors] = useState<UserInfoFormErrors>({});
+  const nicknameInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (Object.keys(errors).length) {
+      nicknameInputRef.current?.focus();
+      return;
+    }
+
+    try {
+      await fetch(
+        putUserinfoEndpoint({
+          ...userInfo,
+          nickname: userInfo.nickname.trim(),
+        }),
+        { toast: { show: false } }
+      );
+    } catch (error) {
+      if (error instanceof AxiosError) {
+        toast(
+          { state: "error", children: error.response?.data.message },
+          {
+            position: "bottom-left",
+          }
+        );
+      } else {
+        toast(
+          { state: "error", children: `無法預期的錯誤： ${error}` },
+          {
+            position: "bottom-left",
+          }
+        );
+      }
+    }
+  };
+
+  const handleNicknameChange = (nickname: string) => {
+    // Regex pattern for special characters. Allow only alphanumeric and spaces
+    const validNameRegex = /^[a-zA-Z0-9\u4E00-\u9FFF ]+$/;
+
+    setUserInfo((prev) => ({ ...prev, nickname }));
+
+    if (nickname.trim().length === 0) {
+      setErrors((pre) => ({ ...pre, nickname: "不可空白" }));
+    } else if (!validNameRegex.test(nickname)) {
+      setErrors((pre) => ({
+        ...pre,
+        nickname: "僅允許英文、中文、數字和空格",
+      }));
+    } else if (nickname.length < 4) {
+      setErrors((pre) => ({ ...pre, nickname: "暱稱長度過短" }));
+      return;
+    } else if (nickname.length > 16) {
+      setErrors((pre) => ({ ...pre, nickname: "暱稱長度過長" }));
+    } else {
+      setErrors((pre) => ({ ...pre, nickname: "" }));
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="mb-8 flex flex-col gap-4">
+        <Input
+          ref={nicknameInputRef}
+          label="暱稱"
+          placeholder="為你取一個暱稱"
+          inputWrapperClassName="w-full"
+          onChange={handleNicknameChange}
+          hintText={errors.nickname}
+          error={!!errors.nickname}
+          value={userInfo.nickname}
+          autoFocus
+        />
+      </div>
+      <footer className="flex justify-center gap-6">
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={onCancel}
+          className="w-36 py-2.5"
+        >
+          取消修改
+        </Button>
+        <Button type="submit" className="w-36 py-2.5">
+          儲存修改
+        </Button>
+      </footer>
+    </form>
+  );
+}
+
+export default UserInfoForm;
diff --git a/features/user/components/UserInfoForm/index.ts b/features/user/components/UserInfoForm/index.ts
new file mode 100644
index 00000000..6f65365a
--- /dev/null
+++ b/features/user/components/UserInfoForm/index.ts
@@ -0,0 +1 @@
+export { default } from "./UserInfoForm";
diff --git a/features/user/index.ts b/features/user/index.ts
new file mode 100644
index 00000000..008beb04
--- /dev/null
+++ b/features/user/index.ts
@@ -0,0 +1 @@
+export { default as UserInfoForm } from "./components/UserInfoForm";
diff --git a/tailwind.config.js b/tailwind.config.js
index bf8d0134..6ba44d20 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,7 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
     "./containers/**/*.{js,ts,jsx,tsx}",
+    "./features/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {

From 1a3703977985eb918281174f39c4b5bd8d38d359 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 20:25:26 +0800
Subject: [PATCH 18/27] feat(room): add create room form

---
 .../CreateRoomForm/CreateRoomForm.tsx         | 169 ++++++++++++++++++
 .../room/components/CreateRoomForm/index.ts   |   1 +
 features/room/index.ts                        |   1 +
 3 files changed, 171 insertions(+)
 create mode 100644 features/room/components/CreateRoomForm/CreateRoomForm.tsx
 create mode 100644 features/room/components/CreateRoomForm/index.ts
 create mode 100644 features/room/index.ts

diff --git a/features/room/components/CreateRoomForm/CreateRoomForm.tsx b/features/room/components/CreateRoomForm/CreateRoomForm.tsx
new file mode 100644
index 00000000..1275c8ea
--- /dev/null
+++ b/features/room/components/CreateRoomForm/CreateRoomForm.tsx
@@ -0,0 +1,169 @@
+import { useState, FormEvent, useRef, useEffect } from "react";
+import { useRouter } from "next/router";
+import useRequest from "@/hooks/useRequest";
+import Button from "@/components/shared/Button/v2";
+import Input from "@/components/shared/Input";
+import InputOTP, { InputOTPRef } from "@/components/shared/InputOTP";
+import Icon from "@/components/shared/Icon";
+import SelectBoxGroup from "@/components/shared/SelectBoxGroup";
+import { createRoomEndpoint, CreateRoomFormType } from "@/requests/rooms";
+
+const items = [
+  {
+    key: "Public",
+    label: (
+      <div className="px-2 py-1 flex gap-2.5 items-center justify-center whitespace-nowrap">
+        <Icon name="House" className="w-8 h-8" />
+        公開房間
+      </div>
+    ),
+    value: false,
+  },
+  {
+    key: "Private",
+    label: (
+      <div className="px-2 py-1 flex gap-2.5 items-center justify-center whitespace-nowrap">
+        <Icon name="HouseLock" className="w-8 h-8" />
+        私人房間
+      </div>
+    ),
+    value: true,
+  },
+];
+
+interface CreateRoomFormProps {
+  gameId: string;
+  minPlayers: number;
+  maxPlayers: number;
+  onCancel: () => void;
+}
+
+type CreateRoomFormErrors = Partial<Record<keyof CreateRoomFormType, string>>;
+
+function CreateRoomForm({
+  gameId,
+  minPlayers,
+  maxPlayers,
+  onCancel,
+}: Readonly<CreateRoomFormProps>) {
+  const [roomForm, setRoomForm] = useState<CreateRoomFormType>({
+    name: "",
+    gameId,
+    minPlayers,
+    maxPlayers,
+    password: "",
+  });
+  const { fetch } = useRequest();
+  const router = useRouter();
+  const [isLockRoom, setIsLockRoom] = useState(false);
+  const passwordInputRef = useRef<InputOTPRef>(null);
+  const gameNameInputRef = useRef<HTMLInputElement>(null);
+  const [errors, setErrors] = useState<CreateRoomFormErrors>({});
+
+  const handleChange =
+    <T extends keyof CreateRoomFormType>(key: T) =>
+    (value: CreateRoomFormType[T]) => {
+      setRoomForm((pre) => ({
+        ...pre,
+        [key]: value,
+      }));
+    };
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    setErrors({});
+
+    const newErrors: CreateRoomFormErrors = {};
+
+    if (isLockRoom && roomForm.password?.length !== 4) {
+      passwordInputRef.current?.focus();
+      newErrors.password = "請輸入遊戲密碼";
+    }
+    if (!roomForm.name) {
+      gameNameInputRef.current?.focus();
+      newErrors.name = "請輸入房間名稱";
+    }
+
+    if (Object.keys(newErrors).length) {
+      setErrors(newErrors);
+      return;
+    }
+
+    const result = await fetch(createRoomEndpoint(roomForm));
+    router.push(`/rooms/${result.id}`);
+  };
+
+  useEffect(() => {
+    if (isLockRoom) {
+      passwordInputRef.current?.focus();
+    } else {
+      setRoomForm((pre) => ({
+        ...pre,
+        password: "",
+      }));
+    }
+  }, [isLockRoom]);
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="mb-8 flex flex-col gap-4">
+        <Input
+          ref={gameNameInputRef}
+          label="房間名稱"
+          placeholder="為你的房間取一個名字"
+          inputWrapperClassName="w-full"
+          onChange={handleChange("name")}
+          hintText={errors.name}
+          error={!!errors.name}
+          value={roomForm.name}
+          autoFocus
+        />
+        <div>
+          <div className="mb-1 text-sm font-medium text-primary-200">
+            房間人數
+          </div>
+          <div className="mb-1 text-sm font-medium text-primary-300">
+            {minPlayers}-{maxPlayers}人
+          </div>
+        </div>
+        <SelectBoxGroup
+          label="房間類型"
+          items={items}
+          labelClassName="text-sm"
+          itemWrapperClassName="flex"
+          itemClassName="grow"
+          value={isLockRoom}
+          onChange={setIsLockRoom}
+        />
+        {isLockRoom && (
+          <InputOTP
+            ref={passwordInputRef}
+            label="房間密碼"
+            labelClassName="text-sm"
+            hintText={errors.password}
+            error={!!errors.password}
+            value={roomForm.password}
+            onChange={handleChange("password")}
+            length={4}
+          />
+        )}
+      </div>
+      <footer className="flex justify-center gap-6">
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={onCancel}
+          className="w-36 py-2.5"
+        >
+          關閉
+        </Button>
+        <Button type="submit" className="flex w-36 py-2.5">
+          <Icon name="Gamepad" className="w-6 h-6" />
+          即刻遊戲
+        </Button>
+      </footer>
+    </form>
+  );
+}
+
+export default CreateRoomForm;
diff --git a/features/room/components/CreateRoomForm/index.ts b/features/room/components/CreateRoomForm/index.ts
new file mode 100644
index 00000000..ff7236f0
--- /dev/null
+++ b/features/room/components/CreateRoomForm/index.ts
@@ -0,0 +1 @@
+export { default } from "./CreateRoomForm";
diff --git a/features/room/index.ts b/features/room/index.ts
new file mode 100644
index 00000000..07914bb6
--- /dev/null
+++ b/features/room/index.ts
@@ -0,0 +1 @@
+export { default as CreateRoomModal } from "./components/CreateRoomForm";

From 1a97dad42c85be2737433ab097c33b8e5a6e9a1b Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 20:26:21 +0800
Subject: [PATCH 19/27] feat(room): add game room action buttons

---
 .../GameRoomActions/GameRoomActions.tsx       | 154 ++++++++++++++++++
 .../room/components/GameRoomActions/index.ts  |   1 +
 features/room/index.ts                        |   1 +
 3 files changed, 156 insertions(+)
 create mode 100644 features/room/components/GameRoomActions/GameRoomActions.tsx
 create mode 100644 features/room/components/GameRoomActions/index.ts

diff --git a/features/room/components/GameRoomActions/GameRoomActions.tsx b/features/room/components/GameRoomActions/GameRoomActions.tsx
new file mode 100644
index 00000000..e2255519
--- /dev/null
+++ b/features/room/components/GameRoomActions/GameRoomActions.tsx
@@ -0,0 +1,154 @@
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { AxiosError } from "axios";
+import { Button, ButtonSize } from "@/components/shared/Button/v2";
+import useRequest from "@/hooks/useRequest";
+import { useRouter } from "next/router";
+import { useToast } from "@/components/shared/Toast";
+import useUser from "@/hooks/useUser";
+import { CarouselItemProps } from "@/components/shared/Carousel/v2";
+import { GameType } from "@/requests/games";
+import { fastJoinGameEndpoint } from "@/requests/rooms";
+import Icon from "@/components/shared/Icon";
+import Modal from "@/components/shared/Modal";
+import { cn } from "@/lib/utils";
+import CreateRoomModal from "../CreateRoomForm";
+
+interface GameRoomActions extends GameType {
+  tabIndex?: number;
+}
+
+function GameRoomActions({
+  id,
+  name,
+  minPlayers,
+  maxPlayers,
+  tabIndex,
+}: Readonly<GameRoomActions>) {
+  const { fetch } = useRequest();
+  const toast = useToast();
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
+  const [showCreateRoomModal, setShowCreateRoomModal] = useState(false);
+  const { updateRoomId } = useUser();
+  const menuTabIndex = showMenu ? tabIndex : -1;
+
+  const handleFastJoin = async () => {
+    try {
+      setIsLoading(true);
+      const { roomId } = await fetch(fastJoinGameEndpoint(id));
+      router.push(`/rooms/${roomId}`);
+      updateRoomId(roomId);
+    } catch (error) {
+      if (error instanceof AxiosError) {
+        toast(
+          { state: "error", children: error.response?.data.message },
+          { position: "top" }
+        );
+      } else {
+        toast(
+          { state: "error", children: `無法預期的錯誤： ${error}` },
+          { position: "top" }
+        );
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setShowMenu(false);
+    };
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <div className="m-4 flex gap-4 pt-10">
+      <Button
+        variant="primaryTransparent"
+        className="flex"
+        disabled={isLoading}
+        tabIndex={tabIndex}
+        onClick={handleFastJoin}
+      >
+        <Icon name="Gamepad" className="w-6 h-6" />
+        快速遊戲
+      </Button>
+      <div className="relative">
+        <Button
+          variant="primaryTransparent"
+          size={ButtonSize.Icon}
+          tabIndex={tabIndex}
+          onClick={() => setShowMenu((pre) => !pre)}
+        >
+          <Icon name="Menu" className="w-6 h-6 rotate-90" />
+        </Button>
+        <div
+          className={cn(
+            "absolute bottom-full right-0 mb-2 transition-transform origin-[calc(100%-22px)_bottom] z-20",
+            !showMenu && "scale-0"
+          )}
+        >
+          <ul className="py-4 frosted-shadow-box text-primary-800 bg-primary-200/60 whitespace-nowrap rounded-lg">
+            <li>
+              <Link
+                href="/rooms"
+                className="block w-full text-left px-4 py-1 hover:bg-primary-900/20 cursor-pointer"
+                tabIndex={menuTabIndex}
+              >
+                加入現有房間
+              </Link>
+            </li>
+            <li>
+              <button
+                type="button"
+                className="block w-full text-left px-4 py-1 hover:bg-primary-900/20 cursor-pointer"
+                tabIndex={menuTabIndex}
+                onClick={() => setShowCreateRoomModal(true)}
+              >
+                開設新房間
+              </button>
+              <Modal
+                title={`開新房間: ${name}`}
+                isOpen={showCreateRoomModal}
+                onClose={() => setShowCreateRoomModal(false)}
+                size="medium"
+              >
+                <CreateRoomModal
+                  gameId={id}
+                  minPlayers={minPlayers}
+                  maxPlayers={maxPlayers}
+                  onCancel={() => setShowCreateRoomModal(false)}
+                />
+              </Modal>
+            </li>
+            <li>
+              <button
+                type="button"
+                className="block w-full text-left px-4 py-1 hover:bg-primary-900/20 cursor-pointer"
+                onClick={() =>
+                  toast(
+                    {
+                      children: "遊戲詳細介紹頁尚未實作，敬請期待",
+                      state: "warning",
+                    },
+                    { position: "top" }
+                  )
+                }
+                tabIndex={menuTabIndex}
+              >
+                遊戲詳情
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default GameRoomActions;
diff --git a/features/room/components/GameRoomActions/index.ts b/features/room/components/GameRoomActions/index.ts
new file mode 100644
index 00000000..4aacc14a
--- /dev/null
+++ b/features/room/components/GameRoomActions/index.ts
@@ -0,0 +1 @@
+export { default } from "./GameRoomActions";
diff --git a/features/room/index.ts b/features/room/index.ts
index 07914bb6..c0c7666a 100644
--- a/features/room/index.ts
+++ b/features/room/index.ts
@@ -1 +1,2 @@
 export { default as CreateRoomModal } from "./components/CreateRoomForm";
+export { default as GameRoomActions } from "./components/GameRoomActions";

From be46eb87302102ce2fc9e0a7b90ae5625bffabb5 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 20:27:49 +0800
Subject: [PATCH 20/27] feat(game): add game card simple and detailed

---
 .../GameCardDetailed/GameCardDetailed.tsx     | 88 +++++++++++++++++++
 .../game/components/GameCardDetailed/index.ts |  1 +
 .../GameCardSimple/GameCardSimple.tsx         | 30 +++++++
 .../game/components/GameCardSimple/index.ts   |  1 +
 features/game/index.ts                        |  2 +
 5 files changed, 122 insertions(+)
 create mode 100644 features/game/components/GameCardDetailed/GameCardDetailed.tsx
 create mode 100644 features/game/components/GameCardDetailed/index.ts
 create mode 100644 features/game/components/GameCardSimple/GameCardSimple.tsx
 create mode 100644 features/game/components/GameCardSimple/index.ts
 create mode 100644 features/game/index.ts

diff --git a/features/game/components/GameCardDetailed/GameCardDetailed.tsx b/features/game/components/GameCardDetailed/GameCardDetailed.tsx
new file mode 100644
index 00000000..027a47c2
--- /dev/null
+++ b/features/game/components/GameCardDetailed/GameCardDetailed.tsx
@@ -0,0 +1,88 @@
+import { PropsWithChildren } from "react";
+
+import gameDefaultCoverImg from "@/public/images/game-default-cover.png";
+import { GameType } from "@/requests/games";
+import Icon from "@/components/shared/Icon";
+import Cover from "@/components/shared/Cover";
+
+function GameCardDetailed({
+  children,
+  img,
+  name,
+  createdOn,
+  maxPlayers,
+  minPlayers,
+}: PropsWithChildren<GameType>) {
+  return (
+    <div className="flex text-white mx-10 px-11 gap-4">
+      <div className="relative flex items-end justify-end flex-[60%]">
+        <Cover
+          src={img || gameDefaultCoverImg.src}
+          alt={name}
+          draggable={false}
+          priority
+          fill
+          className="object-cover"
+        />
+        {children}
+      </div>
+      <div className="flex-[40%] p-4 rounded-lg bg-primary-50/8">
+        <div className="text-xs text-primary-300">Game Name</div>
+        <div className="text-xl text-primary-100">{name}</div>
+        <div className="flex gap-6 mb-2 text-xs text-primary-300">
+          <div className="flex-1 flex items-center gap-1.5">
+            <span>4.8</span>
+            <Icon name="Star" className="w-3 h-3 fill-yellow-400" />
+            <Icon name="Star" className="w-3 h-3 fill-yellow-400" />
+            <Icon name="Star" className="w-3 h-3 fill-yellow-400" />
+            <Icon name="Star" className="w-3 h-3 fill-yellow-400" />
+            <Icon name="Star" className="w-3 h-3 fill-yellow-400" />
+            <span>(66)</span>
+          </div>
+          <time className="flex-1 flex items-center gap-1">
+            <Icon name="Calendar" className="w-3 h-3" />
+            {createdOn.slice(0, 10).replace(/-/g, ".")}
+          </time>
+        </div>
+        <div className="mb-3">
+          <ul className="flex gap-3">
+            <li className="relative w-16 h-10">
+              {img && (
+                <Cover
+                  src={img}
+                  alt={name}
+                  draggable={false}
+                  priority
+                  fill
+                  className="object-cover"
+                />
+              )}
+            </li>
+          </ul>
+        </div>
+        <div className="mb-3 text-xs text-primary-50 h-12">暫無描述</div>
+        <div>
+          <ul className="flex flex-wrap gap-2 text-xs h-12">
+            {maxPlayers === 1 && (
+              <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5 h-fit">
+                單人遊戲
+              </li>
+            )}
+            {maxPlayers === minPlayers && maxPlayers > 1 && (
+              <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5 h-fit">
+                {maxPlayers} 人遊戲
+              </li>
+            )}
+            {maxPlayers !== minPlayers && maxPlayers > 1 && (
+              <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5 h-fit">
+                {minPlayers} - {maxPlayers} 玩家
+              </li>
+            )}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default GameCardDetailed;
diff --git a/features/game/components/GameCardDetailed/index.ts b/features/game/components/GameCardDetailed/index.ts
new file mode 100644
index 00000000..77e1d14f
--- /dev/null
+++ b/features/game/components/GameCardDetailed/index.ts
@@ -0,0 +1 @@
+export { default } from "./GameCardDetailed";
diff --git a/features/game/components/GameCardSimple/GameCardSimple.tsx b/features/game/components/GameCardSimple/GameCardSimple.tsx
new file mode 100644
index 00000000..3e99502b
--- /dev/null
+++ b/features/game/components/GameCardSimple/GameCardSimple.tsx
@@ -0,0 +1,30 @@
+import { PropsWithChildren } from "react";
+
+import gameDefaultCoverImg from "@/public/images/game-default-cover.png";
+import { GameType } from "@/requests/games";
+import Cover from "@/components/shared/Cover";
+
+function GameCardSimple({ children, img, name }: PropsWithChildren<GameType>) {
+  return (
+    <div className="group">
+      <div className="relative aspect-game-cover flex items-end justify-end">
+        <picture className="overflow-hidden">
+          <Cover
+            src={img || gameDefaultCoverImg.src}
+            alt={name}
+            draggable={false}
+            priority
+            fill
+            className="object-cover"
+          />
+        </picture>
+        <div className="opacity-0 group-hover:opacity-100 transition-opacity">
+          {children}
+        </div>
+      </div>
+      <h2>{name}</h2>
+    </div>
+  );
+}
+
+export default GameCardSimple;
diff --git a/features/game/components/GameCardSimple/index.ts b/features/game/components/GameCardSimple/index.ts
new file mode 100644
index 00000000..fe332cff
--- /dev/null
+++ b/features/game/components/GameCardSimple/index.ts
@@ -0,0 +1 @@
+export { default } from "./GameCardSimple";
diff --git a/features/game/index.ts b/features/game/index.ts
new file mode 100644
index 00000000..d7a8897a
--- /dev/null
+++ b/features/game/index.ts
@@ -0,0 +1,2 @@
+export { default as GameCardDetailed } from "./components/GameCardDetailed";
+export { default as GameCardSimple } from "./components/GameCardSimple";

From acb449505ede6a92ed4694fce387319352441bb9 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 20:30:15 +0800
Subject: [PATCH 21/27] feat(InputOTP): add ref support for external focus
 control

---
 components/shared/InputOTP/InputOTP.tsx | 73 ++++++++++++++++++++-----
 1 file changed, 60 insertions(+), 13 deletions(-)

diff --git a/components/shared/InputOTP/InputOTP.tsx b/components/shared/InputOTP/InputOTP.tsx
index 3e98491a..4353ea52 100644
--- a/components/shared/InputOTP/InputOTP.tsx
+++ b/components/shared/InputOTP/InputOTP.tsx
@@ -1,26 +1,46 @@
-import { useRef, KeyboardEvent, useId, useState, useEffect } from "react";
+import {
+  useRef,
+  KeyboardEvent,
+  useId,
+  useState,
+  useEffect,
+  ForwardRefRenderFunction,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
 import Input from "@/components/shared/Input";
 import { cn } from "@/lib/utils";
 
-type InputOTPProps = {
+export interface InputOTPRef {
+  focus: () => void;
+}
+
+interface InputOTPProps {
   length: number;
   value?: string;
   defaultValue?: string;
   label?: string;
   error?: boolean;
+  hintText?: string;
   labelClassName?: string;
+  hintTextClassName?: string;
   onChange?: (value: string) => void;
-};
+}
 
-function InputOTP({
-  length,
-  value,
-  defaultValue = "",
-  label,
-  error,
-  labelClassName,
-  onChange,
-}: InputOTPProps) {
+const InternalInputOTP: ForwardRefRenderFunction<InputOTPRef, InputOTPProps> = (
+  {
+    length,
+    value,
+    defaultValue = "",
+    label,
+    error,
+    hintText,
+    labelClassName,
+    hintTextClassName,
+    onChange,
+  },
+  ref
+) => {
   const reactId = useId();
   const inputOPTId = `input_opt_${reactId}`;
   const [chars, setChars] = useState(() => (value || defaultValue).split(""));
@@ -80,6 +100,20 @@ function InputOTP({
     }
   }, [value]);
 
+  useImperativeHandle(
+    ref,
+    () => {
+      const firstElement = inputsRef.current[0];
+
+      return {
+        focus() {
+          firstElement?.focus();
+        },
+      };
+    },
+    []
+  );
+
   return (
     <div>
       {label && (
@@ -107,8 +141,21 @@ function InputOTP({
           />
         ))}
       </div>
+      {hintText && (
+        <div
+          className={cn(
+            "text-grey-500 text-sm",
+            error && "text-error-300",
+            hintTextClassName
+          )}
+        >
+          {hintText}
+        </div>
+      )}
     </div>
   );
-}
+};
+
+const InputOTP = forwardRef(InternalInputOTP);
 
 export default InputOTP;

From 85ce81be31d4d0e9b92c20cc1e08f3a811254435 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 20:31:10 +0800
Subject: [PATCH 22/27] refactor: change to features

---
 .../lobby/CreateRoomModal/CreateRoomModal.tsx | 262 ------------------
 .../GameListModal/GameList/CategoryTitle.tsx  |  13 -
 .../GameListModal/GameList/GameItem.tsx       |  37 ---
 .../GameListModal/GameList/index.tsx          |  46 ---
 .../GameListModal/GameListModal.tsx           |  49 ----
 .../GameListModal/gameListModal.module.css    |   3 -
 .../CreateRoomModal/GameListModal/index.tsx   |   3 -
 .../createRoomModall.module.css               |  13 -
 components/lobby/CreateRoomModal/index.tsx    |   3 -
 components/lobby/FastJoinButton.tsx           | 102 -------
 containers/layout/AppLayout.tsx               |   1 +
 pages/index.tsx                               | 213 +-------------
 12 files changed, 12 insertions(+), 733 deletions(-)
 delete mode 100644 components/lobby/CreateRoomModal/CreateRoomModal.tsx
 delete mode 100644 components/lobby/CreateRoomModal/GameListModal/GameList/CategoryTitle.tsx
 delete mode 100644 components/lobby/CreateRoomModal/GameListModal/GameList/GameItem.tsx
 delete mode 100644 components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx
 delete mode 100644 components/lobby/CreateRoomModal/GameListModal/GameListModal.tsx
 delete mode 100644 components/lobby/CreateRoomModal/GameListModal/gameListModal.module.css
 delete mode 100644 components/lobby/CreateRoomModal/GameListModal/index.tsx
 delete mode 100644 components/lobby/CreateRoomModal/createRoomModall.module.css
 delete mode 100644 components/lobby/CreateRoomModal/index.tsx
 delete mode 100644 components/lobby/FastJoinButton.tsx

diff --git a/components/lobby/CreateRoomModal/CreateRoomModal.tsx b/components/lobby/CreateRoomModal/CreateRoomModal.tsx
deleted file mode 100644
index 19827b06..00000000
--- a/components/lobby/CreateRoomModal/CreateRoomModal.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import { useState, useEffect, FormEvent, ChangeEvent } from "react";
-import { useRouter } from "next/router";
-import useRequest from "@/hooks/useRequest";
-import { createRoomEndpoint, CreateRoomFormType } from "@/requests/rooms";
-import { getAllGamesEndpoint, GameType } from "@/requests/games";
-import Button from "@/components/shared/Button";
-import Modal from "@/components/shared/Modal";
-import GameListModal from "./GameListModal";
-import Input from "@/components/shared/Input";
-import PasswordField from "@/components/shared/PasswordField";
-import Icon from "@/components/shared/Icon";
-import styles from "./createRoomModall.module.css";
-
-const initialRoomFormState = {
-  name: "",
-  gameId: "",
-  minPlayers: 0,
-  maxPlayers: 0,
-};
-
-export default function CreateRoomModal({ tabIndex }: { tabIndex: number }) {
-  const [showThisModal, setshowThisModal] = useState(false);
-  const [showGameListModal, setShowGameListModal] = useState(false);
-  const [gameList, setGameList] = useState<GameType[]>([]);
-  const [roomForm, setRoomForm] =
-    useState<CreateRoomFormType>(initialRoomFormState);
-  const [currentGame, setCurrentGame] = useState<GameType | undefined>(
-    undefined
-  );
-  const [isPublic, setIsPublic] = useState<boolean>(true);
-  const [passwordValues, setPasswordValues] = useState(["", "", "", ""]);
-  const { fetch } = useRequest();
-  const { push } = useRouter();
-  useEffect(() => {
-    if (isPublic) return;
-    setRoomForm((prev) => ({
-      ...prev,
-      password: passwordValues.join(""),
-    }));
-  }, [passwordValues, isPublic]);
-
-  // get game list
-  useEffect(() => {
-    async function handleGetAllGame() {
-      const result = await fetch(getAllGamesEndpoint());
-      setGameList(result);
-    }
-    handleGetAllGame();
-  }, [fetch]);
-
-  function handleChangeGame(gameId: string) {
-    const game = gameList.find((game) => game.id === gameId);
-    if (game) {
-      setCurrentGame(game);
-      setRoomForm((prev) => ({
-        ...prev,
-        gameId: game.id,
-        minPlayers: game.minPlayers,
-        maxPlayers: game.maxPlayers,
-      }));
-    }
-    setShowGameListModal(false);
-  }
-
-  function handleChangeRoomName(value: string) {
-    setRoomForm((prev) => ({ ...prev, name: value }));
-  }
-
-  function handleChangeMaxplayers(event: ChangeEvent<HTMLInputElement>) {
-    setRoomForm((prev) => ({
-      ...prev,
-      maxPlayers: Number(event.target.value),
-    }));
-  }
-
-  function handleRoomTypeChange(event: ChangeEvent<HTMLInputElement>) {
-    const isPublic = event.target.value === "public";
-    setIsPublic(isPublic);
-  }
-
-  async function handleCreateRoom(event: FormEvent) {
-    event.preventDefault();
-    // valid
-    if (!roomForm.gameId) return;
-    if (!isPublic && roomForm.password?.length !== 4) return;
-    // send request
-    const result = await fetch(createRoomEndpoint(roomForm));
-    push(`/rooms/${result.id}`);
-  }
-
-  function handleCloseModal() {
-    setShowGameListModal(false);
-    setshowThisModal(false);
-  }
-
-  function getPasswordSelected(e: React.MouseEvent<HTMLElement>) {
-    setIsPublic(false);
-  }
-
-  return (
-    <>
-      <button
-        type="button"
-        className="block w-full text-left px-4 py-1 hover:bg-primary-900/20 cursor-pointer"
-        tabIndex={tabIndex}
-        onClick={() => setshowThisModal(true)}
-      >
-        開設新房間
-      </button>
-      <Modal
-        title="開新房間"
-        isOpen={showThisModal}
-        onClose={handleCloseModal}
-        size="medium"
-      >
-        {showGameListModal ? (
-          <GameListModal
-            activeGameId={roomForm.gameId}
-            gameList={gameList}
-            onGameChange={handleChangeGame}
-            onClose={() => setShowGameListModal(false)}
-          />
-        ) : (
-          <form className="flex flex-col gap-[24px] py-10 px-[55px] lg:h-[500px] mx-auto">
-            <div className="flex">
-              <div className="w-full">
-                <Input
-                  label="請輸入房間名稱"
-                  onChange={handleChangeRoomName}
-                  value={roomForm.name}
-                  name="name"
-                  id="name"
-                  required
-                  className="w-full"
-                  //  errorMessage={"請選擇遊戲"}
-                  //  errorClassName="flex justify-end" // 若需要實作 error message，需加入行高防止抖動。
-                />
-              </div>
-            </div>
-            <div className="flex items-center relative ">
-              <div className="w-full">
-                <Input
-                  inputClassName="cursor-pointer"
-                  label="請選擇遊戲"
-                  value={currentGame?.name}
-                  required
-                  readOnly
-                  onClick={() => setShowGameListModal(true)}
-                  error={roomForm.gameId === ""}
-                  // errorMessage={"請選擇遊戲"}
-                  // errorClassName="flex justify-end"  // 若需要實作 error message，需加入行高防止抖動。
-                />
-              </div>
-              <button
-                type="button"
-                className="ml-[9px] absolute top-1/2 right-[-8px] translate-x-[100%] translate-y-[-50%]"
-                onClick={() => setShowGameListModal(true)}
-              >
-                <Icon className="[&_*]:hover:stroke-[#2F88FF]" name="Gamepad" />
-              </button>
-            </div>
-            <div className="flex gap-2 ">
-              <Input
-                label="請選擇人數"
-                inputClassName="hidden"
-                className="w-[120px] md:w-[145px] lg:w-[192px]"
-              />
-              <div className="grid grid-cols-4 md:grid-cols-5 lg:grid-cols-10 gap-[13px]">
-                {Object.keys(Array.from({ length: 10 })).map((_, index) => (
-                  <div key={index + 1}>
-                    <input
-                      value={index + 1}
-                      name="maxPlayers"
-                      id={`radio-maxPlayers-${index + 1}`}
-                      type="radio"
-                      className={`radio__maxPlayers hidden ${styles.radio__maxPlayers}`}
-                      checked={roomForm.maxPlayers === index + 1}
-                      onChange={handleChangeMaxplayers}
-                      disabled={
-                        (currentGame && index + 1 > currentGame.maxPlayers) ||
-                        (currentGame && index + 1 < currentGame.minPlayers)
-                      }
-                    />
-                    <label
-                      htmlFor={`radio-maxPlayers-${index + 1}`}
-                      className="flex items-center justify-center h-[34px] w-[45px] border-[#1E1F22] border rounded-[10px] text-base cursor-pointer hover:border-[#2F88FF] hover:border-1 transition-colors"
-                    >
-                      {index + 1}人
-                    </label>
-                  </div>
-                ))}
-              </div>
-            </div>
-            <div className="flex">
-              <Input
-                label="請選擇房間類型"
-                inputClassName="hidden"
-                className="inline-block min-w-[145px]"
-              />
-              <div className="flex gap-[21px] lg:gap-[42px] lg:mx-auto flex-col lg:flex-row">
-                <div>
-                  <input
-                    id="radio-isPublic-public"
-                    name="isPublic"
-                    type="radio"
-                    value="public"
-                    className={`hidden ${styles.radio__isPublic}`}
-                    checked={isPublic}
-                    onChange={handleRoomTypeChange}
-                  />
-                  <label
-                    htmlFor="radio-isPublic-public"
-                    className="block label__container w-[200px] h-[133px] rounded-[10px] border border-[#1E1F22] pt-[14px] px-6 text-center text-base cursor-pointer"
-                  >
-                    公開房間
-                    <div className="text-sm mt-[14px] flex flex-col">
-                      <span>不須輸入密碼</span>
-                      <span>任何人都能加入此房間</span>
-                    </div>
-                  </label>
-                </div>
-                <div>
-                  <input
-                    id="radio-isPublic-private"
-                    name="isPublic"
-                    type="radio"
-                    value="private"
-                    className={`hidden ${styles.radio__isPublic}`}
-                    checked={!isPublic}
-                    onChange={handleRoomTypeChange}
-                  />
-
-                  <label
-                    htmlFor="radio-isPublic-private"
-                    className="block label__container w-[200px] h-[133px] rounded-[10px] border border-[#1E1F22] pt-[14px] px-6 text-center text-base cursor-pointer"
-                  >
-                    <PasswordField
-                      active={!isPublic}
-                      title={"私人房間"}
-                      subTitle={"請輸入此房間密碼"}
-                      passwordValues={passwordValues}
-                      setPasswordValues={setPasswordValues}
-                      onInputClick={getPasswordSelected}
-                    />
-                  </label>
-                </div>
-              </div>
-            </div>
-
-            <Button
-              type="submit"
-              onClick={handleCreateRoom}
-              className="max-w-[446px] w-full flex justify-center text-white bg-[#2F88FF] rounded-[21px] self-center lg:mt-9"
-            >
-              開設新房間
-            </Button>
-          </form>
-        )}
-      </Modal>
-    </>
-  );
-}
diff --git a/components/lobby/CreateRoomModal/GameListModal/GameList/CategoryTitle.tsx b/components/lobby/CreateRoomModal/GameListModal/GameList/CategoryTitle.tsx
deleted file mode 100644
index d20e7bf0..00000000
--- a/components/lobby/CreateRoomModal/GameListModal/GameList/CategoryTitle.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-interface CategoryTitle {
-  title: string;
-}
-
-function CategoryTitle({ title }: CategoryTitle) {
-  return (
-    <div className="relative pl-2 inline-block text-base font-black text-white before:contents-[''] before:w-1 before:h-4 before:bg-[#2F88FF] before:absolute before:left-0 before:top-1/2 before:translate-y-[-50%]">
-      {title}
-    </div>
-  );
-}
-
-export default CategoryTitle;
diff --git a/components/lobby/CreateRoomModal/GameListModal/GameList/GameItem.tsx b/components/lobby/CreateRoomModal/GameListModal/GameList/GameItem.tsx
deleted file mode 100644
index 44c99a95..00000000
--- a/components/lobby/CreateRoomModal/GameListModal/GameList/GameItem.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import Avatar from "@/components/shared/Avatar";
-import styles from "../gameListModal.module.css";
-import { GameType } from "@/requests/games";
-interface GameItemProp {
-  game: GameType;
-  checked: boolean;
-  onChange: () => void;
-}
-
-function GameItem({ game, onChange, checked }: GameItemProp) {
-  return (
-    <li>
-      <input
-        type="radio"
-        className={`hidden ${styles.gamePickRadio}`}
-        name="game-pick-radio"
-        value={game.id}
-        id={`game-pick-radio-${game.id}`}
-        checked={checked}
-        onChange={onChange}
-      />
-      <label
-        htmlFor={`game-pick-radio-${game.id}`}
-        className="flex gap-3 w-[197px] p-[11px] rounded-[10px] border border-solid border-[#1E1F22] cursor-pointer hover:border-[#2F88FF] transition"
-      >
-        <div className="w-[34px] h-[34px] rounded-[10px] items-center">
-          <Avatar src={game.img} type="image" isOnline={false} size="default" />
-        </div>
-        <span className="text text-sm text-white leading-[34px]">
-          {game.name}
-        </span>
-      </label>
-    </li>
-  );
-}
-
-export default GameItem;
diff --git a/components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx b/components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx
deleted file mode 100644
index 2a267e97..00000000
--- a/components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import CategoryTitle from "./CategoryTitle";
-import PickGameItem from "./GameItem";
-import { GameType } from "@/requests/games";
-
-interface GameListProp {
-  activeGameId: string;
-  gameList: GameType[];
-  onGameChange: (gameId: string) => void;
-}
-
-type GroupedGamesType = {
-  [category: string]: GameType[];
-};
-
-function GameList({ gameList, onGameChange, activeGameId }: GameListProp) {
-  const groupedGames = gameList.reduce((result: GroupedGamesType, game) => {
-    const category = "其他";
-    if (!result[category]) {
-      result[category] = [];
-    }
-    result[category].push(game);
-    return result;
-  }, {});
-
-  return (
-    <>
-      {Object.entries(groupedGames).map(([category, games]) => (
-        <div key={category} className="pt-[50px] first-of-type:pt-0 pb-1">
-          <CategoryTitle title={category} />
-          <ul className="grid grid-cols-2 lg:grid-cols-4 gap-x-[14px] gap-y-[15px] mt-[14.5px]">
-            {games.map((game) => (
-              <PickGameItem
-                key={game.id}
-                checked={activeGameId === game.id}
-                game={game}
-                onChange={() => onGameChange(game.id)}
-              />
-            ))}
-          </ul>
-        </div>
-      ))}
-    </>
-  );
-}
-
-export default GameList;
diff --git a/components/lobby/CreateRoomModal/GameListModal/GameListModal.tsx b/components/lobby/CreateRoomModal/GameListModal/GameListModal.tsx
deleted file mode 100644
index 1ff8e31d..00000000
--- a/components/lobby/CreateRoomModal/GameListModal/GameListModal.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import GameList from "./GameList";
-import { GameType } from "@/requests/games";
-interface GamePickModalProps {
-  gameList: GameType[];
-  activeGameId: string;
-  onGameChange: (gameId: string) => void;
-  onClose: () => void;
-}
-
-export default function GameListModal({
-  onGameChange,
-  onClose,
-  gameList,
-  activeGameId,
-}: GamePickModalProps) {
-  return (
-    <div className="relative left-0 w-full h-[500px] bg-[#292A2D] rounded-[10px] py-[25px]">
-      <button
-        className="absolute  w-[68px] h-[68px]  translate-y-[-100%] top-[-36px] lg:translate-x-[-100%] lg:top-[-30px] lg:left-[-48px] lg:translate-y-0  text-white rounded-[10px] bg-[#292A2D]"
-        onClick={onClose}
-      >
-        {/* TODO replace inline-svg to Icon component */}
-        <svg
-          style={{ margin: "0 auto" }}
-          width="12"
-          height="21"
-          viewBox="0 0 12 21"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M10.4335 18.867L2 10.4335L10.4335 2"
-            stroke="white"
-            strokeWidth="2.81116"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </button>
-      <div className={`scrollbar overflow-y-scroll h-full pr-4`}>
-        <GameList
-          gameList={gameList}
-          onGameChange={onGameChange}
-          activeGameId={activeGameId}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/components/lobby/CreateRoomModal/GameListModal/gameListModal.module.css b/components/lobby/CreateRoomModal/GameListModal/gameListModal.module.css
deleted file mode 100644
index 40fa29ed..00000000
--- a/components/lobby/CreateRoomModal/GameListModal/gameListModal.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.gamePickRadio:checked ~ label {
-  border: 1px solid #2f88ff;
-}
diff --git a/components/lobby/CreateRoomModal/GameListModal/index.tsx b/components/lobby/CreateRoomModal/GameListModal/index.tsx
deleted file mode 100644
index 763729f9..00000000
--- a/components/lobby/CreateRoomModal/GameListModal/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import GameListModal from "./GameListModal";
-
-export default GameListModal;
diff --git a/components/lobby/CreateRoomModal/createRoomModall.module.css b/components/lobby/CreateRoomModal/createRoomModall.module.css
deleted file mode 100644
index 52ee7ff4..00000000
--- a/components/lobby/CreateRoomModal/createRoomModall.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.radio__maxPlayers:checked ~ label {
-  box-shadow: 0 0 0 2px #2f88ff inset;
-}
-
-.radio__maxPlayers:disabled ~ label {
-  border: 1px solid #353a41;
-  color: #353a41;
-}
-
-.radio__isPublic:checked ~ label {
-  border: 1px solid #2f88ff;
-  box-shadow: 0 0 0 1px #2f88ff inset;
-}
diff --git a/components/lobby/CreateRoomModal/index.tsx b/components/lobby/CreateRoomModal/index.tsx
deleted file mode 100644
index 64703eee..00000000
--- a/components/lobby/CreateRoomModal/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import CreateRoomModal from "./CreateRoomModal";
-
-export default CreateRoomModal;
diff --git a/components/lobby/FastJoinButton.tsx b/components/lobby/FastJoinButton.tsx
deleted file mode 100644
index 8ebbfa27..00000000
--- a/components/lobby/FastJoinButton.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { ChangeEvent, FC, useState, useEffect } from "react";
-import Button from "@/components/shared/Button";
-import { getAllGamesEndpoint, GameType } from "@/requests/games";
-import useRequest from "@/hooks/useRequest";
-import { fastJoinGameEndpoint } from "@/requests/rooms";
-import { useRouter } from "next/router";
-import { AxiosError } from "axios";
-import { useToast } from "@/components/shared/Toast";
-
-const FastJoinButton: FC = () => {
-  const { fetch } = useRequest();
-  const [selectedOption, setSelectedOption] = useState<null | GameType>(null);
-  const [gameListOptions, setGameListOptions] = useState<GameType[]>([]);
-  const [loading, setLoading] = useState(false);
-  const { push } = useRouter();
-  const toast = useToast();
-
-  const handleSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    const selectedValue = event.target.value;
-    const selectedOption = gameListOptions.find(
-      (option) => option.id === selectedValue
-    );
-    if (!selectedOption) throw new Error("selected option not found");
-    setSelectedOption(selectedOption);
-  };
-
-  const handleFastJoin = async () => {
-    try {
-      if (!selectedOption) throw new Error("selected option not found");
-      setLoading(true);
-      const { roomId } = await fetch(fastJoinGameEndpoint(selectedOption.id), {
-        toast: {
-          show: false,
-        },
-      });
-      push(`/rooms/${roomId}`);
-    } catch (error) {
-      if (error instanceof AxiosError) {
-        toast(
-          { state: "error", children: error.response?.data.message },
-          {
-            position: "bottom-left",
-          }
-        );
-      } else {
-        toast(
-          { state: "error", children: `無法預期的錯誤： ${error}` },
-          {
-            position: "bottom-left",
-          }
-        );
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // get game list
-  useEffect(() => {
-    async function handleGetAllGame() {
-      const result = await fetch(getAllGamesEndpoint());
-      setGameListOptions(result);
-      setSelectedOption(result[0]);
-    }
-    handleGetAllGame();
-  }, [fetch]);
-
-  return (
-    <>
-      <div className="flex my-1">
-        <Button loading={loading} suffix onClick={handleFastJoin}>
-          快速加入
-        </Button>
-
-        <div className="relative inline-flex">
-          <select
-            className="appearance-none text-primary-800 bg-white border border-gray-300 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
-            value={selectedOption?.id}
-            onChange={handleSelectChange}
-          >
-            {gameListOptions.map((option) => (
-              <option key={option.id} value={option.id}>
-                {option.name}
-              </option>
-            ))}
-          </select>
-          <div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
-            <svg className="w-4 h-4 fill-current" viewBox="0 0 20 20">
-              <path
-                fillRule="evenodd"
-                d="M6.293 7.293a1 1 0 011.414 0L10 9.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default FastJoinButton;
diff --git a/containers/layout/AppLayout.tsx b/containers/layout/AppLayout.tsx
index b875c961..123cfb6f 100644
--- a/containers/layout/AppLayout.tsx
+++ b/containers/layout/AppLayout.tsx
@@ -31,6 +31,7 @@ export default function Layout({ children }: PropsWithChildren) {
       </Head>
       <Header
         className="fixed top-0 inset-x-0 z-40"
+        isChatVisible={isChatVisible}
         onClickChatButton={toggleChatVisibility}
       />
       <div className="pl-2 pt-20 flex grow">
diff --git a/pages/index.tsx b/pages/index.tsx
index b4f77d80..598a11de 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,201 +1,25 @@
 import { GetStaticProps } from "next";
-import { useRouter } from "next/router";
-import Link from "next/link";
-import Image from "next/image";
-import { ReactEventHandler, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { AxiosError } from "axios";
 
-import Button, { ButtonSize } from "@/components/shared/Button/v2";
-import CreateRoomModal from "@/components/lobby/CreateRoomModal";
 import CarouselV2 from "@/components/shared/Carousel/v2";
 import SearchBar from "@/components/shared/SearchBar";
 import Tabs, { TabItemType } from "@/components/shared/Tabs";
-import { fastJoinGameEndpoint } from "@/requests/rooms";
 import { GameType, getAllGamesEndpoint } from "@/requests/games";
 import useRequest from "@/hooks/useRequest";
-import useUser from "@/hooks/useUser";
-import { useToast } from "@/components/shared/Toast";
-import Icon from "@/components/shared/Icon";
-import gameDefaultCoverImg from "@/public/images/game-default-cover.png";
 import { CarouselItemProps } from "@/components/shared/Carousel/v2/Carousel.type";
-import { cn } from "@/lib/utils";
-
-const onImageError: ReactEventHandler<HTMLImageElement> = (e) => {
-  if (e.target instanceof HTMLImageElement) {
-    e.target.src = gameDefaultCoverImg.src;
-  }
-};
+import { GameCardDetailed, GameCardSimple } from "@/features/game";
+import { GameRoomActions } from "@/features/room";
 
 function CarouselCard({
   showIndex,
   index,
-  id,
-  img,
-  name,
-  createdOn,
-  maxPlayers,
-  minPlayers,
+  ...gameProps
 }: Readonly<CarouselItemProps<GameType>>) {
-  // 待重構將邏輯統一管理
-  const { fetch } = useRequest();
-  const [isLoading, setIsLoading] = useState(false);
-  const router = useRouter();
-  const toast = useToast();
-  const { updateRoomId } = useUser();
-  const [open, setOpen] = useState(false);
-  const tabIndex = index === showIndex ? 0 : -1;
-
-  const handleFastJoin = async () => {
-    try {
-      setIsLoading(true);
-      const { roomId } = await fetch(fastJoinGameEndpoint(id));
-      router.push(`/rooms/${roomId}`);
-      updateRoomId(roomId);
-    } catch (error) {
-      if (error instanceof AxiosError) {
-        toast(
-          { state: "error", children: error.response?.data.message },
-          { position: "top" }
-        );
-      } else {
-        toast(
-          { state: "error", children: `無法預期的錯誤： ${error}` },
-          { position: "top" }
-        );
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
   return (
-    <div
-      className="flex text-white px-12 gap-4"
-      onMouseLeave={() => setOpen(false)}
-    >
-      <div className="relative flex items-end justify-end flex-[60%]">
-        <Image
-          src={img || gameDefaultCoverImg.src}
-          alt={name}
-          draggable={false}
-          priority
-          fill
-          className="object-cover"
-          onError={onImageError}
-        />
-        <div className="m-4 flex gap-4">
-          <Button
-            variant="primaryTransparent"
-            className="flex"
-            disabled={isLoading}
-            tabIndex={tabIndex}
-            onClick={handleFastJoin}
-          >
-            <Icon name="Gamepad" className="w-6 h-6" />
-            快速遊戲
-          </Button>
-          <div className="relative">
-            <Button
-              variant="primaryTransparent"
-              size={ButtonSize.Icon}
-              tabIndex={tabIndex}
-              onClick={() => setOpen((pre) => !pre)}
-            >
-              <Icon name="Menu" className="w-6 h-6 rotate-90" />
-            </Button>
-            <div
-              className={cn(
-                "absolute bottom-full right-0 mb-2 transition-transform origin-[calc(100%-22px)_bottom] z-20",
-                !open && "scale-0"
-              )}
-            >
-              <ul className="py-4 frosted-shadow-box text-primary-800 bg-primary-200/60 whitespace-nowrap rounded-lg">
-                <li>
-                  <Link
-                    href="/rooms"
-                    className="block w-full text-left px-4 py-1 hover:bg-primary-900/20 cursor-pointer"
-                    tabIndex={open ? tabIndex : -1}
-                  >
-                    加入現有房間
-                  </Link>
-                </li>
-                <li>
-                  <CreateRoomModal tabIndex={open ? tabIndex : -1} />
-                </li>
-                <li>
-                  <button
-                    type="button"
-                    className="block w-full text-left px-4 py-1 hover:bg-primary-900/20 cursor-pointer"
-                    onClick={() => alert("遊戲詳細介紹頁尚未實作，敬請期待")}
-                    onKeyDown={() => alert("遊戲詳細介紹頁尚未實作，敬請期待")}
-                    tabIndex={open ? tabIndex : -1}
-                  >
-                    遊戲詳情
-                  </button>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="flex-[40%] p-4 rounded-lg bg-primary-50/8">
-        <div className="text-xs text-primary-300">Game Name</div>
-        <div className="text-xl text-primary-100">{name}</div>
-        <div className="flex gap-6 mb-2 text-xs text-primary-300">
-          <div className="flex-1 flex items-center gap-1.5">
-            <span>4.8</span>
-            <Icon name="Star" className="w-3 h-3 fill-yellow-400" />
-            <Icon name="Star" className="w-3 h-3 fill-yellow-400" />
-            <Icon name="Star" className="w-3 h-3 fill-yellow-400" />
-            <Icon name="Star" className="w-3 h-3 fill-yellow-400" />
-            <Icon name="Star" className="w-3 h-3 fill-yellow-400" />
-            <span>(66)</span>
-          </div>
-          <time className="flex-1 flex items-center gap-1">
-            <Icon name="Calendar" className="w-3 h-3" />
-            {createdOn.slice(0, 10).replace(/-/g, ".")}
-          </time>
-        </div>
-        <div className="mb-3">
-          <ul className="flex gap-3">
-            <li className="relative w-16 h-10">
-              {img && (
-                <Image
-                  src={img}
-                  alt={name}
-                  draggable={false}
-                  priority
-                  fill
-                  className="object-cover"
-                  onError={onImageError}
-                />
-              )}
-            </li>
-          </ul>
-        </div>
-        <div className="mb-3 text-xs text-primary-50 h-12">暫無描述</div>
-        <div>
-          <ul className="flex flex-wrap gap-2 text-xs h-12">
-            {maxPlayers === 1 && (
-              <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5 h-fit">
-                單人遊戲
-              </li>
-            )}
-            {maxPlayers === minPlayers && maxPlayers > 1 && (
-              <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5 h-fit">
-                {maxPlayers} 人遊戲
-              </li>
-            )}
-            {maxPlayers !== minPlayers && maxPlayers > 1 && (
-              <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5 h-fit">
-                {minPlayers} - {maxPlayers} 玩家
-              </li>
-            )}
-          </ul>
-        </div>
-      </div>
-    </div>
+    <GameCardDetailed {...gameProps}>
+      <GameRoomActions tabIndex={index === showIndex ? 0 : -1} {...gameProps} />
+    </GameCardDetailed>
   );
 }
 
@@ -232,27 +56,12 @@ const TabPaneContent = ({
             );
 
     return (
-      <ul className="mt-6 grid grid-cols-4 gap-4">
+      <ul className="mt-6 grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-4">
         {data.map((game) => (
           <li key={game.id}>
-            <div
-              className="cursor-pointer"
-              onClick={() => alert("遊戲詳細介紹頁尚未實作，敬請期待")}
-              onKeyDown={() => alert("遊戲詳細介紹頁尚未實作，敬請期待")}
-            >
-              <picture className="relative aspect-game-cover overflow-hidden">
-                <Image
-                  src={game.img || gameDefaultCoverImg.src}
-                  alt={game.name}
-                  draggable={false}
-                  priority
-                  fill
-                  className="object-cover"
-                  onError={onImageError}
-                />
-              </picture>
-              <h2>{game.name}</h2>
-            </div>
+            <GameCardSimple {...game}>
+              <GameRoomActions {...game} />
+            </GameCardSimple>
           </li>
         ))}
       </ul>

From d0a3f8b60d578e7c73472edf91af7c8eaf153e5f Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 20:44:33 +0800
Subject: [PATCH 23/27] chore: search bar send alert

---
 pages/index.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/pages/index.tsx b/pages/index.tsx
index 598a11de..49a84022 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,6 +5,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import CarouselV2 from "@/components/shared/Carousel/v2";
 import SearchBar from "@/components/shared/SearchBar";
 import Tabs, { TabItemType } from "@/components/shared/Tabs";
+import { useToast } from "@/components/shared/Toast";
 import { GameType, getAllGamesEndpoint } from "@/requests/games";
 import useRequest from "@/hooks/useRequest";
 import { CarouselItemProps } from "@/components/shared/Carousel/v2/Carousel.type";
@@ -73,6 +74,7 @@ const TabPaneContent = ({
 
 export default function Home() {
   const { fetch } = useRequest();
+  const toast = useToast();
   const [gameList, setGameList] = useState<GameType[]>([]);
 
   useEffect(() => {
@@ -83,6 +85,12 @@ export default function Home() {
     <div className="max-w-[1036px] mx-auto px-6">
       <div className="flex justify-center mb-6">
         <SearchBar
+          onSubmit={() =>
+            toast(
+              { children: "此功能暫未實現", state: "warning" },
+              { position: "top" }
+            )
+          }
           leftSlot={
             <button type="button" className="pl-5 pr-2.5 px-4 text-primary-300">
               類型

From 6d3db27b4dc82841b092017a87ea9f8b131d36b0 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 21:17:01 +0800
Subject: [PATCH 24/27] fix: loop join room bug

---
 containers/room/RoomListView.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/containers/room/RoomListView.tsx b/containers/room/RoomListView.tsx
index 1c86c376..c8a14ab4 100644
--- a/containers/room/RoomListView.tsx
+++ b/containers/room/RoomListView.tsx
@@ -61,6 +61,8 @@ const RoomsListView: FC<Props> = ({ status }) => {
     async function fetchRoomEntry(_roomId: string) {
       setIsLoading(true);
 
+      // Automatically enter the room if room information is accessible,
+      // indicating the user is already in the room
       if (await fetch(getRoomInfoEndpoint(_roomId)).catch(() => {})) {
         router.push(`/rooms/${_roomId}`);
         updateRoomId(_roomId);
@@ -80,6 +82,7 @@ const RoomsListView: FC<Props> = ({ status }) => {
       } finally {
         setPasswordValues(INIT_PASSWORD);
         setIsLoading(false);
+        setRoomId(null);
       }
     }
 

From ed44add08d87fe66b47ebaa0b6cfeb335732bf18 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 21:18:00 +0800
Subject: [PATCH 25/27] chore: i18n

---
 features/room/components/CreateRoomForm/CreateRoomForm.tsx | 4 +++-
 public/locales/zh_TW/rooms.json                            | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/features/room/components/CreateRoomForm/CreateRoomForm.tsx b/features/room/components/CreateRoomForm/CreateRoomForm.tsx
index 1275c8ea..3d5cff1c 100644
--- a/features/room/components/CreateRoomForm/CreateRoomForm.tsx
+++ b/features/room/components/CreateRoomForm/CreateRoomForm.tsx
@@ -1,5 +1,6 @@
 import { useState, FormEvent, useRef, useEffect } from "react";
 import { useRouter } from "next/router";
+import { useTranslation } from "react-i18next";
 import useRequest from "@/hooks/useRequest";
 import Button from "@/components/shared/Button/v2";
 import Input from "@/components/shared/Input";
@@ -55,6 +56,7 @@ function CreateRoomForm({
   });
   const { fetch } = useRequest();
   const router = useRouter();
+  const { t } = useTranslation("rooms");
   const [isLockRoom, setIsLockRoom] = useState(false);
   const passwordInputRef = useRef<InputOTPRef>(null);
   const gameNameInputRef = useRef<HTMLInputElement>(null);
@@ -77,7 +79,7 @@ function CreateRoomForm({
 
     if (isLockRoom && roomForm.password?.length !== 4) {
       passwordInputRef.current?.focus();
-      newErrors.password = "請輸入遊戲密碼";
+      newErrors.password = t("enter_game_password");
     }
     if (!roomForm.name) {
       gameNameInputRef.current?.focus();
diff --git a/public/locales/zh_TW/rooms.json b/public/locales/zh_TW/rooms.json
index f388c10b..87a64d39 100644
--- a/public/locales/zh_TW/rooms.json
+++ b/public/locales/zh_TW/rooms.json
@@ -4,5 +4,6 @@
   "you_can_only_join_1_room": "一人只能進入一間房!",
   "rooms_list": "查看房間列表",
   "rooms_waiting": "正在等待玩家配對",
-  "rooms_playing": "遊戲已開始"
+  "rooms_playing": "遊戲已開始",
+  "enter_game_password": "請輸入遊戲密碼"
 }

From 00fa281ca70dda9afa7d582290cb8754c3e8dde2 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 21:34:30 +0800
Subject: [PATCH 26/27] fix: sonar cloud issue

---
 components/shared/Carousel/v2/CarouselMain.tsx       |  4 +++-
 components/shared/Carousel/v2/CarouselPagination.tsx |  2 +-
 components/shared/InputOTP/inputOTP.stories.tsx      |  1 -
 components/shared/Modal/Modal.tsx                    | 12 ++++++++++--
 components/shared/SelectBoxGroup/SelectBoxGroup.tsx  |  2 +-
 .../components/GameRoomActions/GameRoomActions.tsx   |  1 -
 6 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/shared/Carousel/v2/CarouselMain.tsx b/components/shared/Carousel/v2/CarouselMain.tsx
index 026be15b..5f4a1da4 100644
--- a/components/shared/Carousel/v2/CarouselMain.tsx
+++ b/components/shared/Carousel/v2/CarouselMain.tsx
@@ -5,7 +5,9 @@ import { cn } from "@/lib/utils";
 import { useCarousel } from "./CarouselContext";
 import { CarouselMainProps } from "./Carousel.type";
 
-export default function CarouselMain({ className }: CarouselMainProps) {
+export default function CarouselMain({
+  className,
+}: Readonly<CarouselMainProps>) {
   const { showIndex, items, Component, renderKey } = useCarousel();
   const [carouselItemWidth, setCarouselItemWidth] = useState(0);
   const carouselRef = useRef<HTMLDivElement>(null);
diff --git a/components/shared/Carousel/v2/CarouselPagination.tsx b/components/shared/Carousel/v2/CarouselPagination.tsx
index c8984f87..b988d5ae 100644
--- a/components/shared/Carousel/v2/CarouselPagination.tsx
+++ b/components/shared/Carousel/v2/CarouselPagination.tsx
@@ -4,7 +4,7 @@ import { CarouselActionType, CarouselPaginationProps } from "./Carousel.type";
 
 export default function CarouselPagination({
   className,
-}: CarouselPaginationProps) {
+}: Readonly<CarouselPaginationProps>) {
   const { showIndex, items, renderKey } = useCarousel();
   const dispatch = useCarouselDispatch();
 
diff --git a/components/shared/InputOTP/inputOTP.stories.tsx b/components/shared/InputOTP/inputOTP.stories.tsx
index 3e4029e2..90fb1500 100644
--- a/components/shared/InputOTP/inputOTP.stories.tsx
+++ b/components/shared/InputOTP/inputOTP.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { useArgs } from "@storybook/preview-api";
 
 import InputOTP from ".";
 
diff --git a/components/shared/Modal/Modal.tsx b/components/shared/Modal/Modal.tsx
index 117968a4..2ae322bb 100644
--- a/components/shared/Modal/Modal.tsx
+++ b/components/shared/Modal/Modal.tsx
@@ -3,6 +3,7 @@ import React, {
   useEffect,
   ForwardRefRenderFunction,
   forwardRef,
+  KeyboardEventHandler,
 } from "react";
 import { cn } from "@/lib/utils";
 import Portal from "../Portal/Portal";
@@ -52,6 +53,12 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
 
   const [removeDOM, setRemoveDOM] = useState(!isOpen);
 
+  const handleKeyUp: KeyboardEventHandler = (e) => {
+    if (maskClosable && e.key === "Enter") {
+      onClose?.();
+    }
+  };
+
   useEffect(() => {
     let timer: NodeJS.Timeout;
 
@@ -80,7 +87,9 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
             isOpen ? "opacity-100" : "opacity-0"
           )}
           data-testid="modal-mask"
+          tabIndex={maskClosable ? 0 : -1}
           onClick={maskClosable ? onClose : undefined}
+          onKeyUp={handleKeyUp}
         />
         <div
           className={cn(
@@ -88,7 +97,6 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
             containerSizeMap[size],
             isOpen ? "opacity-100" : "opacity-0"
           )}
-          data-testid="modal-container"
         >
           <BoxFancy
             ref={ref}
@@ -98,7 +106,7 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
               dialogSize[size]
             )}
             {...restProps}
-            role="dialog"
+            role="alertdialog"
           >
             <header className="text-[22px] text-center">{title}</header>
             <div>{children}</div>
diff --git a/components/shared/SelectBoxGroup/SelectBoxGroup.tsx b/components/shared/SelectBoxGroup/SelectBoxGroup.tsx
index c18bf56c..18e59517 100644
--- a/components/shared/SelectBoxGroup/SelectBoxGroup.tsx
+++ b/components/shared/SelectBoxGroup/SelectBoxGroup.tsx
@@ -44,7 +44,7 @@ function SelectBoxGroup<T = string>({
   itemClassName,
   itemWrapperClassName,
   onChange,
-}: SelectBoxGroupProps<T>) {
+}: Readonly<SelectBoxGroupProps<T>>) {
   const reactId = useId();
   const selectBoxId = `select_box_${reactId}`;
 
diff --git a/features/room/components/GameRoomActions/GameRoomActions.tsx b/features/room/components/GameRoomActions/GameRoomActions.tsx
index e2255519..bebf8861 100644
--- a/features/room/components/GameRoomActions/GameRoomActions.tsx
+++ b/features/room/components/GameRoomActions/GameRoomActions.tsx
@@ -6,7 +6,6 @@ import useRequest from "@/hooks/useRequest";
 import { useRouter } from "next/router";
 import { useToast } from "@/components/shared/Toast";
 import useUser from "@/hooks/useUser";
-import { CarouselItemProps } from "@/components/shared/Carousel/v2";
 import { GameType } from "@/requests/games";
 import { fastJoinGameEndpoint } from "@/requests/rooms";
 import Icon from "@/components/shared/Icon";

From 3dece299f2c1a0f27753b9466ab287e47f200353 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 21:47:21 +0800
Subject: [PATCH 27/27] feat(Modal): add keyboard event handler

---
 components/shared/Modal/Modal.tsx      | 17 ++++++++++++++---
 components/shared/Modal/modal.test.tsx |  8 +++-----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/components/shared/Modal/Modal.tsx b/components/shared/Modal/Modal.tsx
index 2ae322bb..e1878b4a 100644
--- a/components/shared/Modal/Modal.tsx
+++ b/components/shared/Modal/Modal.tsx
@@ -77,12 +77,23 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
     };
   }, [isOpen]);
 
+  useEffect(() => {
+    const handleWindowKeyUp = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose?.();
+      }
+    };
+    window.addEventListener("keyup", handleWindowKeyUp);
+
+    return () => window.removeEventListener("keyup", handleWindowKeyUp);
+  }, [onClose]);
+
   return (
     !removeDOM && (
       <Portal>
-        <div
+        <button
           className={cn(
-            "duration-200",
+            "cursor-auto duration-200",
             "fixed top-0 left-0 w-screen h-screen bg-basic-black/60 z-10",
             isOpen ? "opacity-100" : "opacity-0"
           )}
@@ -100,13 +111,13 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
         >
           <BoxFancy
             ref={ref}
+            component="dialog"
             className={cn(
               "px-10 py-12 flex flex-col gap-8",
               "text-primary-100 bg-primary-700/40 rounded-2xl drop-shadow-md",
               dialogSize[size]
             )}
             {...restProps}
-            role="alertdialog"
           >
             <header className="text-[22px] text-center">{title}</header>
             <div>{children}</div>
diff --git a/components/shared/Modal/modal.test.tsx b/components/shared/Modal/modal.test.tsx
index 8ad58623..ff75fcf1 100644
--- a/components/shared/Modal/modal.test.tsx
+++ b/components/shared/Modal/modal.test.tsx
@@ -5,22 +5,20 @@ import userEvent from "@testing-library/user-event";
 import Modal from ".";
 
 describe("Modal", () => {
-  it("should render Modal when isOpen is true", () => {
+  it("should render Modal when isOpen is true", async () => {
     render(
       <Modal isOpen title="Test Title">
         Test Content
       </Modal>
     );
-    const modal = screen.getByRole("dialog");
-    expect(modal).toBeInTheDocument();
     expect(screen.getByText("Test Title")).toBeInTheDocument();
     expect(screen.getByText("Test Content")).toBeInTheDocument();
   });
 
   it("should not render Modal when isOpen is not setting", () => {
     render(<Modal title="Test Title">Test Content</Modal>);
-    const modal = screen.queryByRole("dialog");
-    expect(modal).toBeNull();
+    expect(screen.queryByText("Test Title")).not.toBeInTheDocument();
+    expect(screen.queryByText("Test Content")).not.toBeInTheDocument();
   });
 
   it("should call onClose when close button is clicked", async () => {