TRIP-SPOT · d0422 · Jul 31, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,6 @@
 node_modules/
 .yarn/*
-!.yarn/cache
+.yarn/cache
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases

diff --git a/packages/react-native/package.json b/packages/react-native/package.json
@@ -16,13 +16,15 @@
     ]
   },
   "dependencies": {
+    "@gorhom/bottom-sheet": "^4.6.4",
     "@react-native-camera-roll/camera-roll": "^7.8.1",
     "@react-navigation/bottom-tabs": "^6.6.0",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.4.0",
     "@tanstack/react-query": "^5.51.9",
     "axios": "^1.7.2",
     "babel-plugin-module-resolver": "^5.0.2",
+    "d3-geo": "^3.1.1",
     "design-system": "workspace:^",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
@@ -51,6 +53,7 @@
     "@react-native/eslint-config": "0.74.84",
     "@react-native/metro-config": "0.74.84",
     "@react-native/typescript-config": "0.74.84",
+    "@types/d3-geo": "^3.1.0",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
     "@types/tinycolor2": "^1.4.6",

diff --git a/packages/react-native/src/App.tsx b/packages/react-native/src/App.tsx
@@ -1,14 +1,17 @@
 import { NavigationContainer } from '@react-navigation/native';
 import StackNavigator from '@routes/StackNavigator';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const queryClient = new QueryClient();
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <NavigationContainer>
-        <StackNavigator />
-      </NavigationContainer>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <NavigationContainer>
+          <StackNavigator />
+        </NavigationContainer>
+      </GestureHandlerRootView>
     </QueryClientProvider>
   );
 }
diff --git a/packages/react-native/src/assets/mapData.ts b/packages/react-native/src/assets/mapData.ts
diff --git a/packages/react-native/src/pages/Maps.tsx b/packages/react-native/src/pages/Maps.tsx
@@ -0,0 +1,95 @@
+import { Dimensions, View, TouchableOpacity } from 'react-native';
+import { Font } from 'design-system';
+import { geoPath, geoMercator } from 'd3-geo';
+import { Svg, G, Path } from 'react-native-svg';
+import { useMemo, useRef, useState } from 'react';
+import BottomSheet, {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
+import mapData from '@/assets/mapData';
+
+const { width, height } = Dimensions.get('window');
+
+const renderBackdropComponent = (props: BottomSheetBackdropProps) => (
+  <BottomSheetBackdrop
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...props}
+    pressBehavior="close"
+    // Backdrop이 등장하기 시작하는 bottom sheet의 index
+    appearsOnIndex={0}
+    // Backdrop이 사라지기 시작하는 bottom sheet의 index
+    disappearsOnIndex={-1}
+  />
+);
+
+export default function Maps() {
+  const bottomSheetRef = useRef<BottomSheet>(null);
+  const [region, setRegion] = useState('');
+
+  const snapPoints = useMemo(() => ['30%'], []);
+
+  const projection = geoMercator() // 구형 투영도
+    .scale(3300) // 스케일 조정
+    .center([127.766922, 35.907757]) // 한국의 중심 좌표
+    .translate([width / 2, height / 2]);
+
+  const pathGenerator = geoPath().projection(projection);
+
+  return (
+    <View className="flex-1 bg-[#D2F3F8]">
+      <Svg width={width} height={height} onPress={() => setRegion('')}>
+        <G>
+          {mapData.features.map((feature) => {
+            const geoFeature = feature as GeoJSON.Feature<GeoJSON.Geometry>;
+            return (
+              <Path
+                key={feature.properties.CTP_KOR_NM}
+                d={pathGenerator(geoFeature) || ''}
+                fill="white"
+                stroke="#000"
+                strokeWidth={1}
+                onPress={() => {
+                  setRegion(feature.properties.CTP_KOR_NM);
+                  bottomSheetRef.current?.snapToIndex(0);
+                }}
+              />
+            );
+          })}
+        </G>
+      </Svg>
+      {region && (
+        <BottomSheet
+          backdropComponent={renderBackdropComponent}
+          ref={bottomSheetRef}
+          snapPoints={snapPoints}
+          enablePanDownToClose
+        >
+          <BottomSheetView>
+            <View className="flex justify-evenly items-center mt-2 flex-col gap-4">
+              <View className="flex">
+                <Font.Bold type="mainTitle" color="black">
+                  {region}
+                </Font.Bold>
+              </View>
+              <View className="flex items-center w-full ">
+                <TouchableOpacity className="py-2">
+                  <Font type="title1" color="black">
+                    대표사진 설정하기
+                  </Font>
+                </TouchableOpacity>
+                <View className="w-[90%] h-[0.5px] bg-[#333333]" />
+                <TouchableOpacity className="py-2">
+                  <Font type="title1" color="black">
+                    로그보기
+                  </Font>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </BottomSheetView>
+        </BottomSheet>
+      )}
+    </View>
+  );
+}
diff --git a/packages/react-native/src/pages/Signup/NicknameProfile.tsx b/packages/react-native/src/pages/Signup/NicknameProfile.tsx
@@ -64,7 +64,7 @@ export default function NicknameProfile({ navigation }: NicknameProfileProps) {
             <View
               className="w-[160px] h-[160px] rounded-full justify-center items-center"
               style={{
-                backgroundColor: selectColor,
+                backgroundColor: selectedColor,
               }}
             >
               <Text

diff --git a/packages/react-native/src/routes/BottomTabNavigator.tsx b/packages/react-native/src/routes/BottomTabNavigator.tsx
@@ -7,7 +7,7 @@ import MyPage from '@pages/MyPage';
 import MapIcon from '@assets/MapIcon';
 import DetailIcon from '@assets/DetailIcon';
 import MyPageIcon from '@assets/MyPageIcon';
-import CameraPage from '@/pages/CameraPage';
+import Maps from '@/pages/Maps';
 
 export default function BottomTabNavigator() {
   const Tab = createBottomTabNavigator();
@@ -46,7 +46,7 @@ export default function BottomTabNavigator() {
       {/* FIXME: 경로 페이지로 변경 */}
       <Tab.Screen
         name="Route"
-        component={CameraPage}
+        component={Maps}
         options={{
           tabBarLabel: '경로',
           tabBarIcon: MapIcon,

diff --git a/yarn.lock b/yarn.lock
@@ -2174,6 +2174,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@gorhom/bottom-sheet@npm:^4.6.4":
+  version: 4.6.4
+  resolution: "@gorhom/bottom-sheet@npm:4.6.4"
+  dependencies:
+    "@gorhom/portal": 1.0.14
+    invariant: ^2.2.4
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-native": "*"
+    react: "*"
+    react-native: "*"
+    react-native-gesture-handler: ">=1.10.1"
+    react-native-reanimated: ">=2.2.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-native":
+      optional: true
+  checksum: 2cea033c4f321b93fdbf61470b507b5efd51425a8ab927b49d7aaa1d9f0568cbcfb188e385311389dbffbafe47b941dbd3e60f74b1d663a1a2d73262e2719f85
+  languageName: node
+  linkType: hard
+
+"@gorhom/portal@npm:1.0.14":
+  version: 1.0.14
+  resolution: "@gorhom/portal@npm:1.0.14"
+  dependencies:
+    nanoid: ^3.3.1
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 227bb96a2db854ab29bb9da8d4f3823c7f7448358de459709dd1b78522110da564c9a8734c6bc7d7153ed7c99320e0fb5d60b420c2ebb75ecaf2f0d757f410f9
+  languageName: node
+  linkType: hard
+
 "@hapi/hoek@npm:^9.0.0, @hapi/hoek@npm:^9.3.0":
   version: 9.3.0
   resolution: "@hapi/hoek@npm:9.3.0"
@@ -4886,6 +4920,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/d3-geo@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "@types/d3-geo@npm:3.1.0"
+  dependencies:
+    "@types/geojson": "*"
+  checksum: a4b2daa8a64012912ce7186891e8554af123925dca344c111b771e168a37477e02d504c6c94ee698440380e8c4f3f373d6755be97935da30eae0904f6745ce40
+  languageName: node
+  linkType: hard
+
 "@types/detect-port@npm:^1.3.0":
   version: 1.3.5
   resolution: "@types/detect-port@npm:1.3.5"
@@ -4993,6 +5036,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/geojson@npm:*":
+  version: 7946.0.14
+  resolution: "@types/geojson@npm:7946.0.14"
+  checksum: ae511bee6488ae3bd5a3a3347aedb0371e997b14225b8983679284e22fa4ebd88627c6e3ff8b08bf4cc35068cb29310c89427311ffc9322c255615821a922e71
+  languageName: node
+  linkType: hard
+
 "@types/graceful-fs@npm:^4.1.3":
   version: 4.1.9
   resolution: "@types/graceful-fs@npm:4.1.9"
@@ -7729,6 +7779,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-array@npm:2.5.0 - 3":
+  version: 3.2.4
+  resolution: "d3-array@npm:3.2.4"
+  dependencies:
+    internmap: 1 - 2
+  checksum: a5976a6d6205f69208478bb44920dd7ce3e788c9dceb86b304dbe401a4bfb42ecc8b04c20facde486e9adcb488b5d1800d49393a3f81a23902b68158e12cddd0
+  languageName: node
+  linkType: hard
+
+"d3-geo@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "d3-geo@npm:3.1.1"
+  dependencies:
+    d3-array: 2.5.0 - 3
+  checksum: 3cc4bb50af5d2d4858d2df1729a1777b7fd361854079d9faab1166186c988d2cba0d11911da0c4598d5e22fae91d79113ed262a9f98cabdbc6dbf7c30e5c0363
+  languageName: node
+  linkType: hard
+
 "damerau-levenshtein@npm:^1.0.8":
   version: 1.0.8
   resolution: "damerau-levenshtein@npm:1.0.8"
@@ -10648,6 +10716,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"internmap@npm:1 - 2":
+  version: 2.0.3
+  resolution: "internmap@npm:2.0.3"
+  checksum: 7ca41ec6aba8f0072fc32fa8a023450a9f44503e2d8e403583c55714b25efd6390c38a87161ec456bf42d7bc83aab62eb28f5aef34876b1ac4e60693d5e1d241
+  languageName: node
+  linkType: hard
+
 "invariant@npm:^2.2.4":
   version: 2.2.4
   resolution: "invariant@npm:2.2.4"
@@ -12920,7 +12995,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.1.23, nanoid@npm:^3.3.7":
+"nanoid@npm:^3.1.23, nanoid@npm:^3.3.1, nanoid@npm:^3.3.7":
   version: 3.3.7
   resolution: "nanoid@npm:3.3.7"
   bin:
@@ -14705,6 +14780,7 @@ __metadata:
     "@babel/core": ^7.20.0
     "@babel/preset-env": ^7.20.0
     "@babel/runtime": ^7.20.0
+    "@gorhom/bottom-sheet": ^4.6.4
     "@jest/globals": ^29.7.0
     "@react-native-camera-roll/camera-roll": ^7.8.1
     "@react-native-community/eslint-config": ^3.2.0
@@ -14716,6 +14792,7 @@ __metadata:
     "@react-navigation/native": ^6.1.17
     "@react-navigation/stack": ^6.4.0
     "@tanstack/react-query": ^5.51.9
+    "@types/d3-geo": ^3.1.0
     "@types/react": ^18.2.6
     "@types/react-test-renderer": ^18.0.0
     "@types/tinycolor2": ^1.4.6
@@ -14724,6 +14801,7 @@ __metadata:
     axios: ^1.7.2
     babel-jest: ^29.6.3
     babel-plugin-module-resolver: ^5.0.2
+    d3-geo: ^3.1.1
     design-system: "workspace:^"
     eslint: ^8.19.0
     eslint-config-airbnb: ^19.0.4