From cd90b743e6cf62a1e9dae6a3188d85318c5afea6 Mon Sep 17 00:00:00 2001
From: zzzzzisu <kimjisu4939@gmail.com>
Date: Tue, 13 May 2025 11:13:40 +0900
Subject: [PATCH] =?UTF-8?q?KW-341/feat:=20=EB=82=B4=20=EC=B6=9C=EC=9E=85?=
 =?UTF-8?q?=EC=A6=9D=20=EB=AA=A9=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20API=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/MyAccessListApi.js                  |  8 ++
 pages/MyAccessListPage.js                | 96 +++++++++++++++---------
 pages/styles/AccessRequestPage.styles.js |  1 -
 pages/styles/MyAccessListPage.styles.js  |  6 ++
 4 files changed, 73 insertions(+), 38 deletions(-)
 create mode 100644 apis/MyAccessListApi.js

diff --git a/apis/MyAccessListApi.js b/apis/MyAccessListApi.js
new file mode 100644
index 0000000..9b4ff2a
--- /dev/null
+++ b/apis/MyAccessListApi.js
@@ -0,0 +1,8 @@
+import axios from './AxiosInstance';
+
+// 출입증 목록 조회
+export const getAccessList = () => {
+  const response = axios.get('/passes');
+
+  return response;
+};
diff --git a/pages/MyAccessListPage.js b/pages/MyAccessListPage.js
index 1d8cd65..3f53afe 100644
--- a/pages/MyAccessListPage.js
+++ b/pages/MyAccessListPage.js
@@ -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}
-      />
+      /> */}
     </>
   );
 };
diff --git a/pages/styles/AccessRequestPage.styles.js b/pages/styles/AccessRequestPage.styles.js
index 9a48160..16e051a 100644
--- a/pages/styles/AccessRequestPage.styles.js
+++ b/pages/styles/AccessRequestPage.styles.js
@@ -21,7 +21,6 @@ export const styles = StyleSheet.create({
     color: colors.black,
   },
   infoText: {
-    marginLeft: '2%',
     marginTop: '1%',
     fontSize: 20,
     textAlign: 'center',
diff --git a/pages/styles/MyAccessListPage.styles.js b/pages/styles/MyAccessListPage.styles.js
index c4c7c6f..83a9ab7 100644
--- a/pages/styles/MyAccessListPage.styles.js
+++ b/pages/styles/MyAccessListPage.styles.js
@@ -20,4 +20,10 @@ export const styles = StyleSheet.create({
     fontWeight: 600,
     color: colors.tertiary,
   },
+  infoText: {
+    marginTop: '10%',
+    fontSize: 20,
+    textAlign: 'center',
+    color: colors.darkGray,
+  },
 });