fix: 사용자 인증 정보에 accessToken 추가 및 WebView 로그아웃 메시지 전송 로직 구현

Author: minsukim-29cm

src/components/Page/Stock/Header/Header.tsx

@@ -1,6 +1,5 @@
 import { MESSAGE_TYPES } from '@config/webview';
 import useAuthInfo from '@hooks/useAuthInfo';
-import useLocalStorageState from '@hooks/useLocalStorageState';
 import useToast from '@hooks/useToast';
 import useRouter from '@router/useRouter';
 import ConfirmModal from '@components/Modal/Confirm/ConfirmModal';
@@ -22,7 +21,7 @@ import { HeaderContainer, HeaderIconButton } from './Header.Style';
 
 const StockHeader = ({ stockInfo }: { stockInfo: StockDetailInfo }) => {
   const { navToBack } = useRouter();
-  const { isLogin, handleNavigateLogin } = useAuthInfo();
+  const { isLogin, accessToken, handleNavigateLogin } = useAuthInfo();
   const { toast, showToast, hideToast } = useToast();
 
   const { data: stockPreference } = useStockPreferenceQuery(stockInfo.stockId);
@@ -31,7 +30,6 @@ const StockHeader = ({ stockInfo }: { stockInfo: StockDetailInfo }) => {
   const { mutate: toggleNotification } = useToggleNotificationMutation();
   const isBookmark = stockPreference?.isBookmarked ?? false;
   const isNotification = stockPreference?.isNotificationEnabled ?? false;
-  const [accessToken] = useLocalStorageState<string>('access_token');
 
   const checkAndRequestNotificationPermission = async () => {
     const isWebView = !!(window as any).ReactNativeWebView;

src/config/webview.ts

@@ -1,11 +1,9 @@
 export const MESSAGE_TYPES = {
   OPEN_EXTERNAL_BROWSER: 'OPEN_EXTERNAL_BROWSER',
-  OAUTH_LOGIN_EXTERNAL: 'OAUTH_LOGIN_EXTERNAL',
   AUTH_SUCCESS: 'AUTH_SUCCESS',
   AUTH_ERROR: 'AUTH_ERROR',
-  TOKEN: 'TOKEN',
-  NEED_REGISTER: 'NEED_REGISTER',
   REQUEST_NOTIFICATION_PERMISSION: 'REQUEST_NOTIFICATION_PERMISSION',
+  LOGOUT: 'LOGOUT',
 } as const;
 
 export type MessageType = (typeof MESSAGE_TYPES)[keyof typeof MESSAGE_TYPES];

src/controllers/common/base.ts

@@ -1,5 +1,4 @@
 import { webPath } from '@router/index';
-import { MESSAGE_TYPES } from '../../config/webview';
 
 const baseURL = import.meta.env.VITE_BASE_URL;
 const Headers = { 'Content-Type': 'application/json' } as const;
@@ -73,11 +72,6 @@ const fetchAuthData = async (path: string, init: RequestInit = {}, isFormData: b
     window.dispatchEvent(new CustomEvent('localStorageChange', { detail: { key: 'access_token' } }));
     window.dispatchEvent(new CustomEvent('localStorageChange', { detail: { key: 'refresh_token' } }));
 
-    // WebView에 새 토큰 전달
-    (window as any).ReactNativeWebView?.postMessage(
-      JSON.stringify({ type: MESSAGE_TYPES.TOKEN, token: access_token }),
-    );
-
     // 원래 요청 재시도
     res = await fetch(url, {
       method: 'GET',

src/hooks/useAuthInfo.ts

@@ -54,7 +54,7 @@ const useAuthInfo = () => {
     removeUserInfo();
   };
 
-  return { isLogin, userInfo, beforeLoginDepth, handleNavigateLogin, setUserInfo, setAuthInfo, clearAuthInfo };
+  return { isLogin, accessToken, userInfo, beforeLoginDepth, handleNavigateLogin, setUserInfo, setAuthInfo, clearAuthInfo };
 };
 
 export default useAuthInfo;

src/hooks/useSocialAuth.ts

@@ -93,19 +93,6 @@ export const useSocialAuth = () => {
         const res = await fetchOAuth2Login(code, apiState, provider as ProviderKey);
 
         if (res.state === 'NEED_REGISTER') {
-          // WebView에서는 네이티브에 메시지 전송
-          // if (isWebView && (window as any).ReactNativeWebView) {
-          //   (window as any).ReactNativeWebView.postMessage(
-          //     JSON.stringify({
-          //       type: MESSAGE_TYPES.NEED_REGISTER,
-          //       email: res.email,
-          //       provider,
-          //     }),
-          //   );
-          //   return;
-          // }
-
-          // 브라우저에서는 회원가입 페이지로 이동
           navigate(webPath.register, {
             state: {
               provider,
@@ -124,16 +111,6 @@ export const useSocialAuth = () => {
         });
         setRecentProvider(provider);
 
-        // WebView인 경우 네이티브 앱에도 알림
-        if (isWebView && (window as any).ReactNativeWebView) {
-          (window as any).ReactNativeWebView.postMessage(
-            JSON.stringify({
-              type: MESSAGE_TYPES.TOKEN,
-              token: res.access_token,
-            }),
-          );
-        }
-
         if (isWebView && (window as any).ReactNativeWebView) {
           (window as any).ReactNativeWebView.postMessage(
             JSON.stringify({

src/pages/MyPage/MyPage.tsx

@@ -1,3 +1,4 @@
+import { MESSAGE_TYPES } from '@config/webview';
 import useAuthInfo from '@hooks/useAuthInfo';
 import useRouter from '@router/useRouter';
 import ConfirmModal from '@components/Modal/Confirm/ConfirmModal';
@@ -22,7 +23,7 @@ import {
 import MyPageProfile from './Profile/Profile';
 
 const MyPage = () => {
-  const { isLogin, clearAuthInfo } = useAuthInfo();
+  const { isLogin, accessToken, clearAuthInfo } = useAuthInfo();
   const { data: favorites = [] } = useBookmarkListQuery();
   const { data: experimentStatus } = useExperimentStatusQuery();
 
@@ -43,9 +44,23 @@ const MyPage = () => {
   } = useRouter();
 
   const handleLogout = async () => {
-    await fetchAuthLogout();
-    clearAuthInfo();
+    const isWebView = !!(window as any).ReactNativeWebView;
+
+    if (isWebView) {
+      // WebView: 앱에 로그아웃 메시지 전송 (앱이 모든 로그아웃 처리)
+      (window as any).ReactNativeWebView?.postMessage(
+        JSON.stringify({
+          type: MESSAGE_TYPES.LOGOUT,
+          token: accessToken,
+        }),
+      );
+      // 앱에서 처리 후 웹뷰를 새로고침하거나 홈으로 이동시킬 것
+    } else {
+      // 브라우저: 웹에서 직접 로그아웃 처리
+      await fetchAuthLogout();
+    }
 
+    clearAuthInfo();
     window.location.href = '/';
   };