LemonMul · hyebinchoi · May 8, 2024 · May 8, 2024 · May 8, 2024
diff --git a/app/(tabs)/MapScreen.tsx b/app/(tabs)/MapScreen.tsx
@@ -1,3 +1,6 @@
+// 박물관 위치마커 + 구 나누기 
+
+
 import React, { useState, useEffect } from 'react';
 import { Text, View } from 'react-native';
 import MapView, { Marker, Callout, Polygon } from 'react-native-maps';

diff --git a/app/(tabs)/bookmarks.tsx b/app/(tabs)/bookmarks.tsx
@@ -1,20 +1,138 @@
-import { StyleSheet, Text, View } from 'react-native'
-import React from 'react'
+//공원 + 내위치 + 구글앱페이지
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, View, FlatList, Text, TouchableOpacity, Linking } from 'react-native';
+import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
+import * as Location from 'expo-location';
+import axios from 'axios';
+
+const ParkScreen: React.FC = () => {
+  const [parks, setParks] = useState([]);
+  const [visibleParks, setVisibleParks] = useState([]);
+  const [userLocation, setUserLocation] = useState(null);
+  const [initialRegion, setInitialRegion] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      let { status } = await Location.requestForegroundPermissionsAsync();
+      if (status !== 'granted') {
+        alert('Permission to access location was denied');
+        return;
+      }
+
+      try {
+        const location = await Location.getCurrentPositionAsync({});
+        setUserLocation({
+          latitude: location.coords.latitude,
+          longitude: location.coords.longitude
+        });
+        setInitialRegion({
+          latitude: location.coords.latitude,
+          longitude: location.coords.longitude,
+          latitudeDelta: 0.0922,
+          longitudeDelta: 0.0421
+        });
+      } catch (error) {
+        alert('Failed to get user location');
+      }
+    })();
+    fetchParks();
+  }, []);
+
+  const fetchParks = async () => {
+    const seoul_key = '57524f76506d656e3732636a52457a';
+    const url = `http://openAPI.seoul.go.kr:8088/${seoul_key}/json/SearchParkInfoService/1/1000/`;
+
+    try {
+      const response = await axios.get(url);
+      const data = response.data.SearchParkInfoService.row;
+      const cleanedData = data.map((park, index) => ({
+        id: `${park.LATITUDE}-${park.LONGITUDE}-${index}`,
+        name: park.P_PARK,
+        latitude: parseFloat(park.LATITUDE),
+        longitude: parseFloat(park.LONGITUDE)
+      })).filter(park => park.latitude && park.longitude);
+      setParks(cleanedData);
+    } catch (error) {
+      console.error('Failed to fetch Seoul park data', error);
+    }
+  };
+
+  const onRegionChangeComplete = (region) => {
+    const visible = parks.filter(park =>
+      park.latitude >= region.latitude - region.latitudeDelta / 2 &&
+      park.latitude <= region.latitude + region.latitudeDelta / 2 &&
+      park.longitude >= region.longitude - region.longitudeDelta / 2 &&
+      park.longitude <= region.longitude + region.longitudeDelta / 2
+    );
+    setVisibleParks(visible);
+  };
 
-const Page = () => {
   return (
     <View style={styles.container}>
-      <Text>Bookmarks</Text>
+      {initialRegion && (
+        <MapView
+          style={styles.map}
+          provider={PROVIDER_GOOGLE}
+          initialRegion={initialRegion}
+          onRegionChangeComplete={onRegionChangeComplete}
+        >
+          {userLocation && (
+            <Marker
+              coordinate={userLocation}
+              title="Current Location"
+              pinColor="red"
+            />
+          )}
+          {visibleParks.map((park) => (
+            <Marker
+              key={park.id}
+              coordinate={{
+                latitude: park.latitude,
+                longitude: park.longitude
+              }}
+              title={park.name}
+              pinColor="green"
+            />
+          ))}
+        </MapView>
+      )}
+      <FlatList
+        data={visibleParks}
+        keyExtractor={item => item.id}
+        renderItem={({ item }) => (
+          <TouchableOpacity style={styles.listItem} onPress={() => {
+            const encodedName = encodeURIComponent(item.name);
+            const url = `https://www.google.com/maps/search/?api=1&query=${encodedName}`;
+            Linking.openURL(url);
+          }}>
+            <Text style={styles.listItemText}>{item.name}</Text>
+          </TouchableOpacity>
+        )}
+        style={styles.list}
+      />
     </View>
-  )
-}
-
-export default Page
+  );
+};
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
+  container: {
+    flex: 1,
+    flexDirection: 'column'
+  },
+  map: {
+    height: '70%'
+  },
+  list: {
+    height: '30%'
+  },
+  listItem: {
+    padding: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc'
+  },
+  listItemText: {
+    fontSize: 16
   }
-})
+});
+
+export default ParkScreen;
diff --git a/app/(tabs)/category.tsx b/app/(tabs)/category.tsx
@@ -1,3 +1,5 @@
+//사용 ㄴㄴ
+
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import MapView from 'react-native-maps'; 

diff --git a/app/(tabs)/home.tsx b/app/(tabs)/home.tsx
@@ -1,71 +1,141 @@
+// 도서관 + 내위치 + 리스트 + 상세페이지
 import React, { useEffect, useState } from 'react';
+import { StyleSheet, View, FlatList, Text, TouchableOpacity, Linking } from 'react-native';
 import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
-import { StyleSheet, View } from 'react-native';
 import * as Location from 'expo-location';
+import axios from 'axios';
 
-const MapPage: React.FC = () => {
-  const [userLocation, setUserLocation] = useState<any>(null); // 사용자 위치 정보를 저장
-  const [locationErrorMsg, setLocationErrorMsg] = useState<string | null>(null); // 위치 정보 가져오기 실패 시 오류 메시지 저장
+const HomeScreen: React.FC = ({ navigation }) => {
+  const [libraries, setLibraries] = useState([]);
+  const [visibleLibraries, setVisibleLibraries] = useState([]);
+  const [userLocation, setUserLocation] = useState(null);
+  const [initialRegion, setInitialRegion] = useState(null);
 
   useEffect(() => {
     (async () => {
       let { status } = await Location.requestForegroundPermissionsAsync();
       if (status !== 'granted') {
-        setLocationErrorMsg('Permission to access location was denied');
+        alert('Permission to access location was denied');
         return;
       }
 
       try {
         const location = await Location.getCurrentPositionAsync({});
         setUserLocation(location.coords);
+        setInitialRegion({
+          latitude: location.coords.latitude,
+          longitude: location.coords.longitude,
+          latitudeDelta: 0.0922,
+          longitudeDelta: 0.0421
+        });
       } catch (error) {
-        setLocationErrorMsg('Failed to get user location');
+        alert('Failed to get user location');
       }
     })();
+    fetchLibraries();
   }, []);
 
+  const fetchLibraries = async () => {
+    const api_key = '57524f76506d656e3732636a52457a';
+    const urls = [
+      `http://openAPI.seoul.go.kr:8088/${api_key}/json/SeoulLibraryTimeInfo/1/1000/`,
+      `http://openAPI.seoul.go.kr:8088/${api_key}/json/SeoulLibraryTimeInfo/1001/2000/`
+    ];
+
+    try {
+      const responses = await Promise.all(urls.map(url => axios.get(url)));
+      const allData = responses.map(response => response.data.SeoulLibraryTimeInfo.row);
+      const cleanedData = allData.flat().map((lib, index) => ({
+        id: `${lib.XCNTS}-${lib.YDNTS}-${index}`,  // 고유 ID 생성 방식
+        name: lib.LBRRY_NAME,
+        latitude: parseFloat(lib.XCNTS),
+        longitude: parseFloat(lib.YDNTS)
+      })).filter(lib => lib.latitude && lib.longitude);
+      setLibraries(cleanedData);
+    } catch (error) {
+      console.error('Failed to fetch library data', error);
+    }
+  };
+
+  const onRegionChangeComplete = (region) => {
+    const visible = libraries.filter(library => 
+      library.latitude >= region.latitude - region.latitudeDelta / 2 &&
+      library.latitude <= region.latitude + region.latitudeDelta / 2 &&
+      library.longitude >= region.longitude - region.longitudeDelta / 2 &&
+      library.longitude <= region.longitude + region.longitudeDelta / 2
+    );
+    setVisibleLibraries(visible);
+  };
+
   return (
     <View style={styles.container}>
-      <MapView
-        style={styles.map}
-        provider={PROVIDER_GOOGLE}
-        initialRegion={{
-          latitude: userLocation ? userLocation.latitude : 37.5665,
-          longitude: userLocation ? userLocation.longitude : 126.978,
-          latitudeDelta: 0.0922,
-          longitudeDelta: 0.0421,
-        }}
-      >
-        {userLocation && (
-          <Marker
-            coordinate={{
-              latitude: userLocation.latitude,
-              longitude: userLocation.longitude,
-            }}
-            title="현재 사용자 위치"
-            pinColor="red" // 사용자 위치는 빨간색으로 표시
-          />
+      {initialRegion && (
+        <MapView
+          style={styles.map}
+          provider={PROVIDER_GOOGLE}
+          initialRegion={initialRegion}
+          onRegionChangeComplete={onRegionChangeComplete}
+        >
+          {userLocation && (
+            <Marker
+              coordinate={{
+                latitude: userLocation.latitude,
+                longitude: userLocation.longitude,
+              }}
+              title="Current Location"
+              pinColor="red"
+            />
+          )}
+          {libraries.map((library, index) => (
+            <Marker
+              key={index}
+              coordinate={{
+                latitude: library.latitude,
+                longitude: library.longitude
+              }}
+              title={library.name}
+              pinColor="purple"
+            />
+          ))}
+        </MapView>
+      )}
+      <FlatList
+        data={visibleLibraries}
+        keyExtractor={item => item.id}  // 고유 ID 사용
+        renderItem={({ item }) => (
+          <TouchableOpacity style={styles.listItem} onPress={() => {
+            const encodedName = encodeURIComponent(item.name);
+            const url = `https://www.google.com/maps/search/?api=1&query=${encodedName}`;
+            Linking.openURL(url);
+          }}>
+            <Text style={styles.listItemText}>{item.name}</Text>
+          </TouchableOpacity>
         )}
-        <Marker
-          coordinate={{ 
-            latitude: 37.5665, 
-            longitude: 126.978 
-          }}
-          title="서울시청역"
-          pinColor="blue" // 서울시청역은 파란색으로 표시
-        />
-      </MapView>
+        style={styles.list}
+      />
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    flexDirection: 'column'
   },
   map: {
-    flex: 1,
+    height: '70%'
+  },
+  list: {
+    height: '30%'
+  },
+  listItem: {
+    padding: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc'
   },
+  listItemText: {
+    fontSize: 16
+  }
 });
 
-export default MapPage;
+export default HomeScreen;