CyberAgentHack · ooyoshi00 · Mar 22, 2025 · Mar 22, 2025 · Mar 22, 2025 · Mar 22, 2025
diff --git a/.github/workflows/create_heroku_review_app.yaml b/.github/workflows/create_heroku_review_app.yaml
@@ -7,7 +7,7 @@ jobs:
   create-review-app:
     runs-on: ubuntu-latest
     steps:
-      - uses: fastruby/manage-heroku-review-app@9fa49f0320460f278c3687bc348dd0cbb18555dc # v1.3
+      - uses: kqito/manage-heroku-review-app@55e434ad5ac86f21cf2f7654de1566973fbc7046
         with:
           action: create
         env:

diff --git a/.github/workflows/destroy_heroku_review_app.yaml b/.github/workflows/destroy_heroku_review_app.yaml
@@ -7,7 +7,7 @@ jobs:
   destroy-review-app:
     runs-on: ubuntu-latest
     steps:
-      - uses: fastruby/manage-heroku-review-app@9fa49f0320460f278c3687bc348dd0cbb18555dc # v1.3
+      - uses: kqito/manage-heroku-review-app@55e434ad5ac86f21cf2f7654de1566973fbc7046
         with:
           action: destroy
         env:

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/images/001.jpeg b/public/images/001.jpeg
diff --git a/public/images/001.webp b/public/images/001.webp
diff --git a/public/images/002.jpeg b/public/images/002.jpeg
diff --git a/public/images/002.webp b/public/images/002.webp
diff --git a/public/images/003.jpeg b/public/images/003.jpeg
diff --git a/public/images/003.webp b/public/images/003.webp
diff --git a/public/images/004.jpeg b/public/images/004.jpeg
diff --git a/public/images/004.webp b/public/images/004.webp
diff --git a/public/images/005.jpeg b/public/images/005.jpeg
diff --git a/public/images/005.webp b/public/images/005.webp
diff --git a/public/images/006.jpeg b/public/images/006.jpeg
diff --git a/public/images/006.webp b/public/images/006.webp
diff --git a/public/images/007.jpeg b/public/images/007.jpeg
diff --git a/public/images/007.webp b/public/images/007.webp
diff --git a/public/images/008.jpeg b/public/images/008.jpeg
diff --git a/public/images/008.webp b/public/images/008.webp
diff --git a/public/images/009.jpeg b/public/images/009.jpeg
diff --git a/public/images/009.webp b/public/images/009.webp
diff --git a/public/images/010.jpeg b/public/images/010.jpeg
diff --git a/public/images/010.webp b/public/images/010.webp
diff --git a/public/images/011.jpeg b/public/images/011.jpeg
diff --git a/public/images/011.webp b/public/images/011.webp
diff --git a/public/images/012.jpeg b/public/images/012.jpeg
diff --git a/public/images/012.webp b/public/images/012.webp
diff --git a/public/images/013.jpeg b/public/images/013.jpeg
diff --git a/public/images/013.webp b/public/images/013.webp
diff --git a/public/images/014.jpeg b/public/images/014.jpeg
diff --git a/public/images/014.webp b/public/images/014.webp
diff --git a/public/images/015.jpeg b/public/images/015.jpeg
diff --git a/public/images/015.webp b/public/images/015.webp
diff --git a/public/images/016.jpeg b/public/images/016.jpeg
diff --git a/public/images/016.webp b/public/images/016.webp
diff --git a/public/images/017.jpeg b/public/images/017.jpeg
diff --git a/public/images/017.webp b/public/images/017.webp
diff --git a/public/images/018.jpeg b/public/images/018.jpeg
diff --git a/public/images/018.webp b/public/images/018.webp
diff --git a/public/images/019.jpeg b/public/images/019.jpeg
diff --git a/public/images/019.webp b/public/images/019.webp
diff --git a/public/images/020.jpeg b/public/images/020.jpeg
diff --git a/public/images/020.webp b/public/images/020.webp
diff --git a/public/images/021.jpeg b/public/images/021.jpeg
diff --git a/public/images/021.webp b/public/images/021.webp
diff --git a/public/images/022.jpeg b/public/images/022.jpeg
diff --git a/public/images/022.webp b/public/images/022.webp
diff --git a/public/images/023.jpeg b/public/images/023.jpeg
diff --git a/public/images/023.webp b/public/images/023.webp
diff --git a/public/images/024.jpeg b/public/images/024.jpeg
diff --git a/public/images/024.webp b/public/images/024.webp
diff --git a/public/images/025.jpeg b/public/images/025.jpeg
diff --git a/public/images/025.webp b/public/images/025.webp
diff --git a/public/images/026.jpeg b/public/images/026.jpeg
diff --git a/public/images/026.webp b/public/images/026.webp
diff --git a/public/images/027.jpeg b/public/images/027.jpeg
diff --git a/public/images/027.webp b/public/images/027.webp
diff --git a/public/images/028.jpeg b/public/images/028.jpeg
diff --git a/public/images/028.webp b/public/images/028.webp
diff --git a/public/images/029.jpeg b/public/images/029.jpeg
diff --git a/public/images/029.webp b/public/images/029.webp
diff --git a/public/images/030.jpeg b/public/images/030.jpeg
diff --git a/public/images/030.webp b/public/images/030.webp
diff --git a/public/images/031.jpeg b/public/images/031.jpeg
diff --git a/public/images/031.webp b/public/images/031.webp
diff --git a/public/images/032.jpeg b/public/images/032.jpeg
diff --git a/public/images/032.webp b/public/images/032.webp
diff --git a/public/images/033.jpeg b/public/images/033.jpeg
diff --git a/public/images/033.webp b/public/images/033.webp
diff --git a/public/images/034.jpeg b/public/images/034.jpeg
diff --git a/public/images/034.webp b/public/images/034.webp
diff --git a/public/images/035.jpeg b/public/images/035.jpeg
diff --git a/public/images/035.webp b/public/images/035.webp
diff --git a/public/images/036.jpeg b/public/images/036.jpeg
diff --git a/public/images/036.webp b/public/images/036.webp
diff --git a/public/images/037.jpeg b/public/images/037.jpeg
diff --git a/public/images/037.webp b/public/images/037.webp
diff --git a/workspaces/client/package.json b/workspaces/client/package.json
@@ -22,10 +22,8 @@
     "classnames": "2.5.1",
     "final-form": "4.20.10",
     "immer": "10.1.1",
-    "lodash": "4.17.21",
     "luxon": "3.5.0",
     "m3u8-parser": "7.2.0",
-    "p-min-delay": "4.0.2",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-ellipsis-component": "1.1.11",
@@ -36,6 +34,7 @@
     "react-use": "17.6.0",
     "setimmediate": "1.0.5",
     "tiny-invariant": "1.3.3",
+    "ts-deepmerge": "7.0.2",
     "type-fest": "4.29.1",
     "use-callback-ref": "1.3.3",
     "use-sync-external-store": "1.4.0",
@@ -54,7 +53,6 @@
     "@ffmpeg/util": "0.12.2",
     "@iconify/json": "2.2.317",
     "@iconify/types": "2.0.0",
-    "@types/lodash": "4.17.16",
     "@types/luxon": "3.4.2",
     "@types/m3u8-parser": "7.2.0",
     "@types/react": "19.0.1",
@@ -67,7 +65,6 @@
     "@wsh-2025/configs": "workspace:*",
     "arraybuffer-loader": "1.0.8",
     "babel-loader": "9.2.1",
-    "core-js": "3.41.0",
     "hls.js": "1.5.17",
     "shaka-player": "4.12.5",
     "typescript": "5.7.2",

diff --git a/workspaces/client/src/app/Document.tsx b/workspaces/client/src/app/Document.tsx
@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { memo, Suspense } from 'react';
 import { Outlet, ScrollRestoration } from 'react-router';
 
 import { createStore } from '@wsh-2025/client/src/app/createStore';
@@ -9,9 +9,9 @@ export const prefetch = async (store: ReturnType<typeof createStore>) => {
   return { user };
 };
 
-export const Document = () => {
+export const Document = memo(function Document() {
   return (
-    <html className="size-full" lang="ja">
+    <html lang="ja">
       <head>
         <meta charSet="UTF-8" />
         <meta content="width=device-width, initial-scale=1.0" name="viewport" />
@@ -27,4 +27,4 @@ export const Document = () => {
       </body>
     </html>
   );
-};
+});
diff --git a/workspaces/client/src/app/createRoutes.tsx b/workspaces/client/src/app/createRoutes.tsx
@@ -1,8 +1,9 @@
-import lazy from 'p-min-delay';
+import { Suspense } from 'react';
 import { RouteObject } from 'react-router';
 
 import { Document, prefetch } from '@wsh-2025/client/src/app/Document';
 import { createStore } from '@wsh-2025/client/src/app/createStore';
+import { Loading } from '@wsh-2025/client/src/features/layout/components/Loading';
 
 export function createRoutes(store: ReturnType<typeof createStore>): RouteObject[] {
   return [
@@ -11,12 +12,13 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
         {
           index: true,
           async lazy() {
-            const { HomePage, prefetch } = await lazy(
-              import('@wsh-2025/client/src/pages/home/components/HomePage'),
-              1000,
-            );
+            const { HomePage, prefetch } = await import('@wsh-2025/client/src/pages/home/components/HomePage');
             return {
-              Component: HomePage,
+              Component: () => (
+                <Suspense fallback={<Loading />}>
+                  <HomePage />
+                </Suspense>
+              ),
               async loader() {
                 return await prefetch(store);
               },
@@ -25,12 +27,13 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
         },
         {
           async lazy() {
-            const { EpisodePage, prefetch } = await lazy(
-              import('@wsh-2025/client/src/pages/episode/components/EpisodePage'),
-              1000,
-            );
+            const { EpisodePage, prefetch } = await import('@wsh-2025/client/src/pages/episode/components/EpisodePage');
             return {
-              Component: EpisodePage,
+              Component: () => (
+                <Suspense fallback={<Loading />}>
+                  <EpisodePage />
+                </Suspense>
+              ),
               async loader({ params }) {
                 return await prefetch(store, params);
               },
@@ -40,12 +43,13 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
         },
         {
           async lazy() {
-            const { prefetch, ProgramPage } = await lazy(
-              import('@wsh-2025/client/src/pages/program/components/ProgramPage'),
-              1000,
-            );
+            const { prefetch, ProgramPage } = await import('@wsh-2025/client/src/pages/program/components/ProgramPage');
             return {
-              Component: ProgramPage,
+              Component: () => (
+                <Suspense fallback={<Loading />}>
+                  <ProgramPage />
+                </Suspense>
+              ),
               async loader({ params }) {
                 return await prefetch(store, params);
               },
@@ -55,12 +59,13 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
         },
         {
           async lazy() {
-            const { prefetch, SeriesPage } = await lazy(
-              import('@wsh-2025/client/src/pages/series/components/SeriesPage'),
-              1000,
-            );
+            const { prefetch, SeriesPage } = await import('@wsh-2025/client/src/pages/series/components/SeriesPage');
             return {
-              Component: SeriesPage,
+              Component: () => (
+                <Suspense fallback={<Loading />}>
+                  <SeriesPage />
+                </Suspense>
+              ),
               async loader({ params }) {
                 return await prefetch(store, params);
               },
@@ -70,12 +75,15 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
         },
         {
           async lazy() {
-            const { prefetch, TimetablePage } = await lazy(
-              import('@wsh-2025/client/src/pages/timetable/components/TimetablePage'),
-              1000,
+            const { prefetch, TimetablePage } = await import(
+              '@wsh-2025/client/src/pages/timetable/components/TimetablePage'
             );
             return {
-              Component: TimetablePage,
+              Component: () => (
+                <Suspense fallback={<Loading />}>
+                  <TimetablePage />
+                </Suspense>
+              ),
               async loader() {
                 return await prefetch(store);
               },
@@ -85,12 +93,15 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
         },
         {
           async lazy() {
-            const { NotFoundPage, prefetch } = await lazy(
-              import('@wsh-2025/client/src/pages/not_found/components/NotFoundPage'),
-              1000,
+            const { NotFoundPage, prefetch } = await import(
+              '@wsh-2025/client/src/pages/not_found/components/NotFoundPage'
             );
             return {
-              Component: NotFoundPage,
+              Component: () => (
+                <Suspense fallback={<Loading />}>
+                  <NotFoundPage />
+                </Suspense>
+              ),
               async loader() {
                 return await prefetch(store);
               },

diff --git a/workspaces/client/src/app/createStore.ts b/workspaces/client/src/app/createStore.ts
@@ -1,5 +1,5 @@
 import { withLenses } from '@dhmk/zustand-lens';
-import _ from 'lodash';
+import { merge } from 'ts-deepmerge';
 import { createStore as createZustandStore } from 'zustand/vanilla';
 
 import { createAuthStoreSlice } from '@wsh-2025/client/src/features/auth/stores/createAuthStoreSlice';
@@ -39,7 +39,7 @@ export const createStore = ({ hydrationData }: Props) => {
     })),
   );
 
-  store.setState((s) => _.merge(s, hydrationData));
+  store.setState((s) => merge(s, hydrationData ?? {}));
 
   return store;
 };
diff --git a/workspaces/client/src/features/auth/components/SignInDialog.tsx b/workspaces/client/src/features/auth/components/SignInDialog.tsx
@@ -47,7 +47,7 @@ export const SignInDialog = ({ isOpen, onClose, onOpenSignUp }: Props) => {
     <Dialog isOpen={isOpen} onClose={onClose}>
       <div className="size-full">
         <div className="mb-[16px] flex w-full flex-row justify-center">
-          <img className="object-contain" height={36} src="/public/arema.svg" width={98} />
+          <img className="object-contain" height={36} loading="lazy" src="/public/arema.svg" width={98} />
         </div>
 
         <h2 className="mb-[24px] text-center text-[24px] font-bold">ログイン</h2>

diff --git a/workspaces/client/src/features/auth/components/SignOutDialog.tsx b/workspaces/client/src/features/auth/components/SignOutDialog.tsx
@@ -28,7 +28,7 @@ export const SignOutDialog = ({ isOpen, onClose }: Props) => {
     <Dialog isOpen={isOpen} onClose={onClose}>
       <div className="size-full">
         <div className="mb-[16px] flex w-full flex-row justify-center">
-          <img className="object-contain" height={36} src="/public/arema.svg" width={98} />
+          <img className="object-contain" height={36} loading="lazy" src="/public/arema.svg" width={98} />
         </div>
 
         <h2 className="mb-[24px] text-center text-[24px] font-bold">ログアウト</h2>

diff --git a/workspaces/client/src/features/auth/components/SignUpDialog.tsx b/workspaces/client/src/features/auth/components/SignUpDialog.tsx
@@ -47,7 +47,7 @@ export const SignUpDialog = ({ isOpen, onClose, onOpenSignIn }: Props) => {
     <Dialog isOpen={isOpen} onClose={onClose}>
       <div className="size-full">
         <div className="mb-[16px] flex w-full flex-row justify-center">
-          <img className="object-contain" height={36} src="/public/arema.svg" width={98} />
+          <img className="object-contain" height={36} loading="lazy" src="/public/arema.svg" width={98} />
         </div>
 
         <h2 className="mb-[24px] text-center text-[24px] font-bold">会員登録</h2>

diff --git a/workspaces/client/src/features/layout/components/AspectRatio.tsx b/workspaces/client/src/features/layout/components/AspectRatio.tsx
@@ -1,31 +1,9 @@
-import { ReactNode, useEffect, useRef } from 'react';
-import { useUpdate } from 'react-use';
+import { ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;
-  ratioHeight: number;
-  ratioWidth: number;
 }
 
-export const AspectRatio = ({ children, ratioHeight, ratioWidth }: Props) => {
-  const forceUpdate = useUpdate();
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const interval = setInterval(function tick() {
-      forceUpdate();
-    }, 1000);
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  const width = containerRef.current?.getBoundingClientRect().width ?? 0;
-  const height = (width * ratioHeight) / ratioWidth;
-
-  return (
-    <div ref={containerRef} className={`h-[${height}px] relative w-full`}>
-      {children}
-    </div>
-  );
+export const AspectRatio = ({ children }: Props) => {
+  return <div className={'relative aspect-video'}>{children}</div>;
 };