From 3ddcdcbf2709cff3d6a43f040784679812aa8aeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?=
<90738604+soulchicken@users.noreply.github.com>
Date: Fri, 3 Nov 2023 17:01:28 +0900
Subject: [PATCH 1/6] =?UTF-8?q?Feat:=20InApp=EC=9D=B8=20=EA=B2=BD=EC=9A=B0?=
=?UTF-8?q?=EB=8A=94=20=EC=99=B8=EB=B6=80=20=EB=B8=8C=EB=9D=BC=EC=9A=B0?=
=?UTF-8?q?=EC=A0=80=EA=B0=80=20=EB=90=98=EB=8F=84=EB=A1=9D=20=EB=B2=84?=
=?UTF-8?q?=ED=8A=BC=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/common/inApp/InApp.tsx | 60 +++++++++++++++++++++++++++
src/pages/index.tsx | 2 +
2 files changed, 62 insertions(+)
create mode 100644 src/components/common/inApp/InApp.tsx
diff --git a/src/components/common/inApp/InApp.tsx b/src/components/common/inApp/InApp.tsx
new file mode 100644
index 0000000..4dd68b4
--- /dev/null
+++ b/src/components/common/inApp/InApp.tsx
@@ -0,0 +1,60 @@
+import color from '@/styles/color';
+import { css } from '@emotion/react';
+
+type Theme = 'green' | 'white'
+
+const themeTable = {
+ green: {
+ backgroundColor: color.darkGreen,
+ color: color.offWhite,
+ },
+ white: {
+ backgroundColor: color.offWhite,
+ color: color.greenGray,
+ },
+};
+
+const InApp = () => {
+ const handleButtonClick = () => {
+ if (typeof window !== 'undefined') {
+ window.open(window.location.href, '_blank');
+ }
+ };
+
+ // 인앱 브라우저인지 확인하는 함수
+ const isInAppBrowser = () => {
+ if (typeof window !== 'undefined') {
+ const userAgent = window.navigator.userAgent.toLowerCase();
+ if (userAgent.indexOf('kakao') >= 0) return true;
+ if (userAgent.indexOf('[fb') >= 0) return true;
+ if (userAgent.indexOf('instagram') >= 0) return true;
+ if (userAgent.indexOf('trill') >= 0) return true;
+ if (userAgent.indexOf('line') >= 0) return true;
+ }
+ return false;
+ };
+
+ // 인앱 브라우저가 아니라면 null을 반환하여 컴포넌트를 렌더링하지 않습니다.
+ if (!isInAppBrowser()) {
+ return null;
+ }
+ return (
+
+ );
+};
+
+export default InApp;
+
+const ButtonCSS = (theme: Theme) => css`
+ width: 100%;
+ background-color: ${themeTable[theme].backgroundColor};
+ border: none;
+ padding: 1rem;
+ border-radius: 1rem;
+ margin-top: 0.625rem;
+ font-size: 1rem;
+ font-weight: 400;
+ color: ${themeTable[theme].color};
+`;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 635c495..3c4d157 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -4,6 +4,7 @@ import Image from 'next/image';
import SEO from '@/components/common/head/SEO';
import Button from '@/components/common/button/Button';
import { useSession } from 'next-auth/react';
+import InApp from '@/components/common/inApp/InApp';
const Home = () => {
console.log();
@@ -22,6 +23,7 @@ const Home = () => {
/>