From 5657fa7e7b9dd820f509f2b7e72ee2e64092f87f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BF=E3=81=A6=E3=82=8B=E3=81=9E?= <miteruzo@naver.com>
Date: Thu, 2 Jul 2026 12:47:19 +0900
Subject: [PATCH] =?UTF-8?q?=E2=80=9C=E9=96=8B=E7=99=BA=E3=83=A2=E3=83=BC?=
 =?UTF-8?q?=E3=83=89=E2=80=9D=20=E3=81=AE=E8=A1=A8=E7=A4=BA=20(#389)=20(#3?=
 =?UTF-8?q?93)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reviewed-on: http://git.miteruzo.com/miteruzo/btrc-hub/pulls/393
---
 frontend/src/App.tsx                         |  4 +-
 frontend/src/components/DevModeWatermark.tsx | 46 ++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/DevModeWatermark.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 11f784c..b4e9b04 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,6 +6,7 @@ import { BrowserRouter,
 	 Routes,
 	 useLocation } from 'react-router-dom'
 
+import DevModeWatermark from '@/components/DevModeWatermark'
 import RouteBlockerOverlay from '@/components/RouteBlockerOverlay'
 import TopNav from '@/components/TopNav'
 import DialogueProvider from '@/components/dialogues/DialogueProvider'
@@ -145,6 +146,7 @@ const App: FC = () => {
   return (
       <>
 	<RouteBlockerOverlay/>
+	{import.meta.env.DEV && <DevModeWatermark/>}
 
 	<BrowserRouter>
 	  <DialogueProvider>
@@ -152,7 +154,7 @@ const App: FC = () => {
 	      <motion.div
 		  layout="position"
 		  transition={{ layout: { duration: .2, ease: 'easeOut' } }}
-		  className="flex flex-col h-dvh w-full overflow-y-hidden">
+		  className="relative flex flex-col h-dvh w-full overflow-y-hidden">
 		<TopNav user={user}/>
 		<RouteTransitionWrapper user={user} setUser={setUser}/>
 	      </motion.div>
diff --git a/frontend/src/components/DevModeWatermark.tsx b/frontend/src/components/DevModeWatermark.tsx
new file mode 100644
index 0000000..5de8c0b
--- /dev/null
+++ b/frontend/src/components/DevModeWatermark.tsx
@@ -0,0 +1,46 @@
+import nikumaru from '@/assets/fonts/nikumaru.otf'
+
+import type { FC } from 'react'
+
+
+const ROW_COUNT = 8
+const COLUMN_COUNT = 12
+
+
+const DevModeWatermark: FC = () => {
+  return (
+      <div
+	  aria-hidden="true"
+	  className="pointer-events-none select-none fixed inset-0 overflow-hidden z-0">
+	<style>{`
+	  @font-face {
+	    font-family: 'Nikumaru';
+	    src: url(${nikumaru}) format('opentype');
+	  }
+	`}</style>
+	<div className="absolute -inset-32 flex flex-col justify-center gap-12 py-48">
+	  {Array.from ({ length: ROW_COUNT }, (_, rowIndex) => (
+	      <div
+		  key={rowIndex}
+		  className={
+		      'flex min-h-32 items-center gap-12 '
+		      + (rowIndex % 2 === 0 ? 'translate-x-0' : 'translate-x-32')
+		  }>
+		{Array.from ({ length: COLUMN_COUNT }, (_, columnIndex) => (
+		    <span
+			key={columnIndex}
+			className={
+			    'whitespace-nowrap text-3xl font-bold '
+			    + 'tracking-[0.3em] text-neutral-950/5 '
+			    + 'dark:text-white/10'
+			}
+			style={{ fontFamily: 'Nikumaru' }}>
+		      開発モード
+		    </span>))}
+	      </div>))}
+	</div>
+      </div>)
+}
+
+
+export default DevModeWatermark