Merge pull request #11 from JECT-Study/fix/naver_map_web

Fix/naver map web, vercel 배포 github action

Author: scorchedrice

.github/workflows/deploy.yml

@@ -0,0 +1,31 @@
+name: git push into another repo to deploy to vercel
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container: pandoc/latex
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install mustache (to update the date)
+        run: apk add ruby && gem install mustache
+      - name: creates output
+        run: sh ./build.sh
+      - name: Pushes to another repository
+        id: push_directory
+        uses: cpina/github-action-push-to-another-repository@main
+        env:
+          API_TOKEN_GITHUB: ${{ secrets.AUTO_ACTIONS }}
+        with:
+          source-directory: 'output'
+          destination-github-username: scorchedrice
+          destination-repository-name: mycode
+          user-email: ${{ secrets.EMAIL }}
+          commit-message: ${{ github.event.commits[0].message }}
+          target-branch: main
+      - name: Test get variable exported by push-to-another-repository
+        run: echo $DESTINATION_CLONED_DIRECTORY

app.config.js

@@ -106,6 +106,7 @@ export default {
     storybookEnabled: process.env.STORYBOOK_ENABLED,
     kakaoNativeAppKey: process.env.MYCODE_KAKAO_NATIVE_APP_KEY,
     BACKEND_URL: process.env.MYCODE_BACKEND_URL,
+    NAVER_MAP_CLIENT_ID: process.env.NAVER_MAP_CLIENT_ID,
     eas: {
       projectId: process.env.MYCODE_EAS_PROJECT_ID,
     },

app/(tabs)/detail/[id].tsx

@@ -1,9 +1,5 @@
 import { useCallback, useRef, useState } from "react";
 
-import {
-  NaverMapMarkerOverlay,
-  NaverMapView,
-} from "@mj-studio/react-native-naver-map";
 import { shareFeedTemplate } from "@react-native-kakao/share";
 import * as Clipboard from "expo-clipboard";
 import { useFocusEffect, useRouter } from "expo-router";
@@ -22,9 +18,9 @@ import BackArrow from "@/components/icons/BackArrow";
 import CopyIcon from "@/components/icons/CopyIcon";
 import HeartOutlineIcon from "@/components/icons/HeartOutlineIcon";
 import LocationIcon from "@/components/icons/LocationIcon";
-import LocationMarkerIcon from "@/components/icons/LocationMarkerIcon";
 import LocationPinIcon from "@/components/icons/LocationPinIcon";
 import ShareOutlineIcon from "@/components/icons/ShareOutlineIcon";
+import NaverMap from "@/components/map/NaverMap";
 
 const SCREEN_HEIGHT = Dimensions.get("window").height;
 const IMAGE_HEIGHT = SCREEN_HEIGHT * 0.4;
@@ -325,29 +321,8 @@ export default function DetailScreen() {
                   위치
                 </Text>
 
-                <View className="mb-3 h-48 overflow-hidden rounded-lg">
-                  <NaverMapView
-                    key={mapKey} // 지도 리셋을 위한 key
-                    style={{ width: "100%", height: "100%" }}
-                    initialCamera={{
-                      latitude: 37.566535,
-                      longitude: 126.9779692,
-                      zoom: 15,
-                    }}
-                    isShowLocationButton={false}
-                    isShowZoomControls={false}
-                  >
-                    <NaverMapMarkerOverlay
-                      latitude={37.566535}
-                      longitude={126.9779692}
-                      width={30}
-                      height={34}
-                      anchor={{ x: 0.5, y: 1 }}
-                    >
-                      <LocationMarkerIcon width={30} height={34} />
-                    </NaverMapMarkerOverlay>
-                  </NaverMapView>
-                </View>
+                {/*네이버지도 컴포넌트*/}
+                <NaverMap mapKey={mapKey} />
 
                 <View className="mb-3 flex-row items-center">
                   <LocationIcon size={16} />

components/map/NaverMap.native.tsx

@@ -0,0 +1,35 @@
+import {
+  NaverMapMarkerOverlay,
+  NaverMapView,
+} from "@mj-studio/react-native-naver-map";
+import { View } from "react-native";
+
+import LocationMarkerIcon from "@/components/icons/LocationMarkerIcon";
+
+export default function NaverMapNative({ mapKey }: { mapKey: number }) {
+  return (
+    <View className="mb-3 h-48 overflow-hidden rounded-lg">
+      <NaverMapView
+        key={mapKey} // 지도 리셋을 위한 key
+        style={{ width: "100%", height: "100%" }}
+        initialCamera={{
+          latitude: 37.566535,
+          longitude: 126.9779692,
+          zoom: 15,
+        }}
+        isShowLocationButton={false}
+        isShowZoomControls={false}
+      >
+        <NaverMapMarkerOverlay
+          latitude={37.566535}
+          longitude={126.9779692}
+          width={30}
+          height={34}
+          anchor={{ x: 0.5, y: 1 }}
+        >
+          <LocationMarkerIcon width={30} height={34} />
+        </NaverMapMarkerOverlay>
+      </NaverMapView>
+    </View>
+  );
+}

components/map/NaverMap.tsx

@@ -0,0 +1,15 @@
+import { JSX } from "react";
+
+import { Platform } from "react-native";
+
+// 타입 명시가 있으면 더 안전
+type NaverMapComponent = (props: { mapKey: number }) => JSX.Element;
+
+const loader = Platform.select<() => NaverMapComponent>({
+  native: () => require("./NaverMap.native").default,
+  web: () => require("./NaverMap.web").default,
+});
+
+const NaverMap = loader ? loader() : () => null; // 함수 그대로 export
+
+export default NaverMap;

components/map/NaverMap.web.tsx

@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+
+import Constants from "expo-constants";
+import { View } from "react-native";
+
+declare global {
+  interface Window {
+    naver: any;
+  }
+}
+
+export default function NaverMapWeb({ mapKey }: { mapKey: number }) {
+  const sdkUrl = `https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${Constants.expoConfig?.extra?.NAVER_MAP_CLIENT_ID}`;
+  useEffect(() => {
+    const existingScript = document.querySelector(`script[src="${sdkUrl}"]`);
+    if (existingScript) {
+      if (window.naver?.maps) {
+        renderMap();
+      }
+      return;
+    }
+
+    const script = document.createElement("script");
+    script.src = sdkUrl;
+    script.async = true;
+    script.onload = () => {
+      if (window.naver?.maps) {
+        renderMap();
+      }
+    };
+    document.head.appendChild(script);
+  }, [mapKey, sdkUrl]);
+  const renderMap = () => {
+    const map = new window.naver.maps.Map("map", {
+      center: new window.naver.maps.LatLng(37.5665, 126.978),
+      zoom: 15,
+    });
+
+    new window.naver.maps.Marker({
+      position: new window.naver.maps.LatLng(37.5665, 126.978),
+      map,
+    });
+  };
+  return (
+    <View className="mb-3 h-48 overflow-hidden rounded-lg">
+      <View
+        id="map"
+        style={{ width: "100%", height: "100%", borderRadius: 12 }}
+      />
+    </View>
+  );
+}