[KW-313] feat: request refresh token api 연결 및 적용

AppNavigator.js

@@ -5,8 +5,10 @@ import Ionicons from '@expo/vector-icons/Ionicons';
 import { StatusBar, View } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
+import { setLogoutCallback } from './handler/logoutHandler';
 import HomeButtonController from './components/buttons/HomeButtonController';
 import LoadingOverlay from './components/loadings/LoadingOverlay';
+import { getMyInfo } from './apis/MyPageApi';
 
 // 로그인 전 페이지
 import WelcomePage from './pages/WelcomePage';
@@ -32,15 +34,26 @@ export default function AppNavigator() {
   const [navState, setNavState] = useState(null);
   const [loading, setLoading] = useState(false); // 토큰 확인 중 상태
 
-  // 앱 시작 시 토큰 확인
+  // 앱 시작 시 토큰 유효성 확인
   useEffect(() => {
     const checkToken = async () => {
       setLoading(true);
       try {
-        // 로딩 돌아가는거 강제로 1초 보기
         await new Promise((resolve) => setTimeout(resolve, 1000));
         const token = await AsyncStorage.getItem('accessToken');
-        setIsLoggedIn(!!token); // 토큰 있으면 true
+        if (token) {
+          // 회원 정보 조회로 토큰 유효성 검증
+          try {
+            await getMyInfo();
+            setIsLoggedIn(true); // 토큰 유효
+          } catch (err) {
+            //에러 발생 시
+            setIsLoggedIn(false);
+            await AsyncStorage.removeItem('accessToken');
+          }
+        } else {
+          setIsLoggedIn(false);
+        }
       } catch (e) {
         setIsLoggedIn(false);
       } finally {
@@ -50,6 +63,11 @@ export default function AppNavigator() {
     checkToken();
   }, []);
 
+  // 앱 시작시 logoutHandler.js에 콜백 함수 등록
+  useEffect(() => {
+    setLogoutCallback(() => setIsLoggedIn(false));
+  }, []);
+
   const navTheme = {
     ...DefaultTheme,
     colors: {

apis/AxiosInstance.js

@@ -1,5 +1,7 @@
 import axios from 'axios';
 import Constants from 'expo-constants';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { runLogoutCallback } from '../handler/logoutHandler';
 
 const BASE_URL = Constants.expoConfig.extra.BASE_URL;
 
@@ -8,4 +10,106 @@ const instance = axios.create({
   withCredentials: true,
 });
 
+// accessToken 가져오는 함수
+const getAccessToken = async () => {
+  return await AsyncStorage.getItem('accessToken');
+};
+
+// 요청 인터셉터: 모든 요청에 accessToken 자동 첨부
+instance.interceptors.request.use(
+  async (config) => {
+    const token = await getAccessToken();
+    if (token) {
+      config.headers = config.headers || {}; // headers가 없으면 빈 객체로 초기화
+      config.headers.Authorization = `Bearer ${token}`; // Authorization 헤더에 Bearer 토큰 추가
+    }
+    // 요청 정보 로그
+    // console.log('[axios request] url:', config.url);
+    // console.log('[axios request] headers:', config.headers);
+    return config;
+  },
+  (error) => Promise.reject(error),
+);
+
+// 응답 인터셉터: 401(accessToken 만료) → 토큰 재발급 후 재요청
+instance.interceptors.response.use(
+  (response) => {
+    // 응답 로그
+    // console.log('[axios response] url:', response.config.url);
+    // console.log('[axios response] status:', response.status);
+    return response;
+  },
+  async (error) => {
+    const originalRequest = error.config;
+    // 401 에러이면서 아직 재시도 하지 않은 요청만 처리
+    if (error.response && error.response.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+      try {
+        // 토큰 재발급 요청
+        const refreshResponse = await axios.post(
+          '/auth/reissue',
+          {},
+          {
+            baseURL: BASE_URL,
+            withCredentials: true,
+            headers: {
+              Authorization: `Bearer ${await getAccessToken()}`,
+            },
+          },
+        );
+        //재발급 응답 헤더 로그
+        //console.log('refreshResponse.headers:', refreshResponse.headers);
+
+        //authorization, Authorization 대소문자 상관없시 추출하도록함
+        //새 accessToken을 헤더에서 추출
+        let newAccessToken = refreshResponse.headers['authorization'];
+        //새 accessTokem 로그
+        //console.log('newAccessToken:', newAccessToken);
+        if (!newAccessToken) {
+          newAccessToken = refreshResponse.headers['Authorization'];
+        }
+        // newAccessToken이 있으면, 'Bearer ' 접두사 제거 후 공백 제거 후 AsyncStorage에 저장
+        if (newAccessToken) {
+          const tokenValue = newAccessToken.replace('Bearer ', '').trim();
+          await AsyncStorage.setItem('accessToken', tokenValue);
+
+          // 기존 헤더는 spread로 보존, Authorization만 교체
+          originalRequest.headers = {
+            ...originalRequest.headers,
+            Authorization: `Bearer ${tokenValue}`,
+          };
+
+          // POST/PUT 등일 때 data 유실 방지
+          if (
+            ['post', 'put', 'patch'].includes(originalRequest.method) &&
+            !originalRequest.data && // originalRequest에 data가 없고
+            error.config.data // 에러 config에 data가 있으면
+          ) {
+            originalRequest.data = error.config.data; // data를 복구
+          }
+
+          // 서버가 토큰 바로 반영 안 할 때를 대비해 약간 딜레이
+          await new Promise((resolve) => setTimeout(resolve, 200));
+
+          // 재요청 전 로그
+          //console.log('재요청 config:', originalRequest);
+
+          //새 accessToken으로 원래 요청을 재시도
+          return instance(originalRequest);
+        }
+        //새 accessToken을 받지 못한 경우 에러 반환
+        return Promise.reject(new Error('새로운 accessToken을 받지 못했습니다.'));
+      } catch (refreshError) {
+        //토큰 재발급 실패 시
+        await AsyncStorage.removeItem('accessToken');
+        // 로그아웃 콜백 실행
+        runLogoutCallback();
+        return Promise.reject(refreshError); //에러 반환
+      }
+    }
+    //그 외의 에러 그대로 반환
+    return Promise.reject(error);
+  },
+);
+
 export default instance;

apis/MyPageApi.js

@@ -1,38 +1,22 @@
 import axios from './AxiosInstance';
 
 // 회원 정보 조회 함수
-export const getMyInfo = async (token) => {
-  const response = await axios.get('/members/me', {
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-  });
-
+export const getMyInfo = async () => {
+  const response = await axios.get('/members/me');
   return response.data.data;
 };
 
 // 로그아웃 함수
-export const logoutUser = async (token) => {
+export const logoutUser = async () => {
   const response = await axios.post(
     '/auth/logout',
     {}, // body 부분에 빈 객체 명시
-    {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    },
   );
-
   return response.status;
 };
 
 // 회원 탈퇴 함수
-export const deleteUser = async (token) => {
-  const response = await axios.delete('/members', {
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-  });
-
+export const deleteUser = async () => {
+  const response = await axios.delete('/members');
   return response.status;
 };

apis/PasswordApi.js

@@ -1,34 +1,16 @@
 import axios from './AxiosInstance';
 
 // 마이 페이지 진입 시, 비밀번호 검증 함수
-export const verifyPassword = async (token, password) => {
-  const response = await axios.post(
-    '/members/me/password',
-    { password },
-    {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    },
-  );
-
+export const verifyPassword = async (password) => {
+  const response = await axios.post('/members/me/password', { password });
   return response.data;
 };
 
 // 비밀번호 변경 함수
-export const updatePassword = async (token, data) => {
-  const response = await axios.patch(
-    '/members/me/password',
-    {
-      passwordOriginal: data.originalPassword,
-      passwordNew: data.newPassword,
-    },
-    {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    },
-  );
-
+export const updatePassword = async (data) => {
+  const response = await axios.patch('/members/me/password', {
+    passwordOriginal: data.originalPassword,
+    passwordNew: data.newPassword,
+  });
   return response.data;
 };

app.config.js

@@ -25,7 +25,7 @@ export default {
       favicon: './assets/images/logoIcon.png',
     },
     extra: {
-      BASE_URL: 'http://192.168.0.115:8081', // 본인 pc IPv4 주소로 수정하세용
+      BASE_URL: 'http://192.168.0.111:8081', // 본인 pc IPv4 주소로 수정하세용
     },
   },
 };

handler/logoutHandler.js

@@ -0,0 +1,11 @@
+// 콜백 함수 저장하는 변수
+let logoutCallback = null;
+
+export function setLogoutCallback(cb) {
+  logoutCallback = cb;
+}
+
+// 설정된 콜백 함수를 실행하는 함수
+export function runLogoutCallback() {
+  if (logoutCallback) logoutCallback();
+}

modals/PasswordConfirmModal.js

@@ -36,18 +36,28 @@ const PasswordConfirmModal = ({ visible = true, onCloseHandler }) => {
     try {
       // 토큰 불러오기
       const token = await AsyncStorage.getItem('accessToken');
-      if (!token) {
-        throw new Error('토큰이 존재하지 않습니다.');
-      }
-
-      await verifyPassword(token, password);
+      await verifyPassword(password);
 
       // 모달창 닫기
       onCloseHandler();
     } catch (error) {
+      console.log(error);
       setErrorText('비밀번호가 일치하지 않습니다. 다시 입력해주세요.');
     }
   };
+  // const handleConfirm = async () => {
+  //   if (!isValidPassword(password)) {
+  //     setErrorText('8자 이상, 영문/숫자/특수문자를 포함해야 합니다.');
+  //     return;
+  //   }
+
+  //   // 임시: 비밀번호가 'Lgcns01!'이면 성공, 아니면 실패
+  //   if (password === 'Lgcns01!') {
+  //     onCloseHandler(); // 성공 시 모달 닫기
+  //   } else {
+  //     setErrorText('비밀번호가 일치하지 않습니다. 다시 입력해주세요.');
+  //   }
+  // };
 
   return (
     <Modal visible={visible}>

pages/ChangePasswordPage.js

@@ -51,11 +51,7 @@ const ChangePasswordPage = () => {
     try {
       // 토큰 불러오기
       const token = await AsyncStorage.getItem('accessToken');
-      if (!token) {
-        throw new Error('토큰이 존재하지 않습니다.');
-      }
-
-      await updatePassword(token, { originalPassword, newPassword });
+      await updatePassword({ originalPassword, newPassword });
 
       setTimeout(() => {
         setShowSuccessAlert(true);

pages/MyPage.js

@@ -47,7 +47,7 @@ export default function MyPage({ setIsLoggedIn }) {
 
       setAccessToken(token);
 
-      const data = await getMyInfo(token);
+      const data = await getMyInfo();
       setUserInfo({
         name: data.name,
         birth: data.birthDate,
@@ -78,15 +78,9 @@ export default function MyPage({ setIsLoggedIn }) {
 
     // 로그아웃 처리
     try {
-      if (!accessToken) {
-        throw new Error('토큰이 존재하지 않습니다.');
-      }
-
-      await logoutUser(accessToken);
-
+      await logoutUser();
       // 토큰 삭제
       await AsyncStorage.removeItem('accessToken');
-
       // 시작 페이지로 이동되도록 로그인 상태 설정
       setIsLoggedIn(false);
     } catch (error) {
@@ -113,15 +107,9 @@ export default function MyPage({ setIsLoggedIn }) {
 
     // 회원 탈퇴 처리
     try {
-      if (!accessToken) {
-        throw new Error('토큰이 존재하지 않습니다.');
-      }
-
-      await deleteUser(accessToken);
-
+      await deleteUser();
       // 토큰 삭제
       await AsyncStorage.removeItem('accessToken');
-
       // 시작 페이지로 이동되도록 로그인 상태 설정
       setIsLoggedIn(false);
     } catch (error) {
@@ -186,7 +174,7 @@ export default function MyPage({ setIsLoggedIn }) {
           />
           <NormalAlert
             show={showDeleteUserConfirmAlert}
-            title="회월 탈퇴"
+            title="회원 탈퇴"
             message={`탈퇴 하시겠습니까?`}
             showCancel={true}
             onConfirmHandler={handleDeleteUserConfirm}