detail page wip

src/pages/PostDetailPage.tsx

@@ -1,5 +1,5 @@
 import { type PostId, likePostMutation, postQuery } from "@/api/posts";
-import { CommentIcon, LikeIcon } from "@/icons";
+import { ArrowIcon, CommentIcon, LikeIcon } from "@/icons";
 import {
   bg,
   colors,
@@ -15,29 +15,61 @@ import {
 import { stackRoute } from "@/utils/navigation";
 import { useMutationWithQuery } from "@/utils/query/mutation";
 import { withSuspense } from "@/utils/withSuspense";
-import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
 import {
   type StaticScreenProps,
   useNavigation,
 } from "@react-navigation/native";
+import {
+  GestureHandlerRefContext,
+  TransitionPresets,
+} from "@react-navigation/stack";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { selectionAsync } from "expo-haptics";
 import { Image, useImage } from "expo-image";
+import { useCallback, useContext, useRef, useState } from "react";
 import {
-  ScrollView,
+  Dimensions,
   type StyleProp,
   Text,
   TouchableOpacity,
   TouchableWithoutFeedback,
   View,
   type ViewStyle,
 } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
 
 const TOP_AREA = 190;
 
 export const postDetailRoute = stackRoute({
   screen: withSuspense(PostDetailPage, { fallback: <Text>loading</Text> }),
-  options: { title: "작품" },
+  options: {
+    headerBackImage: () => (
+      <View
+        style={[
+          flex.center(),
+          padding.y(6),
+          padding.right(7),
+          padding.left(5),
+          bg("#ffffffaa"),
+          round.full,
+        ]}
+      >
+        <ArrowIcon.Left size={24} />
+      </View>
+    ),
+    headerTransparent: true,
+    headerTitle: "",
+    gestureResponseDistance: Dimensions.get("screen").height,
+    // gestureEnabled: false,
+    // cardStyle: [
+    //   {
+    //     borderTopRightRadius: 36,
+    //     borderTopLeftRadius: 36,
+    //   },
+    // ],
+    // presentation: "transparentModal",
+    ...TransitionPresets.ModalSlideFromBottomIOS,
+  },
 });
 
 function PostDetailPage({
@@ -47,6 +79,21 @@ function PostDetailPage({
 }: StaticScreenProps<{
   id: PostId;
 }>) {
+  const [atTop, setAtTop] = useState(false);
+  const panRef = useContext(GestureHandlerRefContext);
+
+  const scrollRef = useRef(0);
+
+  const onScroll = useCallback(() => {
+    // const atTop = nativeEvent.contentOffset.y <= 0;
+
+    setAtTop(scrollRef.current <= 0);
+
+    // if (panRef?.current) {
+    //   panRef.current.setNativeProps({ enabled: atTop });
+    // }
+  }, []);
+
   const navigation = useNavigation();
 
   const { data: post } = useSuspenseQuery(postQuery(postId));
@@ -56,10 +103,31 @@ function PostDetailPage({
   return (
     <>
       <ScrollView
+        bounces={!atTop}
+        simultaneousHandlers={atTop ? panRef : undefined}
+        // waitFor={atTop ? panRef : undefined}
+        // waitFor={panRef}
+        onScroll={({ nativeEvent }) => {
+          scrollRef.current = nativeEvent.contentOffset.y;
+        }}
+        onMomentumScrollEnd={onScroll}
+        // refreshControl={
+        //   <RefreshControl
+        //     tintColor="transparent"
+        //     refreshing={false}
+        //     onRefresh={navigation.goBack}
+        //   />
+        // }
         contentContainerStyle={[
           flex.y({ gap: 4 }),
           { paddingBottom: 190 },
-          bg(colors.gray200),
+          bg(colors.white),
+          //
+          {
+            borderTopRightRadius: 36,
+            borderTopLeftRadius: 36,
+            overflow: "hidden",
+          },
         ]}
       >
         {post.imageUrls.map((imageUrl, ilikedndex) => (
@@ -74,17 +142,8 @@ function PostDetailPage({
             />
           </TouchableWithoutFeedback>
         ))}
-      </ScrollView>
-      <BottomSheet
-        snapPoints={[TOP_AREA, "92%"]}
-        handleIndicatorStyle={[bg(colors.gray300)]}
-        backgroundStyle={[
-          {
-            borderRadius: 24,
-          },
-        ]}
-      >
-        <BottomSheetView style={[flexFill, padding.top(8), padding.x(24)]}>
+
+        <View style={[flexFill, padding.top(20), padding.x(24)]}>
           <View style={[flex.y({ gap: 16 }), h(TOP_AREA - 32)]}>
             <View style={[flex.x({ align: "center", gap: 8 })]}>
               <Image style={[size(24), round.full, bg(colors.gray300)]} />
@@ -176,8 +235,8 @@ function PostDetailPage({
               <Text style={[text.h5, text.color(colors.gray800)]}>#심플한</Text>
             </View>
           </View>
-        </BottomSheetView>
-      </BottomSheet>
+        </View>
+      </ScrollView>
     </>
   );
 }