fix: iOS 웹뷰 회원가입

Mallang-Trip · Jan 27, 2025 · 77b406c · 77b406c
1 parent 3c4d0d9
commit 77b406c
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 40 deletions.
diff --git 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 (
     <div className="fixed bottom-0 left-0 z-40 w-full h-20 bg-white border-t border-x border-mediumgray rounded-t-2xl md:hidden">
       <div className="grid h-full pb-4-safe max-w-lg grid-cols-5 mx-auto font-medium">

diff --git 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 (
     <div className="cursor-default bg-[#fafafa]">

diff --git 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<HTMLDivElement | null>(null);
   const header_profile = useRef<HTMLLIElement | null>(null);
   const user_menu = useRef<HTMLDivElement | null>(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 (
     <>
       <nav className="fixed top-0 left-0 w-full bg-white border-gray-200 z-50">
@@ -137,16 +148,29 @@ function Header() {
             >
               로그인
             </button>
-            <button
-              type="button"
-              onClick={() => navigation("/signup")}
-              className={clsx(
-                "flex-row text-black font-medium rounded-lg text-sm px-5 py-2 text-center",
-                user.auth ? "hidden" : "flex"
-              )}
-            >
-              회원가입
-            </button>
+            {isIosPwa() ? (
+              <Link
+                to="http://www.mallangtrip.kro.kr"
+                target="_blank"
+                className={clsx(
+                  "flex-row text-black font-medium rounded-lg text-sm px-5 py-2 text-center",
+                  user.auth ? "hidden" : "flex"
+                )}
+              >
+                회원가입
+              </Link>
+            ) : (
+              <button
+                type="button"
+                onClick={() => navigation("/signup")}
+                className={clsx(
+                  "flex-row text-black font-medium rounded-lg text-sm px-5 py-2 text-center",
+                  user.auth ? "hidden" : "flex"
+                )}
+              >
+                회원가입
+              </button>
+            )}
             <ul
               className={clsx(
                 "flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-20 lg:space-x-32 md:mt-0 md:border-0 md:bg-white",

diff --git a/src/pages/LoginPage/LoginForm/index.tsx b/src/pages/LoginPage/LoginForm/index.tsx
@@ -7,11 +7,12 @@ import {
   useRef,
   useState,
 } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { __asyncLogin } from "@/redux/modules/userSlice";
 import { AppDispatch } from "@/redux/store";
 import { ConfirmModal } from "@/components";
+import { isIosPwa } from "@/utils";
 import CheckIcon from "@/assets/svg/agree-check.svg";
 import clsx from "clsx";
 
@@ -121,13 +122,23 @@ function LoginForm() {
           >
             로그인
           </button>
-          <button
-            type="button"
-            className="h-12 bg-white border rounded-full text-darkgray text-md w-64 sm:w-80 border-darkgray"
-            onClick={() => navigation("/signup")}
-          >
-            회원가입
-          </button>
+          {isIosPwa() ? (
+            <Link
+              to="http://www.mallangtrip.kro.kr"
+              target="_blank"
+              className="h-12 bg-white border rounded-full text-darkgray text-md w-64 sm:w-80 border-darkgray flex justify-center items-center"
+            >
+              회원가입
+            </Link>
+          ) : (
+            <button
+              type="button"
+              className="h-12 bg-white border rounded-full text-darkgray text-md w-64 sm:w-80 border-darkgray"
+              onClick={() => navigation("/signup")}
+            >
+              회원가입
+            </button>
+          )}
         </div>
       </form>
 

diff --git 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 (
     <div className="w-full mx-auto">
+      {isWebView && <img src={Logo} alt="말랑트립" className="w-40 mx-auto" />}
       <div className="flex flex-col justify-center my-24 px-5 text-base font-medium text-center text-black">
         말랑트립의 회원이 되신 것을 진심으로 환영합니다.
         <br />
         로그인 후 말랑트립의 다양한 서비스를 마음껏 즐겨보세요!
       </div>
       <div className="flex flex-col items-center gap-3">
-        <button
-          type="button"
-          className="h-12 text-white rounded-full text-md w-64 sm:w-80 bg-primary"
-          onClick={goLogin}
-        >
-          로그인
-        </button>
-        <button
-          type="button"
-          className="h-12 bg-white border rounded-full text-darkgray text-md w-64 sm:w-80 border-darkgray"
-          onClick={goHome}
-        >
-          홈으로 돌아가기
-        </button>
+        {isWebView ? (
+          <div className="h-12 rounded-lg text-sm w-80 bg-white text-primary border border-primary flex items-center justify-center">
+            상단의 완료 또는 닫기 버튼을 눌러주세요.
+          </div>
+        ) : (
+          <>
+            <button
+              type="button"
+              className="h-12 text-white rounded-full text-md w-64 sm:w-80 bg-primary"
+              onClick={goLogin}
+            >
+              로그인
+            </button>
+            <button
+              type="button"
+              className="h-12 bg-white border rounded-full text-darkgray text-md w-64 sm:w-80 border-darkgray"
+              onClick={goHome}
+            >
+              홈으로 돌아가기
+            </button>
+          </>
+        )}
       </div>
     </div>
   );

diff --git 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
@@ -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;
+};