diff --git a/src/components/BottomNav/index.tsx b/src/components/BottomNav/index.tsx index 3eb4e2d6..7b9672a7 100644 --- a/src/components/BottomNav/index.tsx +++ b/src/components/BottomNav/index.tsx @@ -1,5 +1,5 @@ -import { memo, useCallback } from "react"; -import { useLocation, useNavigate } from "react-router-dom"; +import { memo, useCallback, useState } from "react"; +import { useLocation, useNavigate, useSearchParams } from "react-router-dom"; import { useSelector } from "react-redux"; import { RootState } from "@/redux/store"; import { Ping } from "@/components"; @@ -21,6 +21,10 @@ function BottomNav() { const uncheckedCount = useSelector( (state: RootState) => state.notification.uncheckedCount ); + const [searchParams] = useSearchParams(); + const [isWebView, _] = useState( + searchParams.get("webview") || localStorage.getItem("isWebView") + ); const checkLocation = useCallback(() => { if (location.pathname === "/talk") return "talk"; @@ -37,6 +41,7 @@ function BottomNav() { else return "home"; }, [location.pathname]); + if (isWebView) return null; return (
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index e6826ece..95f9e8ef 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,11 +1,16 @@ -import { memo } from "react"; -import { useLocation } from "react-router-dom"; +import { memo, useState } from "react"; +import { useLocation, useSearchParams } from "react-router-dom"; import Company from "./Company"; import Policy from "./Policy"; function Footer() { const location = useLocation(); + const [searchParams] = useSearchParams(); + const [isWebView, _] = useState( + searchParams.get("webview") || localStorage.getItem("isWebView") + ); + if (isWebView) return null; if (location.pathname.slice(0, 6) === "/admin") return null; return (
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 68c4f622..7de08cbe 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,11 +1,17 @@ import { memo, useCallback, useEffect, useRef, useState } from "react"; -import { useLocation, useNavigate } from "react-router-dom"; +import { + Link, + useLocation, + useNavigate, + useSearchParams, +} from "react-router-dom"; import { useDispatch, useSelector } from "react-redux"; import { logout } from "@/redux/modules/userSlice"; import { RootState } from "@/redux/store"; import { setNotification } from "@/redux/modules/notificationSlice"; import { getNotification } from "@/api/notification"; import { Ping, CheckModal } from "@/components"; +import { isIosPwa } from "@/utils"; import Logo from "@/assets/images/logo.png"; import basicProfileImage from "@/assets/images/profileImage.png"; import headerBack from "@/assets/svg/header-back.svg"; @@ -33,6 +39,10 @@ function Header() { const mallang_header = useRef(null); const header_profile = useRef(null); const user_menu = useRef(null); + const [searchParams] = useSearchParams(); + const [isWebView, _] = useState( + searchParams.get("webview") || localStorage.getItem("isWebView") + ); const getMenuPosition = useCallback(() => { const x = header_profile.current?.getBoundingClientRect()?.x; @@ -84,6 +94,7 @@ function Header() { }; }, []); + if (isWebView) return null; return ( <>
diff --git a/src/pages/SignupPage/Complete/index.tsx b/src/pages/SignupPage/Complete/index.tsx index 4a226810..d4fd9d83 100644 --- a/src/pages/SignupPage/Complete/index.tsx +++ b/src/pages/SignupPage/Complete/index.tsx @@ -1,41 +1,53 @@ import { loadNaverScript } from "@/utils/naverTracking"; -import { memo, useCallback, useEffect } from "react"; +import { memo, useCallback, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; +import Logo from "@/assets/images/intro_icon.png"; function Complete() { const navigation = useNavigate(); + const [isWebView, _] = useState(localStorage.getItem("isWebView")); const goLogin = useCallback(() => navigation("/login"), []); const goHome = useCallback(() => navigation("/"), []); useEffect(() => { + setTimeout(() => localStorage.removeItem("isWebView"), 1000); const cleanup = loadNaverScript("sign_up"); return cleanup; }, []); return (
+ {isWebView && 말랑트립}
말랑트립의 회원이 되신 것을 진심으로 환영합니다.
로그인 후 말랑트립의 다양한 서비스를 마음껏 즐겨보세요!
- - + {isWebView ? ( +
+ 상단의 완료 또는 닫기 버튼을 눌러주세요. +
+ ) : ( + <> + + + + )}
); diff --git a/src/pages/SignupPage/index.tsx b/src/pages/SignupPage/index.tsx index a692d18d..8bf625fb 100644 --- a/src/pages/SignupPage/index.tsx +++ b/src/pages/SignupPage/index.tsx @@ -31,9 +31,10 @@ function SignupPage() { const [emailDuplication, setEmailDuplication] = useState(false); const [idDuplication, setIdDuplication] = useState(false); const [nickNameDuplication, setNickNameDuplication] = useState(false); - const [paramImpUid, paramStatusCode] = [ + const [paramImpUid, paramStatusCode, webView] = [ searchParams.get("impUid"), searchParams.get("statusCode"), + searchParams.get("webview"), ]; const goSignup = useCallback(async () => { @@ -104,10 +105,16 @@ function SignupPage() { } }, [step]); + useEffect(() => { + if (webView) localStorage.setItem("isWebView", webView); + }, []); + useEffect(() => { if (!localStorage.getItem("isPassWaiting")) { setLoading(false); - navigation("/signup", { replace: true }); + if (!webView && !localStorage.getItem("isWebView")) { + navigation("/signup", { replace: true }); + } } else if (!paramStatusCode) setLoading(false); else { setStep(1); diff --git a/src/utils/index.ts b/src/utils/index.ts index 0748b50a..0c0f94ce 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -194,3 +194,14 @@ export const shuffleArray = (array: DriverData[], seed: number) => { } return result; }; + +export const isIosPwa = () => { + const UA = navigator.userAgent.toLowerCase(); + const isIOS = + UA.indexOf("iphone") > -1 || + UA.indexOf("ipad") > -1 || + UA.indexOf("ipod") > -1; + const isPWA = UA.indexOf("pwa") > -1; + + return isIOS && isPWA; +};