[SKP-102] feat : 토근 만료 후 로직 추가

src/apis/authApi.ts

@@ -12,19 +12,13 @@ export const authApi = {
     };
   }): Promise<AuthResponseDto> => {
     const response = await axiosApi.post(`/api/auth/apple/login`, body);
-    console.log('바디', response.data); //accessToken & refreshToken
     return response.data;
   },
 
   postLogoutUser: async (body: {refreshToken: string}) => {
-    const response = await axiosApi.post('/auth/logout', {
+    const response = await axiosApi.post('/api/auth/logoutt', {
       refreshToken: body.refreshToken,
     });
     return response.data.result;
   },
-
-  deleteUser: async () => {
-    const response = await axiosApi.delete('/auth/withdrawal');
-    return response.data.result;
-  },
 };

src/components/Login/AppleLogin.tsx

@@ -7,15 +7,14 @@ import useSocialLoginMutation from '../../hooks/auth/useSocialLoginMutation';
 import useAuthStorage from '../../hooks/auth/useAuthStorage';
 import {useSetRecoilState} from 'recoil';
 import {userInfoState} from '../../libs/recoil/states/userInfo';
-import {authApi} from '../../apis/authApi';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import {authState} from '../../libs/recoil/states/auth';
 import styles from './AppleLogin.style';
 import {View} from 'react-native';
 
 function AppleLogin() {
   const {setAuthData} = useAuthStorage();
   const setUserInfo = useSetRecoilState(userInfoState);
-
+  const setAuth = useSetRecoilState(authState);
   const {authMutation} = useSocialLoginMutation();
 
   const handlePressAppleLoginButton = async () => {
@@ -27,36 +26,39 @@ function AppleLogin() {
         identityToken: idToken,
         authorizationCode: code,
       } = await appleClient.fetchLogin();
-
       const authState = await appleClient.getUserAuthState(user);
 
+      const username = fullName?.givenName || fullName?.familyName || '회원';
+
       if (idToken && authState === appleAuth.State.AUTHORIZED) {
-        const body = {
-          state: null,
-          code,
-          id_token: idToken,
-          user: {
-            email,
-            name: {
-              firstName: fullName?.givenName || '',
-              lastName: fullName?.familyName || '',
+        authMutation.mutate(
+          {
+            id_token: idToken,
+            code,
+            user: {
+              email,
+              name: {
+                firstName: fullName?.givenName || '',
+                lastName: fullName?.familyName || '',
+              },
             },
+            state: null,
           },
-        };
-        console.log(body);
-        const response = await authApi.postLoginUser(body);
-
-        if (response) {
-          const {accessToken, refreshToken} = response;
-          setAuthData({accessToken, refreshToken});
-          setUserInfo({username: fullName?.givenName || '회원'});
+          {
+            onError: error => {
+              console.error('Apple Sign In Error ---- ✈️', error);
+            },
+            onSuccess: async ({accessToken, refreshToken}) => {
+              setAuthData({accessToken, refreshToken});
+              setUserInfo({username});
 
-          await AsyncStorage.setItem('accessToken', accessToken);
-          await AsyncStorage.setItem('refreshToken', refreshToken);
-        }
+              setAuth({isAuthenticated: true});
+            },
+          },
+        );
       }
     } catch (error) {
-      console.error('Apple Sign In Error:', error);
+      console.error('Apple Sign In Error ---- ✈️', error);
     }
   };
 

src/hooks/auth/useInitialData.tsx

@@ -0,0 +1,11 @@
+import {useRecoilState} from 'recoil';
+import useAuthStorage from './useAuthStorage';
+import {authState} from '../../libs/recoil/states/auth';
+
+/** 프로젝트 최상단에서 user 데이터 불러오기  */
+export default function useInitialData() {
+  const {token} = useAuthStorage();
+  const [authData, setAuthData] = useRecoilState(authState);
+
+  return {authData, setAuthData, token};
+}

src/libs/async-storage/constants/keys.ts

@@ -0,0 +1,5 @@
+export const enum TokenKeys {
+  AccessToken = 'AccessToken',
+  RefreshToken = 'RefreshToken',
+  Username = 'Username',
+}

src/libs/recoil/states/auth.ts

@@ -0,0 +1,8 @@
+import {atom} from 'recoil';
+import {AuthStateType} from '../type/auth';
+import {RecoilStateKeys} from '../constants/keys';
+
+export const authState = atom<AuthStateType>({
+  key: RecoilStateKeys.Auth,
+  default: {isAuthenticated: false},
+});

src/libs/recoil/type/auth.ts

@@ -0,0 +1,3 @@
+export type AuthStateType = {
+  isAuthenticated: boolean;
+};

src/navigators/Navigator.tsx

@@ -1,16 +1,58 @@
+import React, {useEffect} from 'react';
 import {DefaultTheme, NavigationContainer} from '@react-navigation/native';
+import {useSetRecoilState} from 'recoil';
 import StackNavigator from '../navigators/StackNavigator';
 import {lightPalette} from '../styles';
+import LoginScreen from '../screens/Login/LoginScreen';
+import localStorage from '../libs/async-storage';
+import {TokenKeys} from '../libs/async-storage/constants/keys';
+import {axiosApi} from '../apis/axiosInstance';
+import useInitialData from '../hooks/auth/useInitialData';
+import {authApi} from '../apis/authApi';
+import {userInfoState} from '../libs/recoil/states/userInfo';
 
 const theme = {
   ...DefaultTheme,
   colors: {...DefaultTheme.colors, ...lightPalette},
 };
 
 const Navigator = () => {
+  const {authData, setAuthData} = useInitialData();
+  const setUserInfo = useSetRecoilState(userInfoState);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      try {
+        const refreshToken = await localStorage.get(TokenKeys.RefreshToken);
+        if (refreshToken !== null) {
+          try {
+            const response = await axiosApi.post('/api/auth/jwt/reissue', {
+              refreshToken,
+            });
+            const result = response.data.result;
+
+            await localStorage.set(TokenKeys.AccessToken, result.accessToken);
+            await localStorage.set(TokenKeys.RefreshToken, result.refreshToken);
+
+            if (!!result.accessToken && !!result.refreshToken) {
+              setAuthData({isAuthenticated: true});
+            }
+          } catch (e) {
+            await authApi.postLogoutUser({refreshToken});
+            console.error('refreshToken 로그아웃 실패 ---- ✈️', e);
+          }
+        }
+      } catch (error) {
+        console.error('storage에 토근 저장 실패 ---- ✈️', error);
+      }
+    };
+
+    checkAuth();
+  }, [setAuthData, setUserInfo]);
+
   return (
     <NavigationContainer theme={theme}>
-      <StackNavigator />
+      {authData.isAuthenticated ? <StackNavigator /> : <LoginScreen />}
     </NavigationContainer>
   );
 };

src/navigators/types/index.ts

@@ -7,6 +7,7 @@ export type StackParamList = {
   Analyze: undefined;
   AnalyzeResult: undefined;
   Detail: undefined;
+  Login: undefined;
 };
 
 export type TabParamList = {

src/screens/Category/CategoryScreen.style.ts

@@ -1,6 +1,17 @@
-import { StyleSheet } from "react-native";
+import {StyleSheet} from 'react-native';
+import {theme} from '../../styles';
 
 const styles = StyleSheet.create({
+  title: {
+    ...theme.typography.title_sb_21,
+    marginTop: 30,
+  },
+  subtitle: {
+    ...theme.typography.title_m_16,
+    color: theme.palette.gray5,
+    marginTop: 10,
+    width: '80%',
+  },
   container: {
     flex: 1,
     padding: 24,

src/screens/Category/CategoryScreen.tsx

@@ -1,9 +1,8 @@
-import {View, Button, StyleSheet, Text} from 'react-native';
+import {View, Button} from 'react-native';
 import {useCallback, useMemo, useRef} from 'react';
 import CategorySelector from '../../components/common/BottomSheet/CategorySelector';
 import {BottomSheetBackdrop, BottomSheetModal} from '@gorhom/bottom-sheet';
 import styles from './CategoryScreen.style';
-import AppleLogin from '../../components/Login/AppleLogin';
 
 export default function Category() {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -12,7 +11,6 @@ export default function Category() {
     bottomSheetModalRef.current?.present();
   }, []);
 
-  //모달 배경 누르면 닫히기
   const renderBackdrop = useCallback(
     (props: any) => <BottomSheetBackdrop {...props} pressBehavior="close" />,
     [],
@@ -25,7 +23,7 @@ export default function Category() {
         title="Present Modal"
         color="black"
       />
-      <AppleLogin />
+
       <BottomSheetModal
         ref={bottomSheetModalRef}
         index={1}

src/screens/Login/LoginScreen.style.ts

@@ -0,0 +1,49 @@
+import {StyleSheet} from 'react-native';
+import {theme} from '../../styles';
+import {flexBox} from '../../styles/common';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    height: '100%',
+    paddingTop: 63,
+  },
+  title: {
+    ...theme.typography.title_sb_21,
+    paddingLeft: 24,
+    marginTop: 30,
+  },
+  subtitle: {
+    ...theme.typography.title_m_16,
+    color: theme.palette.gray5,
+    paddingLeft: 24,
+    marginTop: 10,
+    width: '80%',
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  gifContainer: {
+    width: '100%',
+    height: 300,
+    marginTop: 63,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  appleButtonStyle: {
+    ...flexBox('column'),
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '80%',
+    height: 45,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+  },
+});
+
+export default styles;

src/screens/Login/LoginScreen.tsx

@@ -1,9 +1,21 @@
-import React from 'react'
+import React from 'react';
+import {Image, Text, View} from 'react-native';
+import styles from './LoginScreen.style';
+import AppleLogin from '../../components/Login/AppleLogin';
 
 export default function LoginScreen() {
   return (
-    <div>
-
-    </div>
-  )
+    <View style={styles.container}>
+      <Text style={styles.title}>
+        앨범 속 수많은 스크린샷, {'\n'}
+        이제 스킵에서 빠르게 저장해요
+      </Text>
+      <Text style={styles.subtitle}>벌써 1123개의 명소가 저장되었어요.</Text>
+      <Image
+        source={require('../../assets/icon/ic_login.gif')}
+        style={styles.gifContainer}
+      />
+      <AppleLogin />
+    </View>
+  );
 }