feat: 현재 위치 기반 지도 개발

android/app/build.gradle

@@ -8,6 +8,8 @@ apply plugin: 'com.google.gms.google-services'
  * This is the configuration block to customize your React Native Android app.
  * By default you don't need to apply any configuration, just uncomment the lines you need.
  */
+
+
 react {
     /* Folders */
     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
@@ -86,7 +88,8 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "0.0.1"
-        resValue "string", "build_config_package", "com.clientapp"
+        resValue "string", "NAVER_MAP_CLIENT_ID", project.env.get("NAVER_MAP_CLIENT_ID") ?: ""
+
     }
     signingConfigs {
         debug {
@@ -125,7 +128,16 @@ dependencies {
     implementation project(':react-native-config')
     implementation("com.kakao.sdk:v2-user:2.20.6")
     implementation platform('com.google.firebase:firebase-bom:33.5.1')
+    implementation 'com.google.firebase:firebase-messaging:21.3.0'
     implementation 'com.google.firebase:firebase-analytics'
+    implementation 'com.naver.maps:map-sdk:3.16.0'
+     implementation 'androidx.appcompat:appcompat:1.3.1'  
+    implementation 'androidx.core:core:1.9.0' 
+     implementation 'androidx.appcompat:appcompat:1.2.0'
+    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
+    implementation 'androidx.recyclerview:recyclerview:1.2.0'
+    implementation 'androidx.cardview:cardview:1.0.0'
+    implementation 'androidx.drawerlayout:drawerlayout:1.1.1'
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")
     } else {

android/app/src/debug/AndroidManifest.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
+    xmlns:tools="http://schemas.android.com/tools"
+    >
 
     <application
         android:usesCleartextTraffic="true"

android/app/src/main/AndroidManifest.xml

@@ -1,16 +1,26 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+xmlns:tools="http://schemas.android.com/tools">
 
     <uses-permission android:name="android.permission.INTERNET" />
-
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
     <application
       android:name=".MainApplication"
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
       android:theme="@style/AppTheme"
+      tools:replace="android:appComponentFactory"
+      android:appComponentFactory="androidx.core.app.CoreComponentFactory"
       android:supportsRtl="true"
       android:usesCleartextTraffic="true">
+
+    <meta-data
+            android:name="com.naver.maps.map.CLIENT_ID"
+           android:value="@string/NAVER_MAP_CLIENT_ID" />
+
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
@@ -37,6 +47,6 @@
             android:scheme="@string/KAKAO_NATIVE_KEY" />
       </intent-filter>
     </activity>
-
+  
     </application>
 </manifest>

android/build.gradle

@@ -1,3 +1,11 @@
+allprojects {
+    repositories {
+        maven {
+            url "https://repository.map.naver.com/archive/maven"
+        }
+    }
+}
+
 buildscript {
     ext {
         buildToolsVersion = "34.0.0"
@@ -18,7 +26,9 @@ buildscript {
         classpath("com.facebook.react:react-native-gradle-plugin")
         classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
         classpath 'com.google.gms:google-services:4.4.2'
+
     }
 }
 
 apply plugin: "com.facebook.react.rootproject"
+apply plugin: 'com.google.gms.google-services'

android/gradle.properties

@@ -21,6 +21,7 @@ org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
 # Android operating system, and which are packaged with your app's APK
 # https://developer.android.com/topic/libraries/support-library/androidx-rn
 android.useAndroidX=true
+android.enableJetifier=true
 
 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using

ios/ClientApp/Info.plist

@@ -72,7 +72,9 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string>이 앱은 위치 정보를 사용합니다.</string>
+	<key>NSLocationAlwaysUsageDescription</key>
+	<string>이 앱은 항상 위치 정보를 사용합니다.</string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -127,5 +129,7 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+		<key>NMFClientId</key>
+    <string>$(NAVER_MAP_CLIENT_ID)</string>
 </dict>
 </plist>

ios/Podfile

@@ -1,10 +1,21 @@
 # Resolve react_native_pods.rb with node to allow for hoisting
-require Pod::Executable.execute_command('node', ['-p',
-  'require.resolve(
-    "react-native/scripts/react_native_pods.rb",
-    {paths: [process.argv[1]]},
-  )', __dir__]).strip
+# require Pod::Executable.execute_command('node', ['-p',
+#   'require.resolve(
+#     "react-native/scripts/react_native_pods.rb",
+#     {paths: [process.argv[1]]},
+#   )', __dir__]).strip
 
+ def node_require(script)
+   # Resolve script with node to allow for hoisting
+   require Pod::Executable.execute_command('node', ['-p',
+     "require.resolve(
+       '#{script}',
+       {paths: [process.argv[1]]},
+     )", __dir__]).strip
+ end
+
+ node_require('react-native/scripts/react_native_pods.rb')
+ node_require('react-native-permissions/scripts/setup.rb')
 platform :ios, min_ios_version_supported
 
 prepare_react_native_project!
@@ -19,6 +30,9 @@ end
 target 'ClientApp' do
   config = use_native_modules!
 
+
+
+
   use_frameworks! :linkage => :static
   $RNFirebaseAsStaticFramework = true
 
@@ -28,6 +42,14 @@ target 'ClientApp' do
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
+   # 권한 설정을 위한 setup_permissions 호출
+   setup_permissions([
+    'Camera',
+    'LocationWhenInUse',
+    'Notifications',
+    # 필요에 따라 추가 권한 설정
+  ])
+
   target 'ClientAppTests' do
     inherit! :complete
     # Pods for testing
@@ -42,4 +64,5 @@ target 'ClientApp' do
       # :ccache_enabled => true
     )
   end
+
 end

ios/Podfile.lock

@@ -16,7 +16,7 @@ PODS:
     - GoogleUtilities/Logger (~> 8.0)
   - FirebaseCoreExtension (11.4.0):
     - FirebaseCore (~> 11.0)
-  - FirebaseCoreInternal (11.4.2):
+  - FirebaseCoreInternal (11.5.0):
     - "GoogleUtilities/NSData+zlib (~> 8.0)"
   - FirebaseInstallations (11.4.0):
     - FirebaseCore (~> 11.0)
@@ -86,6 +86,9 @@ PODS:
   - nanopb/decode (3.30910.0)
   - nanopb/encode (3.30910.0)
   - naveridlogin-sdk-ios (4.2.1)
+  - NMapsGeometry (1.0.2)
+  - NMapsMap (3.19.0):
+    - NMapsGeometry
   - PromisesObjC (2.4.0)
   - RCT-Folly (2024.01.01.00):
     - boost
@@ -1325,6 +1328,32 @@ PODS:
     - React-Core
   - react-native-encrypted-storage (4.0.3):
     - React-Core
+  - react-native-geolocation (3.4.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - react-native-geolocation-service (5.3.1):
+    - React
+  - react-native-nmap (0.0.67):
+    - NMapsMap
+    - React
   - react-native-safe-area-context (4.11.0):
     - React-Core
   - React-nativeconfig (0.75.2)
@@ -1643,6 +1672,8 @@ PODS:
     - RNNotifee/NotifeeCore (= 9.1.2)
   - RNNotifee/NotifeeCore (9.1.2):
     - React-Core
+  - RNPermissions (5.1.0):
+    - React-Core
   - RNScreens (3.34.0):
     - DoubleConversion
     - glog
@@ -1776,6 +1807,9 @@ DEPENDENCIES:
   - react-native-config (from `../node_modules/react-native-config`)
   - react-native-date-picker (from `../node_modules/react-native-date-picker`)
   - react-native-encrypted-storage (from `../node_modules/react-native-encrypted-storage`)
+  - "react-native-geolocation (from `../node_modules/@react-native-community/geolocation`)"
+  - react-native-geolocation-service (from `../node_modules/react-native-geolocation-service`)
+  - react-native-nmap (from `../node_modules/react-native-naver-map`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1808,6 +1842,7 @@ DEPENDENCIES:
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - "RNNaverLogin (from `../node_modules/@react-native-seoul/naver-login`)"
   - "RNNotifee (from `../node_modules/@notifee/react-native`)"
+  - RNPermissions (from `../node_modules/react-native-permissions`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
@@ -1831,6 +1866,8 @@ SPEC REPOS:
     - KakaoSDKUser
     - nanopb
     - naveridlogin-sdk-ios
+    - NMapsGeometry
+    - NMapsMap
     - PromisesObjC
     - SocketRocket
 
@@ -1916,6 +1953,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-date-picker"
   react-native-encrypted-storage:
     :path: "../node_modules/react-native-encrypted-storage"
+  react-native-geolocation:
+    :path: "../node_modules/@react-native-community/geolocation"
+  react-native-geolocation-service:
+    :path: "../node_modules/react-native-geolocation-service"
+  react-native-nmap:
+    :path: "../node_modules/react-native-naver-map"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   React-nativeconfig:
@@ -1980,6 +2023,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-seoul/naver-login"
   RNNotifee:
     :path: "../node_modules/@notifee/react-native"
+  RNPermissions:
+    :path: "../node_modules/react-native-permissions"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   RNSVG:
@@ -2002,7 +2047,7 @@ SPEC CHECKSUMS:
   Firebase: cf1b19f21410b029b6786a54e9764a0cacad3c99
   FirebaseCore: e0510f1523bc0eb21653cac00792e1e2bd6f1771
   FirebaseCoreExtension: 4445e4cd877e0790c4af33bedca61eaef27b7513
-  FirebaseCoreInternal: 35731192cab10797b88411be84940d2beb33a238
+  FirebaseCoreInternal: f47dd28ae7782e6a4738aad3106071a8fe0af604
   FirebaseInstallations: 6ef4a1c7eb2a61ee1f74727d7f6ce2e72acf1414
   FirebaseMessaging: f8a160d99c2c2e5babbbcc90c4a3e15db036aee2
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
@@ -2016,6 +2061,8 @@ SPEC CHECKSUMS:
   KakaoSDKUser: 043bcd7e91454ebf3bf64f150c430e6f65f0a08d
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
   naveridlogin-sdk-ios: d5f9d92905a7e964976ebfdd665bee5fb75845c5
+  NMapsGeometry: 4e02554fa9880ef02ed96b075dc84355d6352479
+  NMapsMap: 99c10429d93340780b6f88d3fc7c0a3850b43664
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
   RCT-Folly: 4464f4d875961fce86008d45f4ecf6cef6de0740
   RCTDeprecation: 34cbf122b623037ea9facad2e92e53434c5c7422
@@ -2049,6 +2096,9 @@ SPEC CHECKSUMS:
   react-native-config: 8f7283449bbb048902f4e764affbbf24504454af
   react-native-date-picker: 06a4d96ab525a163c7a90bccd68833d136b0bb13
   react-native-encrypted-storage: db300a3f2f0aba1e818417c1c0a6be549038deb7
+  react-native-geolocation: cc79f2a7a8c6616db25b9728670bbb2011ded918
+  react-native-geolocation-service: 608e1da71a1ac31b4de64d9ef2815f697978c55b
+  react-native-nmap: 057c4e7b1b765b234ab4b0a6c5ccd9baaf3bc9c7
   react-native-safe-area-context: 851c62c48dce80ccaa5637b6aa5991a1bc36eca9
   React-nativeconfig: 5fc2b05a590eb704128f5a4fc8ea6fa7b847e6e8
   React-NativeModulesApple: 88313414ddffd1758f76042733e8f0297acfd502
@@ -2081,6 +2131,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: f81137aeaf7a060c491d0a43af0f5ef6a8867250
   RNNaverLogin: b47794502b392e6a10d6966dd95896385056f957
   RNNotifee: bc20a5e3d581f629db988075944fdd944d363dfe
+  RNPermissions: a18e5e6d26f254326b6d6073a6902eae95344375
   RNScreens: de55b9d7de8a017d1588dcb70415492d0b0597c2
   RNSVG: 8b1a777d54096b8c2a0fd38fc9d5a454332bbb4d
   RNVectorIcons: 7b81882e9c9369031aede0016dee0fe415cf2f43
@@ -2089,6 +2140,6 @@ SPEC CHECKSUMS:
   widget-sdk-react-native: f35fb725a1375a9d68b2805e226d15c966683805
   Yoga: 36d44f1d31d7c11be1067e5c7a70a12c2eed355c
 
-PODFILE CHECKSUM: ca7933221d2cea83cdbcda015c762d59640fff76
+PODFILE CHECKSUM: 3ce7a289ca1ba4108c258212f6e3b54d00957b5a
 
 COCOAPODS: 1.15.2

package.json

@@ -20,6 +20,7 @@
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.13.0",
     "@notifee/react-native": "^9.1.2",
+    "@react-native-community/geolocation": "^3.4.0",
     "@react-native-firebase/app": "^21.3.0",
     "@react-native-firebase/messaging": "^21.3.0",
     "@react-native-seoul/kakao-login": "^5.4.1",
@@ -36,9 +37,12 @@
     "react-native-config": "^1.5.3",
     "react-native-date-picker": "^5.0.7",
     "react-native-encrypted-storage": "^4.0.3",
+    "react-native-geolocation-service": "^5.3.1",
     "react-native-gesture-handler": "^2.18.1",
     "react-native-linear-gradient": "^2.8.3",
+    "react-native-naver-map": "https://github.com/zerocho/react-native-naver-map",
     "react-native-paper": "^5.12.5",
+    "react-native-permissions": "^5.1.0",
     "react-native-safe-area-context": "^4.10.9",
     "react-native-screens": "^3.34.0",
     "react-native-svg": "^15.8.0",

react-native-naver-map.d.ts

@@ -0,0 +1 @@
+declare module 'react-native-naver-map';

src/apis/Market.ts

@@ -3,18 +3,23 @@ import apiClient from './ApiClient';
 export const getMarketList = async (
   cursorId: number = 0,
   size: number = 10,
+  userLatitude?: number,
+  userLongitude?: number,
 ): Promise<{
   markets: MarketType[];
   hasNext: boolean;
 } | null> => {
   try {
+    console.log('api call', userLatitude, userLongitude);
     const res = await apiClient.get<{
       markets: MarketType[];
       hasNext: boolean;
     } | null>(`/markets`, {
       params: {
         cursorId,
         size,
+        userLatitude,
+        userLongitude,
       },
     });