AppInner.tsx

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import axios, {AxiosError} from 'axios';
import * as React from 'react';
import {useEffect} from 'react';
import {Alert} from 'react-native';
import Config from 'react-native-config';
import EncryptedStorage from 'react-native-encrypted-storage';
import {useSelector} from 'react-redux';
import Settings from './src/pages/Settings';
import SignIn from './src/pages/SignIn';
import SignUp from './src/pages/SignUp';
import userSlice from './src/slices/user';
import {useAppDispatch} from './src/store';
import {RootState} from './src/store/reducer';

export type LoggedInParamList = {
  Orders: undefined;
  Settings: undefined;
  Delivery: undefined;
  Complete: {orderId: string};
};

export type RootStackParamList = {
  SignIn: undefined;
  SignUp: undefined;
};

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function AppInner() {
  const dispatch = useAppDispatch();
  const isLoggedIn = useSelector((state: RootState) => state.user.isLoggedIn);
  console.log('isLoggedIn', isLoggedIn);

  // const [socket, disconnect] = useSocket();

  // 앱 실행 시 토큰 있으면 로그인하는 코드
  useEffect(() => {
    // const getTokenAndRefresh = async () => {
    //   try {
    //     const token = await EncryptedStorage.getItem('refreshToken');
    //     if (!token) {
    //       return;
    //     }
    //     const response = await axios.post(
    //       `${Config.API_URL}/refreshToken`,
    //       {},
    //       {
    //         headers: {
    //           authorization: `Bearer ${token}`,
    //         },
    //       },
    //     );
    //     dispatch(
    //       userSlice.actions.setUser({
    //         name: response.data.data.name,
    //         email: response.data.data.email,
    //         accessToken: response.data.data.accessToken,
    //       }),
    //     );
    //   } catch (error) {
    //     console.error(error);
    //     if ((error as AxiosError).response?.data.code === 'expired') {
    //       Alert.alert('알림', '다시 로그인 해주세요.');
    //     }
    //   }
    // };
    // getTokenAndRefresh();
  }, [dispatch]);

  // useEffect(() => {
  //   const callback = (data: any) => {
  //     console.log(data);
  //     dispatch(orderSlice.actions.addOrder(data));
  //   };
  //   if (socket && isLoggedIn) {
  //     socket.emit('acceptOrder', 'hello');
  //     socket.on('order', callback);
  //   }
  //   return () => {
  //     if (socket) {
  //       socket.off('order', callback);
  //     }
  //   };
  // }, [dispatch, isLoggedIn, socket]);

  // useEffect(() => {
  //   if (!isLoggedIn) {
  //     console.log('!isLoggedIn', !isLoggedIn);
  //     disconnect();
  //   }
  // }, [isLoggedIn, disconnect]);

  /* access Token, Refresh Token 사용 코드 */
  // useEffect(() => {
  //   axios.interceptors.response.use(
  //     response => response,
  //     async error => {
  //       const {
  //         config,
  //         response: {status},
  //       } = error;
  //       if (status === 419) {
  //         if (error.response.data.code === 'expired') {
  //           const originalRequest = config;
  //           const refreshToken = await EncryptedStorage.getItem('refreshToken');
  //           // token refresh 요청
  //           const {data} = await axios.post(
  //             `${Config.API_URL}/refreshToken`, // token refresh api
  //             {},
  //             {headers: {authorization: `Bearer ${refreshToken}`}},
  //           );
  //           // 새로운 토큰 저장
  //           dispatch(userSlice.actions.setAccessToken(data.data.accessToken));
  //           originalRequest.headers.authorization = `Bearer ${data.data.accessToken}`;
  //           // 419로 요청 실패했던 요청 새로운 토큰으로 재요청
  //           return axios(originalRequest);
  //         }
  //       }
  //       return Promise.reject(error);
  //     },
  //   );
  // }, [dispatch]);

  return isLoggedIn ? (
    <Tab.Navigator>
      <Tab.Screen
        name="Settings"
        component={Settings}
        options={{title: '내 정보'}}
      />
    </Tab.Navigator>
  ) : (
    <Stack.Navigator>
      <Stack.Screen
        name="SignIn"
        component={SignIn}
        options={{title: '로그인'}}
      />
      <Stack.Screen
        name="SignUp"
        component={SignUp}
        options={{title: '회원가입'}}
      />
    </Stack.Navigator>
  );
}

export default AppInner;