[KW-341] fix: 출입 권한 상세 조회 모달과 메인페이지 QR에 스크롤 추가, 모달에 표시 수정

components/cards/QrCard.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, Text, Image } from 'react-native';
+import { View, Text, Image, ScrollView } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import QRCode from 'react-native-qrcode-svg';
 
@@ -26,21 +26,34 @@ const QrCard = ({ hasAccessAuthority, did, userName, hospitalName, startDate, ex
           source={require('../../assets/images/mainBackground.png')}
           resizeMode="contain" // 이미지 비율 유지
         />
-        {hasAccessAuthority ? (
-          <>
-            <Text style={styles.qrTitle}>임시 출입 QR</Text>
-            <QRCode value={qrData} size={140} color={colors.black} backgroundColor={colors.white} />
-            <Text style={styles.userName}>{userName}</Text>
-            <Text style={styles.hospital}>{hospitalName}</Text>
-            <Text style={styles.hospital}>시작일: {startDate}</Text>
-            <Text style={styles.hospital}>만료일: {expireDate}</Text>
-          </>
-        ) : (
-          <>
-            <Text style={styles.cardText}>등록된 출입 권한이 존재하지 않습니다.</Text>
-            <Text style={styles.cardSubText}>방문 신청 버튼을 눌러 출입 권한을 신청해주세요.</Text>
-          </>
-        )}
+        <ScrollView
+          contentContainerStyle={{ alignItems: 'center', flexGrow: 1 }}
+          style={{ width: '100%' }}
+          showsVerticalScrollIndicator={false}
+        >
+          {hasAccessAuthority ? (
+            <>
+              <Text style={styles.qrTitle}>임시 출입 QR</Text>
+              <QRCode
+                value={qrData}
+                size={140}
+                color={colors.black}
+                backgroundColor={colors.white}
+              />
+              <Text style={styles.userName}>{userName}</Text>
+              <Text style={styles.hospital}>{hospitalName}</Text>
+              <Text style={styles.hospital}>시작일: {startDate}</Text>
+              <Text style={styles.hospital}>만료일: {expireDate}</Text>
+            </>
+          ) : (
+            <>
+              <Text style={styles.cardText}>등록된 출입 권한이 존재하지 않습니다.</Text>
+              <Text style={styles.cardSubText}>
+                방문 신청 버튼을 눌러 출입 권한을 신청해주세요.
+              </Text>
+            </>
+          )}
+        </ScrollView>
       </View>
     </View>
   );

components/cards/styles/QrCard.styles.js

@@ -11,7 +11,7 @@ export const styles = StyleSheet.create({
     elevation: 7, // Android용
     borderRadius: 15,
     width: '70%',
-    height: '85%', //TODO : 기존에는 80이었는데, 추후 카드 높이 변경 필요할듯함
+    height: '90%', //TODO : 기존에는 80이었는데, 추후 카드 높이 변경 필요할듯함
     marginVertical: '10%',
   },
   cardContainer: {

modals/MyAccessDetailModal.js

@@ -1,29 +1,42 @@
 import React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
 import Modal from 'react-native-modal';
 import { styles } from './styles/MyAccessDetailModal.styles';
 
 // TODO: Pass-Service 구현 완료 시, 실제 데이터로 변경 필요
 const MyAccessDetailModal = ({ isVisible, onClose, onConfirm, data }) => {
   if (!data) return null;
 
+  // visitorType에 따라 타이틀 결정
+  const relationTitle =
+    data.visitorType === '환자'
+      ? '내 보호자'
+      : data.visitorType === '보호자'
+        ? '내 환자'
+        : '상대방';
+
   return (
     <Modal isVisible={isVisible} onBackdropPress={onClose}>
       <View style={styles.modalContainer}>
-        <Text style={styles.modalTitle}>{data.hospitalName}</Text>
-        <Text style={styles.modalContentTitle}>{data.area}</Text>
-        <View style={styles.textContainer}>
-          <Text style={styles.modalText}>방문자: {data.visitorType}</Text>
-          <Text style={styles.modalText}>시작일: {data.startDate}</Text>
-          <Text style={styles.modalText}>만료일: {data.expireDate}</Text>
-          <Text style={styles.modalText}>승인 여부: {data.approval}</Text>
-          <Text style={styles.modalText}>환자 번호: {data.patientNumber}</Text>
-        </View>
-        <Text style={styles.modalContentTitle}>내 보호자</Text>
-        <View style={styles.textContainer}>
-          <Text style={styles.modalText}>{`김지수\t|\t010-0000-0000`}</Text>
-          <Text style={styles.modalText}>{`손민지\t|\t010-1111-1111`}</Text>
-        </View>
+        <ScrollView
+          contentContainerStyle={styles.scrollContainer}
+          showsVerticalScrollIndicator={false}
+        >
+          <Text style={styles.modalTitle}>{data.hospitalName}</Text>
+          <Text style={styles.modalContentTitle}>{data.area}</Text>
+          <View style={styles.textContainer}>
+            <Text style={styles.modalText}>방문자: {data.visitorType}</Text>
+            <Text style={styles.modalText}>시작일: {data.startDate}</Text>
+            <Text style={styles.modalText}>만료일: {data.expireDate}</Text>
+            <Text style={styles.modalText}>승인 여부: {data.approval}</Text>
+            <Text style={styles.modalText}>환자 번호: {data.patientNumber}</Text>
+          </View>
+          <Text style={styles.modalContentTitle}>{relationTitle}</Text>
+          <View style={styles.textContainer}>
+            <Text style={styles.modalText}>{`김지수\t|\t010-0000-0000`}</Text>
+            <Text style={styles.modalText}>{`손민지\t|\t010-1111-1111`}</Text>
+          </View>
+        </ScrollView>
 
         <View style={styles.buttonRow}>
           <TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={onClose}>

modals/styles/MyAccessDetailModal.styles.js

@@ -4,7 +4,7 @@ import { colors } from '../../constants/colors';
 export const styles = StyleSheet.create({
   modalContainer: {
     width: 300,
-    height: 'auto',
+    maxHeight: '80%',
     padding: '5%',
     borderRadius: 10,
     backgroundColor: colors.white,
@@ -41,7 +41,7 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignSelf: 'stretch',
-    marginVertical: '7%',
+    // marginVertical: '7%',
     gap: '5%',
   },
   button: {