[KW-358] feat: 출입증 상세 정보 모달 컴포넌트 구현

components/lists/NormalListDeep.js

@@ -1,27 +1,23 @@
 import React from 'react';
-import { ScrollView, View, Text} from 'react-native';
+import { ScrollView, View, Text } from 'react-native';
 import NormalList from './NormalList';
 import { styles } from './styles/NormalListDeep.styles'; //노말리스트와 같은 컴포넌트 스타일을 사용
+
+// TODO: Pass-Service 구현 완료 시, 실제 데이터로 변경 필요
 //리스트안에 노말리스트가 있는 컴포넌트
-const NormalListDeep = ({ 
-    sections = [], 
-    onItemPress,
-    renderItem,
-}) => {
+const NormalListDeep = ({ sections = [], onItemPress, renderItem }) => {
   return (
     <ScrollView style={styles.scrollView} contentContainerStyle={styles.contentContainer}>
       {sections.map((section, idx) => (
         //console.log('Section', section),
-        <View key={section.contentTitle || idx}  style={styles.itemBox}>
-          <Text style={styles.itemText}>
-            {section.contentTitle}
-          </Text>
+        <View key={section.contentTitle || idx} style={styles.itemBox}>
+          <Text style={styles.itemText}>{section.contentTitle}</Text>
           <NormalList
             items={section.accessList}
             renderItem={renderItem}
             //아이템 클릭 시 section 정보 함께 상위로 전달
             onItemPress={(item, index) => {
-                if (onItemPress) onItemPress(section, item, index);
+              if (onItemPress) onItemPress(section, item, index);
             }}
           />
         </View>

modals/MyAccessDetailModal.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } 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;
+
+  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.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}>{`김OO\t|\t010-0000-0000`}</Text>
+          <Text style={styles.modalText}>{`김OO\t|\t010-0000-0000`}</Text>
+        </View>
+
+        <View style={styles.buttonRow}>
+          <TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={onClose}>
+            <Text style={styles.buttonText}>닫기</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={[styles.button, styles.QRButton]} onPress={onConfirm}>
+            <Text style={styles.buttonText}>QR</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default MyAccessDetailModal;

modals/styles/MyAccessDetailModal.styles.js

@@ -0,0 +1,69 @@
+import { StyleSheet } from 'react-native';
+import { colors } from '../../constants/colors';
+
+export const styles = StyleSheet.create({
+  modalContainer: {
+    width: 300,
+    height: 'auto',
+    padding: '5%',
+    borderRadius: 10,
+    backgroundColor: colors.white,
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+  modalTitle: {
+    fontSize: 25,
+    fontWeight: '600',
+    color: colors.black,
+    marginTop: '7%',
+    alignSelf: 'center',
+  },
+  modalContentTitle: {
+    fontSize: 20,
+    fontWeight: '500',
+    color: colors.black,
+    marginTop: '5%',
+    alignSelf: 'center',
+  },
+  textContainer: {
+    marginTop: '3%',
+    marginBottom: '7%',
+  },
+  modalText: {
+    fontSize: 18,
+    fontWeight: '500',
+    color: colors.darkGray,
+    marginTop: 10,
+    lineHeight: 30,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignSelf: 'stretch',
+    marginVertical: '7%',
+    gap: '5%',
+  },
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: '5%',
+    paddingHorizontal: '10%',
+    borderRadius: 8,
+  },
+  QRButton: {
+    width: 'auto',
+    height: 'auto',
+    backgroundColor: colors.primary,
+  },
+  cancelButton: {
+    width: 'auto',
+    height: 'auto',
+    backgroundColor: colors.lightGreen,
+  },
+  buttonText: {
+    fontSize: 18,
+    fontWeight: '500',
+    color: colors.white,
+  },
+});

package.json

@@ -21,6 +21,7 @@
     "react-native-awesome-alerts": "^2.0.0",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-modal": "^14.0.0-rc.1",
     "react-native-qrcode-svg": "^6.3.15",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "^4.12.0",

pages/MyAccessListPage.js

@@ -1,17 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import { View, Text } from 'react-native';
 import NormalListDeep from '../components/lists/NormalListDeep';
-//import { MyAccessList } from '../mocks/MyAccessListSample'; //예시 데이터
+import { MyAccessList } from '../mocks/MyAccessListSample'; //예시 데이터
 import { styles } from './styles/MyAccessListPage.styles';
-//import NormalAlert from '../components/alerts/NormalAlert';
 import { getAccessList } from '../apis/MyAccessListApi';
+import MyAccessDetailModal from '../modals/MyAccessDetailModal';
 
 const MyAccessListPage = () => {
   const [myAccessList, setMyAccessList] = useState([]);
 
   // Alert 관리 상태변수
-  // const [showAlert, setShowAlert] = useState(false);
-  // const [alertData, setAlertData] = useState({ title: '', message: '' });
+  const [showModal, setShowModal] = useState(false); // 모달 표시 여부
+  const [selectedAccess, setSelectedAccess] = useState(null); // 클릭된 출입증
 
   // 출입증 목록 불러오기
   useEffect(() => {
@@ -28,17 +28,23 @@ const MyAccessListPage = () => {
     getMyAccessList();
   }, []);
 
-  // 아이템 클릭 시 Alert로 상세 정보 표시
-  // const handleItemPress = (section, item, index) => {
-  //   const access = item.data;
+  // 출입 권한 클릭 시 모달 띄우기
+  // TODO: Pass-Service 구현 완료 시, 실제 데이터로 변경 필요
+  const handleItemPress = (section, item, index) => {
+    const access = item.data;
 
-  //   setAlertData({
-  //     title: `${section.contentTitle} - 상세 정보`,
-  //     message: `건물 및 구역: ${access.building_name} ${access.area_name}\n방문자: ${access.visitor_category}\n만료일: ${access.validate_to}\n승인 여부: ${access.expired ? '출입 대기' : '유효'}\n환자 번호: ${access.PatientID}\n발급자: ${access.requester_category}`,
-  //   });
+    setSelectedAccess({
+      hospitalName: section.contentTitle,
+      area: `${access.building_name} ${access.area_name}`,
+      visitorType: access.visitor_category,
+      expireDate: access.validate_to,
+      approval: access.expired ? '출입 대기' : '유효',
+      patientNumber: access.PatientID,
+      issuer: access.requester_category,
+    });
 
-  //   setShowAlert(true);
-  // };
+    setShowModal(true);
+  };
 
   // NormalListDeep에 넘길 데이터 가공
   const sections = myAccessList.map((section) => ({
@@ -50,8 +56,8 @@ const MyAccessListPage = () => {
     <>
       {myAccessList.length > 0 ? (
         <NormalListDeep
-          sections={sections} //섹션 데이터 배열
-          onItemPress={handleItemPress} //아이템 클릭시 Alert 띄우기
+          sections={sections}
+          onItemPress={handleItemPress}
           renderItem={(item, idx, selected) => (
             <View style={styles.container}>
               <View>
@@ -74,13 +80,15 @@ const MyAccessListPage = () => {
         <Text style={styles.infoText}>유효한 출입증이 존재하지 않습니다.</Text>
       )}
 
-      {/* <NormalAlert
-        show={showAlert}
-        title={alertData.title}
-        message={alertData.message}
-        onConfirmHandler={() => setShowAlert(false)}
-        left={true}
-      /> */}
+      <MyAccessDetailModal
+        isVisible={showModal}
+        onClose={() => setShowModal(false)}
+        onModify={() => {
+          setShowModal(false);
+          // TODO: 수정 페이지 이동 시 navigation 사용
+        }}
+        data={selectedAccess}
+      />
     </>
   );
 };