From 1039a11bbfe245edef4dd6b2f86201515046078a Mon Sep 17 00:00:00 2001
From: chpark <chpark@wace.me>
Date: Tue, 12 May 2026 23:47:35 +0900
Subject: [PATCH] =?UTF-8?q?feat(mobile):=20=EC=95=88=EB=93=9C=EB=A1=9C?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=20=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=20?=
 =?UTF-8?q?=EC=9D=B4=EC=A4=91=ED=99=95=EC=9D=B8=20+=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=8A=A4=ED=94=8C?=
 =?UTF-8?q?=EB=9E=98=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- src/components/back-button-guard.tsx 신규: standalone(PWA/TWA) 모드에서만 작동
  · 첫 뒤로가기 → sweetalert2 toast("한 번 더 누르면 앱이 종료됩니다") 표시
  · 2초 안에 두 번째 뒤로가기 → history.back() 으로 native back 위임 → 앱 종료
  · 일반 브라우저(non-standalone) 사용자에게는 영향 없음
- src/app/layout.tsx 의 RootLayout 에 BackButtonGuard 마운트
- src/app/(auth)/m/login/page.tsx 에 1.5초 스플래시 overlay 추가
  · 모모 로고 + "모모유통 ERP" + spinner ("로딩 중...")
  · z-60 fixed inset-0, 1.5s 후 opacity fade-out

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/(auth)/m/login/page.tsx      | 33 +++++++++++++
 src/app/layout.tsx                   |  2 +
 src/components/back-button-guard.tsx | 72 ++++++++++++++++++++++++++++
 3 files changed, 107 insertions(+)
 create mode 100644 src/components/back-button-guard.tsx

diff --git a/src/app/(auth)/m/login/page.tsx b/src/app/(auth)/m/login/page.tsx
index 2e55d4f..2d8c267 100644
--- a/src/app/(auth)/m/login/page.tsx
+++ b/src/app/(auth)/m/login/page.tsx
@@ -15,6 +15,7 @@ export default function MobileLoginPage() {
   const [loading, setLoading] = useState(false);
   const [remember, setRemember] = useState(true);
   const [saveCreds, setSaveCreds] = useState(false);
+  const [splash, setSplash] = useState(true);
 
   useEffect(() => {
     try {
@@ -29,6 +30,12 @@ export default function MobileLoginPage() {
     }
   }, []);
 
+  // 스플래시: 1.5 초 후 자연스럽게 fade-out
+  useEffect(() => {
+    const t = setTimeout(() => setSplash(false), 1500);
+    return () => clearTimeout(t);
+  }, []);
+
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     if (!userId || !password) {
@@ -70,6 +77,31 @@ export default function MobileLoginPage() {
   };
 
   return (
+    <>
+      {/* 스플래시 — 1.5초 동안 표시 후 fade-out */}
+      <div
+        className={`fixed inset-0 z-[60] flex flex-col items-center justify-center bg-gradient-to-br from-[#0d3b24] via-[#1b5e3a] to-[#0f4a2a] transition-opacity duration-500 ${
+          splash ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
+        aria-hidden={!splash}
+      >
+        <div className="absolute inset-0 pointer-events-none opacity-30"
+          style={{
+            backgroundImage:
+              "radial-gradient(circle at 20% 30%, rgba(126,217,167,0.25) 0, transparent 40%), radial-gradient(circle at 80% 70%, rgba(46,139,87,0.3) 0, transparent 45%)",
+          }}
+        />
+        <div className="relative z-10 flex flex-col items-center">
+          <img src="/momo-icon.svg" alt="MOMO" className="w-24 h-24 mb-5 drop-shadow-2xl animate-pulse" />
+          <h1 className="text-white text-2xl font-bold tracking-tight">모모유통 ERP</h1>
+          <p className="text-emerald-100/70 text-sm mt-2">유통 업무 통합 관리</p>
+          <div className="mt-8 flex items-center gap-2 text-emerald-100/80 text-xs">
+            <span className="w-4 h-4 border-2 border-emerald-200/40 border-t-emerald-200 rounded-full animate-spin" />
+            로딩 중...
+          </div>
+        </div>
+      </div>
+
     <div
       className="min-h-[100dvh] flex flex-col bg-gradient-to-br from-[#0d3b24] via-[#1b5e3a] to-[#0f4a2a] px-6"
       style={{ paddingTop: "max(env(safe-area-inset-top), 1rem)", paddingBottom: "max(env(safe-area-inset-bottom), 1rem)" }}
@@ -193,5 +225,6 @@ export default function MobileLoginPage() {
         </p>
       </div>
     </div>
+    </>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2074d27..191a33c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata, Viewport } from "next";
 import Script from "next/script";
+import BackButtonGuard from "@/components/back-button-guard";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -43,6 +44,7 @@ export default function RootLayout({
         />
       </head>
       <body className="h-full">
+        <BackButtonGuard />
         {children}
         <Script id="sw-register" strategy="afterInteractive">
           {`if ('serviceWorker' in navigator) {
diff --git a/src/components/back-button-guard.tsx b/src/components/back-button-guard.tsx
new file mode 100644
index 0000000..e605f72
--- /dev/null
+++ b/src/components/back-button-guard.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect } from "react";
+import Swal from "sweetalert2";
+
+/**
+ * TWA/PWA standalone 환경에서 안드로이드 뒤로가기 처리.
+ * - 뒤로 갈 history 가 없을 때(또는 시작 entry 일 때) 첫 번째 뒤로가기는 토스트만 띄움
+ * - 2초 안에 한 번 더 뒤로가기 누르면 native 가 처리하도록 history.back() 호출 → 앱 종료
+ *
+ * 일반 데스크톱 브라우저 사용자에게는 영향 없음 (standalone 모드에서만 활성화).
+ */
+export default function BackButtonGuard() {
+  useEffect(() => {
+    // standalone 모드 (PWA 설치 또는 TWA) 인지 확인
+    const isStandalone =
+      window.matchMedia("(display-mode: standalone)").matches ||
+      // iOS Safari
+      (window.navigator as Navigator & { standalone?: boolean }).standalone === true;
+
+    if (!isStandalone) return;
+
+    let lastBackPress = 0;
+    let toastTimer: ReturnType<typeof setTimeout> | null = null;
+
+    // history 에 dummy entry 1 개 추가 → 첫 뒤로가기가 이 dummy 로 pop
+    history.pushState({ __back_guard: true }, "", location.href);
+
+    const onPopState = () => {
+      const now = Date.now();
+      if (now - lastBackPress < 2000) {
+        // 2초 이내 두 번째 뒤로 → native 가 처리하도록 한 번 더 back (앱 종료)
+        if (toastTimer) {
+          clearTimeout(toastTimer);
+          toastTimer = null;
+        }
+        history.back();
+        return;
+      }
+      lastBackPress = now;
+
+      // dummy entry 다시 push (다음 뒤로가기를 다시 가로채려고)
+      history.pushState({ __back_guard: true }, "", location.href);
+
+      // 토스트 표시 — sweetalert2 의 toast mode
+      Swal.fire({
+        toast: true,
+        position: "bottom",
+        showConfirmButton: false,
+        timer: 1800,
+        timerProgressBar: true,
+        icon: "info",
+        title: "한 번 더 누르면 앱이 종료됩니다",
+        background: "#1f2937",
+        color: "#ffffff",
+      });
+
+      toastTimer = setTimeout(() => {
+        lastBackPress = 0;
+      }, 2000);
+    };
+
+    window.addEventListener("popstate", onPopState);
+
+    return () => {
+      window.removeEventListener("popstate", onPopState);
+      if (toastTimer) clearTimeout(toastTimer);
+    };
+  }, []);
+
+  return null;
+}