diff --git a/components/lists/NormalListDeep.js b/components/lists/NormalListDeep.js index 21f70e4..f0ba30e 100644 --- a/components/lists/NormalListDeep.js +++ b/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 ( {sections.map((section, idx) => ( //console.log('Section', section), - - - {section.contentTitle} - + + {section.contentTitle} { - if (onItemPress) onItemPress(section, item, index); + if (onItemPress) onItemPress(section, item, index); }} /> diff --git a/modals/MyAccessDetailModal.js b/modals/MyAccessDetailModal.js new file mode 100644 index 0000000..5dd83b3 --- /dev/null +++ b/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 ( + + + {data.hospitalName} + {data.area} + + 방문자: {data.visitorType} + 만료일: {data.expireDate} + 승인 여부: {data.approval} + 환자 번호: {data.patientNumber} + + 내 보호자 + + {`김OO\t|\t010-0000-0000`} + {`김OO\t|\t010-0000-0000`} + + + + + 닫기 + + + QR + + + + + ); +}; + +export default MyAccessDetailModal; diff --git a/modals/styles/MyAccessDetailModal.styles.js b/modals/styles/MyAccessDetailModal.styles.js new file mode 100644 index 0000000..9dd394b --- /dev/null +++ b/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, + }, +}); diff --git a/package-lock.json b/package-lock.json index b2f33c8..3ee9b1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,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", @@ -10806,6 +10807,15 @@ } } }, + "node_modules/react-native-animatable": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.4.0.tgz", + "integrity": "sha512-DZwaDVWm2NBvBxf7I0wXKXLKb/TxDnkV53sWhCvei1pRyTX3MVFpkvdYBknNBqPrxYuAIlPxEp7gJOidIauUkw==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.8.1" + } + }, "node_modules/react-native-awesome-alerts": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-native-awesome-alerts/-/react-native-awesome-alerts-2.0.0.tgz", @@ -10853,6 +10863,19 @@ "react-native": ">=0.48.4" } }, + "node_modules/react-native-modal": { + "version": "14.0.0-rc.1", + "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-14.0.0-rc.1.tgz", + "integrity": "sha512-v5pvGyx1FlmBzdHyPqBsYQyS2mIJhVmuXyNo5EarIzxicKhuoul6XasXMviGcXboEUT0dTYWs88/VendojPiVw==", + "license": "MIT", + "dependencies": { + "react-native-animatable": "1.4.0" + }, + "peerDependencies": { + "react": "*", + "react-native": ">=0.70.0" + } + }, "node_modules/react-native-qrcode-svg": { "version": "6.3.15", "resolved": "https://registry.npmjs.org/react-native-qrcode-svg/-/react-native-qrcode-svg-6.3.15.tgz", diff --git a/package.json b/package.json index 63fc080..634721a 100644 --- a/package.json +++ b/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", diff --git a/pages/MyAccessListPage.js b/pages/MyAccessListPage.js index 3f53afe..a40a7d6 100644 --- a/pages/MyAccessListPage.js +++ b/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 ? ( ( @@ -74,13 +80,15 @@ const MyAccessListPage = () => { 유효한 출입증이 존재하지 않습니다. )} - {/* setShowAlert(false)} - left={true} - /> */} + setShowModal(false)} + onModify={() => { + setShowModal(false); + // TODO: 수정 페이지 이동 시 navigation 사용 + }} + data={selectedAccess} + /> ); };