From ee1e4b44d7ec43b53f3ccdb42c58f30b128431e4 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Thu, 3 Oct 2024 21:32:29 +0800
Subject: [PATCH 1/7] refactor: tabs component

---
 components/shared/Tabs/Tab.test.tsx     |  18 ++--
 components/shared/Tabs/Tab.tsx          |  29 +++----
 components/shared/Tabs/Tabs.stories.tsx |  44 ++--------
 components/shared/Tabs/Tabs.test.tsx    |  27 ++----
 components/shared/Tabs/Tabs.tsx         | 105 ++++++------------------
 pages/rooms.tsx                         |  16 ++--
 6 files changed, 60 insertions(+), 179 deletions(-)

diff --git a/components/shared/Tabs/Tab.test.tsx b/components/shared/Tabs/Tab.test.tsx
index 62519a41..df0ec53a 100644
--- a/components/shared/Tabs/Tab.test.tsx
+++ b/components/shared/Tabs/Tab.test.tsx
@@ -11,16 +11,9 @@ describe("Tab", () => {
     expect(screen.getByRole("tab")).toHaveTextContent(label);
   });
 
-  it("should renders tab button with the correct className", () => {
-    const className = "test-class test-class2";
-    render(<Tab label="test" tabKey={"test"} className={className} />);
-
-    expect(screen.getByRole("tab")).toHaveClass(className);
-  });
-
   it("should call the onClick handler when the tab is clicked", () => {
     const handleClickTab = jest.fn();
-    render(<Tab label="test" tabKey={"test"} onTabClick={handleClickTab} />);
+    render(<Tab label="test" tabKey={"test"} onClick={handleClickTab} />);
 
     fireEvent.click(screen.getByRole("tab"));
 
@@ -28,14 +21,17 @@ describe("Tab", () => {
   });
 
   it('should apply the active class when the "active" prop is true', () => {
-    render(<Tab label="test" tabKey={"test"} active />);
+    render(<Tab label="test" tabKey={"test"} isActive />);
 
-    expect(screen.getByRole("tab")).toHaveClass("is-active");
+    expect(screen.getByRole("tab")).toHaveAttribute("aria-selected", "true");
   });
 
   it('should not apply the active class when the "active" prop is falsy', () => {
     render(<Tab label="test" tabKey={"test"} />);
 
-    expect(screen.getByRole("tab")).not.toHaveClass("is-active");
+    expect(screen.getByRole("tab")).not.toHaveAttribute(
+      "aria-selected",
+      "true"
+    );
   });
 });
diff --git a/components/shared/Tabs/Tab.tsx b/components/shared/Tabs/Tab.tsx
index 25e4e705..9b9177ab 100644
--- a/components/shared/Tabs/Tab.tsx
+++ b/components/shared/Tabs/Tab.tsx
@@ -1,6 +1,7 @@
 import { cn } from "@/lib/utils";
 import { Key } from "react";
-interface TabProps<T extends Key = string> {
+
+export interface TabProps<T extends Key = string> {
   /**
    * The key of tab
    */
@@ -13,33 +14,27 @@ interface TabProps<T extends Key = string> {
    * Whether the tab is active.
    * Controlled by tabs.
    */
-  active?: boolean;
-  /**
-   * The className of tab
-   */
-  className?: string;
+  isActive?: boolean;
   /**
    * Callback executed when tab is clicked
    */
-  onTabClick?: (tabKey: T) => void;
+  onClick?: (tabKey: T) => void;
 }
 
 export default function Tab<T extends Key = string>(props: TabProps<T>) {
-  const { tabKey, label, className, active, onTabClick } = props;
-
-  const tabBaseClass = ` w-fit py-3 text-center text-base text-white relative  after:content-'' after:w-full after:h-[4px] after:block after:absolute after:bottom-0 after:left-0  after:transition-colors hover:after:bg-[#2F88FF]`;
-
-  const tabActiveClass = active && "is-active after:bg-[#2F88FF]";
-
-  const tabClass = cn(tabBaseClass, tabActiveClass, className);
+  const { tabKey, label, isActive, onClick } = props;
 
   return (
     <button
-      className={tabClass}
+      className={cn(
+        "relative py-3 px-5 text-base text-grey-400 font-normal border-b border-primary-800 transition-colors",
+        "after:content-'' after:w-full after:h-[3px] after:absolute after:-bottom-0.5 after:left-0",
+        isActive && "text-primary-200 font-medium after:gradient-purple"
+      )}
       role="tab"
-      aria-selected={active}
+      aria-selected={isActive}
       aria-controls={label}
-      onClick={() => onTabClick && onTabClick(tabKey)}
+      onClick={() => onClick?.(tabKey)}
     >
       <span>{label}</span>
     </button>
diff --git a/components/shared/Tabs/Tabs.stories.tsx b/components/shared/Tabs/Tabs.stories.tsx
index 241bd203..16537d02 100644
--- a/components/shared/Tabs/Tabs.stories.tsx
+++ b/components/shared/Tabs/Tabs.stories.tsx
@@ -13,47 +13,15 @@ type Story = StoryObj<TabsProps<number>>;
 export const Playground: Story = {
   args: {
     tabs: [
-      { key: 0, label: "熱門遊戲" },
-      { key: 1, label: "最新遊戲" },
-      { key: 2, label: "好評遊戲" },
+      { tabKey: 0, label: "熱門遊戲" },
+      { tabKey: 1, label: "最新遊戲" },
+      { tabKey: 2, label: "好評遊戲" },
     ],
     defaultActiveKey: 2,
-    size: "default",
     renderTabPaneContent: (tabItem) => (
-      <div>This is {tabItem.label} TabPane.</div>
+      <div className="p-4 text-primary-200">
+        This is {tabItem.label} TabPane.
+      </div>
     ),
-    children: <div>This is children prop.</div>,
   },
 };
-
-export const Size: Story = {
-  args: {
-    tabs: [
-      { key: 0, label: "公開聊天" },
-      { key: 1, label: "遊戲隊聊" },
-      { key: 2, label: "好友聊天" },
-    ],
-    defaultActiveKey: 0,
-    size: "default",
-  },
-  render: () => (
-    <div className="flex flex-col gap-5">
-      <Tabs
-        tabs={[
-          { key: 0, label: "公開聊天" },
-          { key: 1, label: "遊戲隊聊" },
-          { key: 2, label: "好友聊天" },
-        ]}
-        size="default"
-      />
-      <Tabs
-        tabs={[
-          { key: 0, label: "公開聊天" },
-          { key: 1, label: "遊戲隊聊" },
-          { key: 2, label: "好友聊天" },
-        ]}
-        size="large"
-      />
-    </div>
-  ),
-};
diff --git a/components/shared/Tabs/Tabs.test.tsx b/components/shared/Tabs/Tabs.test.tsx
index 7b1b469c..bc787403 100644
--- a/components/shared/Tabs/Tabs.test.tsx
+++ b/components/shared/Tabs/Tabs.test.tsx
@@ -4,13 +4,13 @@ import Tabs, { TabsProps, TabItemType } from "./Tabs";
 
 describe("Tabs", () => {
   const tabs: TabsProps["tabs"] = [
-    { key: "1", label: "Tab 1" },
-    { key: "2", label: "Tab 2" },
-    { key: "3", label: "Tab 3" },
+    { tabKey: "1", label: "Tab 1" },
+    { tabKey: "2", label: "Tab 2" },
+    { tabKey: "3", label: "Tab 3" },
   ];
   const tabPaneText = "Tab Pane Text";
   const renderTabPaneContent = (tabItem: TabItemType) => (
-    <div>{`${tabPaneText} ${tabItem.key}`}</div>
+    <div>{`${tabPaneText} ${tabItem.tabKey}`}</div>
   );
 
   it("should renders all Tabs and the first TabPane when not given 'defaultActiveKey' prop", () => {
@@ -33,7 +33,7 @@ describe("Tabs", () => {
       <Tabs
         tabs={tabs}
         renderTabPaneContent={renderTabPaneContent}
-        defaultActiveKey={tabs[1].key}
+        defaultActiveKey={tabs[1].tabKey}
       />
     );
 
@@ -52,21 +52,4 @@ describe("Tabs", () => {
     expect(screen.queryByText(`${tabPaneText} 1`)).not.toBeInTheDocument();
     expect(screen.queryByText(`${tabPaneText} 2`)).not.toBeInTheDocument();
   });
-
-  it("should call the onChange handler when the active tab changed", () => {
-    const handleTabChanged = jest.fn();
-    render(
-      <Tabs
-        tabs={tabs}
-        renderTabPaneContent={renderTabPaneContent}
-        onChange={handleTabChanged}
-        defaultActiveKey={tabs[2].key}
-      />
-    );
-
-    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
-    fireEvent.click(tab1);
-
-    expect(handleTabChanged).toHaveBeenCalled();
-  });
 });
diff --git a/components/shared/Tabs/Tabs.tsx b/components/shared/Tabs/Tabs.tsx
index 3371f0fd..127638ae 100644
--- a/components/shared/Tabs/Tabs.tsx
+++ b/components/shared/Tabs/Tabs.tsx
@@ -1,12 +1,7 @@
 import { useState, Key, ReactNode } from "react";
-import Tab from "./Tab";
-import { cn } from "@/lib/utils";
-export interface TabItemType<T extends Key = string> {
-  key: T;
-  label?: string;
-}
+import Tab, { TabProps } from "./Tab";
 
-type TabSizeType = "default" | "large";
+export type TabItemType<T extends Key = string> = TabProps<T>;
 
 export interface TabsProps<T extends Key = string> {
   /**
@@ -17,95 +12,45 @@ export interface TabsProps<T extends Key = string> {
    * Initial active tab's key
    */
   defaultActiveKey?: T;
-  /**
-   * The className of tabs that wraps tabBar and tabPane
-   */
-  tabsClass?: string;
-  /**
-   * The className of tabBar that wraps the tab
-   */
-  tabBarClass?: string;
-  /**
-   * The className of tab
-   */
-  tabClass?: string;
-  /**
-   * The className of tabPane
-   */
-  tabPaneClass?: string;
-  /**
-   * The size of tab
-   */
-  size?: TabSizeType;
-  /**
-   * Custom content of tabPane
-   */
-  children?: ReactNode | undefined;
   /**
    * Function that recieved activeTabItem and render content of tabPane
    */
   renderTabPaneContent?: (tabItem: TabItemType<T>) => ReactNode;
-  /**
-   * Callback executed when tab is clicked
-   */
-  onChange?: (tabKey: T) => void;
 }
 
-export default function Tabs<T extends Key = string>(props: TabsProps<T>) {
-  const {
-    tabs,
-    defaultActiveKey,
-    tabsClass,
-    tabBarClass: customTabBarClass,
-    tabClass: customTabClass,
-    tabPaneClass,
-    size = "default",
-    children,
-    renderTabPaneContent,
-    onChange,
-  } = props;
-  const [activeKey, setActiveKey] = useState(defaultActiveKey || tabs[0].key);
-  const activeTabItem = tabs.find((tab) => tab.key === activeKey)!;
-  const isLageSize = size === "large";
-
-  const tabsWrapperClass = cn("flex flex-col", tabsClass);
-
-  const tabBarClass = cn(
-    "flex bg-dark29",
-    isLageSize ? "gap-[40px]" : "gap-[14px] px-3",
-    customTabBarClass
+export default function Tabs<T extends Key = string>({
+  tabs,
+  defaultActiveKey,
+  renderTabPaneContent,
+}: TabsProps<T>) {
+  const [activeKey, setActiveKey] = useState(
+    defaultActiveKey || tabs[0]?.tabKey
   );
+  const activeTabItem = tabs.find((tab) => tab.tabKey === activeKey);
 
-  const tabClass = cn(isLageSize ? "px-3" : "px-0", customTabClass);
-
-  function handleChangeActiveTab(nextTabkey: T) {
-    if (nextTabkey === activeKey) return;
-    setActiveKey(nextTabkey);
-    onChange && onChange(nextTabkey);
-  }
+  const handleChangeActiveTab = (nextTabKey: T) => {
+    if (nextTabKey === activeKey) return;
+    setActiveKey(nextTabKey);
+  };
 
   return (
-    <div className={tabsWrapperClass}>
-      <div className={tabBarClass} role="tablist">
+    <>
+      <div role="tablist">
         {tabs.map((tab) => (
           <Tab
-            key={tab.key}
-            tabKey={tab.key}
-            className={tabClass}
+            key={tab.tabKey}
+            tabKey={tab.tabKey}
             label={tab.label}
-            active={activeKey === tab.key}
-            onTabClick={handleChangeActiveTab}
+            isActive={activeKey === tab.tabKey}
+            onClick={handleChangeActiveTab}
           />
         ))}
       </div>
-      <div
-        className={tabPaneClass}
-        role="tabpanel"
-        aria-labelledby={`${activeTabItem.label}`}
-      >
-        {renderTabPaneContent && renderTabPaneContent(activeTabItem)}
-        {children}
+      <div role="tabpanel" aria-labelledby={`${activeTabItem?.label}`}>
+        {activeTabItem &&
+          renderTabPaneContent &&
+          renderTabPaneContent(activeTabItem)}
       </div>
-    </div>
+    </>
   );
 }
diff --git a/pages/rooms.tsx b/pages/rooms.tsx
index a8da5afe..8265f751 100644
--- a/pages/rooms.tsx
+++ b/pages/rooms.tsx
@@ -1,25 +1,20 @@
 import { RoomType } from "@/requests/rooms";
 import RoomsListView from "@/containers/room/RoomListView";
-import Tabs from "@/components/shared/Tabs";
+import Tabs, { TabItemType } from "@/components/shared/Tabs";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useTranslation } from "next-i18next";
 import { GetStaticProps } from "next";
 
-type TabsProps = {
-  key: RoomType;
-  label: string;
-}[];
-
 const Rooms = () => {
   const { t } = useTranslation("rooms");
 
-  const tabs: TabsProps = [
+  const tabs: TabItemType<RoomType>[] = [
     {
-      key: RoomType.WAITING,
+      tabKey: RoomType.WAITING,
       label: t("rooms_waiting"),
     },
     {
-      key: RoomType.PLAYING,
+      tabKey: RoomType.PLAYING,
       label: t("rooms_playing"),
     },
   ];
@@ -29,9 +24,8 @@ const Rooms = () => {
       <Tabs
         tabs={tabs}
         defaultActiveKey={RoomType.WAITING}
-        size="large"
         renderTabPaneContent={(currentTab) => (
-          <RoomsListView status={currentTab.key} key={currentTab.key} />
+          <RoomsListView status={currentTab.tabKey} key={currentTab.tabKey} />
         )}
       />
     </div>

From 26bfd3f05f95f2319a50d3892321432ebdbed839 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Thu, 3 Oct 2024 21:43:10 +0800
Subject: [PATCH 2/7] style: home page

---
 components/lobby/FastJoinButton.tsx |  2 +-
 pages/_document.tsx                 |  2 +-
 pages/index.tsx                     | 42 ++++++++++++++++++++++++-----
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/components/lobby/FastJoinButton.tsx b/components/lobby/FastJoinButton.tsx
index 0341e8cd..8ebbfa27 100644
--- a/components/lobby/FastJoinButton.tsx
+++ b/components/lobby/FastJoinButton.tsx
@@ -74,7 +74,7 @@ const FastJoinButton: FC = () => {
 
         <div className="relative inline-flex">
           <select
-            className="appearance-none 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"
+            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}
           >
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 181899f6..4f44a40c 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -12,7 +12,7 @@ export default function Document() {
         <meta name="og:title" content={siteTitle} />
         <meta name="twitter:card" content="summary_large_image" />
       </Head>
-      <body className="body-bg overflow-hidden">
+      <body className="body-bg text-primary-200 overflow-hidden">
         <Main />
         <NextScript />
       </body>
diff --git a/pages/index.tsx b/pages/index.tsx
index 1e6598f7..2ed59834 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,6 +10,7 @@ import { mockCarouselItems } from "@/components/shared/Carousel";
 import CarouselV2 from "@/components/shared/Carousel/v2";
 import FastJoinButton from "@/components/lobby/FastJoinButton";
 import SearchBar from "@/components/shared/SearchBar";
+import Tabs, { TabItemType } from "@/components/shared/Tabs";
 
 function CarouselCard({
   imgUrl,
@@ -94,8 +95,39 @@ function CarouselCard({
   );
 }
 
-export default function Home() {
+enum TabKey {
+  HOT = "hot",
+  NEW = "new",
+  LAST = "last",
+  GOOD = "good",
+  COLLECT = "collect",
+}
+
+const tabs: TabItemType<TabKey>[] = [
+  { tabKey: TabKey.HOT, label: "熱門遊戲" },
+  { tabKey: TabKey.NEW, label: "最新遊戲" },
+  { tabKey: TabKey.LAST, label: "上次遊玩" },
+  { tabKey: TabKey.GOOD, label: "好評遊戲" },
+  { tabKey: TabKey.COLLECT, label: "收藏遊戲" },
+];
+
+const TabPaneContent = (tabItem: TabItemType<TabKey>) => {
   const { t } = useTranslation("rooms");
+  if (tabItem.tabKey === TabKey.HOT) {
+    return (
+      <div className="my-6 flex gap-3">
+        <CreateRoomModal />
+        <Button component={Link} href="/rooms">
+          {t("rooms_list")}
+        </Button>
+        <FastJoinButton />
+      </div>
+    );
+  }
+  return <div>實作中...</div>;
+};
+
+export default function Home() {
   return (
     <div className="max-w-[1036px] mx-auto px-6">
       <div className="flex justify-center mb-6">
@@ -114,12 +146,8 @@ export default function Home() {
           Component={CarouselCard}
         />
       </div>
-      <div className="my-6 flex gap-3">
-        <CreateRoomModal />
-        <Button component={Link} href="/rooms">
-          {t("rooms_list")}
-        </Button>
-        <FastJoinButton />
+      <div className="mt-6">
+        <Tabs tabs={tabs} renderTabPaneContent={TabPaneContent} />
       </div>
     </div>
   );

From 01f09b5ba0fb5bdd8e7e6e8b8dd104e7ae4b3d50 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Thu, 3 Oct 2024 21:43:55 +0800
Subject: [PATCH 3/7] style: button disabled color

---
 components/shared/Button/v2/Button.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/shared/Button/v2/Button.tsx b/components/shared/Button/v2/Button.tsx
index a89731df..92819f68 100644
--- a/components/shared/Button/v2/Button.tsx
+++ b/components/shared/Button/v2/Button.tsx
@@ -17,7 +17,7 @@ export enum ButtonSize {
 }
 
 const commonDisabledClasses =
-  "disabled:cursor-not-allowed disabled:bg-none disabled:bg-gray-800 disabled:border-gray-500 disabled:text-gray-200 disabled:stroke-gray-200 disabled:fill-gray-200";
+  "disabled:cursor-not-allowed disabled:bg-none disabled:bg-grey-800 disabled:border-grey-500 disabled:text-grey-200 disabled:stroke-grey-200 disabled:fill-grey-200";
 
 const buttonTypeClasses: Record<ButtonVariant, string> = {
   primary:
@@ -51,7 +51,7 @@ type InnerButtonComponent = (
 const iconTypeClasses: Record<ButtonVariant, string> = {
   primary:
     "stroke-primary-700 hover:stroke-primary-50 active:stroke-primary-50",
-  secondary: "stroke-primary-200 disabled:stroke-gray-500",
+  secondary: "stroke-primary-200 disabled:stroke-grey-500",
   highlight: "stroke-primary-50",
 };
 

From 3e0ccebc37ab9a2bfa62064ecebf430b375cdded Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Thu, 3 Oct 2024 21:45:21 +0800
Subject: [PATCH 4/7] refactor: room page style and layout

---
 components/rooms/RoomBreadcrumb.tsx           |  2 +-
 components/rooms/RoomButtonGroup.tsx          | 50 ++++++-------------
 .../RoomUserCardList/RoomUserCardList.tsx     |  2 +-
 .../RoomUserCardList/UserCard/UserCard.tsx    | 36 +++++++------
 pages/rooms/[roomId]/index.tsx                | 41 ++++++++++-----
 5 files changed, 61 insertions(+), 70 deletions(-)

diff --git a/components/rooms/RoomBreadcrumb.tsx b/components/rooms/RoomBreadcrumb.tsx
index 6fcb09d7..e3ad1374 100644
--- a/components/rooms/RoomBreadcrumb.tsx
+++ b/components/rooms/RoomBreadcrumb.tsx
@@ -13,7 +13,7 @@ function RoomBreadcrumb({ roomInfo }: RoomBreadcrumbType) {
 
   const combinedText = roomInfo.name + "-" + maxPlayerText + "-" + statusText;
   return (
-    <Breadcrumb className="text-white">
+    <Breadcrumb className="text-primary-100">
       <Breadcrumb.Item text={isPublicText} href="/rooms" />
       <Breadcrumb.Item text={combinedText} href="" />
     </Breadcrumb>
diff --git a/components/rooms/RoomButtonGroup.tsx b/components/rooms/RoomButtonGroup.tsx
index aa726fa6..bfd07215 100644
--- a/components/rooms/RoomButtonGroup.tsx
+++ b/components/rooms/RoomButtonGroup.tsx
@@ -1,4 +1,4 @@
-import Button from "@/components/shared/Button";
+import Button from "@/components/shared/Button/v2";
 
 type RoomButtonGroupProps = {
   isHost: boolean;
@@ -19,43 +19,21 @@ function RoomButtonGroup(props: RoomButtonGroupProps) {
     isReady,
   } = props;
   return (
-    <div className="flex items-center">
-      <div className="flex flex-col gap-[18px] font-normal text-sm leading-[22px] ml-[40px] mr-[52px]">
-        {isHost || (
-            <Button
-            variant={isReady ? "danger" : "primary"}
-            className="rounded-[21px] w-[165px] h-10 flex justify-center"
-            onClick={onToggleReady}
-          >
-            {isReady ? "取消準備" : "準備"}
-          </Button>
-        )}
-        <Button
-          variant="dark"
-          className="rounded-[21px] w-[165px] h-10 flex justify-center"
-          onClick={onClickLeave}
-        >
-          退出房間
-        </Button>
-        {isHost && (
-          <Button
-            variant="dark"
-            className="rounded-[21px] w-[165px] h-10 flex justify-center"
-            onClick={onClickClose}
-          >
-            關閉房間
-          </Button>
-        )}
-      </div>
-
-      {isHost && (
-        <Button
-          variant="secondary"
-          className="min-w-[152px] w-[166px] h-[132px] rounded-[30px] text-white text-2xl leading-9 flex justify-center"
-          onClick={onClickStart}
-        >
+    <div className="flex items-center gap-4 m-4">
+      <Button
+        variant="secondary"
+        onClick={isHost ? onClickClose : onClickLeave}
+      >
+        離開房間
+      </Button>
+      {isHost ? (
+        <Button variant="primary" onClick={onClickStart}>
           開始遊戲
         </Button>
+      ) : (
+        <Button variant="secondary" onClick={onToggleReady}>
+          {isReady ? "取消準備" : "準備"}
+        </Button>
       )}
     </div>
   );
diff --git a/components/rooms/RoomUserCardList/RoomUserCardList.tsx b/components/rooms/RoomUserCardList/RoomUserCardList.tsx
index dc059fe1..4a759429 100644
--- a/components/rooms/RoomUserCardList/RoomUserCardList.tsx
+++ b/components/rooms/RoomUserCardList/RoomUserCardList.tsx
@@ -46,7 +46,7 @@ function RoomUserCardList({
     return [...userCards, ...emptyCards];
   }
   return (
-    <div className="pt-4 grid grid-cols-5 gap-x-5 gap-y-[60px]">
+    <div className="pt-4 grid grid-cols-5 gap-5">
       {renderUserCards(roomInfo.players)}
     </div>
   );
diff --git a/components/rooms/RoomUserCardList/UserCard/UserCard.tsx b/components/rooms/RoomUserCardList/UserCard/UserCard.tsx
index 2447e086..9861b20e 100644
--- a/components/rooms/RoomUserCardList/UserCard/UserCard.tsx
+++ b/components/rooms/RoomUserCardList/UserCard/UserCard.tsx
@@ -45,26 +45,24 @@ function UserCard(props: any) {
   const nameText = getNameText();
 
   return (
-    <div className="max-w-[200px] aspect-square w-full rounded-[10px] ">
-      <div
-        className={cn(
-          "relative w-full h-[170px] rounded-[10px] border ",
-          isHost && hostClass,
-          disabled && disabledClass
-        )}
-      >
-        {onKickUser && (
-          <div
-            onClick={() => onKickUser({ id, nickname })}
-            data-testid="kick-user-svg"
-            className={"absolute top-[5px] right-[6px] cursor-pointer"}
-          >
-            <Icon name="kickUser" />
-          </div>
-        )}
+    <div
+      className={cn(
+        "relative h-28 rounded-[10px] border ",
+        isHost && hostClass,
+        disabled && disabledClass
+      )}
+    >
+      {onKickUser && (
+        <div
+          onClick={() => onKickUser({ id, nickname })}
+          data-testid="kick-user-svg"
+          className={"absolute top-[5px] right-[6px] cursor-pointer"}
+        >
+          <Icon name="kickUser" />
+        </div>
+      )}
 
-        {isReady && readyContent}
-      </div>
+      {isReady && readyContent}
       <span className="mt-[10px] block font-bold text-base text-white">
         {nameText}
       </span>
diff --git a/pages/rooms/[roomId]/index.tsx b/pages/rooms/[roomId]/index.tsx
index 8ddcdd2f..0b7ffd5e 100644
--- a/pages/rooms/[roomId]/index.tsx
+++ b/pages/rooms/[roomId]/index.tsx
@@ -206,24 +206,39 @@ export default function Room() {
   };
 
   return (
-    <section className="px-[18px] py-4 max-w-[1172px] ">
-      <RoomBreadcrumb roomInfo={roomInfo} />
+    <section className="px-6">
+      <div className="relative w-full h-[280px] overflow-hidden">
+        <img
+          className="absolute inset-0 w-full h-full object-cover"
+          src="https://images.unsplash.com/photo-1601987177651-8edfe6c20009?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+          alt="cover"
+        />
+        <div className="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-t from-[#0f0919] to-50% to-[#170D2500]"></div>
+        <div className="m-2 py-1 px-2 w-fit bg-gray-950/50 backdrop-blur-sm rounded-lg text-sm">
+          <RoomBreadcrumb roomInfo={roomInfo} />
+        </div>
+        <div className="m-2 py-1 px-2 w-fit bg-gray-950/50 backdrop-blur-sm rounded-lg text-sm">
+          {roomInfo.isLocked ? "非公開" : "公開"}
+        </div>
+        <div className="m-2 py-1 px-2 w-fit bg-gray-950/50 backdrop-blur-sm rounded-lg text-sm">
+          {roomInfo.currentPlayers} / {roomInfo.maxPlayers} 人
+        </div>
+        <div className="absolute bottom-0 right-0 flex items-center">
+          <RoomButtonGroup
+            onToggleReady={handleToggleReady}
+            onClickClose={handleClickClose}
+            onClickLeave={handleLeave}
+            onClickStart={handleStart}
+            isHost={isHost}
+            isReady={isHost || !!player?.isReady}
+          />
+        </div>
+      </div>
       <RoomUserCardList
         roomInfo={roomInfo}
         currentUserId={currentUser?.id}
         onKickUser={handleClickKick}
       />
-      <div className="flex items-center">
-        <RoomChatroom roomId={roomId} />
-        <RoomButtonGroup
-          onToggleReady={handleToggleReady}
-          onClickClose={handleClickClose}
-          onClickLeave={handleLeave}
-          onClickStart={handleStart}
-          isHost={isHost}
-          isReady={isHost || !!player?.isReady}
-        />
-      </div>
       {gameUrl && <GameWindow gameUrl={gameUrl} />}
       <Popup />
     </section>

From 0a9083e793f533e131e7b288eec652667177c67e Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Thu, 3 Oct 2024 21:51:52 +0800
Subject: [PATCH 5/7] remove: unused component

---
 components/shared/Chat/ChatContent.tsx | 28 --------
 components/shared/Chat/ChatMessage.tsx | 44 ------------
 components/shared/Chat/index.tsx       | 95 --------------------------
 3 files changed, 167 deletions(-)
 delete mode 100644 components/shared/Chat/ChatContent.tsx
 delete mode 100644 components/shared/Chat/ChatMessage.tsx
 delete mode 100644 components/shared/Chat/index.tsx

diff --git a/components/shared/Chat/ChatContent.tsx b/components/shared/Chat/ChatContent.tsx
deleted file mode 100644
index 79ffcd72..00000000
--- a/components/shared/Chat/ChatContent.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { PropsWithChildren, useEffect, useRef } from "react";
-import { cn } from "@/lib/utils";
-
-type ChatContentProps = {
-  className?: string;
-} & PropsWithChildren;
-
-const ChatContent = ({ className, children }: ChatContentProps) => {
-  const chatRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    chatRef.current?.scrollTo({ top: chatRef.current.scrollHeight });
-  }, [children]);
-
-  return (
-    <div
-      className={cn(
-        "chat__body flex flex-col overflow-auto h-full p-4 gap-4",
-        className
-      )}
-      ref={chatRef}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default ChatContent;
diff --git a/components/shared/Chat/ChatMessage.tsx b/components/shared/Chat/ChatMessage.tsx
deleted file mode 100644
index 14911c40..00000000
--- a/components/shared/Chat/ChatMessage.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import Avatar from "../Avatar";
-import { cn } from "@/lib/utils";
-
-type ChatMessageProps = {
-  isMe?: boolean;
-  src?: string;
-  nickname?: string;
-  message?: string;
-};
-
-const ChatMessage: React.FC<ChatMessageProps> = ({
-  isMe,
-  src = "/images/profile.jpg",
-  nickname,
-  message,
-}) => {
-  return (
-    <div className="flex gap-2.5 text-white">
-      <Avatar
-        isOnline
-        onClick={() => {}}
-        src={{
-          blurDataURL: src,
-          height: 34,
-          src,
-          width: 34,
-        }}
-        type="button"
-      />
-      <div className="text-sm">
-        <h3
-          className={cn("text-blue58", {
-            "text-green23": isMe,
-          })}
-        >
-          {nickname}
-        </h3>
-        <p className="whitespace-pre">{message}</p>
-      </div>
-    </div>
-  );
-};
-
-export default ChatMessage;
diff --git a/components/shared/Chat/index.tsx b/components/shared/Chat/index.tsx
deleted file mode 100644
index 83f3697e..00000000
--- a/components/shared/Chat/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { useState } from "react";
-import Tabs from "../Tabs";
-import Button from "../Button";
-import ChatMessage from "./ChatMessage";
-import ChatContent from "./ChatContent";
-import Portal from "@/components/shared/Portal";
-
-enum TabsProps {
-  PUBLIC = "PUBLIC",
-  TEAM = "TEAM",
-  FRIENDS = "FRIENDS",
-}
-
-const mock_messages = Array.from({ length: 20 }, (_, i) => ({
-  isMe: !(i % 3),
-  id: crypto.randomUUID(),
-  nickname: !(i % 3) ? "玩家1" : "玩家2",
-  message: `聊天內容${i}`,
-}));
-
-const tabs = [
-  {
-    key: TabsProps.PUBLIC,
-    label: "公開聊天",
-  },
-  {
-    key: TabsProps.TEAM,
-    label: "遊戲隊聊",
-  },
-  {
-    key: TabsProps.FRIENDS,
-    label: "好友聊天",
-  },
-];
-
-const Chat = () => {
-  const [selectedTab, setSelectedTab] = useState<string>(TabsProps.PUBLIC);
-  const [message, setMessage] = useState<string>();
-
-  return (
-    <>
-      <Portal rootId="side-chat">
-        <div className="chat__container fixed right-0 top-[60px] flex flex-col flex-grow max-w-[262px] max-h-[calc(100vh-60px)] bg-dark29 rounded-[10px] overflow-hidden">
-          <Tabs
-            tabsClass="tabs__wrap"
-            defaultActiveKey={selectedTab}
-            tabs={tabs}
-            size="default"
-            onChange={(key) => setSelectedTab(key as string)}
-          />
-
-          {/* TODO: 尚未串接 API 再根據 API 文件調整 */}
-          <ChatContent>
-            {mock_messages.map((data) => (
-              <ChatMessage
-                key={data.id}
-                isMe={data.isMe}
-                nickname={data.nickname}
-                message={data.message}
-              />
-            ))}
-          </ChatContent>
-
-          <div className="chat__footer  flex flex-row flex-grow gap-2 w-full p-[7px_9px] bg-dark21">
-            <div
-              className="w-full max-h-[120px] overflow-auto break-all message outline-none text-white bg-gray2d p-[5px_7px]"
-              contentEditable
-              suppressContentEditableWarning
-              onBlur={(e) => setMessage(e.target.innerText)}
-            >
-              {message}
-            </div>
-            <Button
-              className="w-full justify-center max-w-[60px] px-0"
-              variant="secondary"
-              onClick={() => {
-                mock_messages.push({
-                  id: crypto.randomUUID(),
-                  isMe: true,
-                  nickname: "玩家1",
-                  message: message || "",
-                });
-                setMessage("");
-              }}
-            >
-              發送
-            </Button>
-          </div>
-        </div>{" "}
-      </Portal>
-    </>
-  );
-};
-
-export default Chat;

From ae02e71bf6605380e0392c1ee9b3929fa061bcc0 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Thu, 3 Oct 2024 22:00:21 +0800
Subject: [PATCH 6/7] fix: sonar cloud issue

---
 components/shared/Tabs/Tabs.tsx | 8 +++-----
 pages/rooms/[roomId]/index.tsx  | 1 -
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/components/shared/Tabs/Tabs.tsx b/components/shared/Tabs/Tabs.tsx
index 127638ae..90dc5616 100644
--- a/components/shared/Tabs/Tabs.tsx
+++ b/components/shared/Tabs/Tabs.tsx
@@ -22,9 +22,9 @@ export default function Tabs<T extends Key = string>({
   tabs,
   defaultActiveKey,
   renderTabPaneContent,
-}: TabsProps<T>) {
+}: Readonly<TabsProps<T>>) {
   const [activeKey, setActiveKey] = useState(
-    defaultActiveKey || tabs[0]?.tabKey
+    defaultActiveKey ?? tabs[0]?.tabKey
   );
   const activeTabItem = tabs.find((tab) => tab.tabKey === activeKey);
 
@@ -47,9 +47,7 @@ export default function Tabs<T extends Key = string>({
         ))}
       </div>
       <div role="tabpanel" aria-labelledby={`${activeTabItem?.label}`}>
-        {activeTabItem &&
-          renderTabPaneContent &&
-          renderTabPaneContent(activeTabItem)}
+        {activeTabItem && renderTabPaneContent?.(activeTabItem)}
       </div>
     </>
   );
diff --git a/pages/rooms/[roomId]/index.tsx b/pages/rooms/[roomId]/index.tsx
index 0b7ffd5e..ba8dfbbf 100644
--- a/pages/rooms/[roomId]/index.tsx
+++ b/pages/rooms/[roomId]/index.tsx
@@ -5,7 +5,6 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import RoomUserCardList from "@/components/rooms/RoomUserCardList";
 import RoomButtonGroup from "@/components/rooms/RoomButtonGroup";
 import RoomBreadcrumb from "@/components/rooms/RoomBreadcrumb";
-import RoomChatroom from "@/components/rooms/RoomChatroom";
 import GameWindow from "@/components/rooms/GameWindow";
 import useRequest from "@/hooks/useRequest";
 import useRoom from "@/hooks/useRoom";

From 683299ce77e69cbeedba9751ed6eeec9ab2757a6 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Fri, 4 Oct 2024 22:37:41 +0800
Subject: [PATCH 7/7] refactor: room page logic

---
 containers/room/RoomListView.tsx | 61 ++++++++++++--------------------
 1 file changed, 22 insertions(+), 39 deletions(-)

diff --git a/containers/room/RoomListView.tsx b/containers/room/RoomListView.tsx
index c0fb30f9..8549430f 100644
--- a/containers/room/RoomListView.tsx
+++ b/containers/room/RoomListView.tsx
@@ -4,8 +4,6 @@ import { AxiosError } from "axios";
 import { useTranslation } from "next-i18next";
 
 import {
-  Room,
-  RoomEntryError,
   RoomType,
   getRooms,
   postRoomEntry,
@@ -34,26 +32,16 @@ const RoomsListView: FC<Props> = ({ status }) => {
         fetch(getRooms({ page, perPage, status })),
       defaultPerPage: 20,
     });
-  const [selectedRoom, setSelectedRoom] = useState<Room | undefined>();
+  const [roomId, setRoomId] = useState<string | null>(null);
   const [passwordValues, setPasswordValues] = useState(INIT_PASSWORD);
   const [isLoading, setIsLoading] = useState(false);
-  const router = useRouter();
   const { Popup, firePopup } = usePopup();
-
-  const onSelectedRoom = (id: string) => {
-    const targetRoom = data.find((room) => room.id === id);
-
-    if (targetRoom?.currentPlayers === targetRoom?.maxPlayers) {
-      firePopup({ title: t("room_is_full") });
-      return;
-    }
-
-    setSelectedRoom(targetRoom);
-  };
+  const router = useRouter();
+  const isLocked = data.find((room) => room.id === roomId)?.isLocked;
 
   const handleClose = () => {
     setPasswordValues(INIT_PASSWORD);
-    setSelectedRoom(undefined);
+    setRoomId(null);
   };
 
   const handlePaste = (e: ClipboardEvent<HTMLDivElement>) => {
@@ -67,10 +55,6 @@ const RoomsListView: FC<Props> = ({ status }) => {
     setPasswordValues(Array.from(pastePassword, (text) => text ?? ""));
   };
 
-  const handleValues = (values: string[]) => {
-    setPasswordValues(values);
-  };
-
   useEffect(() => {
     async function fetchRoomEntry(_roomId: string) {
       setIsLoading(true);
@@ -80,27 +64,26 @@ const RoomsListView: FC<Props> = ({ status }) => {
         return;
       }
 
-      fetch(postRoomEntry(_roomId, passwordValues.join("")))
-        .then(() => {
-          router.push(`/rooms/${_roomId}`);
-        })
-        .catch((err: AxiosError<RoomEntryError>) => {
+      try {
+        await fetch(postRoomEntry(_roomId, passwordValues.join("")));
+        router.push(`/rooms/${_roomId}`);
+      } catch (err) {
+        if (err instanceof AxiosError) {
           const msg = err.response?.data.message.replaceAll(" ", "_");
           if (!msg) return firePopup({ title: "error!" });
           firePopup({ title: t(msg) });
-        })
-        .finally(() => {
-          // setSelectedRoom(undefined);
-          setPasswordValues(INIT_PASSWORD);
-          isLoading && setIsLoading(false);
-        });
+        }
+      } finally {
+        setPasswordValues(INIT_PASSWORD);
+        setIsLoading(false);
+      }
     }
 
-    if (!selectedRoom || isLoading) return;
-    if (!selectedRoom.isLocked || passwordValues.every((char) => char !== "")) {
-      fetchRoomEntry(selectedRoom.id);
+    if (!roomId || isLoading) return;
+    if (!isLocked || passwordValues.every((char) => char !== "")) {
+      fetchRoomEntry(roomId);
     }
-  }, [selectedRoom, passwordValues, isLoading, router, fetch, firePopup, t]);
+  }, [roomId, passwordValues, isLoading, router, fetch, firePopup, t]);
 
   const Pagination = () => {
     return (
@@ -129,8 +112,8 @@ const RoomsListView: FC<Props> = ({ status }) => {
               <RoomCard
                 key={_room.id}
                 room={_room}
-                active={_room.id === selectedRoom?.id}
-                onClick={onSelectedRoom}
+                active={_room.id === roomId}
+                onClick={setRoomId}
               />
             ))}
         </RoomsListWrapper>
@@ -138,10 +121,10 @@ const RoomsListView: FC<Props> = ({ status }) => {
       </RoomsList>
 
       <EnterPrivateRoomModal
-        isOpen={!!selectedRoom?.isLocked && !!selectedRoom?.id}
+        isOpen={!!isLocked && !!roomId}
         loading={isLoading}
         passwordValues={passwordValues}
-        setPasswordValues={handleValues}
+        setPasswordValues={setPasswordValues}
         onClose={handleClose}
         onPaste={handlePaste}
       />