[KW-377] feat: global zustand setting

AppNavigator.js

@@ -2,13 +2,11 @@ import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { useState, useEffect } from 'react';
 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 { StatusBar } from 'react-native';
 import HomeButtonController from './components/buttons/HomeButtonController';
 import LoadingOverlay from './components/loadings/LoadingOverlay';
 import { getMyInfo } from './apis/MyPageApi';
+import { useAuthStore } from './stores/authStore';
 
 // 로그인 전 페이지
 import WelcomePage from './pages/WelcomePage';
@@ -24,32 +22,36 @@ import AccessListPage from './pages/AccessListPage';
 import MyAccessListPage from './pages/MyAccessListPage';
 import AccessRequestPage from './pages/AccessRequestPage';
 import AccessRequestRolePage from './pages/AccessRequestRolePage';
-
 import { colors } from './constants/colors';
 
 const Stack = createStackNavigator();
 
 export default function AppNavigator() {
-  const [isLoggedIn, setIsLoggedIn] = useState(true); // 로그인 상태
+  const {
+    isLoggedIn,
+    setIsLoggedIn,
+    accessToken,
+    setLoading,
+    loading,
+    setAccessToken,
+    clearAccessToken,
+  } = useAuthStore();
   const [navState, setNavState] = useState(null);
-  const [loading, setLoading] = useState(false); // 토큰 확인 중 상태
 
   // 앱 시작 시 토큰 유효성 확인
   useEffect(() => {
     const checkToken = async () => {
       setLoading(true);
       try {
         await new Promise((resolve) => setTimeout(resolve, 1000));
-        const token = await AsyncStorage.getItem('accessToken');
-        if (token) {
+        if (accessToken) {
           // 회원 정보 조회로 토큰 유효성 검증
           try {
             await getMyInfo();
-            setIsLoggedIn(true); // 토큰 유효
+            setAccessToken(accessToken); // 토큰 유효
           } catch (err) {
             //에러 발생 시
-            setIsLoggedIn(false);
-            await AsyncStorage.removeItem('accessToken');
+            clearAccessToken();
           }
         } else {
           setIsLoggedIn(false);
@@ -63,11 +65,6 @@ export default function AppNavigator() {
     checkToken();
   }, []);
 
-  // 앱 시작시 logoutHandler.js에 콜백 함수 등록
-  useEffect(() => {
-    setLogoutCallback(() => setIsLoggedIn(false));
-  }, []);
-
   const navTheme = {
     ...DefaultTheme,
     colors: {
@@ -100,9 +97,7 @@ export default function AppNavigator() {
               component={MainPage}
               options={{ headerShown: false, title: '홈' }}
             />
-            <Stack.Screen name="MyPage" options={{ headerShown: false }}>
-              {(props) => <MyPage {...props} setIsLoggedIn={setIsLoggedIn} />}
-            </Stack.Screen>
+            <Stack.Screen name="MyPage" component={MyPage} options={{ headerShown: false }} />
             <Stack.Screen
               name="ChangePasswordPage"
               component={ChangePasswordPage}
@@ -136,9 +131,7 @@ export default function AppNavigator() {
               component={WelcomePage}
               options={{ headerShown: false }}
             />
-            <Stack.Screen name="LoginPage" options={{ headerShown: false }}>
-              {(props) => <LoginPage {...props} setIsLoggedIn={setIsLoggedIn} />}
-            </Stack.Screen>
+            <Stack.Screen name="LoginPage" component={LoginPage} options={{ headerShown: false }} />
             <Stack.Screen
               name="SignUpPage"
               component={SignUpPage}

apis/AccessRequestApi.js

@@ -3,7 +3,6 @@ import axios from './AxiosInstance';
 // 병원 목록 조회
 export const getHospitalList = async () => {
   const response = await axios.get('/hospitals');
-
   return response.data.data;
 };
 

apis/AxiosInstance.js

@@ -1,7 +1,6 @@
 import axios from 'axios';
 import Constants from 'expo-constants';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { runLogoutCallback } from '../handler/logoutHandler';
+import { useAuthStore } from '../stores/authStore';
 
 const BASE_URL = Constants.expoConfig.extra.BASE_URL;
 
@@ -12,7 +11,8 @@ const instance = axios.create({
 
 // accessToken 가져오는 함수
 const getAccessToken = async () => {
-  return await AsyncStorage.getItem('accessToken');
+  const { accessToken } = useAuthStore.getState();
+  return accessToken;
 };
 
 // 요청 인터셉터: 모든 요청에 accessToken 자동 첨부
@@ -23,9 +23,6 @@ instance.interceptors.request.use(
       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),
@@ -34,16 +31,14 @@ instance.interceptors.request.use(
 // 응답 인터셉터: 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;
+      const { setAccessToken, clearAccessToken } = useAuthStore.getState();
       try {
         // 토큰 재발급 요청
         const refreshResponse = await axios.post(
@@ -57,21 +52,16 @@ instance.interceptors.response.use(
             },
           },
         );
-        //재발급 응답 헤더 로그
-        //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'];
-        }
+        let newAccessToken =
+          refreshResponse.headers['authorization'] || refreshResponse.headers['Authorization'];
+
         // newAccessToken이 있으면, 'Bearer ' 접두사 제거 후 공백 제거 후 AsyncStorage에 저장
         if (newAccessToken) {
           const tokenValue = newAccessToken.replace('Bearer ', '').trim();
-          await AsyncStorage.setItem('accessToken', tokenValue);
+          setAccessToken(tokenValue);
 
           // 기존 헤더는 spread로 보존, Authorization만 교체
           originalRequest.headers = {
@@ -90,20 +80,13 @@ instance.interceptors.response.use(
 
           // 서버가 토큰 바로 반영 안 할 때를 대비해 약간 딜레이
           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();
+        clearAccessToken();
         return Promise.reject(refreshError); //에러 반환
       }
     }

app.config.js

@@ -25,8 +25,8 @@ export default {
       favicon: './assets/images/logoIcon.png',
     },
     extra: {
-      BASE_URL: 'http://keywe.site', // EKS 사용시
-      //BASE_URL: 'http://192.168.0.181:8081', // 도커 사용시 - 본인 pc IPv4 주소로 수정하세용
+      //BASE_URL: 'http://keywe.site', // EKS 사용시
+      BASE_URL: 'http://192.168.0.225:8081', // 도커 사용시 - 본인 pc IPv4 주소로 수정하세용
     },
   },
 };

components/accessRequest/GuardianVerificationForm.js

@@ -4,8 +4,10 @@ import { useState } from 'react';
 import NormalInput from '../textinputs/NormalInput';
 import NormalAlert from '../alerts/NormalAlert';
 import { verifyPatientCode } from '../../apis/AccessRequestApi';
+import { useAuthStore } from '../../stores/authStore';
 
 const GuardianVerificationForm = ({ onVerifiedHandler }) => {
+  const { setLoading } = useAuthStore();
   const [patientCode, setPatientCode] = useState(''); // 환자 번호 관리
   const [isVerified, setIsVerified] = useState(false);
   const [alertMessage, setAlertMessage] = useState('');
@@ -15,6 +17,7 @@ const GuardianVerificationForm = ({ onVerifiedHandler }) => {
 
   // 환자 번호 검증 버튼 클릭 핸들러
   const handleVerifyPatient = async () => {
+    setLoading(true);
     try {
       await verifyPatientCode(patientCode);
 
@@ -29,6 +32,8 @@ const GuardianVerificationForm = ({ onVerifiedHandler }) => {
       setAlertMessage(`일치하는 환자 정보가\n존재하지 않습니다.\n확인 후 다시 입력해 주세요.`);
       setShowVerifiedAlert(true);
       setPatientCode('');
+    } finally {
+      setLoading(false);
     }
   };
 

components/accessRequest/PatientVerficationForm.js

@@ -5,8 +5,10 @@ import { useState, useEffect } from 'react';
 import NormalInput from '../textinputs/NormalInput';
 import NormalAlert from '../alerts/NormalAlert';
 import { getMyInfo } from '../../apis/MyPageApi';
+import { useAuthStore } from '../../stores/authStore';
 
 const PatientVerficationForm = ({ onVerifiedHandler }) => {
+  const { setLoading } = useAuthStore();
   const [userInfo, setUserInfo] = useState({ name: '', birth: '', contact: '' }); // 회원 정보 관리
   const [isVerified, setIsVerified] = useState(false);
   const [alertMessage, setAlertMessage] = useState('');
@@ -17,6 +19,7 @@ const PatientVerficationForm = ({ onVerifiedHandler }) => {
   // 사용자 정보 불러오기
   useEffect(() => {
     const loadInfo = async () => {
+      setLoading(true);
       try {
         const data = await getMyInfo();
         setUserInfo({
@@ -26,13 +29,16 @@ const PatientVerficationForm = ({ onVerifiedHandler }) => {
         });
       } catch (error) {
         console.log('내 정보 조회 실패:', error.response?.data || error.message);
+      } finally {
+        setLoading(false);
       }
     };
 
     loadInfo();
   }, []);
 
   const handleVerifyPatient = async () => {
+    setLoading(true);
     // TODO: 환자 번호 검증 API 연결
     // 임시 검증 로직
     try {
@@ -53,6 +59,8 @@ const PatientVerficationForm = ({ onVerifiedHandler }) => {
     } catch (error) {
       setIsVerified(false);
       setShowVerifiedAlert(true);
+    } finally {
+      setLoading(false);
     }
   };
 

modals/PasswordConfirmModal.js

@@ -5,7 +5,6 @@ import NormalInput from '../components/textinputs/NormalInput';
 import NormalButton from '../components/buttons/NormalButton';
 import WaveHeader from '../components/headers/WaveHeader';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { verifyPassword } from '../apis/PasswordApi';
 
 const PasswordConfirmModal = ({ visible = true, onCloseHandler }) => {
@@ -34,8 +33,6 @@ const PasswordConfirmModal = ({ visible = true, onCloseHandler }) => {
     }
 
     try {
-      // 토큰 불러오기
-      const token = await AsyncStorage.getItem('accessToken');
       await verifyPassword(password);
 
       // 모달창 닫기
@@ -45,6 +42,7 @@ const PasswordConfirmModal = ({ visible = true, onCloseHandler }) => {
       setErrorText('비밀번호가 일치하지 않습니다. 다시 입력해주세요.');
     }
   };
+  // 모달 오류시 임시 코드
   // const handleConfirm = async () => {
   //   if (!isValidPassword(password)) {
   //     setErrorText('8자 이상, 영문/숫자/특수문자를 포함해야 합니다.');

package.json

@@ -26,7 +26,8 @@
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "^4.12.0",
     "react-native-screens": "~4.4.0",
-    "react-native-vector-icons": "^10.2.0"
+    "react-native-vector-icons": "^10.2.0",
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",