refactor(web): enable graphql playground by env var

web/.env.example

@@ -12,13 +12,14 @@ REEARTH_WEB_AUTH_PROVIDER=  # Optional, "auth0", "mock", or leave empty for defa
 REEARTH_WEB_CONFIG_URL= # Optional, URL to your reearth_config.json, or leave empty to use the default configuration
 REEARTH_WEB_CESIUM_ION_ACCESS_TOKEN= # Set your Cesium Ion access token here if you want to override token from config
 REEARTH_WEB_FEATURE_COLLECTION= # Optional, "ee" or left empty for default feature collection
+REEARTH_WEB_ENABLE_GQL_PLAYGROUND= # Optional, set to "true" to enable GraphQL Playground
 
 # ===== API Configuration =====
 REEARTH_WEB_API=http://localhost:8080/api
 
 # ===== Plugin Configuration =====
 REEARTH_WEB_PLUGINS=http://localhost:8080/plugins
-REEARTH_WEB_UNSAFE_PLUGIN_URLS='["http://example.com/plugin.js"]]' # Optional, URLs for unsafe plugins, adjust as needed
+REEARTH_WEB_UNSAFE_PLUGIN_URLS='["http://example.com/plugin.js"]' # Optional, URLs for unsafe plugins, adjust as needed
 
 # ===== Extensions Configuration =====
 REEARTH_WEB_EXTENSION_URLS='["http://example.com/extension.js"]' # Optional, URLs for extensions, adjust as needed

web/src/app/pages/GraphQLPlayground/index.tsx

@@ -1,16 +1,18 @@
 import { createGraphiQLFetcher } from "@graphiql/toolkit";
 import { Typography } from "@reearth/app/lib/reearth-ui";
 import { useAuth } from "@reearth/services/auth";
+import { config } from "@reearth/services/config";
 import { styled } from "@reearth/services/theme";
 import { GraphiQL } from "graphiql";
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import "graphiql/graphiql.css";
+import { Navigate } from "react-router-dom";
 
 const fetcher = createGraphiQLFetcher({
   url: `${window.REEARTH_CONFIG?.api || "/api"}` + "/graphql"
 });
 
-export default function GraphQLPlayground(_: { path?: string }): JSX.Element {
+export default function GraphQLPlayground(_: { path?: string }): ReactNode {
   const { getAccessToken } = useAuth();
   const [headers, setHeaders] = useState<string>();
   useEffect(() => {
@@ -19,6 +21,10 @@ export default function GraphQLPlayground(_: { path?: string }): JSX.Element {
     });
   }, [getAccessToken]);
 
+  if (!config()?.enableGqlPlayground) {
+    return <Navigate to="/404" replace />;
+  }
+
   return headers ? (
     <Filled>
       <GraphiQL fetcher={fetcher} isHeadersEditorEnabled headers={headers} />

web/src/services/config/index.ts

@@ -55,6 +55,7 @@ export type Config = {
   multiTenant?: Record<string, AuthInfo>;
   devPluginUrls?: string[];
   featureCollection?: string;
+  enableGqlPlayground?: boolean;
   platformUrl?: string;
 } & AuthInfo;