[KW-311] feat: 병원 목록 조회 API 연동

apis/AccessRequestApi.js

@@ -1,5 +1,12 @@
 import axios from './AxiosInstance';
 
+// 병원 목록 조회
+export const getHospitalList = async () => {
+  const response = await axios.get('/hospitals');
+
+  return response.data.data;
+};
+
 // 환자 번호 검증
 export const verifyPatientCode = async (patientCode) => {
   const response = await axios.post(

components/lists/NormalList.js

@@ -8,7 +8,8 @@ const NormalList = ({
   nextPage,
   onItemPress,
   renderItem,
-  style,
+  navigationParams, // 다음 페이지에 넘길 정보
+  style, // 각 항목 style
 }) => {
   // 선택 항목의 index 저장
   const [selectedIndex, setSelectedIndex] = useState(null);
@@ -24,7 +25,8 @@ const NormalList = ({
     // nextPage prop이 있으면 해당 페이지로 이동
     if (nextPage) {
       // name: 병원명 혹은 메뉴명
-      navigation.navigate(nextPage, { name: items[index] });
+      const params = navigationParams ? navigationParams(items[index]) : { name: items[index] };
+      navigation.navigate(nextPage, params);
     }
   };
 
@@ -34,14 +36,12 @@ const NormalList = ({
         <TouchableOpacity
           key={index}
           onPress={() => handleSelect(index)}
-          style={[styles.itemBox, selectedIndex === index && styles.selectedItemBox, style]}
+          style={[styles.itemBox, style]}
         >
           {renderItem ? (
             renderItem(item, index, selectedIndex === index)
           ) : (
-            <Text style={[styles.itemText, selectedIndex === index && styles.selectedItemText]}>
-              {item}
-            </Text>
+            <Text style={styles.itemText}>{item}</Text>
           )}
         </TouchableOpacity>
       ))}

pages/AccessRequestPage.js

@@ -1,15 +1,34 @@
 import { View, Text } from 'react-native';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { styles } from './styles/AccessRequestPage.styles';
-import { hospitalName } from '../mocks/hospitalData';
 import NormalInput from '../components/textinputs/NormalInput';
 import NormalList from '../components/lists/NormalList';
+import { getHospitalList } from '../apis/AccessRequestApi';
 
 const AccessRequestPage = () => {
   const [searchText, setSearchText] = useState('');
+  const [hospitalName, setHospitalName] = useState([]);
+
+  // 병원 목록 불러오기
+  useEffect(() => {
+    const getHospitalsName = async () => {
+      try {
+        const data = await getHospitalList();
+        console.log(data);
+
+        setHospitalName(data);
+      } catch (error) {
+        console.error('병원 목록 불러오기 실패:', error);
+      }
+    };
+
+    getHospitalsName();
+  }, []);
 
   // 검색 결과 필터링
-  const filteredHospitals = hospitalName.filter((name) => name.includes(searchText));
+  const filteredHospitals = hospitalName.filter((hospital) =>
+    hospital.hospitalName.includes(searchText),
+  );
 
   return (
     <View style={styles.container}>
@@ -20,7 +39,17 @@ const AccessRequestPage = () => {
         onChangeTextHandler={setSearchText}
       />
       {filteredHospitals.length > 0 ? (
-        <NormalList items={filteredHospitals} nextPage="AccessRequestRolePage" />
+        <NormalList
+          items={filteredHospitals}
+          nextPage="AccessRequestRolePage"
+          renderItem={(item, index, isSelected) => (
+            <Text style={styles.itemText}>{item.hospitalName}</Text>
+          )}
+          navigationParams={(item) => ({
+            hospitalId: item.hospitalId,
+            hospitalName: item.hospitalName,
+          })}
+        />
       ) : (
         <Text style={styles.infoText}>검색 결과가 존재하지 않습니다.</Text>
       )}

pages/AccessRequestRolePage.js

@@ -10,7 +10,7 @@ import GuardianVerificationForm from '../components/accessRequest/GuardianVerifi
 import { useNavigation } from '@react-navigation/native';
 
 const AccessRequestRolePage = ({ route }) => {
-  const { name } = route.params;
+  const { hospitalName } = route.params;
 
   const [role, setRole] = useState('patient');
   const [isVerified, setIsVerified] = useState(false); // 검증 여부
@@ -82,7 +82,7 @@ const AccessRequestRolePage = ({ route }) => {
         extraScrollHeight={40} // 키보드와 입력창 사이 간격
         enableOnAndroid={true} // 안드로이드 자동 스크롤 설정
       >
-        <Text style={styles.title}>{name}</Text>
+        <Text style={styles.title}>{hospitalName}</Text>
         <View style={styles.divider} />
         <View style={styles.buttonContainer}>
           <NormalButton

pages/styles/AccessRequestPage.styles.js

@@ -15,6 +15,11 @@ export const styles = StyleSheet.create({
     marginTop: '5%',
     alignSelf: 'center',
   },
+  itemText: {
+    fontSize: 20,
+    fontWeight: 500,
+    color: colors.black,
+  },
   infoText: {
     marginLeft: '2%',
     marginTop: '1%',