[KW-666] fix: 로딩 컴포넌트 사용 코드 수정

src/components/cards/QrCard.js

@@ -59,8 +59,10 @@ const QrCard = ({
               source={require('../../assets/images/mainBackground.png')}
               resizeMode="contain" // 이미지 비율 유지
             />
-            <Text style={styles.cardText}>등록된 출입 권한이 존재하지 않습니다.</Text>
-            <Text style={styles.cardSubText}>방문 신청 버튼을 눌러 출입 권한을 신청해 주세요.</Text>
+            <Text style={styles.cardText}>{'등록된 출입 권한이\n존재하지 않습니다.'}</Text>
+            <Text style={styles.cardSubText}>
+              {'방문 신청 버튼을 눌러\n출입 권한을 신청해 주세요.'}
+            </Text>
           </View>
         </View>
       </View>

src/components/cards/styles/QrCard.styles.js

@@ -41,11 +41,13 @@ export const styles = StyleSheet.create({
     color: colors.black,
     textAlign: 'center',
     marginBottom: '5%',
+    lineHeight: 36,
   },
   cardSubText: {
     ...fonts.mediumText,
     color: colors.darkGray,
     textAlign: 'center',
+    lineHeight: 30,
   },
   qrTitle: {
     ...fonts.mediumTitle,

src/pages/MainPage.js

@@ -96,6 +96,7 @@ function isQrAvailable(item) {
 const MainPage = () => {
   const { setLoading } = useAuthStore();
   const showNormalAlert = useNormalAlertStore.getState().showNormalAlert;
+
   // 임시: 상태변수로 출입 권한 제어
   const [hasAccessAuthority, setHasAccessAuthority] = useState(true);
 
@@ -123,15 +124,19 @@ const MainPage = () => {
   useFocusEffect(
     useCallback(() => {
       const fetchData = async () => {
-        setLoading(true);
+        if (!myAccessList || myAccessList.length === 0) {
+          setLoading(true);
+        }
+
         try {
           // 병원, 유저 정보 병렬로 불러오기
           const [hospitalList, myInfo] = await Promise.all([getHospitalList(), getMyInfo()]);
           setHospitalNameList(hospitalList);
           setUserName(myInfo.name);
 
-          // 출입증 목록 불러오기 TODO : 여기도 로딩이나 어싱크 처리 필요
-          getAccessList().then(setMyAccessList);
+          const accessList = await getAccessList();
+          setMyAccessList(accessList);
+
           // 목업 출입증 데이터 불러오기
           // setMyAccessList(mockAccessList);
         } catch (error) {
@@ -146,7 +151,7 @@ const MainPage = () => {
         }
       };
       fetchData();
-    }, [setLoading]),
+    }, [setLoading, myAccessList]),
   );
 
   // hospitalNameList, myAccessList 준비되면 userVC 생성

src/pages/MyAccessListPage.js

@@ -17,13 +17,16 @@ function getHospitalNameByList(hospitalId, hospitalNameList) {
 }
 
 const MyAccessListPage = () => {
-  const navigation = useNavigation();
   const { setLoading } = useAuthStore();
   const showNormalAlert = useNormalAlertStore.getState().showNormalAlert;
   const hospitalList = useHospitalStore.getState().hospitalList;
+
+  const navigation = useNavigation();
+
   const [myAccessList, setMyAccessList] = useState([]);
   const [hospitalNameList, setHospitalNameList] = useState([]);
   const [refreshing, setRefreshing] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   // Alert 관리 상태변수
   const [showModal, setShowModal] = useState(false); // 모달 표시 여부
@@ -33,22 +36,26 @@ const MyAccessListPage = () => {
   useEffect(() => {
     const getHospitalsName = async () => {
       setLoading(true);
+      setIsLoading(true);
+
       try {
         const data = await getHospitalList();
         setHospitalNameList(data);
       } catch (error) {
         setHospitalNameList(hospitalList);
       } finally {
-        setLoading(false);
+        //if (myAccessList) setLoading(false);
       }
     };
     getHospitalsName();
-  }, [setLoading]);
+  }, []);
 
   // 출입증 목록 불러오기
   useEffect(() => {
+    setLoading(true);
+    setIsLoading(true);
+
     const getMyAccessList = async () => {
-      setLoading(true);
       try {
         const data = await getAccessList();
         // accessAreaNames 필드 추가
@@ -63,10 +70,11 @@ const MyAccessListPage = () => {
         });
       } finally {
         setLoading(false);
+        setIsLoading(false);
       }
     };
     getMyAccessList();
-  }, [setLoading]);
+  }, []);
 
   //새로고침 함수
   const onRefresh = async () => {
@@ -195,7 +203,9 @@ const MyAccessListPage = () => {
 
   return (
     <>
-      {sections.length > 0 ? (
+      {isLoading || !myAccessList ? (
+        <Text style={styles.infoText}>출입증 목록을 불러오는 중입니다. . .</Text>
+      ) : sections.length > 0 ? (
         <NormalListDeep
           cardStyle={{
             paddingHorizontal: 0,

src/pages/MyPage.js

@@ -10,9 +10,11 @@ import GrayButton from '../components/buttons/GrayButton';
 
 export default function MyPage() {
   const { clearAccessToken, userInfo } = useAuthStore();
-  const navigation = useNavigation();
+  const { setLoading } = useAuthStore();
   const showNormalAlert = useNormalAlertStore.getState().showNormalAlert;
 
+  const navigation = useNavigation();
+
   const navigateToChangePassword = () => {
     navigation.navigate('ChangePasswordPage');
   };
@@ -27,6 +29,8 @@ export default function MyPage() {
   };
 
   const handleLogoutConfirm = async () => {
+    setLoading(true);
+
     try {
       await logoutUser();
       showNormalAlert({
@@ -45,6 +49,8 @@ export default function MyPage() {
         confirmText: '확인',
       });
       console.log('로그아웃 실패:', error);
+    } finally {
+      setLoading(false);
     }
   };