feat: (#342) 모바일 안드로이드, IOS에서 접속했을 경우 하단에 설치를 해달라는 문구 보이도록 구현

frontend/src/components/common/AppInstallPrompt/MobileInstallPrompt/MobileInstallPrompt.stories.tsx

@@ -10,9 +10,21 @@ export default meta;
 type Story = StoryObj<typeof MobileInstallPrompt>;
 
 export const Android: Story = {
- render: () => <MobileInstallPrompt platform="android" />,
+ render: () => (
+ <MobileInstallPrompt
+ platform="android"
+ handleInstallClick={() => {}}
+ handleCancelClick={() => {}}
+ />
+ ),
 };
 
 export const Ios: Story = {
- render: () => <MobileInstallPrompt platform="ios" />,
+ render: () => (
+ <MobileInstallPrompt
+ platform="ios"
+ handleInstallClick={() => {}}
+ handleCancelClick={() => {}}
+ />
+ ),
 };

frontend/src/components/common/AppInstallPrompt/MobileInstallPrompt/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import arrowUp from '@assets/arrow-up-on-square.svg';
 import logo from '@assets/logo.svg';
 import cancel from '@assets/x_mark_black.svg';
@@ -8,17 +6,23 @@ import * as S from './style';
 
 interface MobileInstallPromptProps {
  platform: 'ios' | 'android';
+ handleInstallClick: () => void;
+ handleCancelClick: () => void;
 }
 
-export default function MobileInstallPrompt({ platform }: MobileInstallPromptProps) {
+export default function MobileInstallPrompt({
+ platform,
+ handleInstallClick,
+ handleCancelClick,
+}: MobileInstallPromptProps) {
  return (
  <S.Container>
  <S.Header>
  <S.LogoImage src={logo} alt="보투게더 로고 이미지" />
  <S.HeaderContent>
  <S.HeaderTop>
  <S.Title>VoTogether</S.Title>
- <S.CancelButton>
+ <S.CancelButton onClick={handleCancelClick}>
  <S.IconImage src={cancel} alt="취소 아이콘" />
  </S.CancelButton>
  </S.HeaderTop>
@@ -33,7 +37,9 @@ export default function MobileInstallPrompt({ platform }: MobileInstallPromptPro
  <S.Description>버튼을 눌러 홈 화면에 추가하기를 통해 설치를 해주세요</S.Description>
  </S.IosContainer>
  )}
- {platform === 'android' && <S.InstallButton>홈 화면에 추가</S.InstallButton>}
+ {platform === 'android' && (
+ <S.InstallButton onClick={handleInstallClick}>홈 화면에 추가</S.InstallButton>
+ )}
  </S.Container>
  );
 }

frontend/src/components/common/AppInstallPrompt/MobileInstallPrompt/style.ts

@@ -1,5 +1,7 @@
 import { styled } from 'styled-components';
 
+import { theme } from '@styles/theme';
+
 export const Container = styled.div`
  display: flex;
  flex-direction: column;
@@ -11,6 +13,10 @@ export const Container = styled.div`
  position: fixed;
  bottom: 0;
  left: 0;
+
+ background-color: white;
+
+ z-index: ${theme.zIndex.modal};
 `;
 
 export const Header = styled.div`
@@ -21,10 +27,10 @@ export const Header = styled.div`
 `;
 
 export const LogoImage = styled.img`
+ border-radius: 16px;
+
  width: 80px;
  height: 80px;
-
- border-radius: 16px;
 `;
 
 export const HeaderContent = styled.div`

frontend/src/components/common/AppInstallPrompt/index.tsx

@@ -0,0 +1,53 @@
+import { Fragment, useEffect, useState } from 'react';
+
+import MobileInstallPrompt from './MobileInstallPrompt';
+
+export default function AppInstallPrompt() {
+ const [deferredPrompt, setDeferredPrompt] = useState<any>(null);
+ const isDeviceIOS = /iPad|iPhone|iPod/.test(window.navigator.userAgent);
+
+ useEffect(() => {
+ window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+
+ return () => {
+ window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+ };
+ }, []);
+
+ const handleBeforeInstallPrompt = (event: Event) => {
+ event.preventDefault();
+ setDeferredPrompt(event);
+ };
+
+ const handleInstallClick = () => {
+ if (deferredPrompt) {
+ deferredPrompt.prompt();
+
+ deferredPrompt.userChoice.then((choiceResult: { outcome: string }) => {
+ if (choiceResult.outcome === 'accepted') {
+ window.console.log('사용자가 설치 프롬프트에 동의했습니다.');
+ } else {
+ window.console.log('사용자가 설치 프롬프트를 무시했습니다.');
+ }
+
+ setDeferredPrompt(null);
+ });
+ }
+ };
+
+ const handleCancelClick = () => {
+ setDeferredPrompt(null);
+ };
+
+ return (
+ <Fragment>
+ {deferredPrompt && (
+ <MobileInstallPrompt
+ handleInstallClick={handleInstallClick}
+ handleCancelClick={handleCancelClick}
+ platform={isDeviceIOS ? 'ios' : 'android'}
+ />
+ )}
+ </Fragment>
+ );
+}

frontend/src/pages/Home/index.tsx

@@ -1,10 +1,18 @@
+import AppInstallPrompt from '@components/common/AppInstallPrompt';
+import MobileInstallPrompt from '@components/common/AppInstallPrompt/MobileInstallPrompt';
 import Layout from '@components/common/Layout';
 import PostListPage from '@components/post/PostListPage';
 
 export default function Home() {
  return (
  <Layout isSidebarVisible={true}>
  <PostListPage />
+ <AppInstallPrompt />
+ <MobileInstallPrompt
+ platform="ios"
+ handleCancelClick={() => {}}
+ handleInstallClick={() => {}}
+ />
  </Layout>
  );
 }