Merge pull request #175 from ASAP-Lettering/test/#174

[Test] PWA 설치 유도 기능 테스트

Author: yyypearl

next.config.mjs

@@ -20,7 +20,9 @@ export default withPlugins(
       withPWA,
       {
         pwa: {
-          dest: 'public'
+          dest: 'public',
+          register: true,
+          skipWaiting: true
         }
       }
     ],

src/app/test/page.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import Button from '@/components/common/Button';
+import ConfirmModal from '@/components/common/ConfirmModal';
+import { theme } from '@/styles/theme';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+declare global {
+  interface WindowEventMap {
+    beforeinstallprompt: BeforeInstallPromptEvent;
+  }
+}
+
+interface BeforeInstallPromptEvent extends Event {
+  readonly platforms: Array<string>;
+  readonly userChoice: Promise<{
+    outcome: 'accepted' | 'dismissed';
+    platform: string;
+  }>;
+  prompt(): Promise<void>;
+}
+
+const page = () => {
+  const [deferredPrompt, setDeferredPrompt] = useState(null);
+  const [isIOS, setIsIOS] = useState(false);
+  const [isAndroid, setIsAndroid] = useState(false);
+
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    const userAgent = window.navigator.userAgent.toLowerCase();
+    const isIOSDevice = /iphone|ipad|ipod/.test(userAgent);
+    const isAndroidDevice = /android/.test(userAgent);
+
+    setIsIOS(isIOSDevice);
+    setIsAndroid(isAndroidDevice);
+
+    // Android에서만 beforeinstallprompt 이벤트 처리
+    if (isAndroidDevice) {
+      const handler = (e: any) => {
+        console.log('🔥 beforeinstallprompt 발생');
+        e.preventDefault();
+        setDeferredPrompt(e);
+      };
+
+      window.addEventListener('beforeinstallprompt', handler);
+      return () => {
+        window.removeEventListener('beforeinstallprompt', handler);
+      };
+    }
+  }, []);
+
+  const handleInstallClick = async () => {
+    if (isAndroid && deferredPrompt) {
+      deferredPrompt.prompt();
+      const { outcome } = await deferredPrompt.userChoice;
+      console.log('Android 사용자 선택:', outcome);
+      setDeferredPrompt(null);
+      setShowModal(false);
+    } else if (isIOS) {
+      // iOS는 안내만
+      alert(
+        'iPhone 사용자는 Safari에서 공유 버튼을 눌러 [홈 화면에 추가]를 선택해주세요!'
+      );
+      setShowModal(false);
+    } else {
+      alert('설치 기능이 현재 환경에서 지원되지 않습니다.');
+      setShowModal(false);
+    }
+  };
+
+  const handleShowModal = () => {
+    if (isAndroid && deferredPrompt) {
+      setShowModal(true);
+    } else if (isIOS) {
+      setShowModal(true);
+    } else {
+      alert('브라우저가 아직 설치를 허용하지 않았습니다.');
+    }
+  };
+
+  return (
+    <Container>
+      <Title>PWA 설치 유도 TEST</Title>
+      <Button
+        buttonType="primary"
+        text="앱 설치하기"
+        onClick={handleShowModal}
+      />
+      {showModal && (
+        <ConfirmModal
+          title="PWA 설치하기"
+          sub={
+            isIOS
+              ? 'Safari 공유 버튼을 눌러 [홈 화면에 추가]를 선택해주세요.'
+              : '홈 화면에 추가하시겠어요?'
+          }
+          confirmText={isIOS ? '알겠습니다' : '설치하기'}
+          cancelText="취소"
+          onConfirm={handleInstallClick}
+          onCancel={() => setShowModal(false)}
+        />
+      )}
+    </Container>
+  );
+};
+
+export default page;
+
+const Container = styled.div`
+  display: flex;
+  box-sizing: border-box;
+  padding: 100px 30px;
+  height: 100vh;
+  flex-direction: column;
+  justify-content: space-between;
+  background-image: url('/assets/login/login_bg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  -webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const Title = styled.h1`
+  color: ${theme.colors.white};
+  text-align: center;
+`;