[FEAT]맵 장소 받아오기 및 위치 공유

.gitignore

@@ -64,3 +64,5 @@ yarn-error.log
 
 # testing
 /coverage
+
+.env

App.tsx

@@ -1,18 +1,25 @@
 import React from 'react';
 import {NavigationContainer} from '@react-navigation/native';
 import DrawerNavigator from './src/utils/DrawerNavigator';
-import { Map } from './src/screens/Map';
+import {Map} from './src/screens/Map';
+import {createStackNavigator} from '@react-navigation/stack';
+import { RecoilRoot } from 'recoil';
+import LocationSelection from './src/screens/LocationSelection';
+
+const Stack = createStackNavigator();
 
 function App() {
-  // const isDarkMode = useColorScheme() === 'dark';
-  // const backgroundStyle = {
-  //   backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  // };
   return (
-    // <NavigationContainer>
-    //   <DrawerNavigator />
-    // </NavigationContainer>
-    <Map />
+    <RecoilRoot>
+      <NavigationContainer>
+        <Stack.Navigator screenOptions={{headerShown: false}}>
+          <Stack.Screen name="Map" component={Map} />
+          <Stack.Screen name="Selection" component={LocationSelection} />
+          <Stack.Screen name="Home" component={DrawerNavigator} />
+        </Stack.Navigator>
+        {/* <DrawerNavigator /> */}
+      </NavigationContainer>
+    </RecoilRoot>
   );
 }
 

env.d.ts

@@ -0,0 +1,3 @@
+declare module '@env' {
+  export const G_API_KEY: string;
+}

ios/Podfile.lock

@@ -525,6 +525,8 @@ PODS:
     - React-Core
   - RNCMaskedView (0.1.11):
     - React
+  - RNCPicker (2.5.1):
+    - React-Core
   - RNGestureHandler (2.13.4):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
@@ -642,6 +644,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
+  - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
@@ -760,6 +763,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-clipboard/clipboard"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
+  RNCPicker:
+    :path: "../node_modules/@react-native-picker/picker"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
@@ -833,6 +838,7 @@ SPEC CHECKSUMS:
   ReactCommon: dd03c17275c200496f346af93a7b94c53f3093a4
   RNCClipboard: d77213bfa269013bf4b857b7a9ca37ee062d8ef1
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
+  RNCPicker: 529d564911e93598cc399b56cc0769ce3675f8c8
   RNGestureHandler: 6e46dde1f87e5f018a54fe5d40cd0e0b942b49ee
   RNReanimated: ab2e96c6d5591c3dfbb38a464f54c8d17fb34a87
   RNScreens: 3c2d122f5e08c192e254c510b212306da97d2581

package.json

@@ -12,9 +12,11 @@
   "dependencies": {
     "@react-native-clipboard/clipboard": "^1.12.1",
     "@react-native-community/masked-view": "^0.1.11",
+    "@react-native-picker/picker": "^2.5.1",
     "@react-native-voice/voice": "^3.1.5",
     "@react-navigation/drawer": "^6.6.6",
     "@react-navigation/native": "^6.1.9",
+    "@react-navigation/stack": "^6.3.20",
     "axios": "^1.6.1",
     "react": "18.2.0",
     "react-native": "0.72.6",
@@ -28,6 +30,7 @@
     "react-native-screens": "^3.27.0",
     "react-native-sound": "^0.11.2",
     "react-native-sound-player": "^0.13.2",
+    "recoil": "^0.7.7",
     "styled-components": "^6.1.1"
   },
   "devDependencies": {

src/assets/recoilValues.ts

@@ -0,0 +1,6 @@
+import {atom} from 'recoil';
+
+export const LocationTypeAtom = atom<string>({
+  key: 'locationTypeAtom',
+  default: 'university',
+});

src/screens/LocationSelection.tsx

@@ -0,0 +1,41 @@
+import {Picker} from '@react-native-picker/picker';
+import React from 'react';
+import {Button, SafeAreaView, Text} from 'react-native';
+import {useRecoilState} from 'recoil';
+import {LocationTypeAtom} from '../assets/recoilValues';
+import styled from 'styled-components/native';
+
+export default function LocationSelection({navigation}) {
+  const [selectedLoc, setSelectedLoc] = useRecoilState(LocationTypeAtom);
+  return (
+    <SafeAreaView>
+      <Title>
+        <TitleText>Select Your Location</TitleText>
+      </Title>
+      <Picker
+        selectedValue={selectedLoc}
+        onValueChange={itemValue => setSelectedLoc(itemValue)}>
+        <Picker.Item label="university" value="university" />
+        <Picker.Item label="store" value="store" />
+        <Picker.Item label="online" value="online" />
+      </Picker>
+      <Button
+        title="Translation"
+        onPress={() => navigation.navigate('Home', {screen: 'Translation'})}
+      />
+    </SafeAreaView>
+  );
+}
+
+const Title = styled.View`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 30%;
+`;
+
+const TitleText = styled.Text`
+  color: rgba(21, 86, 254, 1);
+  font-size: 20px;
+  font-weight: bold;
+`;