CyberAgentHack · ouchikai · 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
@@ -35,6 +35,7 @@
     "react-router-dom": "7.0.2",
     "react-use": "17.6.0",
     "setimmediate": "1.0.5",
+    "terser-webpack-plugin": "5.3.14",
     "tiny-invariant": "1.3.3",
     "type-fest": "4.29.1",
     "use-callback-ref": "1.3.3",

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 'lodash/merge';
 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
@@ -14,6 +14,17 @@ interface SignInFormValues {
   password: string;
 }
 
+export const ErrorOutlineIcon = () => {
+  return (
+    <svg height={24} viewBox="0 0 24 24" width={24} xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
 interface Props {
   isOpen: boolean;
   onClose: () => void;
@@ -47,7 +58,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>
@@ -121,7 +132,7 @@ export const SignInDialog = ({ isOpen, onClose, onOpenSignUp }: Props) => {
 
               {submitError ? (
                 <div className="mb-[8px] flex w-full flex-row items-center justify-start rounded-[4px] border-[2px] border-solid border-[#F0163A] bg-[#ffeeee] p-[8px] text-[14px] font-bold text-[#F0163A]">
-                  <div className="i-material-symbols:error-outline m-[4px] size-[20px]" />
+                  <ErrorOutlineIcon />
                   <span>{submitError}</span>
                 </div>
               ) : null}

diff --git a/workspaces/client/src/features/auth/components/SignOutDialog.tsx b/workspaces/client/src/features/auth/components/SignOutDialog.tsx
@@ -1,6 +1,7 @@
 import { FORM_ERROR } from 'final-form';
 import { Form } from 'react-final-form';
 
+import { ErrorOutlineIcon } from '@wsh-2025/client/src/features/auth/components/SignInDialog';
 import { useAuthActions } from '@wsh-2025/client/src/features/auth/hooks/useAuthActions';
 import { Dialog } from '@wsh-2025/client/src/features/dialog/components/Dialog';
 
@@ -28,22 +29,31 @@ 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>
 
         <Form onSubmit={onSubmit}>
           {({ handleSubmit, submitError }) => (
             <form className="mb-[16px]" onSubmit={(ev) => void handleSubmit(ev)}>
-              <div className="mb-[24px] flex w-full flex-row items-center justify-start rounded-[4px] border-[2px] border-solid border-[#DDAA00] bg-[#fffcee] p-[8px] text-[14px] font-bold text-[#DDAA00]">
-                <div className="i-material-symbols:warning-outline-rounded m-[4px] size-[20px]" />
+              <div className="mb-[24px] flex w-full items-center rounded-[4px] border-[2px] border-solid border-[#DDAA00] bg-[#fffcee] p-[8px] text-[14px] font-bold text-[#DDAA00]">
+                <svg
+                  className="mr-[4px]"
+                  fill="currentColor"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  width="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M2.725 21q-.275 0-.5-.137t-.35-.363t-.137-.488t.137-.512l9.25-16q.15-.25.388-.375T12 3t.488.125t.387.375l9.25 16q.15.25.138.513t-.138.487t-.35.363t-.5.137zm1.725-2h15.1L12 6zM12 18q.425 0 .713-.288T13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18m0-3q.425 0 .713-.288T13 14v-3q0-.425-.288-.712T12 10t-.712.288T11 11v3q0 .425.288.713T12 15m0-2.5" />
+                </svg>
                 <span>プレミアムエピソードが視聴できなくなります。</span>
               </div>
 
               {submitError ? (
                 <div className="mb-[8px] flex w-full flex-row items-center justify-start rounded-[4px] border-[2px] border-solid border-[#F0163A] bg-[#ffeeee] p-[8px] text-[14px] font-bold text-[#F0163A]">
-                  <div className="i-material-symbols:error-outline m-[4px] size-[20px]" />
+                  <ErrorOutlineIcon />
                   <span>{submitError}</span>
                 </div>
               ) : null}

diff --git a/workspaces/client/src/features/auth/components/SignUpDialog.tsx b/workspaces/client/src/features/auth/components/SignUpDialog.tsx
@@ -4,6 +4,7 @@ import { useId } from 'react';
 import { Field, Form } from 'react-final-form';
 import { z } from 'zod';
 
+import { ErrorOutlineIcon } from '@wsh-2025/client/src/features/auth/components/SignInDialog';
 import { useAuthActions } from '@wsh-2025/client/src/features/auth/hooks/useAuthActions';
 import { isValidEmail } from '@wsh-2025/client/src/features/auth/logics/isValidEmail';
 import { isValidPassword } from '@wsh-2025/client/src/features/auth/logics/isValidPassword';
@@ -47,7 +48,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>
@@ -121,7 +122,7 @@ export const SignUpDialog = ({ isOpen, onClose, onOpenSignIn }: Props) => {
 
               {submitError ? (
                 <div className="mb-[8px] flex w-full flex-row items-center justify-start rounded-[4px] border-[2px] border-solid border-[#F0163A] bg-[#ffeeee] p-[8px] text-[14px] font-bold text-[#F0163A]">
-                  <div className="i-material-symbols:error-outline m-[4px] size-[20px]" />
+                  <ErrorOutlineIcon />
                   <span>{submitError}</span>
                 </div>
               ) : null}

diff --git a/workspaces/client/src/features/layout/components/Layout.tsx b/workspaces/client/src/features/layout/components/Layout.tsx
@@ -64,7 +64,7 @@ export const Layout = ({ children }: Props) => {
           )}
         >
           <Link className="block flex w-[188px] items-center justify-center px-[8px]" to="/">
-            <img alt="AREMA" className="object-contain" height={36} src="/public/arema.svg" width={98} />
+            <img alt="AREMA" className="object-contain" height={36} loading="lazy" src="/public/arema.svg" width={98} />
           </Link>
         </header>
 
@@ -75,27 +75,69 @@ export const Layout = ({ children }: Props) => {
               type="button"
               onClick={isSignedIn ? authActions.openSignOutDialog : authActions.openSignInDialog}
             >
-              <div
-                className={`i-fa-solid:${isSignedIn ? 'sign-out-alt' : 'user'} m-[4px] size-[20px] shrink-0 grow-0`}
-              />
+              <div className="m-[4px] size-[20px] shrink-0 grow-0">
+                {isSignedIn ? (
+                  <svg
+                    fill="currentColor"
+                    height="20"
+                    viewBox="0 0 512 512"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34M192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12" />
+                  </svg>
+                ) : (
+                  <svg
+                    fill="currentColor"
+                    height="20"
+                    viewBox="0 0 512 512"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M312 48c0-26.5-21.5-48-48-48-26.5 0-48 21.5-48 48 0 17.5 9.5 32.7 23.7 41.7l-112.3 112.3c-11.6-1.9-24.3-3.7-36.1-3.7-70.7 0-128 57.3-128 128 0 70.7 57.3 128 128 128s128-57.3 128-128c0-11.8-2.7-23.1-7.2-33.4l112.2-112.2c9.5 14.2 23.2 24.4 39.2 29.7-4.7 7.6-8.7 15.8-12.4 24.3-8.1 16.3-13.6 34.1-17.2 52.6-6.7 31.6-1.7 64.8 14.7 93.6 16.1 28.3 41.3 49.5 71.1 61.5 9.1 4.4 18.9 6.9 28.8 7.5-7.2 10.6-13.9 22-22.4 31.7-30.9 33.1-77.6 53.2-124.4 53.2-47.1 0-92.6-19.1-126.9-53.5-18.3-17.2-33.7-37.1-46.4-59.1 17.2 15.9 35.3 26.6 56.7 30.4 32.4 5.6 66.5 0.9 96.5-15.4 13.9-7.6 25.7-18.6 34.9-31.5 15.9-18.7 24.8-42.5 24.8-67.5z" />
+                  </svg>
+                )}
+              </div>
+
               <span className="grow-1 shrink-1 ml-[16px] text-left text-[14px] font-bold">
                 {isSignedIn ? 'ログアウト' : 'ログイン'}
               </span>
             </button>
 
             <Link
               className="block flex h-[56px] w-[188px] items-center justify-center pb-[8px] pl-[20px] pr-[8px] pt-[8px]"
+              rel="preload"
               to="/"
             >
-              <div className="i-bi:house-fill m-[4px] size-[20px] shrink-0 grow-0" />
+              <div className="i-bi:house-fill m-[4px] size-[20px] shrink-0 grow-0">
+                <svg fill="currentColor" height="20" viewBox="0 0 16 16" width="20" xmlns="http://www.w3.org/2000/svg">
+                  <g>
+                    <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z"></path>
+                    <path d="m8 3.293l6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z"></path>
+                  </g>
+                </svg>
+              </div>
+
               <span className="grow-1 shrink-1 ml-[16px] text-left text-[14px] font-bold">ホーム</span>
             </Link>
 
             <Link
               className="block flex h-[56px] w-[188px] items-center justify-center pb-[8px] pl-[20px] pr-[8px] pt-[8px]"
+              rel="preload"
               to="/timetable"
             >
-              <div className="i-fa-solid:calendar m-[4px] size-[20px] shrink-0 grow-0" />
+              <div className="m-[4px] size-[20px] shrink-0 grow-0">
+                <svg
+                  fill="currentColor"
+                  height="20"
+                  viewBox="0 0 448 512"
+                  width="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12m436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12"></path>
+                </svg>
+              </div>
+
               <span className="grow-1 shrink-1 ml-[16px] text-left text-[14px] font-bold">番組表</span>
             </Link>
           </nav>

diff --git a/workspaces/client/src/features/layout/components/Loading.tsx b/workspaces/client/src/features/layout/components/Loading.tsx
@@ -1,7 +1,44 @@
+import { FC } from 'react';
+
+interface SpinnerProps {
+  className?: string;
+  color?: string;
+  size?: number;
+}
+
+export const Spinner: FC<SpinnerProps> = ({ className = '', color = 'currentColor', size = 48 }) => {
+  return (
+    <svg className={className} height={size} viewBox="0 0 24 24" width={size} xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}>
+        <path d="M12 3c4.97 0 9 4.03 9 9" strokeDasharray={16} strokeDashoffset={16}>
+          <animate attributeName="stroke-dashoffset" dur="0.3s" fill="freeze" values="16;0" />
+          <animateTransform
+            attributeName="transform"
+            dur="1.5s"
+            repeatCount="indefinite"
+            type="rotate"
+            values="0 12 12;360 12 12"
+          />
+        </path>
+        <path
+          d="M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z"
+          strokeDasharray={64}
+          strokeDashoffset={64}
+          strokeOpacity={0.3}
+        >
+          <animate attributeName="stroke-dashoffset" dur="1.2s" fill="freeze" values="64;0" />
+        </path>
+      </g>
+    </svg>
+  );
+};
+
 export const Loading = () => {
   return (
     <div className="absolute left-0 top-0 flex h-full w-full animate-[fade-in_0.5s_ease-in_0.5s_both] items-center justify-center bg-[#000000CC]">
-      <div className="i-line-md:loading-twotone-loop size-[48px]" />
+      <div className="absolute left-0 top-0 flex h-full w-full animate-[fade-in_0.5s_ease-in_0.5s_both] items-center justify-center bg-[#000000CC]">
+        <Spinner color="#FFFFFF" size={48} />
+      </div>
     </div>
   );
 };
diff --git a/workspaces/client/src/features/player/components/Player.tsx b/workspaces/client/src/features/player/components/Player.tsx
@@ -2,6 +2,7 @@ import { Ref, useEffect, useRef } from 'react';
 import invariant from 'tiny-invariant';
 import { assignRef } from 'use-callback-ref';
 
+import { Spinner } from '@wsh-2025/client/src/features/layout/components/Loading';
 import { PlayerType } from '@wsh-2025/client/src/features/player/constants/player_type';
 import { PlayerWrapper } from '@wsh-2025/client/src/features/player/interfaces/player_wrapper';
 
@@ -49,7 +50,7 @@ export const Player = ({ className, loop, playerRef, playerType, playlistUrl }:
         <div ref={mountRef} className="size-full" />
 
         <div className="absolute inset-0 z-[-10] grid place-content-center">
-          <div className="i-line-md:loading-twotone-loop size-[48px] text-[#ffffff]" />
+          <Spinner color="#FFFFFF" size={48} />
         </div>
       </div>
     </div>