fix: メインメニューでデバッグモードが考慮されない不具合を修正

.env.example

@@ -1,4 +1,4 @@
 NEXT_PUBLIC_MS_APP_CLIENT_ID=07baf241-82cf-40c1-b5ec-2ed5ca89f710
 NEXT_PUBLIC_MS_APP_REDIRECT_URL=http://localhost:3000
-BACKEND_SERVER_URL=http://localhost:9000
-DEBUG_MODE=false
+NEXT_PUBLIC_BACKEND_SERVER_URL=http://localhost:9000
+NEXT_PUBLIC_DEBUG_MODE=false

CONTRIBUTING.md

@@ -35,12 +35,12 @@
 | ------------------------------- | ---------------------------------------------------------------------------------------------------------- |
 | NEXT_PUBLIC_MS_APP_CLIENT_ID    | Microsoft アカウントログイン用の CLIENT ID                                                                 |
 | NEXT_PUBLIC_MS_APP_REDIRECT_URL | ログイン後にリダイレクトされるデフォルトの URL                                                             |
-| BACKEND_SERVER_URL              | [seichi-portal-backend](https://github.com/GiganticMinecraft/seichi-portal-backend) にアクセスできるリンク |
-| DEBUG_MODE                      | デバッグモードを有効にします                                                                               |
+| NEXT_PUBLIC_BACKEND_SERVER_URL  | [seichi-portal-backend](https://github.com/GiganticMinecraft/seichi-portal-backend) にアクセスできるリンク |
+| NEXT_PUBLIC_DEBUG_MODE          | デバッグモードを有効にします                                                                               |
 
 > [!TIP]
 >
-> `NEXT_PUBLIC_MS_APP_CLIENT_ID` は Microsoft アカウントによる認証に必要な環境変数のため、 `DEBUG_MODE` が `true` のときは設定されていなくても問題ありません。
+> `NEXT_PUBLIC_MS_APP_CLIENT_ID` は Microsoft アカウントによる認証に必要な環境変数のため、 `NEXT_PUBLIC_DEBUG_MODE` が `true` のときは設定されていなくても問題ありません。
 
 ## デバッグモード
 
@@ -49,7 +49,7 @@
 > [!TIP]
 > デバッグモードは以下の条件がすべて満たされている必要があります
 >
-> - `DEBUG_MODE`(環境変数)が `true` に設定されていること
+> - `NEXT_PUBLIC_DEBUG_MODE`(環境変数)が `true` に設定されていること
 > - seichi-portal-backend がデバッグモードで起動されていること
 > - seichi-portal-frontend が開発モードで起動されていること(`yarn dev` コマンド)
 

global.d.ts

@@ -4,7 +4,7 @@ declare namespace NodeJS {
   interface ProcessEnv {
     readonly NEXT_PUBLIC_MS_APP_CLIENT_ID: string;
     readonly NEXT_PUBLIC_MS_APP_REDIRECT_URL: string;
-    readonly BACKEND_SERVER_URL: string;
-    readonly DEBUG_MODE: string;
+    readonly NEXT_PUBLIC_BACKEND_SERVER_URL: string;
+    readonly NEXT_PUBLIC_DEBUG_MODE: string;
   }
 }

src/app/(authed)/(standard)/page.tsx

@@ -4,21 +4,35 @@ import {
   AuthenticatedTemplate,
   UnauthenticatedTemplate,
 } from '@azure/msal-react';
+import { useEffect, useState } from 'react';
 import { MsalProvider } from '@/app/_components/MsalProvider';
+import { DEBUG_MODE } from '@/env';
 import MainMenu from './_components/MainMenu';
 import { NeedToSignin } from './_components/NeedToSignin';
 
 const Home = () => {
-  return (
-    <MsalProvider>
-      <AuthenticatedTemplate>
-        <MainMenu />
-      </AuthenticatedTemplate>
-      <UnauthenticatedTemplate>
-        <NeedToSignin />
-      </UnauthenticatedTemplate>
-    </MsalProvider>
-  );
+  const [isDebugMode, setDebugMode] = useState(false);
+
+  useEffect(() => {
+    if (process.env.NODE_ENV == 'development' && DEBUG_MODE) {
+      setDebugMode(true);
+    }
+  }, []);
+
+  if (isDebugMode) {
+    return <MainMenu />;
+  } else {
+    return (
+      <MsalProvider>
+        <AuthenticatedTemplate>
+          <MainMenu />
+        </AuthenticatedTemplate>
+        <UnauthenticatedTemplate>
+          <NeedToSignin />
+        </UnauthenticatedTemplate>
+      </MsalProvider>
+    );
+  }
 };
 
 export default Home;

src/env.ts

@@ -1,4 +1,4 @@
 export const MS_APP_CLIENT_ID = process.env.NEXT_PUBLIC_MS_APP_CLIENT_ID;
 export const MS_APP_REDIRECT_URL = process.env.NEXT_PUBLIC_MS_APP_REDIRECT_URL;
-export const BACKEND_SERVER_URL = process.env.BACKEND_SERVER_URL;
-export const DEBUG_MODE = Boolean(process.env.DEBUG_MODE);
+export const BACKEND_SERVER_URL = process.env.NEXT_PUBLIC_BACKEND_SERVER_URL;
+export const DEBUG_MODE = Boolean(process.env.NEXT_PUBLIC_DEBUG_MODE);