From 8d1054616e4fe379625cc6073e647e6d305247f4 Mon Sep 17 00:00:00 2001
From: ymmmtym <26668352+ymmmtym@users.noreply.github.com>
Date: Mon, 15 Dec 2025 06:42:50 +0900
Subject: [PATCH] refactor: change popup to warning banner
- Change from modal popup to sticky warning banner
- Position below header with red background
- Maintain localStorage functionality for dismissal
- Improve mobile responsiveness
---
src/components/Layout/layout.js | 2 +
src/components/MigrationNotice/index.js | 38 ++++++++++++++++++
src/components/MigrationNotice/index.scss | 48 +++++++++++++++++++++++
3 files changed, 88 insertions(+)
create mode 100644 src/components/MigrationNotice/index.js
create mode 100644 src/components/MigrationNotice/index.scss
diff --git a/src/components/Layout/layout.js b/src/components/Layout/layout.js
index 0191533..4847680 100644
--- a/src/components/Layout/layout.js
+++ b/src/components/Layout/layout.js
@@ -5,6 +5,7 @@ import Transition from '../Transition';
import Navbar from '../Navbar';
import Head from './Head';
import Footer from '../Footer';
+import MigrationNotice from '../MigrationNotice';
import './index.scss';
if (typeof window !== 'undefined') {
@@ -17,6 +18,7 @@ const Layout = ({ children, location }) => (
+
{children}
diff --git a/src/components/MigrationNotice/index.js b/src/components/MigrationNotice/index.js
new file mode 100644
index 0000000..a8f0a7e
--- /dev/null
+++ b/src/components/MigrationNotice/index.js
@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import './index.scss';
+
+function MigrationNotice() {
+ const [isVisible, setIsVisible] = useState(false);
+
+ useEffect(() => {
+ const hasSeenNotice = localStorage.getItem('migration-notice-seen');
+ if (!hasSeenNotice) {
+ setIsVisible(true);
+ }
+ }, []);
+
+ const handleClose = () => {
+ setIsVisible(false);
+ localStorage.setItem('migration-notice-seen', 'true');
+ };
+
+ if (!isVisible) return null;
+
+ return (
+
+ );
+}
+
+export default MigrationNotice;
diff --git a/src/components/MigrationNotice/index.scss b/src/components/MigrationNotice/index.scss
new file mode 100644
index 0000000..84a63ab
--- /dev/null
+++ b/src/components/MigrationNotice/index.scss
@@ -0,0 +1,48 @@
+.migration-notice {
+ background: #dc3545;
+ color: white;
+ padding: 0.75rem 0;
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+ .migration-notice-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
+
+ span {
+ flex: 1;
+ font-size: 0.9rem;
+ line-height: 1.4;
+ }
+
+ .close-btn {
+ background: none;
+ border: none;
+ color: white;
+ font-size: 18px;
+ cursor: pointer;
+ padding: 0.25rem;
+ opacity: 0.8;
+ flex-shrink: 0;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+
+ @media (max-width: 768px) {
+ .migration-notice-content {
+ span {
+ font-size: 0.85rem;
+ }
+ }
+ }
+}