fix: show download banner only on android

src/client/view/components/banner/useShowAppDownloadBanner.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { EnvContext } from '../context/EnvContext';
+
+export const useShowAppDownloadBanner = () => {
+  const { platform } = useContext(EnvContext);
+  return platform === 'android';
+};

src/client/view/components/context/EnvContext.tsx

@@ -1,15 +1,18 @@
 import React, { createContext, PropsWithChildren } from 'react';
+import { Platform } from '../../../../server/types/platform';
 
 type EnvContextState = {
   assetPath: string;
   isMobile: boolean;
   appDownloadUrl: string;
+  platform: Platform;
 };
 
 const initialState: EnvContextState = {
   assetPath: '',
   isMobile: false,
   appDownloadUrl: '',
+  platform: 'desktop',
 };
 
 export const EnvContext = createContext(initialState);

src/client/view/pages/404/index.tsx

@@ -4,19 +4,23 @@ import { DefaultContainer } from '../../components/_common/DefaultContainer';
 import { css } from '@linaria/core';
 import { AppProps } from '../../types/app';
 import { AppDownload } from '../../components/banner/AppDownload';
+import { useShowAppDownloadBanner } from '../../components/banner/useShowAppDownloadBanner';
 
-export const NotFoundPage = (props: AppProps) => (
-  <DefaultContainer {...props}>
-    <div className={container}>
-      {props.isMobile && <AppDownload />}
-      <WarningTemplate
-        iconName={'warning'}
-        title={'존재하지 않는 페이지에요'}
-        iconSize={53}
-      />
-    </div>
-  </DefaultContainer>
-);
+export const NotFoundPage = (props: AppProps) => {
+  const showDownloadBanner = useShowAppDownloadBanner();
+  return (
+    <DefaultContainer {...props}>
+      <div className={container}>
+        {showDownloadBanner && <AppDownload />}
+        <WarningTemplate
+          iconName={'warning'}
+          title={'존재하지 않는 페이지에요'}
+          iconSize={53}
+        />
+      </div>
+    </DefaultContainer>
+  );
+};
 
 const container = css`
   height: 100dvh;

src/client/view/pages/expired/index.tsx

@@ -4,20 +4,24 @@ import { DefaultContainer } from '../../components/_common/DefaultContainer';
 import { css } from '@linaria/core';
 import { AppProps } from '../../types/app';
 import { AppDownload } from '../../components/banner/AppDownload';
+import { useShowAppDownloadBanner } from '../../components/banner/useShowAppDownloadBanner';
 
-export const ExpiredPage = (props: AppProps) => (
-  <DefaultContainer {...props}>
-    <div className={container}>
-      {props.isMobile && <AppDownload />}
-      <WarningTemplate
-        iconName={'hourglass'}
-        title={'유효기간이 만료된 페이지에요'}
-        description={'링크는 생성된 이후 7일 동안 볼 수 있어요'}
-        iconSize={46}
-      />
-    </div>
-  </DefaultContainer>
-);
+export const ExpiredPage = (props: AppProps) => {
+  const showDownloadBanner = useShowAppDownloadBanner();
+  return (
+    <DefaultContainer {...props}>
+      <div className={container}>
+        {showDownloadBanner && <AppDownload />}
+        <WarningTemplate
+          iconName={'hourglass'}
+          title={'유효기간이 만료된 페이지에요'}
+          description={'링크는 생성된 이후 7일 동안 볼 수 있어요'}
+          iconSize={46}
+        />
+      </div>
+    </DefaultContainer>
+  );
+};
 
 const container = css`
   height: 100dvh;

src/client/view/pages/share/index.tsx

@@ -1,20 +1,20 @@
-import React, { CSSProperties, useContext } from 'react';
+import React, { CSSProperties } from 'react';
 import { css } from '@linaria/core';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../../stores/createStore';
 import { HeaderSection } from '../../components/HeaderSection';
 import { Table } from '../../components/table/Table';
 import { TABLE_SIZE } from '../../constants/table';
 import { AppDownload } from '../../components/banner/AppDownload';
-import { EnvContext } from '../../components/context/EnvContext';
+import { useShowAppDownloadBanner } from '../../components/banner/useShowAppDownloadBanner';
 
 export const BandalartSharePage = () => {
   const detail = useSelector((state: RootState) => state.bandalartDetail);
   const treeRoot = useSelector((state: RootState) => state.bandalartTree)!;
 
   const completionRatio = treeRoot.completionRatio;
 
-  const { isMobile } = useContext(EnvContext);
+  const showDownloadBanner = useShowAppDownloadBanner();
 
   return (
     <div
@@ -26,7 +26,7 @@ export const BandalartSharePage = () => {
         } as CSSProperties
       }
     >
-      {isMobile && <AppDownload />}
+      {showDownloadBanner && <AppDownload />}
       <HeaderSection detail={detail} completionRatio={completionRatio} />
       <main className={mainStyle}>
         <Table root={treeRoot} />

src/client/view/types/app.ts

@@ -1,5 +1,8 @@
+import { Platform } from '../../../server/types/platform';
+
 export type AppProps = {
   assetPath: string;
   isMobile: boolean;
   appDownloadUrl: string;
+  platform: Platform;
 };

src/server/route/viewRoute.ts

@@ -6,17 +6,41 @@ import { createStore } from '../../client/stores/createStore';
 import { initApiClient } from '../../agent/ApiClient';
 import { Context } from 'koa';
 import { isAxiosError } from 'axios';
+import { AppProps } from '../../client/view/types/app';
+import { Platform } from '../types/platform';
 
 const viewRouter = new Router();
 
-const createAppProps = ({ isMobile }: { isMobile: boolean }) => ({
+const createAppProps = ({
+  isMobile,
+  platform,
+}: {
+  isMobile: boolean;
+  platform: Platform;
+}): AppProps => ({
   assetPath: process.env.ASSET_PATH ?? '',
   appDownloadUrl: process.env.APP_DOWNLOAD_URL || '',
+  platform,
   isMobile,
 });
 
+const getPlatform = (ctx: Context): Platform => {
+  const ua = ctx.userAgent;
+  if (ua.isMobile) {
+    if (ua.isAndroid) {
+      return 'android';
+    } else if (ua.iPhone) {
+      return 'ios';
+    }
+  }
+  return 'desktop';
+};
+
 viewRouter.get('/share/:key', async (ctx) => {
-  const appProps = createAppProps({ isMobile: ctx.userAgent.isMobile });
+  const appProps = createAppProps({
+    isMobile: ctx.userAgent.isMobile,
+    platform: getPlatform(ctx),
+  });
   try {
     initApiClient();
     const key = ctx.params.key;
@@ -51,5 +75,7 @@ viewRouter.get('/health', (ctx) => {
 export default viewRouter;
 export const fallback = (ctx: Context) => {
   const isMobile = ctx.userAgent.isMobile;
-  ctx.response.body = renderNotFound(createAppProps({ isMobile }));
+  ctx.response.body = renderNotFound(
+    createAppProps({ isMobile, platform: getPlatform(ctx) }),
+  );
 };

src/server/types/platform.ts

@@ -0,0 +1,2 @@
+const PLATFORM_LIST = ['ios', 'android', 'desktop'];
+export type Platform = (typeof PLATFORM_LIST)[number];