refactor: shared component and layout

components/shared/Header.tsx

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
 import { UserInfoForm } from "@/features/user";
 import useAuth from "@/hooks/context/useAuth";
 import Modal from "./Modal";
-import Cover from "./Cover";
+import Image from "./Image";
 
 enum HeaderActions {
   CHAT = "CHAT",
@@ -65,7 +65,7 @@ export default function Header({
       )}
     >
       <div className="flex items-center gap-3">
-        <Cover src="/logo.png" alt="logo" width={40} height={40} />
+        <Image src="/logo.png" alt="logo" width={40} height={40} priority />
         <h2 className="text-primary-100 text-2xl">遊戲微服務大平台</h2>
       </div>
       <div className="header___actions flex gap-5">

components/shared/Cover/Cover.stories.tsx → components/shared/Image/Image.stories.tsx

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import Cover from "./index";
+import Image from ".";
 
-const meta: Meta<typeof Cover> = {
-  title: "Data Display/ Cover",
-  component: Cover,
+const meta: Meta<typeof Image> = {
+  title: "Data Display/ Image",
+  component: Image,
   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",
+    alt: "image",
     width: 100,
     height: 130,
   },
@@ -21,17 +21,17 @@ const meta: Meta<typeof Cover> = {
   },
 };
 
-type Story = StoryObj<typeof Cover>;
+type Story = StoryObj<typeof Image>;
 
 export const Playground: Story = {
-  render: (args) => <Cover {...args} />,
+  render: (args) => <Image alt={args.alt} {...args} />,
 };
 
-export const DefaultErrorCover: Story = {
-  render: (args) => <Cover {...args} />,
+export const DefaultErrorImage: Story = {
+  render: (args) => <Image alt={args.alt} {...args} />,
 };
 
-DefaultErrorCover.args = {
+DefaultErrorImage.args = {
   src: "error src",
 };
 

components/shared/Image/Image.tsx

@@ -0,0 +1,41 @@
+import { ReactEventHandler } from "react";
+import gameDefaultCoverImg from "@/public/images/game-default-cover.png";
+import { cn } from "@/lib/utils";
+
+interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  priority?: boolean;
+  fill?: boolean;
+}
+
+function Image({
+  alt,
+  onError,
+  priority,
+  fill,
+  className,
+  ...restProps
+}: ImageProps) {
+  const handleError: ReactEventHandler<HTMLImageElement> = (e) => {
+    if (e.target instanceof HTMLImageElement) {
+      e.target.src = gameDefaultCoverImg.src;
+    }
+    onError?.(e);
+  };
+  return (
+    <picture>
+      <img
+        alt={alt}
+        className={cn(className, fill && "absolute inset-0 w-full h-full")}
+        draggable={false}
+        loading={priority ? "eager" : "lazy"}
+        decoding="async"
+        onError={handleError}
+        // @ts-ignore https://github.com/vercel/next.js/issues/65161
+        fetchpriority={priority ? "high" : "auto"}
+        {...restProps}
+      />
+    </picture>
+  );
+}
+
+export default Image;

components/shared/Cover/cover.test.tsx → components/shared/Image/image.test.tsx

@@ -1,19 +1,19 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import Cover from ".";
+import Image from ".";
 
-describe("Cover", () => {
-  test("should render Cover component", () => {
+describe("Image", () => {
+  test("should render Image component", () => {
     render(
-      <Cover
+      <Image
         src="https://images.unsplash.com/photo-1683125695370-1c7fc9ff1315?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160"
-        alt="Cover"
+        alt="Image"
         width={300}
         height={300}
       />
     );
-    const cover = screen.getByRole("img");
-    expect(cover).toBeInTheDocument();
-    expect(cover).toHaveAccessibleName("Cover");
+    const image = screen.getByRole("img");
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAccessibleName("Image");
   });
 });

components/shared/Image/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Image";

components/shared/SelectBoxGroup/SelectBoxGroup.tsx

@@ -61,28 +61,33 @@ function SelectBoxGroup<T = string>({
         </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>
-        ))}
+        {items.map((item) => {
+          const checkboxId = `${selectBoxId}_${item.key}`;
+          const isChecked = value === item.value;
+
+          return (
+            <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 select-none",
+                  isChecked && "border-primary-200 text-primary-50"
+                )}
+                htmlFor={checkboxId}
+                aria-checked={isChecked}
+              >
+                {item.label}
+              </label>
+              <input
+                type="checkbox"
+                id={checkboxId}
+                checked={isChecked}
+                className="[clip:rect(0,0,0,0)] absolute p-0 border-0 w-0 h-0 overflow-hidden"
+                onChange={() => onChange?.(item.value)}
+              />
+            </li>
+          );
+        })}
       </ul>
     </div>
   );

containers/layout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useEffect } from "react";
+import { useEffect } from "react";
 import { useRouter } from "next/router";
 import Header from "@/components/shared/Header";
 import Sidebar from "@/components/shared/Sidebar";
@@ -9,7 +9,7 @@ import SearchBar from "@/components/shared/SearchBar";
 import { useToast } from "@/components/shared/Toast";
 import { GameListProvider } from "@/features/game";
 
-export default function AppLayout({ children }: PropsWithChildren) {
+function AppLayout({ children }: React.PropsWithChildren) {
   const toast = useToast();
   const router = useRouter();
   const {
@@ -85,3 +85,7 @@ export default function AppLayout({ children }: PropsWithChildren) {
     </GameListProvider>
   );
 }
+
+export default function getAppLayout(page: React.ReactElement) {
+  return <AppLayout>{page}</AppLayout>;
+}

features/game/components/GameCardDetailed.tsx

@@ -3,7 +3,7 @@ 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";
+import Image from "@/components/shared/Image";
 
 function GameCardDetailed({
   children,
@@ -16,13 +16,11 @@ function GameCardDetailed({
   return (
     <div className="flex text-white mx-10 px-11 gap-4">
       <div className="relative flex items-end justify-end flex-[60%]">
-        <Cover
+        <Image
           src={img || gameDefaultCoverImg.src}
           alt={name}
-          draggable={false}
-          priority
-          fill
           className="object-cover"
+          fill
         />
         {children}
       </div>
@@ -48,14 +46,7 @@ function GameCardDetailed({
           <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"
-                />
+                <Image src={img} alt={name} className="object-cover" fill />
               )}
             </li>
           </ul>

features/game/components/GameCardSimple.tsx

@@ -2,20 +2,18 @@ import { PropsWithChildren } from "react";
 
 import gameDefaultCoverImg from "@/public/images/game-default-cover.png";
 import { GameType } from "@/requests/games";
-import Cover from "@/components/shared/Cover";
+import Image from "@/components/shared/Image";
 
 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
+          <Image
             src={img || gameDefaultCoverImg.src}
             alt={name}
-            draggable={false}
-            priority
-            fill
             className="object-cover"
+            fill
           />
         </picture>
         <div className="opacity-0 group-hover:opacity-100 transition-opacity">

features/room/components/RoomCard.tsx

@@ -1,6 +1,6 @@
 import type { Room } from "@/requests/rooms";
 
-import Cover from "@/components/shared/Cover";
+import Image from "@/components/shared/Image";
 import Button, { ButtonSize } from "@/components/shared/Button/v2";
 import { useJoinRoom } from "../hooks";
 
@@ -22,7 +22,7 @@ function RoomCard({ room, onClick }: Readonly<RoomsCardProps>) {
   return (
     <div className="bg-primary-700/40 rounded-2xl">
       <div className="flex p-4 gap-4 text-primary-50">
-        <Cover
+        <Image
           className="w-16 h-16 rounded-lg object-cover"
           src={room.game.imgUrl}
           alt={room.game.name}

next.config.js

@@ -9,6 +9,7 @@ if (process.env.ANALYZE === "true") {
   });
 }
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   i18n,
   output: "standalone",

pages/_app.tsx

@@ -9,7 +9,7 @@ import "@/styles/global.css";
 import "@/scripts/whyDidYouRender";
 
 import AxiosProvider from "@/containers/provider/AxiosProvider";
-import AppLayout from "@/containers/layout/AppLayout";
+import getAppLayout from "@/containers/layout/AppLayout";
 import AuthProvider from "@/containers/provider/AuthProvider";
 import Startup from "@/containers/util/Startup";
 import HistoryProvider from "@/containers/provider/HistoryProvider";
@@ -20,7 +20,7 @@ import { SocketProvider } from "@/containers/provider/SocketProvider";
 import ChatroomContextProvider from "@/containers/provider/ChatroomProvider";
 
 export type NextPageWithProps<P = unknown, IP = P> = NextPage<P, IP> & {
-  getLayout?: FC<PropsWithChildren>;
+  getLayout?: (page: React.ReactElement) => React.ReactElement;
   Anonymous?: boolean;
 };
 
@@ -34,9 +34,7 @@ function App({ Component, pageProps }: AppWithProps) {
     Component.Anonymous || !!process.env.NEXT_PUBLIC_CI_MODE || false;
   const isProduction = env !== Env.PROD ? false : true;
 
-  const Layout =
-    Component.getLayout ??
-    (({ children }) => <AppLayout>{children}</AppLayout>);
+  const getLayout = Component.getLayout ?? getAppLayout;
 
   const getHistory = (children: ReactElement) => {
     return isProduction ? (
@@ -58,9 +56,7 @@ function App({ Component, pageProps }: AppWithProps) {
               <SocketProvider>
                 <ChatroomContextProvider>
                   <Startup isAnonymous={isAnonymous}>
-                    <Layout>
-                      <Component {...pageProps} />
-                    </Layout>
+                    {getLayout(<Component {...pageProps} />)}
                     {!isProduction && <HistoryList />}
                   </Startup>
                 </ChatroomContextProvider>

pages/auth/login.tsx

@@ -25,7 +25,7 @@ const Login: NextPageWithProps = () => {
   return <></>;
 };
 
-Login.getLayout = ({ children }) => children;
+Login.getLayout = (page) => page;
 Login.Anonymous = true;
 
 export default Login;

pages/auth/token/[token].tsx

@@ -21,7 +21,7 @@ const Token: NextPageWithProps = () => {
   return <></>;
 };
 
-Token.getLayout = ({ children }) => children;
+Token.getLayout = (page) => page;
 Token.Anonymous = true;
 
 export default Token;