[Feat] 웹뷰 자동 로그인 구현 (#195)

* Chore: turbo.json globalEnv 추가

* Feat: WebView 환경 감지하여 API URL 분기 처리

* Feat: postMessage 처리 추가하여 WebView 로그인/로그아웃 상태 동기화

* Feat: 개발용 WebView 설정 및 message handler 연결

* Feat: Webview 환경에서 페이지 전환 로직 분기 처리

* Chore: 줄바꿈 (prettier)

* Chore: @react-native-async-storage/async-storage install

* Chore: 의존성 업데이트트

* Feat: window.d.ts 추가

* Chore: 모바일 앱 개발을 위한 환경 변수 업데이트

* Refactor: messageHandler를 webviewLoginBridge로 이름 변경

* Feat: 웹뷰에서 자동로그인을 위한 토큰 전송 구현

* Feat: 웹뷰 자동로그인을 위한 웹 측 리스너 구현

* Feat: 웹에서 앱으로 로그인/로그아웃 메시지 전송 구현

* Feat: 웹뷰 환경에서 자동로그인을 위한 토큰 검증 로직 추가

* Chore: prettier 적용용

* Chore: 의존성 업데이트

* Refactor: window.d.ts -> global.d.ts로 변경

* Refactor: 로그인 API 로직 개선 및 토큰 검증 로직직 추가

* Refactor: useIsReactNativeWebview-> useWebview로 훅 이름 변경

* Chore: globalEnv 수정

* Chore: 의존성 업데이트

* Chore: global.d.ts platform 제거거

* Refactor: 웹뷰 이벤트 핸들러 로직 분리

* Refactor: 웹뷰 메시지 처리 로직 개선

* Refactor: 웹뷰 메세지 타입 상수화

* Remove: useWebview.ts 삭제

* Chore: globalEnv 설정 추가

* Chore: 파일명 대소문자 변경

* Chore: React import 구문 추가

* Refactor: getBaseUrl -> getNativeApiUrl로 변경

* Refactor: parseMessageEvent -> parseMessage로 변경

* Fix: token 유효성 검사 로직 제거

* Refactor: WebView API URL 체크 로직을 getWebApiUrl 유틸 함수로 분리

* Chore: 불필요한 className 제거

* Style: MembersSettingModal의 gap 간격 제거

* Refactor: WebView 메시지 핸들러에 accessToken 체크 로직 추가 및 불필요한 코드 제거

* Chore: AuthGuard에서 웹뷰 리다이렉트 로직 제거

* Feat: WebView 메시지에 따른 분기처리

* Chore: 의존성 업데이트트

* Chore: react-device-detect 라이브러리 제거

* Refactor: JSON.stringify를 stringifyJson 유틸함수로 대체

* Refactor: WebView 감지 로직 개선

* Refactor: react-device-detect 의존성 제거 후 내부 유틸함수로 대체

* Refactor: WebView 이벤트 핸들링 구조 개선

* Refactor: 프로젝트 전반적인 네이밍 Native -> WebView로 통일

* Refactor: AsyncStorage 핸들링 구조 개선

* Refactor: WebView 메시지 브릿지 구조 개선

* Chore: detectWebView.ts 삭제

* Refactor: 메시지 핸들러 파라미터 수정 및 불필요한 WebView 속성 제거

* Chore: import 문 줄바꿈

* Refactor: WebView 디바이스 감지 로직 간소화

* Refactor: WebView 디바이스 감지 로직을 별도 유틸리티로 분리하여 hook 간소화

* Refactor: WebView 메시지 브릿지를 이벤트 리스너로 변경

* Chore: sendMessageToWebView import 경로를 절대 경로로 변경

* Refactor: switch 문의 case 블록 스코프 처리

* Chore: import React 문 제거

* Chore: Merge branch 'develop' of https://github.com/codeit-internship-group-b/codeit-resources into 194-feat-rn-webview-브릿지-통신-구현

* Chore: ReactNativeWebView 객체 접근 방식을 옵셔널 체이닝으로 변경

* Fix: 불필요한 return 제거

Author: miraclee1226

apps/mobile/app/(route)/dashboard.tsx

@@ -2,10 +2,10 @@ import WebView, { WebViewMessageEvent } from "react-native-webview";
 
 import { ROUTES } from "@/constants/routes";
 import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
-import { getBaseUrl } from "@/utils/getBaseUrl";
+import { getWebViewApiUrl } from "@/utils/getWebViewApiUrl";
 
 export default function DashboardScreen() {
-  const baseUrl = getBaseUrl();
+  const baseUrl = getWebViewApiUrl();
   const handleNavigationActions = useHandleNavigationActions();
 
   const requestOnMessage = (e: WebViewMessageEvent) => {

apps/mobile/app/(route)/index.tsx

@@ -1,17 +1,33 @@
+import { useRef } from "react";
 import { WebView, WebViewMessageEvent } from "react-native-webview";
 
 import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
-import { getBaseUrl } from "@/utils/getBaseUrl";
+import { handleAuthStorage } from "@/store/authStorage";
+import { getWebViewApiUrl } from "@/utils/getWebViewApiUrl";
+import { parseMessage } from "@/utils/parseMessage";
+import { webViewLoadHandler } from "@/utils/webViewLoadHandler";
 
 export default function HomeScreen() {
-  // TODO : login상태에 따른 분기 처리 설정
+  const webviewRef = useRef<WebView>(null);
 
-  const baseUrl = getBaseUrl();
+  const baseUrl = getWebViewApiUrl();
   const handleNavigationActions = useHandleNavigationActions();
+  const { event, handler } = webViewLoadHandler(webviewRef);
 
-  const requestOnMessage = (e: WebViewMessageEvent) => {
-    handleNavigationActions(e);
+  const handleMessage = (e: WebViewMessageEvent) => {
+    const { type, data } = parseMessage(e);
+
+    handleNavigationActions({ type, data });
+    handleAuthStorage({ type, data });
   };
 
-  return <WebView className="flex-1" source={{ uri: `${baseUrl}` }} onMessage={requestOnMessage} />;
+  return (
+    <WebView
+      ref={webviewRef}
+      source={{ uri: `${baseUrl}` }}
+      onMessage={handleMessage}
+      {...{ [event]: handler }}
+      className="flex-1"
+    />
+  );
 }

apps/mobile/app/(route)/meetings.tsx

@@ -2,10 +2,10 @@ import WebView, { WebViewMessageEvent } from "react-native-webview";
 
 import { ROUTES } from "@/constants/routes";
 import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
-import { getBaseUrl } from "@/utils/getBaseUrl";
+import { getWebViewApiUrl } from "@/utils/getWebViewApiUrl";
 
 export default function MeetingsScreen() {
-  const baseUrl = getBaseUrl();
+  const baseUrl = getWebViewApiUrl();
   const handleNavigationActions = useHandleNavigationActions();
 
   const requestOnMessage = (e: WebViewMessageEvent) => {

apps/mobile/app/(route)/seats.tsx

@@ -2,10 +2,10 @@ import WebView, { WebViewMessageEvent } from "react-native-webview";
 
 import { ROUTES } from "@/constants/routes";
 import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
-import { getBaseUrl } from "@/utils/getBaseUrl";
+import { getWebViewApiUrl } from "@/utils/getWebViewApiUrl";
 
 export default function SeatsScreen() {
-  const baseUrl = getBaseUrl();
+  const baseUrl = getWebViewApiUrl();
   const handleNavigationActions = useHandleNavigationActions();
 
   const requestOnMessage = (e: WebViewMessageEvent) => {

apps/mobile/app/(route)/settings.tsx

@@ -2,10 +2,10 @@ import WebView, { WebViewMessageEvent } from "react-native-webview";
 
 import { ROUTES } from "@/constants/routes";
 import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
-import { getBaseUrl } from "@/utils/getBaseUrl";
+import { getWebViewApiUrl } from "@/utils/getWebViewApiUrl";
 
 export default function SettingsScreen() {
-  const baseUrl = getBaseUrl();
+  const baseUrl = getWebViewApiUrl();
   const handleNavigationActions = useHandleNavigationActions();
 
   const requestOnMessage = (e: WebViewMessageEvent) => {

apps/mobile/constants/Colors.ts apps/mobile/constants/colors.tsapps/mobile/constants/Colors.ts renamed to apps/mobile/constants/colors.ts

@@ -1,20 +1,19 @@
 import { StackActions } from "@react-navigation/native";
 import { WEBVIEW_MESSAGE_TYPES } from "@repo/constants";
+import { Message } from "@ui/src/types/WebViewMessageTypes";
 import { useNavigation, usePathname } from "expo-router";
-import { WebViewMessageEvent } from "react-native-webview";
 
 import { DIR_NAME } from "@/constants/routes";
-import { parseMessageEvent } from "@/utils/parseMessageEvent";
 
 export const useHandleNavigationActions = () => {
   const pathname = usePathname();
   const navigation = useNavigation();
 
-  const handleNavigationActions = (e: WebViewMessageEvent) => {
-    const parsedMessage = parseMessageEvent(e);
-    if (!parsedMessage || parsedMessage.type !== WEBVIEW_MESSAGE_TYPES.ROUTER_EVENT) return;
+  const handleNavigationActions = ({ type, data }: Message<string>) => {
+    if (type !== WEBVIEW_MESSAGE_TYPES.ROUTER_EVENT) return;
+
+    const path = data;
 
-    const { data: path } = parsedMessage;
     if (pathname === path) return;
 
     const action = path === "back" ? StackActions.pop(1) : StackActions.push(`${DIR_NAME}${path}`);

apps/mobile/hooks/useHandleNavigationActions.ts

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
+    "@react-native-async-storage/async-storage": "^2.1.0",
     "@react-navigation/native": "^6.1.18",
     "@repo/ui": "workspace:*",
     "babel-preset-expo": "^12.0.5",

apps/mobile/package.json

@@ -0,0 +1,38 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { WEBVIEW_MESSAGE_TYPES } from "@repo/constants";
+import { IUser } from "@repo/types/userType";
+import { LoginData, Message } from "@repo/ui/src/types/WebViewMessageTypes";
+import { stringifyJson } from "@repo/ui/src/utils/stringifyJson";
+
+export const getAuthData = async () => {
+  const [accessToken, userStr] = await Promise.all([AsyncStorage.getItem("accessToken"), AsyncStorage.getItem("user")]);
+
+  return {
+    accessToken,
+    user: userStr ? JSON.parse(userStr) : null,
+  };
+};
+
+export const setAuthData = async ({ accessToken, user }: LoginData) => {
+  await Promise.all([
+    AsyncStorage.setItem("accessToken", accessToken),
+    AsyncStorage.setItem("user", stringifyJson(user)),
+  ]);
+};
+
+export const clearAuthData = async () => {
+  await Promise.all([AsyncStorage.removeItem("accessToken"), AsyncStorage.removeItem("user")]);
+};
+
+export const handleAuthStorage = async ({ type, data }: Message<LoginData>) => {
+  switch (type) {
+    case WEBVIEW_MESSAGE_TYPES.SIGN_IN_SUCCESS: {
+      const { user, accessToken } = data;
+      await setAuthData({ accessToken, user });
+      break;
+    }
+    case WEBVIEW_MESSAGE_TYPES.SIGN_OUT_SUCCESS:
+      await clearAuthData();
+      break;
+  }
+};

apps/mobile/store/authStorage.ts

@@ -8,16 +8,17 @@
       "@ui/*": ["../../packages/ui/*"],
       "@/public/*": ["./public/*"],
       "@repo/types/*": ["../../packages/types/src/*"]
-    }
+    },
+    "jsx": "preserve"
   },
   "include": [
     "**/*.ts",
     "**/*.tsx",
-    ".expo/types/**/*.ts",
     "nativewind-env.d.ts",
     "**/__tests__/**/*.ts",
     "**/__tests__/**/*.tsx",
     "**/*.d.ts",
+    ".expo/types/**/*.ts",
     "expo-env.d.ts"
   ],
   "exclude": ["node_modules"]