[#36] 지도 탭 최적화

app.config.ts

@@ -11,17 +11,17 @@ export default {
     userInterfaceStyle: "automatic",
     newArchEnabled: true,
     updates: {
-      url: "https://u.expo.dev/51f8ef22-b7f8-40ed-92d1-201c776e3b87"
+      url: "https://u.expo.dev/51f8ef22-b7f8-40ed-92d1-201c776e3b87",
     },
     runtimeVersion: {
-      policy: "appVersion"
+      policy: "appVersion",
     },
     extra: {
       APP_ENV_API_BASE_URL: process.env.APP_ENV_API_BASE_URL,
-      APP_ENV_GEOFENCE_RADIUS: process.env.APP_ENV_GEOFENCE_RADIUS || '100',
+      APP_ENV_GEOFENCE_RADIUS: process.env.APP_ENV_GEOFENCE_RADIUS || "100",
       eas: {
-        projectId: "51f8ef22-b7f8-40ed-92d1-201c776e3b87"
-      }
+        projectId: "51f8ef22-b7f8-40ed-92d1-201c776e3b87",
+      },
     },
     ios: {
       bundleIdentifier: "com.earseo.earseo",
@@ -32,7 +32,7 @@ export default {
         UIBackgroundModes: ["audio", "location"],
       },
       config: {
-        usesNonExemptEncryption: false
+        usesNonExemptEncryption: false,
       },
       icon: "./src/assets/earseo-ios.icon",
       displayName: "이어서",
@@ -84,4 +84,4 @@ export default {
       reactCompiler: true,
     },
   },
-};
+};

app/(tabs)/(index,story,route)/[mapType].tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useRef } from "react";
+
+import { InteractionManager } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+
+import { BottomSheetMethods } from "@gorhom/bottom-sheet/src/types";
+import { useGlobalSearchParams } from "expo-router";
+
+import CurationBottomSheet from "@/components/bottomSheet/CurationBottomSheet";
+import CustomBottomSheet from "@/components/bottomSheet/CustomBottomSheet";
+import RouteBottomSheet from "@/components/bottomSheet/RouteBottomSheet";
+import StoryBottomSheet from "@/components/bottomSheet/StoryBottomSheet";
+import BaseMap from "@/components/map/BaseMap";
+import MapHeader from "@/components/map/header/MapHeader";
+import MapSearchBar from "@/components/map/header/MapSearchBar";
+
+import { useBaseMap } from "@/hooks/map/useBaseMap";
+import { useSightMap } from "@/hooks/sight/useSightMap";
+import { useStorySpotMap } from "@/hooks/story/useStorySpotMap";
+
+import { useBottomSheetStore } from "@/store/common/useBottomSheetStore";
+import { useBaseMapStore } from "@/store/map/useBaseMapStore";
+import { useMapHeaderStore } from "@/store/map/useMapHeaderStore";
+import { useRouteStore } from "@/store/route/useRouteStore";
+import { useSightStore } from "@/store/sight/useSightStore";
+import { useStoryAddStore } from "@/store/story/useStoryAddStore";
+import { useStoryStore } from "@/store/story/useStoryStore";
+
+function MapTabScreen() {
+  const { mapType } = useGlobalSearchParams();
+  const bottomSheetRef = useRef<BottomSheetMethods>(null);
+  const bottomSheetPosition = useSharedValue(0);
+  const { setBottomSheetContent, setBottomSheetLayout, setIsBottomSheetDragg } =
+    useBottomSheetStore();
+  const { setMapHeaderContent } = useMapHeaderStore();
+  const {
+    setMapMovable,
+    setEnableCluster,
+    setCenterPinVisibility,
+    setRegionChangeCompleteMethod,
+  } = useBaseMapStore();
+  const { loadMarkerFromStore } = useBaseMap();
+  //sight
+  const { fetchSightInBoundingBox } = useSightMap();
+  const { setSights } = useSightStore();
+  //story
+  const { fetchStorySpotInBoundingBox } = useStorySpotMap();
+  const { selectedStorySpot, setSpotListInMap } = useStoryStore();
+  const { setNewSpotName } = useStoryAddStore();
+  const storyAddStep = useStoryAddStore((state) => state.storyAddStep);
+  //route
+  const { setPathVisibility } = useRouteStore();
+
+  useEffect(() => {
+    /**TODO
+     * 화면 별 요소 추가
+     * - 초기 마커 컴포넌트 O
+     * - regionChange 시 마커 로드 함수 O
+     * - 검색바 컴포넌트 O
+     * - 바텀시트 내부 컴포넌트 O
+     * - 바텀시트 위치 조정 X
+     *
+     * TODO issue: param이 변경될때마다 세번씩 호출됨 O
+     */
+    if (!mapType) return;
+    setRegionChangeCompleteMethod(undefined);
+    if (mapType === "route") {
+      //TODO 경로 지도용 요소 추가
+      setBottomSheetLayout({
+        snapPoints: ["15%", "45%", "75%", "100%"],
+        index: 1,
+      });
+      setSights([]);
+      setEnableCluster(false);
+      setPathVisibility(true);
+      setSpotListInMap([]);
+      setBottomSheetContent(<RouteBottomSheet />);
+    } else if (mapType === "sight") {
+      //TODO 관광지 지도용 요소 추가
+      setBottomSheetLayout({
+        snapPoints: ["15%", "45%", "75%", "100%"],
+        index: 1,
+      });
+      setMapHeaderContent(
+        <MapSearchBar
+          placeHolder={"관광지 검색.."}
+          onPressMapSearchBar={() => {
+            //TODO 관광지 검색 모달
+            console.log("sight map search bar pressed");
+          }}
+        />
+      );
+      setBottomSheetContent(<CurationBottomSheet />);
+    }
+
+    if (mapType === "story") {
+      setBottomSheetContent(<StoryBottomSheet />);
+      if (storyAddStep === "none") {
+        setBottomSheetLayout({
+          snapPoints: ["15%", "45%", "75%", "100%"],
+          index: 1,
+        });
+        setCenterPinVisibility(false);
+        setMapHeaderContent(
+          <MapSearchBar
+            placeHolder={"이야기 검색.."}
+            onPressMapSearchBar={() => {
+              console.log("story map search bar pressed");
+            }}
+          />
+        );
+      }
+      if (storyAddStep === "location") {
+        setCenterPinVisibility(true);
+        setIsBottomSheetDragg(false);
+        setBottomSheetLayout({
+          snapPoints: ["30%"],
+          index: 0,
+        });
+      }
+
+      if (storyAddStep === "storyAdd") {
+        setCenterPinVisibility(false);
+        setIsBottomSheetDragg(true);
+        setBottomSheetLayout({
+          snapPoints: ["100%"],
+          index: 0,
+        });
+      }
+    }
+
+    const task = InteractionManager.runAfterInteractions(() => {
+      if (mapType === "sight") {
+        setRegionChangeCompleteMethod(fetchSightInBoundingBox);
+        loadMarkerFromStore();
+      } else if (mapType === "story" && storyAddStep === "none") {
+        setRegionChangeCompleteMethod(fetchStorySpotInBoundingBox);
+        loadMarkerFromStore();
+      }
+    });
+
+    return () => {
+      // store 기반 공유 컴포넌트 데이터 초기화
+      task.cancel();
+      setBottomSheetLayout({
+        snapPoints: ["15%", "45%", "75%", "100%"],
+        index: 1,
+      });
+      setMapHeaderContent(undefined);
+      setMapMovable(true);
+      setEnableCluster(true);
+      setPathVisibility(false);
+      setSights([]);
+      setBottomSheetContent(undefined);
+      selectedStorySpot([]);
+      setIsBottomSheetDragg(true);
+      setCenterPinVisibility(false);
+      setNewSpotName(undefined);
+    };
+  }, [mapType, storyAddStep]);
+
+  return (
+    <>
+      <BaseMap bottomSheetPosition={bottomSheetPosition} />
+      <MapHeader />
+      <CustomBottomSheet
+        bottomSheetRef={bottomSheetRef}
+        animatedPosition={bottomSheetPosition}
+      />
+    </>
+  );
+}
+
+export default React.memo(MapTabScreen);

app/(tabs)/_layout.tsx

@@ -1,27 +1,39 @@
 import { Ionicons } from "@expo/vector-icons";
-import { Tabs } from "expo-router";
+import { Tabs, usePathname } from "expo-router";
 
 import CourseIcon from "@/components/icons/tabs/CourseIcon";
 import MyRouteIcon from "@/components/icons/tabs/MyRouteIcon";
 
 import { theme } from "@/styles/theme";
 
+import { useNavigationBarStore } from "@/store/common/useNavigationBarStore";
+
 export default function TabLayout() {
+  const pathname = usePathname();
+  const currentMapType = pathname.startsWith("/sight")
+    ? "sight"
+    : pathname.startsWith("/route")
+      ? "route"
+      : pathname.startsWith("/story")
+        ? "story"
+        : null;
+  const { isNavigationBarHidden } = useNavigationBarStore();
   return (
     <Tabs
       backBehavior="history"
       screenOptions={{
         headerShown: false,
-        tabBarStyle: {
-          height: 15,
-          paddingTop: 15,
-          paddingHorizontal: 10,
-          borderTopWidth: 1,
-          position: "static",
-          overflow: "hidden",
-          borderTopColor: theme.colors.grey.neutral200,
-          backgroundColor: theme.colors.white,
-        },
+        tabBarStyle: isNavigationBarHidden
+          ? { display: "none" }
+          : {
+              paddingTop: 15,
+              paddingHorizontal: 10,
+              borderTopWidth: 1,
+              position: "static",
+              overflow: "hidden",
+              borderTopColor: theme.colors.grey.neutral200,
+              backgroundColor: theme.colors.white,
+            },
       }}
     >
       <Tabs.Screen
@@ -38,42 +50,67 @@ export default function TabLayout() {
           ),
         }}
       />
+
+      {/*@deprecated*/}
+
       <Tabs.Screen
-        name="myRoute"
+        name="(route)/[mapType]"
         options={{
+          title: "route",
+          href: {
+            pathname: "/(tabs)/(index)/[mapType]",
+            params: { mapType: "route" },
+          },
           tabBarLabel: () => null,
-          tabBarIcon: ({ focused, color, size }) => (
-            <MyRouteIcon
-              size={24}
-              color={focused ? theme.colors.main.primary : theme.colors.black}
-            ></MyRouteIcon>
-          ),
+          tabBarIcon: ({ color }) => {
+            color =
+              currentMapType === "route"
+                ? theme.colors.main.primary
+                : theme.colors.black;
+            return <MyRouteIcon size={24} color={color} />;
+          },
         }}
       />
       <Tabs.Screen
-        name="index"
+        name="(index)/[mapType]"
         options={{
+          title: "sight",
+          href: {
+            pathname: "/(tabs)/(index)/[mapType]",
+            params: { mapType: "sight" },
+          },
           tabBarLabel: () => null,
-          tabBarIcon: ({ focused, color, size }) => (
-            <CourseIcon
-              size={26}
-              color={focused ? theme.colors.main.primary : theme.colors.black}
-            ></CourseIcon>
-          ),
+          tabBarIcon: ({ color }) => {
+            color =
+              currentMapType === "sight"
+                ? theme.colors.main.primary
+                : theme.colors.black;
+            return <CourseIcon size={26} color={color} />;
+          },
         }}
       />
       <Tabs.Screen
-        name="story"
+        name="(story)/[mapType]"
         options={{
-          href: "/story",
+          title: "story",
+          href: {
+            pathname: "/(tabs)/(index)/[mapType]",
+            params: { mapType: "story" },
+          },
           tabBarLabel: () => null,
-          tabBarIcon: ({ focused, color, size }) => (
-            <Ionicons
-              name="chatbox-ellipses-outline"
-              size={28}
-              color={focused ? theme.colors.main.primary : theme.colors.black}
-            />
-          ),
+          tabBarIcon: ({ color }) => {
+            color =
+              currentMapType === "story"
+                ? theme.colors.main.primary
+                : theme.colors.black;
+            return (
+              <Ionicons
+                name="chatbox-ellipses-outline"
+                size={28}
+                color={color}
+              />
+            );
+          },
         }}
       />
       <Tabs.Screen

app/(tabs)/docent.tsx

@@ -1,13 +1,17 @@
+import { StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
 import EmptyTour from "@/components/docent/emptyTour/EmptyTour";
 import OnTour from "@/components/docent/onTour/OnTour";
 
-import { useRouteStore } from "@/store/useRouteStore";
+import { useRouteStore } from "@/store/route/useRouteStore";
 
 export default function Docent() {
   const { routeItems } = useRouteStore();
 
-  if (routeItems === undefined) {
-    return <EmptyTour />;
-  }
-  return <OnTour />;
+  return (
+    <SafeAreaView style={[StyleSheet.absoluteFill]}>
+      {routeItems === undefined ? <EmptyTour /> : <OnTour />}
+    </SafeAreaView>
+  );
 }