Skip to content

[KW-341] feat: 내 출입증 목록 조회 API 연동 완료 #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
js4939 merged 1 commit into from
May 13, 2025
Merged

[KW-341] feat: 내 출입증 목록 조회 API 연동 완료 #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions apis/MyAccessListApi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import axios from './AxiosInstance';

// 출입증 목록 조회
export const getAccessList = () => {
const response = axios.get('/passes');

return response;
};
96 changes: 59 additions & 37 deletions pages/MyAccessListPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,86 @@
import React, { useState } from 'react';
import { View, Text, Alert } from 'react-native';
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 NormalAlert from '../components/alerts/NormalAlert';
import { getAccessList } from '../apis/MyAccessListApi';

const MyAccessListPage = () => {
const [myAccessList, setMyAccessList] = useState([]);

// Alert 관리 상태변수
const [showAlert, setShowAlert] = useState(false);
const [alertData, setAlertData] = useState({ title: '', message: '' });
// const [showAlert, setShowAlert] = useState(false);
// const [alertData, setAlertData] = useState({ title: '', message: '' });

// 출입증 목록 불러오기
useEffect(() => {
const getMyAccessList = async () => {
try {
const data = await getAccessList();
console.log(data.data.data);
setMyAccessList(data.data.data);
} catch (error) {
console.error('출입증 목록 불러오기 실패: ', error);
}
};

getMyAccessList();
}, []);

// 아이템 클릭 시 Alert로 상세 정보 표시
const handleItemPress = (section, item, index) => {
const access = item.data;
// 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}`,
});
// 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}`,
// });

setShowAlert(true);
};
// setShowAlert(true);
// };

// NormalListDeep에 넘길 데이터 가공
const sections = MyAccessList.map((section) => ({
const sections = myAccessList.map((section) => ({
contentTitle: section.hospital_name,
accessList: section.accessList,
}));

return (
<>
<NormalListDeep
sections={sections} //섹션 데이터 배열
onItemPress={handleItemPress} //아이템 클릭시 Alert 띄우기
renderItem={(item, idx, selected) => (
<View style={styles.container}>
<View>
<Text style={styles.textTitle}>
{item.data.building_name} {item.data.area_name} - {item.data.visitor_category}
</Text>
<Text style={styles.text}>
{'\n'}({item.data.validate_to}까지)
</Text>
</View>
<View>
<Text style={styles.validateText}>
{'\n'} {item.data.expired ? '출입 대기' : '유효'}
</Text>
{myAccessList.length > 0 ? (
<NormalListDeep
sections={sections} //섹션 데이터 배열
onItemPress={handleItemPress} //아이템 클릭시 Alert 띄우기
renderItem={(item, idx, selected) => (
<View style={styles.container}>
<View>
<Text style={styles.textTitle}>
{item.data.building_name} {item.data.area_name} - {item.data.visitor_category}
</Text>
<Text style={styles.text}>
{'\n'}({item.data.validate_to}까지)
</Text>
</View>
<View>
<Text style={styles.validateText}>
{'\n'} {item.data.expired ? '출입 대기' : '유효'}
</Text>
</View>
</View>
</View>
)}
/>
)}
/>
) : (
<Text style={styles.infoText}>유효한 출입증이 존재하지 않습니다.</Text>
)}

<NormalAlert
{/* <NormalAlert
show={showAlert}
title={alertData.title}
message={alertData.message}
onConfirmHandler={() => setShowAlert(false)}
left={true}
/>
/> */}
</>
);
};
Expand Down
1 change: 0 additions & 1 deletion pages/styles/AccessRequestPage.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export const styles = StyleSheet.create({
color: colors.black,
},
infoText: {
marginLeft: '2%',
marginTop: '1%',
fontSize: 20,
textAlign: 'center',
Expand Down
6 changes: 6 additions & 0 deletions pages/styles/MyAccessListPage.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,10 @@ export const styles = StyleSheet.create({
fontWeight: 600,
color: colors.tertiary,
},
infoText: {
marginTop: '10%',
fontSize: 20,
textAlign: 'center',
color: colors.darkGray,
},
});